disable transition for background of leftpane (for app initial load)

stylesheets/_index.scss

@@ -1,6 +1,7 @@
 .inbox {
   height: 100%;
   overflow: hidden;
+  transition: none;
 }
 
 .inbox.index {

stylesheets/_modules.scss

@@ -606,10 +606,6 @@
   padding-inline-end: 5px;
 }
 
-.module-message-detail__unix-timestamp {
-  color: subtle(var(--color-text));
-}
-
 .module-message-detail__delete-button-container {
   text-align: center;
   margin-top: 10px;

stylesheets/_session_constants.scss

@@ -205,7 +205,6 @@ $session-margin-lg: 20px;
 
 // Animations
 $session-transition-duration: 0.25s;
-$session-fadein-duration: 0.1s;
 
 @keyframes fadein {
   from {

stylesheets/_session_left_pane.scss

@@ -2,8 +2,7 @@ $session-compose-margin: 20px;
 
 .gutter {
   width: 380px !important;
-  transition: $session-transition-duration;
-
+  transition: none;
   background: var(--color-cell-background);
 }
 
@@ -261,7 +260,7 @@ $session-compose-margin: 20px;
   display: flex;
   flex-direction: column;
   flex-grow: 1;
-  transition: $session-transition-duration;
+  transition: none;
 
   background: var(--color-conversation-list);
 

ts/components/ConversationListItem.tsx

@@ -84,7 +84,7 @@ const HeaderItem = (props: {
 
   const pinIcon =
     isMessagesSection && isPinned ? (
-      <SessionIcon iconType="pin" iconColor={'var(--text-color-subtle)'} iconSize={'tiny'} />
+      <SessionIcon iconType="pin" iconColor={'var(--color-text-subtle)'} iconSize={'tiny'} />
     ) : null;
 
   const NotificationSettingIcon = () => {
@@ -97,11 +97,11 @@ const HeaderItem = (props: {
         return null;
       case 'disabled':
         return (
-          <SessionIcon iconType="mute" iconColor={'var(--text-color-subtle)'} iconSize={'tiny'} />
+          <SessionIcon iconType="mute" iconColor={'var(--color-text-subtle)'} iconSize={'tiny'} />
         );
       case 'mentions_only':
         return (
-          <SessionIcon iconType="bell" iconColor={'var(--text-color-subtle)'} iconSize={'tiny'} />
+          <SessionIcon iconType="bell" iconColor={'var(--color-text-subtle)'} iconSize={'tiny'} />
         );
       default:
         return null;

ts/components/Lightbox.tsx

@@ -270,8 +270,6 @@ export const LightboxObject = ({
 export const Lightbox = (props: Props) => {
   const videoRef = useRef<any>(null);
   const containerRef = useRef<HTMLDivElement>(null);
-  // there is no theme in use on the lightbox
-  // const theme = darkTheme;
   const dispatch = useDispatch();
   const { caption, contentType, objectURL, onNext, onPrevious, onSave } = props;
 

ts/components/basic/Text.tsx

@@ -15,7 +15,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-color-subtle)' : 'var(--color-text-color)')};
+  color: ${props => (props.subtle ? 'var(--color-text-subtle)' : 'var(--color-text)')};
 `;
 
 export const Text = (props: TextProps) => {

ts/components/conversation/ExpireTimer.tsx

@@ -55,7 +55,7 @@ export const ExpireTimer = (props: Props) => {
     return null;
   }
 
-  const expireTimerColor = 'var(--color-text-color)';
+  const expireTimerColor = 'var(--color-text)';
 
   if (timeLeft <= 60) {
     return <ExpireTimerCount color={expireTimerColor}>{timeLeft}</ExpireTimerCount>;

ts/components/conversation/H5AudioPlayer.tsx

@@ -104,18 +104,10 @@ export const AudioPlayerWithEncryptedFile = (props: {
       ]}
       customIcons={{
         play: (
-          <SessionIcon
-            iconType="play"
-            iconSize={'small'}
-            iconColor={'var(--color-text-color-subtle)'}
-          />
+          <SessionIcon iconType="play" iconSize={'small'} iconColor={'var(--color-text-subtle)'} />
         ),
         pause: (
-          <SessionIcon
-            iconType="pause"
-            iconSize={'small'}
-            iconColor={'var(--color-text-color-subtle)'}
-          />
+          <SessionIcon iconType="pause" iconSize={'small'} iconColor={'var(--color-text-subtle)'} />
         ),
       }}
     />

ts/components/conversation/MessageDetail.tsx

@@ -124,16 +124,14 @@ export const MessageDetail = () => {
             <tr>
               <td className="module-message-detail__label">{i18n('sent')}</td>
               <td>
-                {moment(sentAt).format('LLLL')}{' '}
-                <span className="module-message-detail__unix-timestamp">({sentAt})</span>
+                {moment(sentAt).format('LLLL')} <span>({sentAt})</span>
               </td>
             </tr>
             {receivedAt ? (
               <tr>
                 <td className="module-message-detail__label">{i18n('received')}</td>
                 <td>
-                  {moment(receivedAt).format('LLLL')}{' '}
-                  <span className="module-message-detail__unix-timestamp">({receivedAt})</span>
+                  {moment(receivedAt).format('LLLL')} <span>({receivedAt})</span>
                 </td>
               </tr>
             ) : null}

ts/state/ducks/SessionTheme.tsx

@@ -137,6 +137,7 @@ export const switchHtmlToDarkTheme = () => {
   document.documentElement.style.setProperty('--color-background-primary', darkBackgroundPrimary);
   document.documentElement.style.setProperty('--color-button-green', darkButtonGreen);
   document.documentElement.style.setProperty('--color-modal-background', darkModalBackground);
+  document.documentElement.style.setProperty('--border-session', darkColorSessionBorder);
 };
 
 // LIGHT COLORS
@@ -151,8 +152,8 @@ const lightColorComposeViewBg = '#efefef';
 const lightColorSentMessageBg = accentLightTheme;
 const lightColorSentMessageText = white;
 const lightColorClickableHovered = '#dfdfdf';
-const lightColorSessionBorder = `1px solid ${borderLightThemeColor}`;
 const lightColorSessionBorderColor = borderLightThemeColor;
+const lightColorSessionBorder = `1px solid ${lightColorSessionBorderColor}`;
 const lightColorRecoveryPhraseBannerBg = white;
 const lightColorPillDivider = `${black}1A`;
 const lightColorLastSeenIndicator = '#62656a';
@@ -274,9 +275,10 @@ export const switchHtmlToLightTheme = () => {
   document.documentElement.style.setProperty('--color-background-primary', lightBackgroundPrimary);
   document.documentElement.style.setProperty('--color-button-green', lightButtonGreen);
   document.documentElement.style.setProperty('--color-modal-background', lightModalBackground);
+  document.documentElement.style.setProperty('--border-session', lightColorSessionBorder);
 };
 
-// default to dark theme
+// default to light theme
 export const SessionGlobalStyles = createGlobalStyle`
   html {
     /* FONTS */
@@ -296,50 +298,50 @@ export const SessionGlobalStyles = createGlobalStyle`
     /* ANIMATIONS */
     --default-duration: '0.25s';
     /* FILTERS */
-    --filter-session-text: ${darkFilterSessionText};
+    --filter-session-text: ${lightFilterSessionText};
     /* BORDERS */
-    --border-unread: ${darkUnreadBorder};
-    --border-session:  ${darkColorSessionBorder};
+    --border-unread: ${lightUnreadBorder};
+    --border-session:  ${lightColorSessionBorder};
 
     /* COLORS NOT CHANGING BETWEEN THEMES */
     --color-warning:  ${warning};
     --color-destructive:  ${destructive};
     /* COLORS */
-    --color-accent: ${darkColorAccent};
-    --color-accent-button:  ${darkColorAccentButton};
+    --color-accent: ${lightColorAccent};
+    --color-accent-button:  ${lightColorAccentButton};
 
-    --color-text:  ${darkColorText};
-    --color-text-subtle:  ${darkColorTextSubtle};
-    --color-text-accent:  ${darkColorTextAccent};
-    --color-text-opposite:  ${darkColorTextOpposite};
+    --color-text:  ${lightColorText};
+    --color-text-subtle:  ${lightColorTextSubtle};
+    --color-text-accent:  ${lightColorTextAccent};
+    --color-text-opposite:  ${lightColorTextOpposite};
 
-    --color-session-shadow: ${darkColorSessionShadow};
-    --color-compose-view-button-background: ${darkColorComposeViewBg};
-    --color-sent-message-background:  ${darkColorSentMessageBg};
-    --color-sent-message-text:  ${darkColorSentMessageText};
-    --color-clickable-hovered: ${darkColorClickableHovered};
-    --color-session-border:  ${darkColorSessionBorderColor};
-    --color-recovery-phrase-banner-background: ${darkColorRecoveryPhraseBannerBg};
-    --color-pill-divider:  ${darkColorPillDivider};
-    --color-last-seen-indicator: ${darkColorLastSeenIndicator};
-    --color-last-seen-indicator-text:  ${darkColorLastSeenIndicatorText};
-    --color-quote-bottom-bar-background:  ${darkColorQuoteBottomBarBg};
-    --color-cell-background: ${darkColorCellBackground};
-    --color-pill-divider-text:  ${darkColorPillDividerText};
-    --color-input-background: ${darkInputBackground};
-    --color-scroll-bar-thumb: ${darkScrollbarThumb};
-    --color-scroll-bar-track: ${darkScrollbarTrack};
-    --color-fake-chat-bubble-background: ${darkFakeChatBubbleBg};
-    --color-inbox-background: ${darkInboxBackground};
-    --color-left-pane-overlay-background: ${darkLeftPaneOverlayBg};
-    --color-conversation-item-selected: ${darkConversationItemSelected};
-    --color-conversation-item-has-unread: ${darkConversationItemHasUnread};
-    --color-conversation-list: ${darkConversationList};
-    --color-text-highlight: ${darkTextHighlight};
-    --color-foreground-primary: ${darkForegroundPrimary};
-    --color-background-primary: ${darkBackgroundPrimary};
-    --color-button-green: ${darkButtonGreen};
-    --color-modal-background: ${darkModalBackground};
+    --color-session-shadow: ${lightColorSessionShadow};
+    --color-compose-view-button-background: ${lightColorComposeViewBg};
+    --color-sent-message-background:  ${lightColorSentMessageBg};
+    --color-sent-message-text:  ${lightColorSentMessageText};
+    --color-clickable-hovered: ${lightColorClickableHovered};
+    --color-session-border:  ${lightColorSessionBorderColor};
+    --color-recovery-phrase-banner-background: ${lightColorRecoveryPhraseBannerBg};
+    --color-pill-divider:  ${lightColorPillDivider};
+    --color-last-seen-indicator: ${lightColorLastSeenIndicator};
+    --color-last-seen-indicator-text:  ${lightColorLastSeenIndicatorText};
+    --color-quote-bottom-bar-background:  ${lightColorQuoteBottomBarBg};
+    --color-cell-background: ${lightColorCellBackground};
+    --color-pill-divider-text:  ${lightColorPillDividerText};
+    --color-input-background: ${lightInputBackground};
+    --color-scroll-bar-thumb: ${lightScrollbarThumb};
+    --color-scroll-bar-track: ${lightScrollbarTrack};
+    --color-fake-chat-bubble-background: ${lightFakeChatBubbleBg};
+    --color-inbox-background: ${lightInboxBackground};
+    --color-left-pane-overlay-background: ${lightLeftPaneOverlayBg};
+    --color-conversation-item-selected: ${lightConversationItemSelected};
+    --color-conversation-item-has-unread: ${lightConversationItemHasUnread};
+    --color-conversation-list: ${lightConversationList};
+    --color-text-highlight: ${lightTextHighlight};
+    --color-foreground-primary: ${lightForegroundPrimary};
+    --color-background-primary: ${lightBackgroundPrimary};
+    --color-button-green: ${lightButtonGreen};
+    --color-modal-background: ${lightModalBackground};
 
 
   };