From 1fd0c8168f1870efe2338ef491c1cf0be105f3e7 Mon Sep 17 00:00:00 2001
From: Vincent <vincent@loki.network>
Date: Tue, 31 Mar 2020 14:30:53 +1100
Subject: [PATCH] Memberlist modal strict styling

---
 stylesheets/_mentions.scss                    |  4 +---
 stylesheets/_session.scss                     | 19 ++++++++++++++++---
 ts/components/DevicePairingDialog.tsx         |  6 +++---
 .../conversation/UpdateGroupMembersDialog.tsx | 15 +++++++++++++--
 ts/components/session/SessionConfirm.tsx      |  4 ++--
 .../session/SessionGroupSettings.tsx          |  2 +-
 ts/components/session/SessionQRModal.tsx      |  2 +-
 ts/components/session/SessionSeedModal.tsx    |  2 +-
 8 files changed, 38 insertions(+), 16 deletions(-)

diff --git a/stylesheets/_mentions.scss b/stylesheets/_mentions.scss
index 104164dea..eded63c8b 100644
--- a/stylesheets/_mentions.scss
+++ b/stylesheets/_mentions.scss
@@ -82,7 +82,7 @@
 
   .error-faded {
     opacity: 0;
-    margin-top: -20px;
+    margin-top: -5px;
     transition: all 100ms linear;
   }
 
@@ -96,8 +96,6 @@
   max-height: 240px;
   overflow-y: auto;
   margin: 4px;
