From 46571819935023698ded1b634325f6453ec446d3 Mon Sep 17 00:00:00 2001 From: William Grant Date: Mon, 17 Oct 2022 12:28:24 +1100 Subject: [PATCH] fix: qa feedback - updated input box styling and tweaked modals --- stylesheets/_modal.scss | 9 ++- stylesheets/_session.scss | 10 ++-- stylesheets/_session_group_panel.scss | 20 ------- ts/components/SessionHeaderSearchInput.tsx | 1 + .../conversation/SessionRightPanel.tsx | 36 +++++++++--- .../dialog/AdminLeaveClosedGroupDialog.tsx | 8 ++- ts/components/dialog/InviteContactsDialog.tsx | 1 + .../dialog/ModeratorsRemoveDialog.tsx | 1 + .../dialog/OnionStatusPathDialog.tsx | 1 + ts/components/dialog/SessionSeedModal.tsx | 56 ++++++++++++++----- ts/themes/classicDark.ts | 2 +- ts/themes/classicLight.ts | 2 +- ts/themes/oceanDark.ts | 2 +- ts/themes/oceanLight.ts | 2 +- 14 files changed, 99 insertions(+), 52 deletions(-) diff --git a/stylesheets/_modal.scss b/stylesheets/_modal.scss index b4893d7f6..e08e8d835 100644 --- a/stylesheets/_modal.scss +++ b/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; diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss index 6e3985eef..91720b9ab 100644 --- a/stylesheets/_session.scss +++ b/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; } } diff --git a/stylesheets/_session_group_panel.scss b/stylesheets/_session_group_panel.scss index da84c0c0e..f2e4e3010 100644 --- a/stylesheets/_session_group_panel.scss +++ b/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; diff --git a/ts/components/SessionHeaderSearchInput.tsx b/ts/components/SessionHeaderSearchInput.tsx index 755643fbf..9fbbd2ade 100644 --- a/ts/components/SessionHeaderSearchInput.tsx +++ b/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); diff --git a/ts/components/conversation/SessionRightPanel.tsx b/ts/components/conversation/SessionRightPanel.tsx index cb0849def..7a836dbb7 100644 --- a/ts/components/conversation/SessionRightPanel.tsx +++ b/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 && ( -
{ @@ -275,11 +295,11 @@ export const SessionRightPanelWithDetails = () => { }} > {isPublic ? window.i18n('editGroup') : window.i18n('editGroupName')} -
+ )} {showAddRemoveModeratorsButton && ( <> -
{ @@ -287,8 +307,8 @@ export const SessionRightPanelWithDetails = () => { }} > {window.i18n('addModerators')} -
-
+ { @@ -296,12 +316,12 @@ export const SessionRightPanelWithDetails = () => { }} > {window.i18n('removeModerators')} -
+ )} {showUpdateGroupMembersButton && ( -
{ @@ -309,7 +329,7 @@ export const SessionRightPanelWithDetails = () => { }} > {window.i18n('groupMembers')} -
+ )} {hasDisappearingMessages && ( diff --git a/ts/components/dialog/AdminLeaveClosedGroupDialog.tsx b/ts/components/dialog/AdminLeaveClosedGroupDialog.tsx index 56935f430..abb95aeda 100644 --- a/ts/components/dialog/AdminLeaveClosedGroupDialog.tsx +++ b/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 ( -

{warningAsAdmin}

+ {warningAsAdmin}
{ isSelected={selectedContacts.includes(member)} onSelect={addTo} onUnselect={removeFrom} + disableBg={true} /> )) ) : ( diff --git a/ts/components/dialog/ModeratorsRemoveDialog.tsx b/ts/components/dialog/ModeratorsRemoveDialog.tsx index 4dedd4fc6..61a82c50a 100644 --- a/ts/components/dialog/ModeratorsRemoveDialog.tsx +++ b/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} /> ))}
diff --git a/ts/components/dialog/OnionStatusPathDialog.tsx b/ts/components/dialog/OnionStatusPathDialog.tsx index ecdf1e69e..519027bec 100644 --- a/ts/components/dialog/OnionStatusPathDialog.tsx +++ b/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` diff --git a/ts/components/dialog/SessionSeedModal.tsx b/ts/components/dialog/SessionSeedModal.tsx index b571d49ed..fb8cd6758 100644 --- a/ts/components/dialog/SessionSeedModal.tsx +++ b/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 ( <>
-

+

{i18n('recoveryPhraseSavePromptMain')}

- + {recoveryPhrase} - +
-
+ -
-
+ +
{ ); }; +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} > - - - {hasPassword && !passwordValid ? ( - - ) : ( - - )} + + + + {hasPassword && !passwordValid ? ( + + ) : ( + + )} + )} diff --git a/ts/themes/classicDark.ts b/ts/themes/classicDark.ts index f3dcefa35..f04171d44 100644 --- a/ts/themes/classicDark.ts +++ b/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)', diff --git a/ts/themes/classicLight.ts b/ts/themes/classicLight.ts index ebe61bdfe..69772a3a4 100644 --- a/ts/themes/classicLight.ts +++ b/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)', diff --git a/ts/themes/oceanDark.ts b/ts/themes/oceanDark.ts index 6e23625ca..2de8563e6 100644 --- a/ts/themes/oceanDark.ts +++ b/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)', diff --git a/ts/themes/oceanLight.ts b/ts/themes/oceanLight.ts index 854f78fcb..fd2e30f6e 100644 --- a/ts/themes/oceanLight.ts +++ b/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)',