diff --git a/stylesheets/_session_left_pane.scss b/stylesheets/_session_left_pane.scss index 9f7ef513b..6a42b5d9d 100644 --- a/stylesheets/_session_left_pane.scss +++ b/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); diff --git a/ts/components/AboutView.tsx b/ts/components/AboutView.tsx index d31d5c94f..6d413c31a 100644 --- a/ts/components/AboutView.tsx +++ b/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` diff --git a/ts/components/DebugLogView.tsx b/ts/components/DebugLogView.tsx index 128f9864d..dd5110308 100644 --- a/ts/components/DebugLogView.tsx +++ b/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'; diff --git a/ts/components/SessionPasswordPrompt.tsx b/ts/components/SessionPasswordPrompt.tsx index c0c48d08f..bc45e88e6 100644 --- a/ts/components/SessionPasswordPrompt.tsx +++ b/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'; diff --git a/ts/session/utils/Theme.tsx b/ts/session/utils/Theme.tsx deleted file mode 100644 index 2c93f2955..000000000 --- a/ts/session/utils/Theme.tsx +++ /dev/null @@ -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)); - } - } -} diff --git a/ts/themes/switchTheme.tsx b/ts/themes/switchTheme.tsx index 21c5daee9..64cbfce66 100644 --- a/ts/themes/switchTheme.tsx +++ b/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)); } }