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

resolved any issues post merge of ui-redesigns

preload.js

@@ -29,7 +29,7 @@ window.sessionFeatureFlags = {
   useTestNet: Boolean(
     process.env.NODE_APP_INSTANCE && process.env.NODE_APP_INSTANCE.includes('testnet')
   ),
-  useSettingsThemeSwitcher: false,
+  useSettingsThemeSwitcher: true,
   debug: {
     debugFileServerRequests: false,
     debugNonSnodeRequests: false,

stylesheets/_session.scss

@@ -874,7 +874,7 @@ input {
     }
 
     &-disabled {
-      border: 1px solid var(--color-darker-gray-color) !important;
+      border: 1px solid var(--border-color) !important;
     }
   }
 }

ts/components/MemberListItem.tsx

@@ -39,8 +39,11 @@ const StyledSessionMemberItem = styled.button<{
     props.selected && 'var(--color-conversation-item-selected) !important'};
 
   :not(:last-child) {
-    border-bottom: var(--border-session);
+    border-bottom: var(--border-color);
   }
+
+  background-color: ${props =>
+    props.selected ? 'var(--conversation-tab-background-selected-color) !important' : null};
 `;
 
 const StyledInfo = styled.div`
@@ -98,7 +101,7 @@ export const MemberListItem = (props: {
       style={
         !inMentions && !disableBg
           ? {
-              backgroundColor: 'var(--color-cell-background)',
+              backgroundColor: 'var(--background-secondary-color)',
             }
           : {}
       }

ts/components/basic/SessionRadio.tsx

@@ -1,6 +1,5 @@
 import React, { ChangeEvent } from 'react';
 import styled from 'styled-components';
-import { black } from '../../state/ducks/SessionTheme';
 import { Flex } from '../basic/Flex';
 // tslint:disable: react-unused-props-and-state
 
@@ -16,7 +15,7 @@ type Props = {
 const StyledInput = styled.input<{
   filledSize: number;
   outlineOffset: number;
-  selectedColor: string;
+  selectedColor?: string;
 }>`
   opacity: 0;
   position: absolute;
@@ -25,12 +24,11 @@ const StyledInput = styled.input<{
   height: ${props => props.filledSize + props.outlineOffset}px;
 
   :checked + label:before {
-    background: ${props => props.selectedColor};
+    background: ${props => (props.selectedColor ? props.selectedColor : 'var(--primary-color)')};
   }
 `;
 
 const StyledLabel = styled.label<{
-  selectedColor: string;
   filledSize: number;
   outlineOffset: number;
   beforeMargins?: string;
@@ -44,7 +42,7 @@ const StyledLabel = styled.label<{
 
     transition: var(--default-duration);
     padding: ${props => props.filledSize}px;
-    outline: var(--color-text) solid 1px;
+    outline: var(--text-primary-color) solid 1px;
     border: none;
     outline-offset: ${props => props.outlineOffset}px;
     ${props => props.beforeMargins && `margin: ${props.beforeMargins};`};
@@ -62,7 +60,6 @@ export const SessionRadio = (props: Props) => {
     }
   }
 
-  const selectedColor = 'var(--color-accent)';
   const filledSize = 15 / 2;
   const outlineOffset = 2;
 
@@ -77,17 +74,15 @@ export const SessionRadio = (props: Props) => {
         onChange={clickHandler}
         filledSize={filledSize * 2}
         outlineOffset={outlineOffset}
-        selectedColor={selectedColor}
       />
 
       <StyledLabel
         role="button"
         onClick={clickHandler}
-        selectedColor={selectedColor}
         filledSize={filledSize}
         outlineOffset={outlineOffset}
         beforeMargins={beforeMargins}
-        aria-label={label}
+        // TODO Theming does this need a selected color
       >
         {label}
       </StyledLabel>
@@ -101,13 +96,13 @@ const StyledInputOutlineSelected = styled(StyledInput)`
     outline: none;
   }
   :checked + label:before {
-    outline: var(--color-text) solid 1px;
+    outline: var(--text-primary-color) solid 1px;
   }
 `;
 const StyledLabelOutlineSelected = styled(StyledLabel)<{ selectedColor: string }>`
   :before {
-    background: ${props => props.selectedColor};
-    outline: ${black} solid 1px;
+    background: ${props => (props.selectedColor ? props.selectedColor : 'var(--primary-color)')};
+    outline: var(--transparent-color) solid 1px;
   }
 `;
 

ts/components/basic/SessionToggle.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { updateConfirmModal } from '../../state/ducks/modalDialog';
 import { useDispatch } from 'react-redux';
 import styled from 'styled-components';
-import { white } from '../../state/ducks/SessionTheme';
+import { whiteColor } from '../../themes/SessionTheme';
 
 const StyledKnob = styled.div<{ active: boolean }>`
   position: absolute;
@@ -11,7 +11,8 @@ const StyledKnob = styled.div<{ active: boolean }>`
   height: 21px;
   width: 21px;
   border-radius: 28px;
-  background-color: ${white};
+  /* TODO Theming update */
+  background-color: ${whiteColor};
   box-shadow: ${props =>
     props.active ? '-2px 1px 3px rgba(0, 0, 0, 0.15)' : '2px 1px 3px rgba(0, 0, 0, 0.15);'};
 

ts/components/basic/Text.tsx

@@ -16,7 +16,7 @@ const StyledDefaultText = styled.div<TextProps>`
   padding: ${props => (props.padding ? props.padding : '')};
   text-align: ${props => (props.textAlign ? props.textAlign : '')};
   font-family: var(--font-default);
-  color: ${props => (props.subtle ? 'var(--color-text-subtle)' : 'var(--color-text)')};
+  color: ${props => (props.subtle ? 'var(--text-secondary-color)' : 'var(--text-primary-color)')};
   white-space: ${props => (props.ellipsisOverflow ? 'nowrap' : null)};
   overflow: ${props => (props.ellipsisOverflow ? 'hidden' : null)};
   text-overflow: ${props => (props.ellipsisOverflow ? 'ellipsis' : null)};

ts/components/basic/YourSessionIDPill.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import { UserUtils } from '../../session/utils';
 
 const StyledPillDividerLine = styled.div`
-  border-bottom: 1px solid var(--color-pill-divider);
+  border-bottom: 1px solid var(--border-color);
   line-height: 0.1em;
   flex-grow: 1;
   height: 1px;
@@ -13,8 +13,8 @@ const StyledPillDividerLine = styled.div`
 const StyledPillSpan = styled.span`
   padding: 5px 15px;
   border-radius: 50px;
-  color: var(--color-pill-divider-text);
-  border: 1px solid var(--color-pill-divider);
+  color: var(--text-primary-color);
+  border: 1px solid var(--border-color);
 `;
 
 const StyledPillDivider = styled.div`
@@ -39,8 +39,8 @@ const StyledYourSessionIDSelectable = styled.p`
   text-align: center;
   word-break: break-all;
   font-weight: 300;
-  color: var(--color-text);
   font-size: var(--font-size-sm);
+  color: var(--text-primary-color);
 `;
 
 export const YourSessionIDSelectable = () => {

ts/components/button/MenuButton.tsx

@@ -27,12 +27,6 @@ const StyledMenuButton = styled.button`
   }
 `;
 
-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.
@@ -57,8 +51,8 @@ export const MenuButton = () => {
           '--fg-color': 'white',
         } as CSSProperties
       }
+      onClick={onClickFn}
     >
-      <StyledMenuInput type="checkbox" checked={isToggled} onClick={onClickFn} />
       <SessionIcon
         iconSize="small"
         iconType="plusFat"

ts/components/leftpane/LeftPaneMessageSection.tsx

@@ -48,13 +48,6 @@ const StyledConversationListContent = styled.div`
   transition: none;
 `;
 
-const StyledLeftPaneContent = styled.div`
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  overflow: hidden;
-`;
-
 const ClosableOverlay = () => {
   const overlayMode = useSelector(getOverlayMode);
 

ts/components/leftpane/overlay/OverlayClosedGroup.tsx

@@ -22,7 +22,7 @@ import { VALIDATION } from '../../../session/constants';
 
 const StyledMemberListNoContacts = styled.div`
   font-family: var(--font-font-mono);
-  background: var(--color-cell-background);
+  background: var(--background-secondary-color);
   text-align: center;
   padding: 20px;
 `;
@@ -32,7 +32,7 @@ const StyledGroupMemberListContainer = styled.div`
   width: 100%;
   max-height: 400px;
   overflow-y: auto;
-  border: var(--border-session);
+  border: var(--border-color);
 `;
 
 const NoContacts = () => {

ts/components/leftpane/overlay/OverlayHeader.tsx

@@ -6,10 +6,10 @@ import { Flex } from '../../basic/Flex';
 import { SpacerSM } from '../../basic/Text';
 import { SessionIconButton } from '../../icon';
 
-const StyledGreenBorder = styled.hr`
+const StyledPrimaryBorder = styled.hr`
   position: absolute;
-  color: var(--color-accent);
-  background-color: var(--color-accent);
+  color: var(--primary-color);
+  background-color: var(--primary-color);
 
   height: 5px;
   left: -10px;
@@ -19,7 +19,9 @@ const StyledGreenBorder = styled.hr`
   z-index: 1;
 `;
 
-const StyledWhiteBorder = styled.hr`
+const StyledBackgroundBorder = styled.hr`
+  color: var(--background-primary-color);
+  background-color: var(--background-primary-color);
   width: 100%;
   position: relative;
   height: 1px;
@@ -63,9 +65,9 @@ export const OverlayHeader = ({ subtitle, title }: { title: string; subtitle: st
 
       <StyledSubTitle>
         {subtitle}
-        <StyledGreenBorder />
+        <StyledPrimaryBorder />
       </StyledSubTitle>
-      <StyledWhiteBorder />
+      <StyledBackgroundBorder />
     </>
   );
 };

ts/components/leftpane/overlay/OverlayMessageRequest.tsx

@@ -21,6 +21,39 @@ import {
 } from '../../../state/ducks/conversations';
 import { updateConfirmModal } from '../../../state/ducks/modalDialog';
 
+const MessageRequestListPlaceholder = styled.div`
+  color: var(--conversation-tab-text-color);
+  margin-bottom: auto;
+`;
+
+const MessageRequestListContainer = styled.div`
+  width: 100%;
+  overflow-y: auto;
+  border: var(--border-color);
+  margin-bottom: auto;
+`;
+
+/**
+ * A request needs to be be unapproved and not blocked to be valid.
+ * @returns List of message request items
+ */
+const MessageRequestList = () => {
+  const conversationRequests = useSelector(getConversationRequests);
+  return (
+    <MessageRequestListContainer>
+      {conversationRequests.map(conversation => {
+        return (
+          <MemoConversationListItemWithDetails
+            key={conversation.id}
+            isMessageRequest={true}
+            {...conversation}
+          />
+        );
+      })}
+    </MessageRequestListContainer>
+  );
+};
+
 export const OverlayMessageRequest = () => {
   useKey('Escape', closeOverlay);
   const dispatch = useDispatch();
@@ -116,36 +149,3 @@ export const OverlayMessageRequest = () => {
     </div>
   );
 };
-
-const MessageRequestListPlaceholder = styled.div`
-  color: var(--color-text);
-  margin-bottom: auto;
-`;
-
-const MessageRequestListContainer = styled.div`
-  width: 100%;
-  overflow-y: auto;
-  border: var(--border-session);
-  margin-bottom: auto;
-`;
-
-/**
- * A request needs to be be unapproved and not blocked to be valid.
- * @returns List of message request items
- */
-const MessageRequestList = () => {
-  const conversationRequests = useSelector(getConversationRequests);
-  return (
-    <MessageRequestListContainer>
-      {conversationRequests.map(conversation => {
-        return (
-          <MemoConversationListItemWithDetails
-            key={conversation.id}
-            isMessageRequest={true}
-            {...conversation}
-          />
-        );
-      })}
-    </MessageRequestListContainer>
-  );
-};

ts/themes/SessionTheme.tsx

@@ -4,7 +4,7 @@ import { createGlobalStyle } from 'styled-components';
 import { hexColorToRGB } from '../util/hexColorToRGB';
 import { COLORS, THEMES } from './colors';
 
-const whiteColor = '#ffffff';
+export const whiteColor = '#ffffff';
 const whiteColorRGB = '255, 255, 255'; // we need rgb values if we want css variables within rgba
 const blackColor = '#000000';
 const blackColorRGB = '0, 0, 0'; // we need rgb values if we want css variables within rgba
@@ -456,13 +456,13 @@ export const SessionGlobalStyles = createGlobalStyle`
 
     /* New Theme Variables */
     /* Colors */
-    --green-color: ${COLORS.PRIMARY.GREEN},
-    --blue-color: ${COLORS.PRIMARY.BLUE},
-    --yellow-color: ${COLORS.PRIMARY.YELLOW},
-    --pink-color: ${COLORS.PRIMARY.PINK},
-    --purple-color: ${COLORS.PRIMARY.PURPLE},
-    --orange-color: ${COLORS.PRIMARY.ORANGE},
-    --red-color: ${COLORS.PRIMARY.RED},
+    --green-color: ${COLORS.PRIMARY.GREEN};
+    --blue-color: ${COLORS.PRIMARY.BLUE};
+    --yellow-color: ${COLORS.PRIMARY.YELLOW};
+    --pink-color: ${COLORS.PRIMARY.PINK};
+    --purple-color: ${COLORS.PRIMARY.PURPLE};
+    --orange-color: ${COLORS.PRIMARY.ORANGE};
+    --red-color: ${COLORS.PRIMARY.RED};
     /* TODO Theming this should be overridable */
     --primary-color: ${THEMES.CLASSIC_LIGHT.PRIMARY};
     --danger-color: ${COLORS.DANGER.LIGHT};
@@ -540,7 +540,7 @@ export const SessionGlobalStyles = createGlobalStyle`
 
     /* TODO Theming Consolidate with code */
     /* Conversation Tab */
-    /* This is also user for Overlay Tabs, Contact Rows, Convesation List Items, Message Search Results, Session Search Input?, Message Requests Banner etc. */
+    /* This is also user for Overlay Tabs, Contact Rows, Convesation List Items, Message Search Results, Session Search Input?, Message Requests Banner, Member List Item 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};
@@ -599,6 +599,8 @@ export const SessionGlobalStyles = createGlobalStyle`
     /* NOTE only used for + icon */
     --emoji-reaction-bar-icon-background-color: var(--background-primary-color);
     --emoji-reaction-bar-icon-color: var(--text-primary-color);
+
+    /* TODO Theming - Should Pills have their own colors? */
   };
 `;