fix: qa feedback - updated input box styling and tweaked modals

stylesheets/_modal.scss

@@ -34,6 +34,14 @@
 
   &__input-group {
     min-width: 300px;
+
+    input {
+      margin-bottom: var(--margins-md);
+    }
+
+    input:last-child {
+      margin-bottom: 0px;
+    }
   }
 }
 
@@ -106,7 +114,6 @@
 
   input {
     padding: 8px;
-    margin-bottom: 15px;
     border: 0;
     outline: none;
     border-radius: 4px;

stylesheets/_session.scss

@@ -223,11 +223,11 @@ label {
 
     padding: var(--margins-lg);
 
-    font-family: $session-font-default;
+    font-family: var(--font-default);
     text-align: center;
     line-height: 18px;
-    font-size: $session-font-md;
-    font-weight: 700;
+    font-size: var(--font-size-lg);
+    font-weight: 500;
 
     &.reverse {
       flex-direction: row-reverse;
@@ -275,7 +275,7 @@ label {
 
     .session-id-editable {
       width: 30vw;
-      max-width: 700px;
+      max-width: 400px;
     }
   }
 
@@ -298,6 +298,7 @@ label {
 
     .session-button {
       margin: var(--margins-xs);
+      font-weight: 500;
     }
 
     &__center {
@@ -329,7 +330,6 @@ label {
 .session-confirm {
   &-wrapper {
     .session-modal__body .session-modal__centered {
-      margin: var(--margins-lg);
       text-align: center;
     }
   }

stylesheets/_session_group_panel.scss

@@ -33,26 +33,6 @@
     display: none;
   }
 
-  &-item {
-    display: flex;
-    align-items: center;
-    min-height: 3rem;
-    font-size: 0.8rem;
-    color: var(--right-panel-item-text-color);
-    background-color: var(--right-panel-item-background-color);
-    border-top: 1px solid var(--border-color);
-    border-bottom: 1px solid var(--border-color);
-
-    width: -webkit-fill-available;
-    padding: 0 var(--margins-md);
-    transition: var(--default-duration);
-    cursor: pointer;
-
-    &:hover {
-      background-color: var(--right-panel-item-background-hover-color);
-    }
-  }
-
   // no double border (top and bottom) between two elements
   &-item + &-item {
     border-top: none;

ts/components/SessionHeaderSearchInput.tsx

@@ -7,6 +7,7 @@ export const SessionHeaderSearchInput = styled.input<{ darkMode: boolean }>`
   padding: 0 26px 0 30px;
   margin-inline-start: 8px;
   margin-inline-end: 8px;
+  margin-bottom: 15px;
   outline: 0;
   height: 32px;
   width: calc(100% - 16px);

ts/components/conversation/SessionRightPanel.tsx

@@ -161,6 +161,26 @@ const StyledLeaveButton = styled.div`
   }
 `;
 
+const StyledGroupSettingsItem = styled.div`
+  display: flex;
+  align-items: center;
+  min-height: 3rem;
+  font-size: var(--font-size-md);
+  color: var(--right-panel-item-text-color);
+  background-color: var(--right-panel-item-background-color);
+  border-top: 1px solid var(--border-color);
+  border-bottom: 1px solid var(--border-color);
+
+  width: -webkit-fill-available;
+  padding: 0 var(--margins-md);
+  transition: var(--default-duration);
+  cursor: pointer;
+
+  &:hover {
+    background-color: var(--right-panel-item-background-hover-color);
+  }
+`;
+
 // tslint:disable: cyclomatic-complexity
 // tslint:disable: max-func-body-length
 export const SessionRightPanelWithDetails = () => {
@@ -267,7 +287,7 @@ export const SessionRightPanelWithDetails = () => {
         </>
       )}
       {showUpdateGroupNameButton && (
-        <div
+        <StyledGroupSettingsItem
           className="group-settings-item"
           role="button"
           onClick={async () => {
@@ -275,11 +295,11 @@ export const SessionRightPanelWithDetails = () => {
           }}
         >
           {isPublic ? window.i18n('editGroup') : window.i18n('editGroupName')}
-        </div>
+        </StyledGroupSettingsItem>
       )}
       {showAddRemoveModeratorsButton && (
         <>
-          <div
+          <StyledGroupSettingsItem
             className="group-settings-item"
             role="button"
             onClick={() => {
@@ -287,8 +307,8 @@ export const SessionRightPanelWithDetails = () => {
             }}
           >
             {window.i18n('addModerators')}
-          </div>
-          <div
+          </StyledGroupSettingsItem>
+          <StyledGroupSettingsItem
             className="group-settings-item"
             role="button"
             onClick={() => {
@@ -296,12 +316,12 @@ export const SessionRightPanelWithDetails = () => {
             }}
           >
             {window.i18n('removeModerators')}
-          </div>
+          </StyledGroupSettingsItem>
         </>
       )}
 
       {showUpdateGroupMembersButton && (
-        <div
+        <StyledGroupSettingsItem
           className="group-settings-item"
           role="button"
           onClick={async () => {
@@ -309,7 +329,7 @@ export const SessionRightPanelWithDetails = () => {
           }}
         >
           {window.i18n('groupMembers')}
-        </div>
+        </StyledGroupSettingsItem>
       )}
 
       {hasDisappearingMessages && (

ts/components/dialog/AdminLeaveClosedGroupDialog.tsx

@@ -4,11 +4,17 @@ import { getConversationController } from '../../session/conversations';
 import { adminLeaveClosedGroup } from '../../state/ducks/modalDialog';
 import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton';
 import { SessionWrapperModal } from '../SessionWrapperModal';
+import styled from 'styled-components';
 
 type Props = {
   conversationId: string;
 };
 
+const StyledWarning = styled.p`
+  max-width: 500px;
+  line-height: 1.3333;
+`;
+
 export const AdminLeaveClosedGroupDialog = (props: Props) => {
   const convo = getConversationController().get(props.conversationId);
   const titleText = `${window.i18n('leaveGroup')} ${convo.getRealSessionUsername()}`;
@@ -34,7 +40,7 @@ export const AdminLeaveClosedGroupDialog = (props: Props) => {
   return (
     <SessionWrapperModal title={titleText} onClose={closeDialog}>
       <SpacerLG />
-      <p>{warningAsAdmin}</p>
+      <StyledWarning>{warningAsAdmin}</StyledWarning>
 
       <div className="session-modal__button-group">
         <SessionButton

ts/components/dialog/InviteContactsDialog.tsx

@@ -164,6 +164,7 @@ const InviteContactsDialogInner = (props: Props) => {
               isSelected={selectedContacts.includes(member)}
               onSelect={addTo}
               onUnselect={removeFrom}
+              disableBg={true}
             />
           ))
         ) : (

ts/components/dialog/ModeratorsRemoveDialog.tsx

@@ -96,6 +96,7 @@ export const RemoveModeratorsDialog = (props: Props) => {
                   const updatedList = modsToRemove.filter(m => m !== selectedMember);
                   setModsToRemove(updatedList);
                 }}
+                disableBg={true}
               />
             ))}
           </div>

ts/components/dialog/OnionStatusPathDialog.tsx

@@ -45,6 +45,7 @@ const StyledOnionNodeList = styled.div`
 const StyledOnionDescription = styled.p`
   min-width: 400px;
   width: 0;
+  line-height: 1.3333;
 `;
 
 const StyledVerticalLine = styled.div`

ts/components/dialog/SessionSeedModal.tsx

@@ -11,6 +11,7 @@ import { useDispatch } from 'react-redux';
 import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton';
 import { SessionWrapperModal } from '../SessionWrapperModal';
 import { getCurrentRecoveryPhrase } from '../../util/storage';
+import styled from 'styled-components';
 
 interface PasswordProps {
   setPasswordValid: (val: boolean) => any;
@@ -93,6 +94,15 @@ interface SeedProps {
   onClickCopy?: () => any;
 }
 
+const StyledRecoveryPhrase = styled.i`
+  margin-bottom: var(--margins-md);
+`;
+
+const StyledQRImage = styled.div`
+  width: fit-content;
+  margin: 0 auto;
+`;
+
 const Seed = (props: SeedProps) => {
   const { recoveryPhrase, onClickCopy } = props;
   const i18n = window.i18n;
@@ -114,18 +124,32 @@ const Seed = (props: SeedProps) => {
   return (
     <>
       <div className="session-modal__centered text-center">
-        <p className="session-modal__description" style={{ marginTop: '0px' }}>
+        <p
+          className="session-modal__description"
+          style={{
+            lineHeight: '1.3333',
+            marginTop: '0px',
+            marginBottom: 'var(--margins-md)',
+            maxWidth: '600px',
+          }}
+        >
           {i18n('recoveryPhraseSavePromptMain')}
         </p>
 
-        <i data-testid="recovery-phrase-seed-modal" className="session-modal__text-highlight">
+        <StyledRecoveryPhrase
+          data-testid="recovery-phrase-seed-modal"
+          className="session-modal__text-highlight"
+        >
           {recoveryPhrase}
-        </i>
+        </StyledRecoveryPhrase>
       </div>
-      <div className="qr-image">
+      <StyledQRImage className="qr-image">
         <QRCode value={hexEncodedSeed} bgColor={bgColor} fgColor={fgColor} level="L" />
-      </div>
-      <div className="session-modal__button-group">
+      </StyledQRImage>
+      <div
+        className="session-modal__button-group"
+        style={{ justifyContent: 'center', width: '100%' }}
+      >
         <SessionButton
           text={i18n('editMenuCopy')}
           buttonType={SessionButtonType.Simple}
@@ -138,6 +162,10 @@ const Seed = (props: SeedProps) => {
   );
 };
 
+const StyledSeedModalContainer = styled.div`
+  margin: var(--margins-md) var(--margins-sm);
+`;
+
 interface ModalInnerProps {
   onClickOk?: () => any;
 }
@@ -192,13 +220,15 @@ const SessionSeedModalInner = (props: ModalInnerProps) => {
           onClose={onClose}
           showExitIcon={true}
         >
-          <SpacerSM />
-
-          {hasPassword && !passwordValid ? (
-            <Password passwordHash={passwordHash} setPasswordValid={setPasswordValid} />
-          ) : (
-            <Seed recoveryPhrase={recoveryPhrase} onClickCopy={onClickOk} />
-          )}
+          <StyledSeedModalContainer>
+            <SpacerSM />
+
+            {hasPassword && !passwordValid ? (
+              <Password passwordHash={passwordHash} setPasswordValid={setPasswordValid} />
+            ) : (
+              <Seed recoveryPhrase={recoveryPhrase} onClickCopy={onClickOk} />
+            )}
+          </StyledSeedModalContainer>
         </SessionWrapperModal>
       )}
     </>

ts/themes/classicDark.ts

@@ -134,7 +134,7 @@ export const classicDark: ThemeColorVariables = {
   '--suggestions-text-color': 'var(--text-primary-color)',
   '--suggestions-shadow': `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.24) 0px 3px 8px`,
 
-  '--input-background-color': 'var(--background-secondary-color)',
+  '--input-background-color': 'var(--transparent-color)',
   '--input-background-hover-color': 'var(--background-primary-color)',
   '--input-text-placeholder-color': 'var(--text-secondary-color)',
   '--input-text-color': 'var(--text-primary-color)',

ts/themes/classicLight.ts

@@ -134,7 +134,7 @@ export const classicLight: ThemeColorVariables = {
   '--suggestions-text-color': 'var(--text-primary-color)',
   '--suggestions-shadow': `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.24) 0px 3px 8px`,
 
-  '--input-background-color': 'var(--background-secondary-color)',
+  '--input-background-color': 'var(--transparent-color)',
   '--input-background-hover-color': 'var(--background-secondary-color)',
   '--input-text-placeholder-color': 'var(--text-secondary-color)',
   '--input-text-color': 'var(--text-primary-color)',

ts/themes/oceanDark.ts

@@ -135,7 +135,7 @@ export const oceanDark: ThemeColorVariables = {
   '--suggestions-text-color': 'var(--text-primary-color)',
   '--suggestions-shadow': `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.24) 0px 3px 8px`,
 
-  '--input-background-color': THEMES.OCEAN_DARK.COLOR3,
+  '--input-background-color': 'var(--transparent-color)',
   '--input-background-hover-color': 'var(--background-secondary-color)',
   '--input-text-placeholder-color': 'var(--text-secondary-color)',
   '--input-text-color': 'var(--text-primary-color)',

ts/themes/oceanLight.ts

@@ -135,7 +135,7 @@ export const oceanLight: ThemeColorVariables = {
   '--suggestions-text-color': 'var(--text-primary-color)',
   '--suggestions-shadow': `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.24) 0px 3px 8px`,
 
-  '--input-background-color': THEMES.OCEAN_LIGHT.COLOR5,
+  '--input-background-color': 'var(--transparent-color)',
   '--input-background-hover-color': 'var(--background-secondary-color)',
   '--input-text-placeholder-color': 'var(--text-secondary-color)',
   '--input-text-color': 'var(--text-primary-color)',