From cf8a66a82b421057ae5f77ed9764798dfe2d3a09 Mon Sep 17 00:00:00 2001 From: William Grant Date: Tue, 11 Oct 2022 16:26:15 +1100 Subject: [PATCH] fix: resolved all outstanding theming todos --- stylesheets/_modules.scss | 4 +--- stylesheets/_session_left_pane.scss | 2 -- stylesheets/_session_signin.scss | 3 +-- ts/components/avatar/Avatar.tsx | 3 +-- ts/components/calling/InConversationCallContainer.tsx | 4 +--- ts/components/conversation/ConversationRequestInfo.tsx | 1 - ts/components/dialog/SessionModal.tsx | 2 +- ts/components/icon/SessionNotificationCount.tsx | 1 - ts/components/leftpane/MessageRequestsBanner.tsx | 7 +------ .../leftpane/conversation-list-item/HeaderItem.tsx | 1 - ts/components/menu/MessageRequestBannerContextMenu.tsx | 1 - ts/interactions/conversationInteractions.ts | 1 - ts/types/Reaction.ts | 1 - 13 files changed, 6 insertions(+), 25 deletions(-) diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss index 579d17c3a..fd52ce5b8 100644 --- a/stylesheets/_modules.scss +++ b/stylesheets/_modules.scss @@ -968,8 +968,7 @@ } // Module: Caption Editor -// TODO Theming We don't seem to use this can we delete?' -// TODO we will probably remove this and the related component. +// NOTE This is currently not in use .module-caption-editor { background-color: rgba(0, 0, 0, 0.8); z-index: 20; @@ -1139,7 +1138,6 @@ outline: none; } -// TODO Theming - Needs Improvement // Module H5AudioPlayer .module-message__container--outgoing { .rhap_container { diff --git a/stylesheets/_session_left_pane.scss b/stylesheets/_session_left_pane.scss index 6a42b5d9d..7559e64ae 100644 --- a/stylesheets/_session_left_pane.scss +++ b/stylesheets/_session_left_pane.scss @@ -12,8 +12,6 @@ $session-compose-margin: 20px; &-list-item { background: var(--conversation-tab-background-color); - // TODO Theming, make everything have the default duration for transitioning colors - // transition: var(--default-duration); &:hover { background: var(--conversation-tab-background-hover-color); diff --git a/stylesheets/_session_signin.scss b/stylesheets/_session_signin.scss index d1da8a5f1..f173a0805 100644 --- a/stylesheets/_session_signin.scss +++ b/stylesheets/_session_signin.scss @@ -179,8 +179,7 @@ &-description-long { padding-top: 0; padding-bottom: 20px; - // TODO Theming needs to be updated - color: rgba(var(--black-color), 0.6); + color: var(--text-secondary-color); text-align: center; font-size: 12px; line-height: 20px; diff --git a/ts/components/avatar/Avatar.tsx b/ts/components/avatar/Avatar.tsx index c088a53ab..e073ce270 100644 --- a/ts/components/avatar/Avatar.tsx +++ b/ts/components/avatar/Avatar.tsx @@ -55,8 +55,7 @@ const CrownWrapper = styled.div` color: #f7c347; background: var(--background-primary-color); border-radius: 50%; - /* TODO Theming update? */ - filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.3)); + box-shadow: var(--drop-shadow); `; export const CrownIcon = () => { diff --git a/ts/components/calling/InConversationCallContainer.tsx b/ts/components/calling/InConversationCallContainer.tsx index 731a1d957..46f7919fc 100644 --- a/ts/components/calling/InConversationCallContainer.tsx +++ b/ts/components/calling/InConversationCallContainer.tsx @@ -34,7 +34,6 @@ const InConvoCallWindow = styled.div` padding: 1rem; display: flex; - /* TODO Theming - Update? */ background-color: hsl(0, 0%, 15.7%); flex-shrink: 1; @@ -69,9 +68,8 @@ const StyledCenteredLabel = styled.div` transform: translateX(-50%); height: min-content; white-space: nowrap; - /* TODO Theming - Update? */ color: var(--white-color); - text-shadow: 0px 0px 8px white; + text-shadow: 0px 0px 8px var(--white-color); z-index: 5; `; diff --git a/ts/components/conversation/ConversationRequestInfo.tsx b/ts/components/conversation/ConversationRequestInfo.tsx index fb9ad94e1..9867daa05 100644 --- a/ts/components/conversation/ConversationRequestInfo.tsx +++ b/ts/components/conversation/ConversationRequestInfo.tsx @@ -14,7 +14,6 @@ const ConversationRequestTextBottom = styled.div` padding: var(--margins-lg); `; -// TODO Theming - Confirm this is correct? const ConversationRequestTextInner = styled.div` color: var(--text-secondary-color); text-align: center; diff --git a/ts/components/dialog/SessionModal.tsx b/ts/components/dialog/SessionModal.tsx index 9fb8bae37..dafe1f05b 100644 --- a/ts/components/dialog/SessionModal.tsx +++ b/ts/components/dialog/SessionModal.tsx @@ -27,7 +27,7 @@ interface State { isVisible: boolean; } -// TODO Theming - Can we remove this. +// NOTE This is currently unused. export class SessionModal extends React.PureComponent { public static defaultProps = { showExitIcon: true, diff --git a/ts/components/icon/SessionNotificationCount.tsx b/ts/components/icon/SessionNotificationCount.tsx index 8084164e5..d0ec15217 100644 --- a/ts/components/icon/SessionNotificationCount.tsx +++ b/ts/components/icon/SessionNotificationCount.tsx @@ -20,7 +20,6 @@ const StyledCountContainer = styled.div<{ shouldRender: boolean }>` font-family: var(--font-default); border-radius: 50%; font-weight: 700; - /* TODO Theming Update */ background: var(--unread-messages-alert-background-color); transition: var(--default-duration); opacity: ${props => (props.shouldRender ? 1 : 0)}; diff --git a/ts/components/leftpane/MessageRequestsBanner.tsx b/ts/components/leftpane/MessageRequestsBanner.tsx index 5f721d799..7c4a71587 100644 --- a/ts/components/leftpane/MessageRequestsBanner.tsx +++ b/ts/components/leftpane/MessageRequestsBanner.tsx @@ -17,11 +17,8 @@ const StyledMessageRequestBanner = styled.div` padding: 8px 12px; // adjusting for unread border always being active align-items: center; cursor: pointer; - /* TODO Theming - Discuss with Connnor */ background: var(--conversation-tab-background-color); - transition: var(--default-duration); - &:hover { background: var(--conversation-tab-background-hover-color); } @@ -30,7 +27,7 @@ const StyledMessageRequestBanner = styled.div` const StyledMessageRequestBannerHeader = styled.span` font-weight: bold; font-size: var(--font-size-md); - color: var(--conversation-tab-text-color); + color: var(--text-primary-color); padding-left: var(--margins-xs); margin-inline-start: 12px; line-height: 18px; @@ -66,7 +63,6 @@ const StyledGridContainer = styled.div` align-items: center; border-radius: 50%; justify-content: center; - /* TODO Theming - Is this right? */ background-color: var(--text-secondary-color); `; @@ -79,7 +75,6 @@ export const CirclularIcon = (props: { iconType: SessionIconType; iconSize: Sess diff --git a/ts/components/leftpane/conversation-list-item/HeaderItem.tsx b/ts/components/leftpane/conversation-list-item/HeaderItem.tsx index 4badf4950..1a45cf2c9 100644 --- a/ts/components/leftpane/conversation-list-item/HeaderItem.tsx +++ b/ts/components/leftpane/conversation-list-item/HeaderItem.tsx @@ -116,7 +116,6 @@ const MentionAtSymbol = styled.span` cursor: pointer; :hover { - /* TODO Theming, should this be changed? */ filter: grayscale(0.7); } `; diff --git a/ts/components/menu/MessageRequestBannerContextMenu.tsx b/ts/components/menu/MessageRequestBannerContextMenu.tsx index 948e24e76..d7c3de2de 100644 --- a/ts/components/menu/MessageRequestBannerContextMenu.tsx +++ b/ts/components/menu/MessageRequestBannerContextMenu.tsx @@ -13,7 +13,6 @@ const MessageRequestBannerContextMenu = (props: PropsContextConversationItem) => const { triggerId } = props; return ( - // TODO Theming - Waiting on Session Components for correct colors diff --git a/ts/interactions/conversationInteractions.ts b/ts/interactions/conversationInteractions.ts index 1455c01bb..bb7059e56 100644 --- a/ts/interactions/conversationInteractions.ts +++ b/ts/interactions/conversationInteractions.ts @@ -491,7 +491,6 @@ export async function showLinkSharingConfirmationModalDialog(e: any) { const alreadyDisplayedPopup = (await Data.getItemById(hasLinkPreviewPopupBeenDisplayed))?.value || false; if (!alreadyDisplayedPopup) { - // TODO Theming possibly update window.inboxStore?.dispatch( updateConfirmModal({ shouldShowConfirm: diff --git a/ts/types/Reaction.ts b/ts/types/Reaction.ts index 01ada6352..89bf0a361 100644 --- a/ts/types/Reaction.ts +++ b/ts/types/Reaction.ts @@ -58,7 +58,6 @@ export interface NativeEmojiData { export interface FixedPickerProps { autoFocus?: boolean | undefined; title?: string | undefined; - // TODO Theming - Add Ocean Colors theme?: 'auto' | 'light' | 'dark' | undefined; perLine?: number | undefined; stickySearch?: boolean | undefined;