-  border-top: 1px solid #2f2f2f;
-  border-bottom: 1px solid #2f2f2f;
 
   .check-mark {
     float: right;
diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss
index 0f973477c..f17490060 100644
--- a/stylesheets/_session.scss
+++ b/stylesheets/_session.scss
@@ -140,11 +140,11 @@ div.spacer-lg {
   transition: filter 0.1s;
 }
 
-.text-subtle {
+.subtle {
   opacity: 0.6;
 }
 
-.text-soft {
+.soft {
   opacity: 0.4;
 }
 
@@ -848,6 +848,12 @@ label {
   .friend-selection-list {
     width: unset;
   }
+
+  .create-group-dialog__member-count {
+    text-align: center;
+    margin-top: -25px;
+    opacity: 0.6;
+  }
 }
 
 .session-confirm {
@@ -1845,6 +1851,13 @@ input {
   justify-content: space-between;
   transition: $session-transition-duration;
 
+  &:first-child {
+    border-top: 1px solid rgba($session-shade-8, 0.6);
+  }
+  &:last-child {
+    border-bottom: 1px solid rgba($session-shade-8, 0.6);
+  }
+
   &.selected {
     background-color: $session-shade-4;
   }
@@ -1874,7 +1887,7 @@ input {
   }
 
   &__avatar > div {
-    margin-bottom: 0;
+    margin-bottom: 0px !important;
   }
 }
 
diff --git a/ts/components/DevicePairingDialog.tsx b/ts/components/DevicePairingDialog.tsx
index 1cbb71131..c19640f86 100644
--- a/ts/components/DevicePairingDialog.tsx
+++ b/ts/components/DevicePairingDialog.tsx
@@ -120,7 +120,7 @@ export class DevicePairingDialog extends React.Component<Props, State> {
 
           <div className="device-pairing-dialog__secret-words">
             <label>{window.i18n('secretWords')}</label>
-            <div className="text-subtle">{secretWords}</div>
+            <div className="subtle">{secretWords}</div>
           </div>
 
           <div className="session-modal__button-group">
@@ -148,7 +148,7 @@ export class DevicePairingDialog extends React.Component<Props, State> {
         <div className="session-modal__centered">
           {this.renderErrors()}
           <h4>{window.i18n('waitingForDeviceToRegister')}</h4>
-          <small className="text-subtle">
+          <small className="subtle">
             {window.i18n('pairNewDevicePrompt')}
           </small>
           <div className="spacer-lg" />
@@ -199,7 +199,7 @@ export class DevicePairingDialog extends React.Component<Props, State> {
           <p className="session-modal__description">
             {window.i18n('confirmUnpairingTitle')}
             <br />
-            <span className="text-subtle">{description}</span>
+            <span className="subtle">{description}</span>
           </p>
           <div className="spacer-xs" />
           <div className="session-modal__button-group">
diff --git a/ts/components/conversation/UpdateGroupMembersDialog.tsx b/ts/components/conversation/UpdateGroupMembersDialog.tsx
index 6ce0f302b..98ef15e0e 100644
--- a/ts/components/conversation/UpdateGroupMembersDialog.tsx
+++ b/ts/components/conversation/UpdateGroupMembersDialog.tsx
@@ -93,7 +93,7 @@ export class UpdateGroupMembersDialog extends React.Component<Props, State> {
       noFriendsClasses = classNames('no-friends', 'hidden');
     } else {
       // private group
-      titleText = `${this.props.titleText} (Members: ${checkMarkedCount})`;
+      titleText = this.props.titleText;
       noFriendsClasses =
         this.state.friendList.length === 0
           ? 'no-friends'
@@ -114,6 +114,16 @@ export class UpdateGroupMembersDialog extends React.Component<Props, State> {
         onOk={() => null}
       >
         <div className="spacer-md" />
+
+        {!this.props.isPublic && (
+          <>
+            <small className="create-group-dialog__member-count">
+              {`${checkMarkedCount} members`}
+            </small>
+            <hr className="subtle"/>
+          </>
+        )}
+
         <p className={errorMessageClasses}>{errorMsg}</p>
         <div className="spacer-md" />
 
@@ -124,7 +134,8 @@ export class UpdateGroupMembersDialog extends React.Component<Props, State> {
           'noMembersInThisGroup'
         )})`}</p>
 
-        <div className="spacer-md" />
+        <div className="spacer-lg" />
+        
         <div className="session-modal__button-group">
           <SessionButton text={okText} onClick={this.onClickOK} />
 
diff --git a/ts/components/session/SessionConfirm.tsx b/ts/components/session/SessionConfirm.tsx
index 1e3595499..2b43cc543 100644
--- a/ts/components/session/SessionConfirm.tsx
+++ b/ts/components/session/SessionConfirm.tsx
@@ -48,7 +48,7 @@ export class SessionConfirm extends React.Component<Props> {
 
     const messageSubText = messageSub
       ? 'session-confirm-main-message'
-      : 'text-subtle';
+      : 'subtle';
 
     return (
       <SessionModal
@@ -63,7 +63,7 @@ export class SessionConfirm extends React.Component<Props> {
         <div className="session-modal__centered">
           <span className={messageSubText}>{message}</span>
           {messageSub && (
-            <span className="session-confirm-sub-message text-subtle">
+            <span className="session-confirm-sub-message subtle">
               {messageSub}
             </span>
           )}
diff --git a/ts/components/session/SessionGroupSettings.tsx b/ts/components/session/SessionGroupSettings.tsx
index 123f17d23..919cf0876 100644
--- a/ts/components/session/SessionGroupSettings.tsx
+++ b/ts/components/session/SessionGroupSettings.tsx
@@ -240,7 +240,7 @@ export class SessionGroupSettings extends React.Component<Props, any> {
         {showMemberCount && (
           <>
             <div className="spacer-lg" />
-            <div role="button" className="text-subtle">
+            <div role="button" className="subtle">
               {window.i18n('members', memberCount)}
             </div>
             <div className="spacer-lg" />
diff --git a/ts/components/session/SessionQRModal.tsx b/ts/components/session/SessionQRModal.tsx
index 97f613c8d..dc71ee4cd 100644
--- a/ts/components/session/SessionQRModal.tsx
+++ b/ts/components/session/SessionQRModal.tsx
@@ -29,7 +29,7 @@ export class SessionQRModal extends React.Component<Props> {
       >
         <div className="spacer-sm" />
 
-        <div className="qr-dialog__description text-subtle">
+        <div className="qr-dialog__description subtle">
           <SessionHtmlRenderer html={window.i18n('QRCodeDescription')} />
         </div>
         <div className="spacer-lg" />
diff --git a/ts/components/session/SessionSeedModal.tsx b/ts/components/session/SessionSeedModal.tsx
index e9d461bd9..ed5fdb242 100644
--- a/ts/components/session/SessionSeedModal.tsx
+++ b/ts/components/session/SessionSeedModal.tsx
@@ -121,7 +121,7 @@ export class SessionSeedModal extends React.Component<Props, State> {
           <p className="session-modal__description">
             {i18n('seedSavePromptMain')}
             <br />
-            <span className="text-subtle">{i18n('seedSavePromptAlt')}</span>
+            <span className="subtle">{i18n('seedSavePromptAlt')}</span>
           </p>
           <div className="spacer-xs" />