feat: added sun icon for light color mode

renamed SectionType Moon to ColorMode

ts/components/icon/Icons.tsx

@@ -52,6 +52,7 @@ export type SessionIconType =
   | 'search'
   | 'shield'
   | 'star'
+  | 'sun'
   | 'stopwatch'
   | 'qr'
   | 'users'
@@ -404,6 +405,12 @@ export const icons = {
     viewBox: '0 0 512 512',
     ratio: 1,
   },
+  sun: {
+    path:
+      'M16.6209 7.62069C11.8081 7.62069 7.89156 11.5372 7.89156 16.35C7.89156 21.1628 11.8081 25.0793 16.6209 25.0793C21.4337 25.0793 25.3502 21.1628 25.3502 16.35C25.3502 11.5372 21.4337 7.62069 16.6209 7.62069ZM16.6209 22.5852C13.1768 22.5852 10.3856 19.794 10.3856 16.35C10.3856 12.906 13.1768 10.1148 16.6209 10.1148C20.0649 10.1148 22.8561 12.906 22.8561 16.35C22.8561 19.794 20.0649 22.5852 16.6209 22.5852ZM16.6209 5.1266C17.3093 5.1266 17.8679 4.568 17.8679 3.87956V1.38547C17.8679 0.697025 17.3093 0.138428 16.6209 0.138428C15.9324 0.138428 15.3738 0.697025 15.3738 1.38547V3.87956C15.3738 4.568 15.9324 5.1266 16.6209 5.1266ZM16.6209 27.5734C15.9324 27.5734 15.3738 28.132 15.3738 28.8204V31.3145C15.3738 32.0029 15.9324 32.5615 16.6209 32.5615C17.3093 32.5615 17.8679 32.0029 17.8679 31.3145V28.8204C17.8679 28.132 17.3093 27.5734 16.6209 27.5734ZM26.3196 8.4131L28.083 6.64971C28.5701 6.16258 28.5701 5.37344 28.083 4.88631C27.5959 4.39918 26.8067 4.39918 26.3196 4.88631L24.5562 6.64971C24.0691 7.13683 24.0691 7.92598 24.5562 8.4131C25.0433 8.90023 25.8325 8.90023 26.3196 8.4131ZM6.92214 24.2869L5.15874 26.0503C4.67162 26.5374 4.67162 27.3265 5.15874 27.8137C5.64587 28.3008 6.43501 28.3008 6.92214 27.8137L8.68554 26.0503C9.17266 25.5616 9.17266 24.774 8.68554 24.2869C8.19849 23.7997 7.40927 23.7981 6.92214 24.2869ZM5.39747 16.35C5.39747 15.6615 4.83888 15.1029 4.15043 15.1029H1.65634C0.967899 15.1029 0.409302 15.6615 0.409302 16.35C0.409302 17.0384 0.967899 17.597 1.65634 17.597H4.15043C4.83888 17.597 5.39747 17.0384 5.39747 16.35ZM31.5854 15.1029H29.0913C28.4028 15.1029 27.8442 15.6615 27.8442 16.35C27.8442 17.0384 28.4028 17.597 29.0913 17.597H31.5854C32.2738 17.597 32.8324 17.0384 32.8324 16.35C32.8324 15.6615 32.2738 15.1029 31.5854 15.1029ZM6.9205 8.4131C7.40771 8.90023 8.19685 8.90023 8.6839 8.4131C9.1711 7.92598 9.1711 7.13683 8.6839 6.64971L6.9205 4.88631C6.43338 4.39918 5.64431 4.39918 5.15711 4.88631C4.66998 5.37344 4.66998 6.16258 5.15711 6.64971L6.9205 8.4131ZM26.3212 24.2852C25.8325 23.7981 25.0449 23.7981 24.5578 24.2852C24.0706 24.7724 24.0691 25.5615 24.5578 26.0486L26.3212 27.812C26.8083 28.2992 27.5974 28.2992 28.0845 27.812C28.5717 27.3249 28.5717 26.5358 28.0845 26.0486L26.3212 24.2852Z',
+    viewBox: '0 0 33 33',
+    ratio: 1,
+  },
   qr: {
     path:
       'M0 0v170h170V0H0zm130 130H40V40h90v90z M65 65h40v40H65zM342 0v170h170V0H342zm130 130h-90V40h90v90z M407 65h40v40h-40zM0 342v170h170V342H0zm130 130H40v-90h90v90z M65 407h40v40H65zM40 197h40v40H40zM120 277v-40H80v40h39v40h40v-40zM280 77h40v40h-40zM200 40h40v77h-40zM240 0h40v40h-40zM240 117v40h-40v40h80v-80zM280 355v-39h-40v-79h-40v80h40v39h40v39h80v-40z M280 197h40v80h-40zM472 236v-39h-73v40h-39v40h40v39h112v-80h-40zm0 40h-72v-39h72v39zM472 355h40v80h-40zM320 277h40v40h-40zM360 395h40v40h-40zM400 355h40v40h-40zM400 435v77h40v-37h32v-40zM200 356h40v76h-40zM320 472v-40h-80v80h40v-40h39v40h40v-40zM120 197h80v40h-80zM0 237h40v80H0z',

ts/components/leftpane/ActionsPanel.tsx

@@ -51,6 +51,7 @@ import { UserUtils } from '../../session/utils';
 import { getLatestReleaseFromFileServer } from '../../session/apis/file_server_api/FileServerApi';
 import { switchThemeTo } from '../../session/utils/Theme';
 import { ThemeStateType } from '../../themes/colors';
+import { getTheme } from '../../state/selectors/theme';
 
 const Section = (props: { type: SectionType }) => {
   const ourNumber = useSelector(getOurNumber);
@@ -58,6 +59,7 @@ const Section = (props: { type: SectionType }) => {
   const dispatch = useDispatch();
   const { type } = props;
 
+  const theme = useSelector(getTheme);
   const focusedSection = useSelector(getFocusedSection);
   const isSelected = focusedSection === props.type;
 
@@ -65,7 +67,7 @@ const Section = (props: { type: SectionType }) => {
     /* tslint:disable:no-void-expression */
     if (type === SectionType.Profile) {
       dispatch(editProfileModal({}));
-    } else if (type === SectionType.Moon) {
+    } else if (type === SectionType.ColorMode) {
       const currentTheme = String(window.Events.getThemeSetting());
       const newTheme = (currentTheme.includes('light')
         ? currentTheme.replace('light', 'dark')
@@ -128,11 +130,12 @@ const Section = (props: { type: SectionType }) => {
           id={'onion-path-indicator-led-id'}
         />
       );
+    case SectionType.ColorMode:
     default:
       return (
         <SessionIconButton
           iconSize="medium"
-          iconType={'moon'}
+          iconType={theme.includes('light') ? 'sun' : 'moon'}
           dataTestId="theme-section"
           notificationCount={unreadToShow}
           onClick={handleClick}
@@ -297,7 +300,7 @@ export const ActionsPanel = () => {
         <SessionToastContainer />
 
         <Section type={SectionType.PathIndicator} />
-        <Section type={SectionType.Moon} />
+        <Section type={SectionType.ColorMode} />
       </LeftPaneSectionContainer>
     </>
   );

ts/session/utils/Theme.tsx

@@ -12,7 +12,6 @@ export async function switchThemeTo(theme: ThemeStateType, dispatch: Dispatch |
   switch (theme) {
     case 'classic-dark':
       switchHtmlToDarkTheme();
-      switchTheme(theme);
       newTheme = 'classic-dark';
       break;
     case 'classic-light':

ts/state/ducks/section.tsx

@@ -10,7 +10,7 @@ export enum SectionType {
   Profile,
   Message,
   Settings,
-  Moon,
+  ColorMode,
   PathIndicator,
 }
 

ts/themes/switchTheme.ts

@@ -677,10 +677,7 @@ function loadClassicDark() {
     'var(--text-primary-color)'
   );
 
-  document.documentElement.style.setProperty(
-    '--session-logo-text-light-filter',
-    'brightness(0) saturate(100%)'
-  );
+  document.documentElement.style.setProperty('--session-logo-text-light-filter', 'none');
   document.documentElement.style.setProperty('--session-logo-text-dark-filter', 'none');
   document.documentElement.style.setProperty(
     '--session-logo-text-current-filter',