fix: address PR reviews

stylesheets/_session_constants.scss

@@ -204,7 +204,6 @@ $session-subtle-factor: 0.6;
 
 // Default Components
 $main-view-header-height: 63px;
-$session-left-pane-width: 300px;
 
 // Various Components
 $session-modal-size-sm: 220px;

stylesheets/_session_left_pane.scss

@@ -71,7 +71,7 @@ $session-compose-margin: 20px;
 }
 
 .module-left-pane {
-  width: $session-left-pane-width;
+  width: var(--left-pane-list-width);
   position: relative;
   height: 100vh;
   flex-shrink: 0;

stylesheets/_session_signin.scss

@@ -162,7 +162,7 @@
       font-weight: bold;
       text-decoration: none;
 
-      color: rgba(var(--color-text), 0.6);
+      color: rgba(black, 0.6);
       transition: $session-transition-duration;
 
       &:visited &:link {
@@ -179,7 +179,7 @@
     padding-top: 0;
     padding-bottom: 20px;
 
-    color: rgba(var(--color-text), 0.6);
+    color: rgba(black, 0.6);
     text-align: center;
     font-size: 12px;
     line-height: 20px;

ts/components/MemberListItem.tsx

@@ -24,26 +24,23 @@ const StyledSessionMemberItem = styled.button<{
   selected?: boolean;
 }>`
   cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   flex-shrink: 0;
   flex-grow: 1;
   font-family: var(--font-default);
   padding: 0px var(--margins-sm);
   height: ${props => (props.inMentions ? '40px' : '50px')};
-  display: flex;
-
-  align-items: center;
 
-  justify-content: space-between;
   transition: var(--default-duration);
-
   opacity: ${props => (props.zombie ? 0.5 : 1)};
+  background-color: ${props =>
+    props.selected && 'var(--color-conversation-item-selected) !important'};
 
   :not(:last-child) {
     border-bottom: var(--border-session);
   }
-
-  background-color: ${props =>
-    props.selected ? 'var(--color-conversation-item-selected) !important' : null};
 `;
 
 const StyledInfo = styled.div`
@@ -110,7 +107,6 @@ export const MemberListItem = (props: {
     >
       <StyledInfo>
         <AvatarItem memberPubkey={pubkey} isAdmin={isAdmin || false} />
-
         <StyledName>{memberName}</StyledName>
       </StyledInfo>
 

ts/components/basic/PillContainer.tsx

@@ -11,7 +11,6 @@ type PillContainerProps = {
 
 export const StyledPillContainerHoverable = styled.div<PillContainerProps>`
   background: none;
-
   position: relative;
   flex-direction: 'row';
   flex-shrink: 0;

ts/components/leftpane/LeftPane.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { useSelector } from 'react-redux';
+import { CSSProperties } from 'styled-components';
 import { SectionType } from '../../state/ducks/section';
 import { SessionTheme } from '../../state/ducks/SessionTheme';
 import { getLeftPaneLists } from '../../state/selectors/conversations';
@@ -45,13 +46,18 @@ const LeftPaneSection = () => {
   return null;
 };
 
+export const leftPaneListWidth = 300;
+
 export const LeftPane = () => {
   return (
     <SessionTheme>
       <div className="module-left-pane-session">
         <ActionsPanel />
 
-        <div className="module-left-pane">
+        <div
+          className="module-left-pane"
+          style={{ '--left-pane-list-width': `${leftPaneListWidth}px` } as CSSProperties}
+        >
           <LeftPaneSection />
         </div>
       </div>

ts/components/leftpane/overlay/OverlayMessage.tsx

@@ -53,7 +53,7 @@ export const OverlayMessage = () => {
       ConversationTypeEnum.PRIVATE
     );
 
-    // we now want to show a conversation we just started on the leftpane, even if we did not sent a message to it yet
+    // we now want to show a conversation we just started on the leftpane, even if we did not send a message to it yet
     if (!convo.isActive() || !convo.isApproved()) {
       convo.set({ active_at: Date.now(), isApproved: true });
       await convo.commit();
@@ -122,7 +122,7 @@ export const OverlayMessage = () => {
         justifyContent="space-between"
         alignItems="center"
         width="100%"
-        padding="0 var(--margins-md)  " // YourSessionIDSelectable already has a left margin of 15px
+        padding="0 var(--margins-md)" // YourSessionIDSelectable already has a left margin of 15px
       >
         <YourSessionIDSelectable />
         <SessionIconButton iconSize="small" iconType="copy" onClick={copyOurSessionID} />

ts/components/leftpane/overlay/choose-action/ContactsListWithBreaks.tsx

@@ -8,6 +8,7 @@ import {
   getDirectContactsByName,
   getDirectContactsCount,
 } from '../../../../state/selectors/conversations';
+import { leftPaneListWidth } from '../../LeftPane';
 import { StyledLeftPaneList } from '../../LeftPaneList';
 import { ContactRow, ContactRowBreak } from './ContactRow';
 import { StyledChooseActionTitle } from './OverlayChooseAction';
@@ -97,7 +98,7 @@ const ContactListItemSection = () => {
               }
               directContactsByNameWithBreaks={directContactsByNameWithBreaks}
               rowRenderer={renderRow}
-              width={300} // the same as session-left-pane-width
+              width={leftPaneListWidth}
               autoHeight={false}
             />
           );