feat: made more progress with left pane and left more comments

stylesheets/_modules.scss

@@ -894,7 +894,7 @@
 
 .module-typing-animation__dot {
   border-radius: 50%;
-  background-color: var(--color-gray-color);
+  background-color: var(--text-secondary-color);
 
   height: 6px;
   width: 6px;
@@ -903,7 +903,7 @@
 
 .module-typing-animation__dot--light {
   border-radius: 50%;
-  background-color: var(--color-white-color);
+  background-color: var(--background-primary-color);
 
   height: 6px;
   width: 6px;

stylesheets/_theme_dark.scss

@@ -361,11 +361,12 @@
 
   // Module: Message Search Result
 
-  .module-message-search-result {
+  // TODO Theming remove
-    &:hover {
+  // .module-message-search-result {
-      background-color: var(--color-dark-gray-color);
+  //   &:hover {
-    }
+  //     background-color: var(--color-dark-gray-color);
-  }
+  //   }
+  // }
 
   .module-message__link-preview__icon-container__circle-background {
     background-color: var(--color-light-gray-color);

ts/components/SessionContextMenuContainer.tsx

@@ -7,6 +7,7 @@ export const SessionContextMenuContainer = styled.div.attrs({
     // be sure it is more than the one set for the More Informations screen of messages
     z-index: 30;
     min-width: 200px;
+    /* TODO Theming Update */
     box-shadow: 0 10px 16px 0 rgba(var(--color-black-color-rgb), 0.2),
       0 6px 20px 0 rgba(var(--color-black-color-rgb), 0.19) !important;
     background-color: var(--color-received-message-background);

ts/components/SessionSearchInput.tsx

@@ -8,6 +8,7 @@ import { getOverlayMode } from '../state/selectors/section';
 import { cleanSearchTerm } from '../util/cleanSearchTerm';
 import { SessionIconButton } from './icon';
 
+// TODO Theming possibly update to use Search Bar Component Colors
 const StyledSearchInput = styled.div`
   height: var(--search-input-height);
   width: 100%;
@@ -30,7 +31,7 @@ const StyledInput = styled.input`
   font-family: var(--font-default);
   text-overflow: ellipsis;
   background: none;
-  color: var(--color-text);
+  color: var(--conversation-tab-text-color);
 
   &:focus {
     outline: none !important;

ts/components/basic/MessageBodyHighlight.tsx

@@ -15,7 +15,7 @@ const renderNewLines: RenderTextCallbackType = ({ text, key, isGroup }) => (
 
 const SnippetHighlight = styled.span`
   font-weight: bold;
-  color: var(--color-text);
+  color: var(--text-primary-color);
 `;
 
 const renderEmoji = ({

ts/components/button/MenuButton.tsx

@@ -13,7 +13,7 @@ const StyledMenuButton = styled.button`
   display: flex;
   justify-content: center;
   align-items: center;
-  background: var(--bg-color);
+  background: var(--menu-button-background-color);
 
   border-radius: 2px;
   width: 51px;
@@ -23,10 +23,16 @@ const StyledMenuButton = styled.button`
   transition: var(--default-duration);
 
   :hover {
-    background: var(--hover-bg-color);
+    background: var(--menu-button-background-hover-color);
   }
 `;
 
+const StyledMenuInput = styled.input`
+  opacity: 0;
+  width: 0;
+  height: 0;
+`;
+
 /**
  * This is the Session Menu Botton. i.e. the button on top of the conversation list to start a new conversation.
  * It has two state: selected or not and so we use an checkbox input to keep the state in sync.
@@ -43,6 +49,7 @@ export const MenuButton = () => {
   return (
     <StyledMenuButton
       data-testid="new-conversation-button"
+      // TODO Theming Maybe move to StyleMenuInput
       style={
         {
           '--bg-color': 'var(--color-accent-button)',
@@ -50,12 +57,12 @@ export const MenuButton = () => {
           '--fg-color': 'white',
         } as CSSProperties
       }
-      onClick={onClickFn}
     >
+      <StyledMenuInput type="checkbox" checked={isToggled} onClick={onClickFn} />
       <SessionIcon
         iconSize="small"
         iconType="plusFat"
-        iconColor="var(--fg-color)"
+        iconColor="var(--menu-button-icon-color)"
         iconRotation={isToggled ? 45 : 0}
         aria-label={window.i18n('chooseAnAction')}
       />

ts/components/conversation/AddMentions.tsx

@@ -19,8 +19,8 @@ const StyledMentionAnother = styled.span`
 `;
 
 const StyledMentionedUs = styled(StyledMentionAnother)`
-  background-color: var(--color-text-accent);
+  background-color: var(--primary-color);
-  color: black;
+  color: var(--text-primary-color);
   border-radius: 5px;
 `;
 

ts/components/conversation/Timestamp.tsx

@@ -14,12 +14,12 @@ type Props = {
 const UPDATE_FREQUENCY = 60 * 1000;
 
 const TimestampContainerNotListItem = styled.div`
+  color: var(--text-secondary-color);
   font-size: var(--font-size-xs);
   line-height: 16px;
   letter-spacing: 0.3px;
   text-transform: uppercase;
   user-select: none;
-  color: var(--color-text-subtle);
 `;
 
 const TimestampContainerListItem = styled(TimestampContainerNotListItem)`

ts/components/conversation/TypingAnimation.tsx

@@ -14,7 +14,7 @@ const StyledTypingContainer = styled.div`
 
 const StyledTypingDot = styled.div<{ index: number }>`
   border-radius: 50%;
-  background-color: var(--color-text-subtle);  // TODO Theming update
+  background-color: var(--text-secondary-color);
 
   height: 6px;
   width: 6px;

ts/components/conversation/message/message-content/OutgoingMessageStatus.tsx

@@ -12,8 +12,9 @@ const MessageStatusSendingContainer = styled.div`
   cursor: pointer;
 `;
 
+const iconColor = 'var(--text-primary-color)';
+
 const MessageStatusSending = ({ dataTestId }: { dataTestId?: string }) => {
-  const iconColor = 'var(--color-text)';
   return (
     <MessageStatusSendingContainer data-testid={dataTestId} data-testtype="sending">
       <SessionIcon rotateDuration={2} iconColor={iconColor} iconType="sending" iconSize="tiny" />
@@ -22,8 +23,6 @@ const MessageStatusSending = ({ dataTestId }: { dataTestId?: string }) => {
 };
 
 const MessageStatusSent = ({ dataTestId }: { dataTestId?: string }) => {
-  const iconColor = 'var(--color-text)';
-
   return (
     <MessageStatusSendingContainer data-testid={dataTestId} data-testtype="sent">
       <SessionIcon iconColor={iconColor} iconType="circleCheck" iconSize="tiny" />
@@ -32,8 +31,6 @@ const MessageStatusSent = ({ dataTestId }: { dataTestId?: string }) => {
 };
 
 const MessageStatusRead = ({ dataTestId }: { dataTestId?: string }) => {
-  const iconColor = 'var(--color-text)';
-
   return (
     <MessageStatusSendingContainer data-testid={dataTestId} data-testtype="read">
       <SessionIcon iconColor={iconColor} iconType="doubleCheckCircleFilled" iconSize="tiny" />
@@ -53,7 +50,7 @@ const MessageStatusError = ({ dataTestId }: { dataTestId?: string }) => {
       onClick={showDebugLog}
       title={window.i18n('sendFailed')}
     >
-      <SessionIcon iconColor={'var(--color-destructive'} iconType="error" iconSize="tiny" />
+      <SessionIcon iconColor={'var(--danger-color'} iconType="error" iconSize="tiny" />
     </MessageStatusSendingContainer>
   );
 };

ts/components/leftpane/LeftPaneSectionHeader.tsx

@@ -14,41 +14,54 @@ import { MenuButton } from '../button/MenuButton';
 const SectionTitle = styled.h1`
   padding: 0 var(--margins-sm);
   flex-grow: 1;
-  color: var(--color-text);
+  color: var(--text-primary-color);
 `;
 
-export const LeftPaneSectionHeader = () => {
+const StyledProgressBarContainer = styled.div`
-  const showRecoveryPhrasePrompt = useSelector(getShowRecoveryPhrasePrompt);
+  width: 100%;
-  const focusedSection = useSelector(getFocusedSection);
+  height: 5px;
-  const overlayMode = useSelector(getOverlayMode);
+  flex-direction: row;
+  background: var(--border-color);
+`;
 
-  let label: string | undefined;
+const StyledProgressBarInner = styled.div`
+  background: var(--primary-color);
+  width: 90%;
+  transition: width 0.5s ease-in;
+  height: 100%;
+`;
 
-  const isMessageSection = focusedSection === SectionType.Message;
+export const StyledBannerTitle = styled.div`
-  const isMessageRequestOverlay = overlayMode && overlayMode === 'message-requests';
+  line-height: 1.3;
+  font-size: var(--font-size-md);
+  font-weight: bold;
+  margin: var(--margins-sm) var(--margins-sm) 0 var(--margins-sm);
 
-  switch (focusedSection) {
+  span {
-    case SectionType.Settings:
+    color: var(--primary-color);
-      label = window.i18n('settingsHeader');
-      break;
-    case SectionType.Message:
-      label = isMessageRequestOverlay
-        ? window.i18n('messageRequests')
-        : window.i18n('messagesHeader');
-      break;
-    default:
   }
+`;
 
-  return (
+export const StyledLeftPaneBanner = styled.div`
-    <Flex flexDirection="column">
+  background: var(--background-primary-color);
-      <div className="module-left-pane__header">
+  display: flex;
-        <SectionTitle>{label}</SectionTitle>
+  flex-direction: column;
-        {isMessageSection && <MenuButton />}
+  border-bottom: var(--border-color);
-      </div>
+`;
-      {showRecoveryPhrasePrompt && <LeftPaneBanner />}
+
-    </Flex>
+const StyledBannerInner = styled.div`
-  );
+  p {
-};
+    margin: 0;
+  }
+
+  .left-pane-banner___phrase {
+    margin-top: var(--margins-md);
+  }
+
+  .session-button {
+    margin-top: var(--margins-sm);
+  }
+`;
 
 const BannerInner = () => {
   const dispatch = useDispatch();
@@ -94,48 +107,35 @@ export const LeftPaneBanner = () => {
   );
 };
 
-const StyledProgressBarContainer = styled.div`
+export const LeftPaneSectionHeader = () => {
-  width: 100%;
+  const showRecoveryPhrasePrompt = useSelector(getShowRecoveryPhrasePrompt);
-  height: 5px;
+  const focusedSection = useSelector(getFocusedSection);
-  flex-direction: row;
+  const overlayMode = useSelector(getOverlayMode);
-  background: var(--color-session-border);
-`;
-
-const StyledProgressBarInner = styled.div`
-  background: var(--color-accent);
-  width: 90%;
-  transition: width 0.5s ease-in;
-  height: 100%;
-`;
-
-export const StyledBannerTitle = styled.div`
-  line-height: 1.3;
-  font-size: var(--font-size-md);
-  font-weight: bold;
-  margin: var(--margins-sm) var(--margins-sm) 0 var(--margins-sm);
-
-  span {
-    color: var(--color-text-accent);
-  }
-`;
 
-export const StyledLeftPaneBanner = styled.div`
+  let label: string | undefined;
-  background: var(--color-recovery-phrase-banner-background);
-  display: flex;
-  flex-direction: column;
-  border-bottom: var(--session-border);
-`;
 
-const StyledBannerInner = styled.div`
+  const isMessageSection = focusedSection === SectionType.Message;
-  p {
+  const isMessageRequestOverlay = overlayMode && overlayMode === 'message-requests';
-    margin: 0;
-  }
 
-  .left-pane-banner___phrase {
+  switch (focusedSection) {
-    margin-top: var(--margins-md);
+    case SectionType.Settings:
+      label = window.i18n('settingsHeader');
+      break;
+    case SectionType.Message:
+      label = isMessageRequestOverlay
+        ? window.i18n('messageRequests')
+        : window.i18n('messagesHeader');
+      break;
+    default:
   }
 
-  .session-button {
+  return (
-    margin-top: var(--margins-sm);
+    <Flex flexDirection="column">
-  }
+      <div className="module-left-pane__header">
-`;
+        <SectionTitle>{label}</SectionTitle>
+        {isMessageSection && <MenuButton />}
+      </div>
+      {showRecoveryPhrasePrompt && <LeftPaneBanner />}
+    </Flex>
+  );
+};

ts/components/leftpane/MessageRequestsBanner.tsx

@@ -17,20 +17,20 @@ 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(--color-request-banner-background);
+  background: var(--conversation-tab-background-color);
 
   transition: var(--default-duration);
 
   &:hover {
-    background: var(--color-clickable-hovered);
+    background: var(--conversation-tab-background-hover-color);
   }
 `;
 
 const StyledMessageRequestBannerHeader = styled.span`
   font-weight: bold;
   font-size: var(--font-size-md);
-  color: var(--color-text-subtle);
+  color: var(--conversation-tab-text-color);
   padding-left: var(--margins-xs);
   margin-inline-start: 12px;
   line-height: 18px;
@@ -47,7 +47,8 @@ const StyledCircleIcon = styled.div`
 const StyledUnreadCounter = styled.div`
   font-weight: bold;
   border-radius: var(--margins-sm);
-  background-color: var(--color-request-banner-unread-background);
+  background-color: var(--conversation-tab-bubble-background-color);
+  color: var(--conversation-tab-bubble-text-color);
   margin-left: 10px;
   min-width: 20px;
   height: 20px;
@@ -66,7 +67,8 @@ const StyledGridContainer = styled.div`
   align-items: center;
   border-radius: 50%;
   justify-content: center;
-  background-color: var(--color-request-banner-icon-background);
+  /* TODO Theming - Is this right? */
+  background-color: var(--text-secondary-color);
 `;
 
 export const CirclularIcon = (props: { iconType: SessionIconType; iconSize: SessionIconSize }) => {
@@ -78,7 +80,8 @@ export const CirclularIcon = (props: { iconType: SessionIconType; iconSize: Sess
         <SessionIcon
           iconType={iconType}
           iconSize={iconSize}
-          iconColor="var(--color-request-banner-icon)"
+          // TODO Theming - Is this right?
+          iconColor="var(--background-primary-color)"
         />
       </StyledGridContainer>
     </StyledCircleIcon>

ts/components/leftpane/conversation-list-item/ConversationListItem.tsx

@@ -64,7 +64,7 @@ const AvatarItem = () => {
   }
 
   return (
-    <div className="module-conversation-list-item__avatar-container">
+    <div>
       <Avatar
         size={AvatarSize.S}
         pubkey={conversationId}

ts/components/leftpane/conversation-list-item/HeaderItem.tsx

@@ -94,9 +94,8 @@ const ListItemIcons = () => {
 };
 
 const MentionAtSymbol = styled.span`
-  background-color: var(--color-accent);
+  background-color: var(--primary-color);
-
+  color: var(--conversation-tab-text-color);
-  color: black;
   text-align: center;
   margin-top: 0px;
   margin-bottom: 0px;
@@ -114,10 +113,10 @@ const MentionAtSymbol = styled.span`
   height: 16px;
   min-width: 16px;
   border-radius: 8px;
-  /* transition: filter 0.25s linear; */
   cursor: pointer;
 
   :hover {
+    /* TODO Theming, should this be changed? */
     filter: grayscale(0.7);
   }
 `;

ts/components/menu/ConversationListItemContextMenu.tsx

@@ -29,6 +29,7 @@ export type PropsContextConversationItem = {
 const ConversationListItemContextMenu = (props: PropsContextConversationItem) => {
   const { triggerId } = props;
 
+  // TODO Theming - Waiting on Session Components for correct colors
   return (
     <SessionContextMenuContainer>
       <Menu id={triggerId} animation={animation.fade}>

ts/components/menu/MessageRequestBannerContextMenu.tsx

@@ -13,6 +13,7 @@ const MessageRequestBannerContextMenu = (props: PropsContextConversationItem) =>
   const { triggerId } = props;
 
   return (
+    // TODO Theming - Waiting on Session Components for correct colors
     <SessionContextMenuContainer>
       <Menu id={triggerId} animation={animation.fade}>
         <HideBannerMenuItem />

ts/components/search/MessageSearchResults.tsx

@@ -21,7 +21,7 @@ const StyledConversationTitleResults = styled.div`
   overflow-x: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  color: var(--color-text);
+  color: var(--conversation-tab-text-color);
 `;
 
 const StyledConversationFromUserInGroup = styled(StyledConversationTitleResults)`
@@ -30,7 +30,7 @@ const StyledConversationFromUserInGroup = styled(StyledConversationTitleResults)
   line-height: 14px;
   overflow-x: hidden;
   font-weight: 700;
-  color: var(--color-text-subtle);
+  color: var(--conversation-tab-text-color);
 `;
 
 const StyledSearchResulsts = styled.div`
@@ -46,7 +46,7 @@ const StyledSearchResulsts = styled.div`
 
   cursor: pointer;
   &:hover {
-    background-color: var(--color-clickable-hovered);
+    background-color: var(--conversation-tab-background-hover-color);
   }
 `;
 
@@ -143,7 +143,7 @@ const ResultBody = styled.div`
 
   font-size: var(--font-size-sm);
 
-  color: var(--color-text-subtle);
+  color: var(--conversation-tab-text-color);
 
   max-height: 3.6em;
 
@@ -167,7 +167,7 @@ const StyledTimestampContaimer = styled.div`
 
   text-transform: uppercase;
 
-  color: var(--color-text-subtle);
+  color: var(--conversation-tab-text-color);
 `;
 
 export const MessageSearchResult = (props: MessageResultProps) => {

ts/components/search/SearchResults.tsx

@@ -18,7 +18,7 @@ const StyledSeparatorSection = styled.div`
 
   margin-inline-start: 16px;
 
-  color: var(--color-text);
+  color: var(--text-secondary-color);
 
   font-size: var(--font-size-sm);
   font-weight: 400;
@@ -28,7 +28,7 @@ const StyledSeparatorSection = styled.div`
 const SearchResultsContainer = styled.div`
   overflow-y: auto;
   max-height: 100%;
-  color: var(--color-text);
+  color: var(--text-secondary-color);
   flex-grow: 1;
   width: -webkit-fill-available;
 `;

ts/state/ducks/theme.tsx

@@ -1,5 +1,6 @@
 export const APPLY_THEME = 'APPLY_THEME';
 
+// TODO Theming - should be classic-light and classic-dark
 export type ThemeStateType = 'light' | 'dark' | 'ocean-light' | 'ocean-dark';
 
 export const applyTheme = (theme: ThemeStateType) => {

ts/themes/SessionTheme.tsx

@@ -466,6 +466,7 @@ export const SessionGlobalStyles = createGlobalStyle`
     /* TODO Theming this should be overridable */
     --primary-color: ${THEMES.CLASSIC_LIGHT.PRIMARY};
     --danger-color: ${COLORS.DANGER.LIGHT};
+    --transparent-color: ${COLORS.TRANSPARENT};
 
     /* Backgrounds */
     --background-primary-color: ${THEMES.CLASSIC_LIGHT.COLOR6};
@@ -488,13 +489,14 @@ export const SessionGlobalStyles = createGlobalStyle`
     --text-box-border-color: ${THEMES.CLASSIC_LIGHT.COLOR2};
 
     /* Message Bubbles */
-    --message-bubbles-outgoing-background-color: var(--primary-color);
+    --message-bubbles-sent-background-color: var(--primary-color);
-    --message-bubbles-incoming-background-color: ${THEMES.CLASSIC_LIGHT.COLOR3};
+    --message-bubbles-received-background-color: ${THEMES.CLASSIC_LIGHT.COLOR3};
-    --message-bubbles-outgoing-text-color: var(--text-primary-color);
+    --message-bubbles-sent-text-color: var(--text-primary-color);
-    --message-bubbles-incoming-text-color: var(--text-primary-color);
+    --message-bubbles-received-text-color: var(--text-primary-color);
 
     /* Menu Button */
     --menu-button-background-color: ${THEMES.CLASSIC_LIGHT.COLOR0};
+    --menu-button-background-hover-color: ${THEMES.CLASSIC_LIGHT.COLOR1};
     /* TODO Theming Make a icon fill varible that uses the background color? */
     --menu-button-icon-color: ${THEMES.CLASSIC_LIGHT.COLOR6};
 
@@ -519,7 +521,7 @@ export const SessionGlobalStyles = createGlobalStyle`
     --button-solid-text-hover-color: var(--text-primary-color);
 
     /* Outline */
-    --button-outline-background-color: ${COLORS.TRANSPARENT};
+    --button-outline-background-color: var(--transparent-color);
     --button-outline-background-hover-color: rgba(${hexColorToRGB(
       THEMES.CLASSIC_LIGHT.COLOR0
     )}, 0.1);
@@ -531,14 +533,14 @@ export const SessionGlobalStyles = createGlobalStyle`
     --button-outline-disabled-color: var(--text-secondary-color);
 
     /* Icons */
-    --button-icon-background-color: ${COLORS.TRANSPARENT};
+    --button-icon-background-color: var(--transparent-color);
     --button-icon-stroke-color: var(--text-secondary-color);
     --button-icon-stroke-hover-color: var(--text-primary-color);
     --button-icon-stroke-selected-color: var(--text-primary-color);
 
     /* TODO Theming Consolidate with code */
     /* Conversation Tab */
-    /* This is also user for Overlay Tabs, Contact Rows, Convesation List Items etc. */
+    /* This is also user for Overlay Tabs, Contact Rows, Convesation List Items, Message Search Results, Session Search Input?, Message Requests Banner etc. */
     --conversation-tab-background-color: ${THEMES.CLASSIC_LIGHT.COLOR5};
     --conversation-tab-background-hover-color: ${THEMES.CLASSIC_LIGHT.COLOR4};
     --conversation-tab-background-selected-color: ${THEMES.CLASSIC_LIGHT.COLOR4};
@@ -547,7 +549,6 @@ export const SessionGlobalStyles = createGlobalStyle`
     --conversation-tab-text-selected-color: var(--text-primary-color);
     --conversation-tab-text-unread-color: var(--text-primary-color);
     --conversation-tab-text-secondary-color: var(--text-secondary-color);
-    --conversation-tab-text-selected-color: var(--text-primary-color);
     --conversation-tab-bubble-background-color: ${THEMES.CLASSIC_LIGHT.COLOR3};
     --conversation-tab-bubble-text-color: var(--text-primary-color);
     /* TODO Theming account for overriding */
@@ -572,10 +573,10 @@ export const SessionGlobalStyles = createGlobalStyle`
     /* Toggle Switch */
     --toggle-switch-ball-color: ;
     /* TODO Theming think this should be white instead of transparent */
-    --toggle-switch-off-background-color: ${COLORS.TRANSPARENT};
+    --toggle-switch-off-background-color: var(--transparent-color);
     --toggle-switch-off-border-color: var(--border-color);
     --toggle-switch-on-background-color: var(--primary-color);
-    --toggle-switch-on-border-color: ${COLORS.TRANSPARENT};
+    --toggle-switch-on-border-color: var(--transparent-color);
 
     /* TODO Theming Think this is part of the Convesations Tab */
     /* Unread Messages Alert */
@@ -586,7 +587,7 @@ export const SessionGlobalStyles = createGlobalStyle`
     /* Color Mode Button */
     --button-color-mode-stroke-color: var(--text-secondary-color);
     --button-color-mode-hover-color: var(--text-primary-color);
-    --button-color-mode-fill-color: ${COLORS.TRANSPARENT};
+    --button-color-mode-fill-color: var(--transparent-color);
 
     /* Path Button */
     --button-path-default-color: ${COLORS.PATH.DEFAULT};