feat: consolidated theme switching code

stylesheets/_session_left_pane.scss

@@ -12,7 +12,8 @@ $session-compose-margin: 20px;
 
   &-list-item {
     background: var(--conversation-tab-background-color);
-    transition: var(--default-duration);
+    // TODO Theming, make everything have the default duration for transitioning colors
+    // transition: var(--default-duration);
 
     &:hover {
       background: var(--conversation-tab-background-hover-color);

ts/components/AboutView.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import styled from 'styled-components';
-import { switchThemeTo } from '../session/utils/Theme';
+import { switchThemeTo } from '../themes/switchTheme';
 import { SessionTheme } from '../themes/SessionTheme';
 
 const StyledContent = styled.div`

ts/components/DebugLogView.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
-import { switchThemeTo } from '../session/utils/Theme';
+import { switchThemeTo } from '../themes/switchTheme';
 import { SessionTheme } from '../themes/SessionTheme';
 import { fetch } from '../util/logging';
 import { SessionButton, SessionButtonType } from './basic/SessionButton';

ts/components/SessionPasswordPrompt.tsx

@@ -5,7 +5,7 @@ import autoBind from 'auto-bind';
 import { SessionButton, SessionButtonColor, SessionButtonType } from './basic/SessionButton';
 import { SessionSpinner } from './basic/SessionSpinner';
 import { SessionTheme } from '../themes/SessionTheme';
-import { switchThemeTo } from '../session/utils/Theme';
+import { switchThemeTo } from '../themes/switchTheme';
 import styled from 'styled-components';
 import { ToastUtils } from '../session/utils';
 import { isString } from 'lodash';

ts/session/utils/Theme.tsx

@@ -1,45 +0,0 @@
-import { Dispatch } from 'redux';
-import { applyTheme } from '../../state/ducks/theme';
-import { ThemeStateType } from '../../themes/constants/colors';
-import { switchHtmlToDarkTheme, switchHtmlToLightTheme } from '../../themes/SessionTheme';
-import { switchTheme } from '../../themes/switchTheme';
-
-export async function switchThemeTo(
-  theme: ThemeStateType,
-  dispatch: Dispatch | null,
-  mainWindow: boolean = true
-) {
-  if (mainWindow) {
-    await window.setTheme(theme);
-  }
-
-  let newTheme: ThemeStateType | null = null;
-
-  switch (theme) {
-    case 'classic-dark':
-      switchHtmlToDarkTheme();
-      newTheme = 'classic-dark';
-      break;
-    case 'classic-light':
-      switchHtmlToLightTheme();
-      newTheme = 'classic-light';
-      break;
-    case 'ocean-dark':
-      switchHtmlToDarkTheme();
-      newTheme = 'ocean-dark';
-      break;
-    case 'ocean-light':
-      switchHtmlToLightTheme();
-      newTheme = 'ocean-light';
-      break;
-    default:
-      window.log.warn('Unsupported theme: ', theme);
-  }
-
-  if (newTheme) {
-    switchTheme(newTheme, mainWindow);
-    if (dispatch) {
-      dispatch?.(applyTheme(newTheme));
-    }
-  }
-}

ts/themes/switchTheme.tsx

@@ -1,23 +1,47 @@
+import { Dispatch } from 'redux';
+import { applyTheme } from '../state/ducks/theme';
 import { classicDark, classicLight, oceanDark, oceanLight } from '.';
 import { ThemeStateType } from './constants/colors';
+import { switchHtmlToDarkTheme, switchHtmlToLightTheme } from './SessionTheme';
 import { loadThemeColors } from './variableColors';
 
-export async function switchTheme(theme: ThemeStateType) {
+export async function switchThemeTo(
+  theme: ThemeStateType,
+  dispatch: Dispatch | null,
+  mainWindow: boolean = true
+) {
+  if (mainWindow) {
+    await window.setTheme(theme);
+  }
+
+  let newTheme: ThemeStateType | null = null;
+
   switch (theme) {
-    case 'classic-light':
-      loadThemeColors(classicLight);
-      break;
     case 'classic-dark':
+      switchHtmlToDarkTheme();
       loadThemeColors(classicDark);
+      newTheme = 'classic-dark';
       break;
-    case 'ocean-light':
-      loadThemeColors(oceanLight);
+    case 'classic-light':
+      switchHtmlToLightTheme();
+      loadThemeColors(classicLight);
+      newTheme = 'classic-light';
       break;
     case 'ocean-dark':
+      switchHtmlToDarkTheme();
       loadThemeColors(oceanDark);
+      newTheme = 'ocean-dark';
       break;
-    default:
-      window.log.warn('Unsupported theme:', theme);
+    case 'ocean-light':
+      switchHtmlToLightTheme();
+      loadThemeColors(oceanLight);
+      newTheme = 'ocean-light';
       break;
+    default:
+      window.log.warn('Unsupported theme: ', theme);
+  }
+
+  if (dispatch && newTheme) {
+    dispatch(applyTheme(newTheme));
   }
 }