From 446b3bdb4da448ea00a8b256121d15eff012dc1a Mon Sep 17 00:00:00 2001 From: William Grant Date: Fri, 14 Oct 2022 16:27:42 +1100 Subject: [PATCH 01/19] fix: qa feedback - setting or changing passwords shouldn't show a blank screen --- ts/components/settings/SessionSettings.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/ts/components/settings/SessionSettings.tsx b/ts/components/settings/SessionSettings.tsx index 57569f5f3..31b967581 100644 --- a/ts/components/settings/SessionSettings.tsx +++ b/ts/components/settings/SessionSettings.tsx @@ -15,6 +15,7 @@ import { SettingsCategoryHelp } from './section/CategoryHelp'; import styled from 'styled-components'; import { sessionPassword } from '../../state/ducks/modalDialog'; import { PasswordAction } from '../dialog/SessionPasswordDialog'; +import { SectionType, showLeftPaneSection } from '../../state/ducks/section'; export function displayPasswordModal( passwordAction: PasswordAction, @@ -229,6 +230,7 @@ export class SessionSettingsView extends React.Component Date: Fri, 14 Oct 2022 16:27:42 +1100 Subject: [PATCH 02/19] fix: qa feedback - fix loading spinners showing above the conversation options pane --- stylesheets/_session_conversation.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/stylesheets/_session_conversation.scss b/stylesheets/_session_conversation.scss index 8ea9fe010..d31334601 100644 --- a/stylesheets/_session_conversation.scss +++ b/stylesheets/_session_conversation.scss @@ -35,7 +35,7 @@ &.show { transform: none; transition: transform 0.3s ease-in-out; - z-index: 2; + z-index: 3; } } From b566cb6685213f4f2508ba65d9b726eaa4a96d00 Mon Sep 17 00:00:00 2001 From: William Grant Date: Mon, 17 Oct 2022 09:37:15 +1100 Subject: [PATCH 03/19] fix: qa feedback - improve text-highlight text color for seed modal --- stylesheets/_session.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss index 4da5001b7..6e3985eef 100644 --- a/stylesheets/_session.scss +++ b/stylesheets/_session.scss @@ -313,7 +313,7 @@ label { &__text-highlight { @include text-highlight(var(--primary-color)); - color: var(--modal-text-color); + color: var(--black-color); font-family: monospace; font-style: normal; From be238e2332614a59dac9ca127fd4cf81c73e231f Mon Sep 17 00:00:00 2001 From: William Grant Date: Mon, 17 Oct 2022 09:57:20 +1100 Subject: [PATCH 04/19] fix: qa feedback - notification preview works on first click --- ts/util/notifications.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ts/util/notifications.ts b/ts/util/notifications.ts index dfed584d4..ae5632581 100644 --- a/ts/util/notifications.ts +++ b/ts/util/notifications.ts @@ -131,7 +131,7 @@ function update(forceRefresh = false) { isAppFocused: forceRefresh ? false : isAppFocused, isAudioNotificationEnabled, isAudioNotificationSupported: audioNotificationSupported, - isEnabled, + isEnabled: forceRefresh ? true : isEnabled, numNotifications, userSetting, }); From c44a4abbcecaf691954c0d54b5eec0409352a140 Mon Sep 17 00:00:00 2001 From: William Grant Date: Mon, 17 Oct 2022 10:25:58 +1100 Subject: [PATCH 05/19] fix: qa feedback - conversation title no longer overflows in search results --- ts/components/search/MessageSearchResults.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/ts/components/search/MessageSearchResults.tsx b/ts/components/search/MessageSearchResults.tsx index f36396358..28f2740ce 100644 --- a/ts/components/search/MessageSearchResults.tsx +++ b/ts/components/search/MessageSearchResults.tsx @@ -22,6 +22,8 @@ const StyledConversationTitleResults = styled.div` white-space: nowrap; text-overflow: ellipsis; color: var(--conversation-tab-text-color); + /* We don't want this to overflow horziontally past the timestamp */ + width: 90px; `; const StyledConversationFromUserInGroup = styled(StyledConversationTitleResults)` @@ -33,7 +35,7 @@ const StyledConversationFromUserInGroup = styled(StyledConversationTitleResults) color: var(--conversation-tab-text-color); `; -const StyledSearchResulsts = styled.div` +const StyledSearchResults = styled.div` padding: 8px; padding-inline-start: 16px; padding-inline-end: 16px; @@ -206,7 +208,7 @@ export const MessageSearchResult = (props: MessageResultProps) => { // tslint:disable: use-simple-attributes return ( - { @@ -233,6 +235,6 @@ export const MessageSearchResult = (props: MessageResultProps) => { - + ); }; From 9f3293d1fc32a10377f8042e8b84f7a8e0bb840a Mon Sep 17 00:00:00 2001 From: William Grant Date: Mon, 17 Oct 2022 10:42:50 +1100 Subject: [PATCH 06/19] fix: qa feedback - fixed call UI center label text color and removed text-shadow --- ts/components/calling/InConversationCallContainer.tsx | 1 - ts/themes/classicDark.ts | 3 +-- ts/themes/classicLight.ts | 3 +-- ts/themes/oceanDark.ts | 3 +-- ts/themes/oceanLight.ts | 3 +-- ts/themes/variableColors.tsx | 1 - 6 files changed, 4 insertions(+), 10 deletions(-) diff --git a/ts/components/calling/InConversationCallContainer.tsx b/ts/components/calling/InConversationCallContainer.tsx index 9134af6aa..bd5cdf630 100644 --- a/ts/components/calling/InConversationCallContainer.tsx +++ b/ts/components/calling/InConversationCallContainer.tsx @@ -69,7 +69,6 @@ const StyledCenteredLabel = styled.div` height: min-content; white-space: nowrap; color: var(--in-call-container-text-color); - text-shadow: var(--in-call-container-text-shadow); z-index: 5; `; diff --git a/ts/themes/classicDark.ts b/ts/themes/classicDark.ts index 75fc350a9..f3dcefa35 100644 --- a/ts/themes/classicDark.ts +++ b/ts/themes/classicDark.ts @@ -141,8 +141,7 @@ export const classicDark: ThemeColorVariables = { '--input-border-color': 'var(--border-color)', '--in-call-container-background-color': 'var(--background-primary-color)', - '--in-call-container-text-color': 'var(--white-color)', - '--in-call-container-text-shadow': '0px 0px 8px var(--text-primary-color)', + '--in-call-container-text-color': 'var(--text-primary-color)', '--call-buttons-background-color': THEMES.CLASSIC_DARK.COLOR3, '--call-buttons-background-hover-color': THEMES.CLASSIC_DARK.COLOR4, diff --git a/ts/themes/classicLight.ts b/ts/themes/classicLight.ts index 62c86df91..ebe61bdfe 100644 --- a/ts/themes/classicLight.ts +++ b/ts/themes/classicLight.ts @@ -141,8 +141,7 @@ export const classicLight: ThemeColorVariables = { '--input-border-color': 'var(--border-color)', '--in-call-container-background-color': 'var(--background-primary-color)', - '--in-call-container-text-color': 'var(--white-color)', - '--in-call-container-text-shadow': '0px 0px 8px var(--text-primary-color)', + '--in-call-container-text-color': 'var(--text-primary-color)', '--call-buttons-background-color': THEMES.CLASSIC_LIGHT.COLOR3, '--call-buttons-background-hover-color': THEMES.CLASSIC_LIGHT.COLOR4, diff --git a/ts/themes/oceanDark.ts b/ts/themes/oceanDark.ts index d61609df4..6e23625ca 100644 --- a/ts/themes/oceanDark.ts +++ b/ts/themes/oceanDark.ts @@ -142,8 +142,7 @@ export const oceanDark: ThemeColorVariables = { '--input-border-color': 'var(--border-color)', '--in-call-container-background-color': 'var(--background-primary-color)', - '--in-call-container-text-color': 'var(--white-color)', - '--in-call-container-text-shadow': '0px 0px 8px var(--text-primary-color)', + '--in-call-container-text-color': 'var(--text-primary-color)', '--call-buttons-background-color': THEMES.OCEAN_DARK.COLOR4, '--call-buttons-background-hover-color': THEMES.OCEAN_DARK.COLOR4, diff --git a/ts/themes/oceanLight.ts b/ts/themes/oceanLight.ts index 255e92349..854f78fcb 100644 --- a/ts/themes/oceanLight.ts +++ b/ts/themes/oceanLight.ts @@ -142,8 +142,7 @@ export const oceanLight: ThemeColorVariables = { '--input-border-color': 'var(--border-color)', '--in-call-container-background-color': 'var(--background-primary-color)', - '--in-call-container-text-color': 'var(--white-color)', - '--in-call-container-text-shadow': '0px 0px 8px var(--text-primary-color)', + '--in-call-container-text-color': 'var(--text-primary-color)', '--call-buttons-background-color': THEMES.OCEAN_LIGHT.COLOR4, '--call-buttons-background-hover-color': THEMES.OCEAN_LIGHT.COLOR4, diff --git a/ts/themes/variableColors.tsx b/ts/themes/variableColors.tsx index 3a3622ac0..0d18afb29 100644 --- a/ts/themes/variableColors.tsx +++ b/ts/themes/variableColors.tsx @@ -177,7 +177,6 @@ export type ThemeColorVariables = { /* In Call Container */ '--in-call-container-background-color': string; '--in-call-container-text-color': string; - '--in-call-container-text-shadow': string; /* Call Buttons */ '--call-buttons-background-color': string; From 5c52b3ebc8049e2667ef1bd827d3502f065c4c11 Mon Sep 17 00:00:00 2001 From: William Grant Date: Mon, 17 Oct 2022 11:04:01 +1100 Subject: [PATCH 07/19] fix: qa feedback - moved unread notification count to the right and updated style to match mockup --- ts/components/icon/SessionNotificationCount.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/ts/components/icon/SessionNotificationCount.tsx b/ts/components/icon/SessionNotificationCount.tsx index d0ec15217..e71ba3854 100644 --- a/ts/components/icon/SessionNotificationCount.tsx +++ b/ts/components/icon/SessionNotificationCount.tsx @@ -7,18 +7,18 @@ type Props = { const StyledCountContainer = styled.div<{ shouldRender: boolean }>` position: absolute; - width: 20px; - height: 20px; - font-size: 20px; - top: var(--margins-lg); - left: var(--margins-sm); + width: 24px; + height: 12px; + font-size: 18px; + top: 27px; + right: 8px; padding: 3px; opacity: 1; display: flex; align-items: center; justify-content: center; font-family: var(--font-default); - border-radius: 50%; + border-radius: 58px; font-weight: 700; background: var(--unread-messages-alert-background-color); transition: var(--default-duration); From c6c487fe5dc1a2899a28dd2ac745eb2e02490c8c Mon Sep 17 00:00:00 2001 From: William Grant Date: Mon, 17 Oct 2022 11:08:42 +1100 Subject: [PATCH 08/19] fix: qa feedback - message mentions color is now black across all themes --- ts/components/conversation/AddMentions.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ts/components/conversation/AddMentions.tsx b/ts/components/conversation/AddMentions.tsx index da4fdd4b9..b9ba2e73e 100644 --- a/ts/components/conversation/AddMentions.tsx +++ b/ts/components/conversation/AddMentions.tsx @@ -20,7 +20,7 @@ const StyledMentionAnother = styled.span` const StyledMentionedUs = styled(StyledMentionAnother)` background-color: var(--primary-color); - color: var(--text-primary-color); + color: var(--black-color); border-radius: 5px; `; From 46571819935023698ded1b634325f6453ec446d3 Mon Sep 17 00:00:00 2001 From: William Grant Date: Mon, 17 Oct 2022 12:28:24 +1100 Subject: [PATCH 09/19] 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)', From 69d5e2ea41b2eedde99b46b4994cbc1448ac86dd Mon Sep 17 00:00:00 2001 From: William Grant Date: Mon, 17 Oct 2022 13:31:26 +1100 Subject: [PATCH 10/19] fix: qa feedback - updated recovery phrase password modal to match password modals --- ts/components/dialog/SessionSeedModal.tsx | 40 ++++++++++------------- 1 file changed, 18 insertions(+), 22 deletions(-) diff --git a/ts/components/dialog/SessionSeedModal.tsx b/ts/components/dialog/SessionSeedModal.tsx index fb8cd6758..8487bda6c 100644 --- a/ts/components/dialog/SessionSeedModal.tsx +++ b/ts/components/dialog/SessionSeedModal.tsx @@ -5,7 +5,7 @@ import { matchesHash } from '../../util/passwordUtils'; import { Data } from '../../data/data'; import { QRCode } from 'react-qr-svg'; import { mn_decode } from '../../session/crypto/mnemonic'; -import { SpacerLG, SpacerSM, SpacerXS } from '../basic/Text'; +import { SpacerSM } from '../basic/Text'; import { recoveryPhraseModal } from '../../state/ducks/modalDialog'; import { useDispatch } from 'react-redux'; import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton'; @@ -21,7 +21,6 @@ interface PasswordProps { const Password = (props: PasswordProps) => { const { setPasswordValid, passwordHash } = props; const i18n = window.i18n; - const [error, setError] = useState(''); const dispatch = useDispatch(); const onClose = () => dispatch(recoveryPhraseModal(null)); @@ -31,17 +30,17 @@ const Password = (props: PasswordProps) => { const isPasswordValid = matchesHash(passwordValue as string, passwordHash); if (!passwordValue) { - setError('noGivenPassword'); + ToastUtils.pushToastError('enterPasswordErrorToast', i18n('noGivenPassword')); + return false; } if (passwordHash && !isPasswordValid) { - setError('invalidPassword'); + ToastUtils.pushToastError('enterPasswordErrorToast', i18n('invalidPassword')); return false; } setPasswordValid(true); - setError(''); window.removeEventListener('keyup', onEnter); return true; @@ -55,26 +54,23 @@ const Password = (props: PasswordProps) => { return ( <> -

{i18n('showRecoveryPhrasePasswordRequest')}

- - - {error && ( - <> - -
{error}
- - )} +
+ +
- + -
+
From 2a0396d5221292c6346e632d4c3db8e3cd8c912f Mon Sep 17 00:00:00 2001 From: William Grant Date: Mon, 17 Oct 2022 13:44:29 +1100 Subject: [PATCH 11/19] fix: qa feedback - fixed background for group member list in create group overlay --- ts/components/dialog/UpdateGroupMembersDialog.tsx | 10 ++++++++-- .../leftpane/overlay/OverlayClosedGroup.tsx | 15 +++++++++++++-- 2 files changed, 21 insertions(+), 4 deletions(-) diff --git a/ts/components/dialog/UpdateGroupMembersDialog.tsx b/ts/components/dialog/UpdateGroupMembersDialog.tsx index e6ed6929a..56985d50d 100644 --- a/ts/components/dialog/UpdateGroupMembersDialog.tsx +++ b/ts/components/dialog/UpdateGroupMembersDialog.tsx @@ -15,11 +15,16 @@ import useKey from 'react-use/lib/useKey'; import { useSet } from '../../hooks/useSet'; import { getConversationController } from '../../session/conversations'; import { initiateClosedGroupUpdate } from '../../session/group/closed-group'; +import styled from 'styled-components'; type Props = { conversationId: string; }; +const StyledClassicMemberList = styled.div` + max-height: 240px; +`; + /** * Admins are always put first in the list of group members. * Also, admins have a little crown on their avatar. @@ -54,6 +59,7 @@ const ClassicMemberList = (props: { onUnselect={onUnselect} key={member} isAdmin={isAdmin} + disableBg={true} /> ); })} @@ -229,14 +235,14 @@ export const UpdateGroupMembersDialog = (props: Props) => { return ( -
+ -
+ {showNoMembersMessage &&

{window.i18n('noMembersInThisGroup')}

} diff --git a/ts/components/leftpane/overlay/OverlayClosedGroup.tsx b/ts/components/leftpane/overlay/OverlayClosedGroup.tsx index 282aad424..61492b53d 100644 --- a/ts/components/leftpane/overlay/OverlayClosedGroup.tsx +++ b/ts/components/leftpane/overlay/OverlayClosedGroup.tsx @@ -34,6 +34,16 @@ const StyledGroupMemberListContainer = styled.div` overflow-y: auto; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); + + &::-webkit-scrollbar-track { + background-color: var(--background-secondary-color); + } +`; + +const StyledGroupMemberList = styled.div` + button { + background-color: var(--background-secondary-color); + } `; const NoContacts = () => { @@ -119,7 +129,7 @@ export const OverlayClosedGroup = () => { {noContactsForClosedGroup ? ( ) : ( -
+ {contactsToRender.map((memberPubkey: string) => ( { key={memberPubkey} onSelect={addToSelected} onUnselect={removeFromSelected} + disableBg={true} /> ))} -
+ )} From d0cf998523841d5002062a5800939fa06a68b786 Mon Sep 17 00:00:00 2001 From: William Grant Date: Mon, 17 Oct 2022 13:47:27 +1100 Subject: [PATCH 12/19] fix: qa feedback - centered name in profile modal --- stylesheets/_modal.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/stylesheets/_modal.scss b/stylesheets/_modal.scss index e08e8d835..8cb1a5598 100644 --- a/stylesheets/_modal.scss +++ b/stylesheets/_modal.scss @@ -211,6 +211,7 @@ display: flex; align-items: center; justify-content: center; + margin-right: -20px; // offsets the edit icon button so it's centered p { font-size: $session-font-md; From f15d4cffa1143f2a2c939e1569ed5924612362a7 Mon Sep 17 00:00:00 2001 From: William Grant Date: Mon, 17 Oct 2022 14:02:35 +1100 Subject: [PATCH 13/19] fix: qa feedback - removed avatar border and --- ts/themes/globals.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ts/themes/globals.tsx b/ts/themes/globals.tsx index d9d29d32d..98760c6b3 100644 --- a/ts/themes/globals.tsx +++ b/ts/themes/globals.tsx @@ -140,7 +140,7 @@ export const THEME_GLOBALS: ThemeGlobals = { '--lightbox-caption-background-color': 'rgba(192, 192, 192, .40)', '--lightbox-icon-stroke-color': 'var(--white-color)', - '--avatar-border-color': `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.59)`, + '--avatar-border-color': 'var(--transparent-color)', '--message-link-preview-background-color': `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.06)`, }; From 93f814e59d9e0bde175b3c055a06cd92c0f5ba6c Mon Sep 17 00:00:00 2001 From: William Grant Date: Mon, 17 Oct 2022 14:03:14 +1100 Subject: [PATCH 14/19] fix: qa feedback - added a max width to contact invitation modal prevents overflow when pub keys are visible. --- stylesheets/_modal.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/stylesheets/_modal.scss b/stylesheets/_modal.scss index 8cb1a5598..e65308f8a 100644 --- a/stylesheets/_modal.scss +++ b/stylesheets/_modal.scss @@ -30,6 +30,7 @@ .contact-selection-list { width: 100%; min-width: 300px; + max-width: 350px; } &__input-group { From e28c5e98853849bb1449548d4fbdd86427e9335e Mon Sep 17 00:00:00 2001 From: William Grant Date: Mon, 17 Oct 2022 14:49:21 +1100 Subject: [PATCH 15/19] fix: qa feedback - Fixed community invitation theming and icons --- stylesheets/_conversation.scss | 6 ++++ .../message/message-item/GroupInvitation.tsx | 28 +++++++++++++------ 2 files changed, 26 insertions(+), 8 deletions(-) diff --git a/stylesheets/_conversation.scss b/stylesheets/_conversation.scss index a6915236d..145cd05c1 100644 --- a/stylesheets/_conversation.scss +++ b/stylesheets/_conversation.scss @@ -21,6 +21,12 @@ &.invitation-outgoing { background-color: var(--message-bubbles-sent-background-color); align-self: flex-end; + + .contents { + .session-icon-button { + background-color: var(--transparent-color); + } + } } display: inline-block; diff --git a/ts/components/conversation/message/message-item/GroupInvitation.tsx b/ts/components/conversation/message/message-item/GroupInvitation.tsx index 8fafccf9f..ca11c53fd 100644 --- a/ts/components/conversation/message/message-item/GroupInvitation.tsx +++ b/ts/components/conversation/message/message-item/GroupInvitation.tsx @@ -4,6 +4,12 @@ import { PropsForGroupInvitation } from '../../../../state/ducks/conversations'; import { acceptOpenGroupInvitation } from '../../../../interactions/messageInteractions'; import { SessionIconButton } from '../../../icon'; import { ReadableMessage } from './ReadableMessage'; +import styled from 'styled-components'; + +const StyledIconContainer = styled.div` + background-color: var(--message-link-preview-background-color); + border-radius: 100%; +`; export const GroupInvitation = (props: PropsForGroupInvitation) => { const { messageId, receivedAt, isUnread } = props; @@ -24,14 +30,20 @@ export const GroupInvitation = (props: PropsForGroupInvitation) => {
- { - acceptOpenGroupInvitation(props.acceptUrl, props.serverName); - }} - /> + + { + acceptOpenGroupInvitation(props.acceptUrl, props.serverName); + }} + /> + {props.serverName} {openGroupInvitation} From bc76cf6b339a672edf3426292a1965aa60bff553 Mon Sep 17 00:00:00 2001 From: William Grant Date: Mon, 17 Oct 2022 14:55:47 +1100 Subject: [PATCH 16/19] fix: qa feedback - fixed count overflow styling in notificationCount --- .../icon/SessionNotificationCount.tsx | 19 +++++-------------- 1 file changed, 5 insertions(+), 14 deletions(-) diff --git a/ts/components/icon/SessionNotificationCount.tsx b/ts/components/icon/SessionNotificationCount.tsx index e71ba3854..580586cfc 100644 --- a/ts/components/icon/SessionNotificationCount.tsx +++ b/ts/components/icon/SessionNotificationCount.tsx @@ -27,18 +27,9 @@ const StyledCountContainer = styled.div<{ shouldRender: boolean }>` color: var(--unread-messages-alert-text-color); `; -const StyledCount = styled.div<{ countOverflow: boolean }>` +const StyledCount = styled.div` position: relative; - font-size: ${props => (props.countOverflow ? '0.5em' : '0.6em')}; - margin-top: ${props => (props.countOverflow ? '0.35em' : '0em')}; - margin-left: ${props => (props.countOverflow ? '-0.45em' : '0em')}; -`; - -const StyledCountSup = styled.div` - position: absolute; - font-size: 1.3em; - top: -0.5em; - margin-inline-start: 0.375em; + font-size: 0.6em; `; export const SessionNotificationCount = (props: Props) => { @@ -49,16 +40,16 @@ export const SessionNotificationCount = (props: Props) => { if (overflow) { return ( - + {9} - + + + ); } return ( - {count} + {count} ); }; From 0ac386dc1bc6149a0246d3eb32b54d4772a1b382 Mon Sep 17 00:00:00 2001 From: William Grant Date: Mon, 17 Oct 2022 15:07:02 +1100 Subject: [PATCH 17/19] fix: qa feedback - fixed message request buttons and other theming regressions --- ts/components/conversation/ConversationRequestButtons.tsx | 5 ++++- ts/components/conversation/ConversationRequestInfo.tsx | 1 + ts/components/leftpane/overlay/OverlayMessageRequest.tsx | 1 - 3 files changed, 5 insertions(+), 2 deletions(-) diff --git a/ts/components/conversation/ConversationRequestButtons.tsx b/ts/components/conversation/ConversationRequestButtons.tsx index 27425c374..1e08f65b3 100644 --- a/ts/components/conversation/ConversationRequestButtons.tsx +++ b/ts/components/conversation/ConversationRequestButtons.tsx @@ -37,6 +37,10 @@ const ConversationBannerRow = styled.div` flex-direction: row; gap: var(--margins-lg); justify-content: center; + + .session-button { + padding: 0 36px; + } `; export const ConversationMessageRequestButtons = () => { @@ -57,7 +61,6 @@ export const ConversationMessageRequestButtons = () => { { await handleAcceptConversationRequest(selectedConversation.id); }} diff --git a/ts/components/conversation/ConversationRequestInfo.tsx b/ts/components/conversation/ConversationRequestInfo.tsx index 9867daa05..d9853e787 100644 --- a/ts/components/conversation/ConversationRequestInfo.tsx +++ b/ts/components/conversation/ConversationRequestInfo.tsx @@ -12,6 +12,7 @@ const ConversationRequestTextBottom = styled.div` flex-direction: row; justify-content: center; padding: var(--margins-lg); + background-color: var(--background-secondary-color); `; const ConversationRequestTextInner = styled.div` diff --git a/ts/components/leftpane/overlay/OverlayMessageRequest.tsx b/ts/components/leftpane/overlay/OverlayMessageRequest.tsx index c16aa786e..64f7138d4 100644 --- a/ts/components/leftpane/overlay/OverlayMessageRequest.tsx +++ b/ts/components/leftpane/overlay/OverlayMessageRequest.tsx @@ -29,7 +29,6 @@ const MessageRequestListPlaceholder = styled.div` const MessageRequestListContainer = styled.div` width: 100%; overflow-y: auto; - border: 1px solid var(--border-color); margin-bottom: auto; `; From 4a851490aeb36cedf403f78a0c4e97c43730a728 Mon Sep 17 00:00:00 2001 From: William Grant Date: Mon, 17 Oct 2022 15:11:18 +1100 Subject: [PATCH 18/19] fix: qa feedback - updated message received background color in classic light --- ts/themes/classicLight.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ts/themes/classicLight.ts b/ts/themes/classicLight.ts index 69772a3a4..931ec4838 100644 --- a/ts/themes/classicLight.ts +++ b/ts/themes/classicLight.ts @@ -21,7 +21,7 @@ export const classicLight: ThemeColorVariables = { '--text-box-border-color': THEMES.CLASSIC_LIGHT.COLOR2, '--message-bubbles-sent-background-color': 'var(--primary-color)', - '--message-bubbles-received-background-color': THEMES.CLASSIC_LIGHT.COLOR3, + '--message-bubbles-received-background-color': THEMES.CLASSIC_LIGHT.COLOR4, '--message-bubbles-sent-text-color': 'var(--text-primary-color)', '--message-bubbles-received-text-color': 'var(--text-primary-color)', From 123bb2f6d03b8987fd10e3f977e189d80c5f5f2a Mon Sep 17 00:00:00 2001 From: William Grant Date: Mon, 17 Oct 2022 15:14:54 +1100 Subject: [PATCH 19/19] fix: pass yarn ready --- ts/components/conversation/SessionEmojiPanel.tsx | 2 +- ts/themes/switchPrimaryColor.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/ts/components/conversation/SessionEmojiPanel.tsx b/ts/components/conversation/SessionEmojiPanel.tsx index 44b519a04..315776103 100644 --- a/ts/components/conversation/SessionEmojiPanel.tsx +++ b/ts/components/conversation/SessionEmojiPanel.tsx @@ -7,8 +7,8 @@ import { useSelector } from 'react-redux'; import { getTheme, isDarkTheme } from '../../state/selectors/theme'; import { FixedBaseEmoji, FixedPickerProps } from '../../types/Reaction'; import { - ColorsType, COLORS, + ColorsType, PrimaryColorStateType, THEMES, ThemeStateType, diff --git a/ts/themes/switchPrimaryColor.tsx b/ts/themes/switchPrimaryColor.tsx index f7ec3ab60..67b660683 100644 --- a/ts/themes/switchPrimaryColor.tsx +++ b/ts/themes/switchPrimaryColor.tsx @@ -1,7 +1,7 @@ import { find } from 'lodash'; import { Dispatch } from '@reduxjs/toolkit'; import { applyPrimaryColor } from '../state/ducks/primaryColor'; -import { ColorsType, COLORS, getPrimaryColors, PrimaryColorStateType } from './constants/colors'; +import { COLORS, ColorsType, getPrimaryColors, PrimaryColorStateType } from './constants/colors'; export function findPrimaryColorId(hexCode: string): PrimaryColorStateType | undefined { const primaryColors = getPrimaryColors();