feat: updated styled components and typings

cleaned up some extra SessionTheme declarations

package.json

@@ -46,7 +46,7 @@
     "lint-full": "yarn format-full && eslint .",
     "format-full": "prettier --list-different --write \"*.{css,js,json,scss,ts,tsx}\" \"./**/*.{css,js,json,scss,ts,tsx}\"",
     "start-prod-test": "cross-env NODE_ENV=production NODE_APP_INSTANCE=$MULTI electron .",
-    "test": "mocha  -r jsdom-global/register --recursive --exit --timeout 10000  \"./ts/test/**/*_test.js\"",
+    "test": "mocha",
     "build-release": "run-script-os",
     "build-release-non-linux": "yarn build-everything && cross-env SIGNAL_ENV=production electron-builder --config.extraMetadata.environment=production --publish=never --config.directories.output=release",
     "build-release:win32": "yarn build-release-non-linux",
@@ -130,7 +130,7 @@
     "rimraf": "2.6.2",
     "sanitize.css": "^12.0.1",
     "semver": "^7.5.4",
-    "styled-components": "5.1.1",
+    "styled-components": "^6.1.11",
     "uuid": "8.3.2",
     "webrtc-adapter": "^4.1.1"
   },
@@ -167,7 +167,7 @@
     "@types/rimraf": "2.0.2",
     "@types/semver": "5.5.0",
     "@types/sinon": "9.0.4",
-    "@types/styled-components": "5.1.1",
+    "@types/styled-components": "^5.1.34",
     "@types/uuid": "8.3.4",
     "@typescript-eslint/eslint-plugin": "7.1.0",
     "@typescript-eslint/parser": "7.1.0",

ts/components/SessionInboxView.tsx

@@ -35,6 +35,7 @@ import { SettingsKey } from '../data/settings-key';
 import { getSettingsInitialState, updateAllOnStorageReady } from '../state/ducks/settings';
 import { initialSogsRoomInfoState } from '../state/ducks/sogsRoomInfo';
 import { useHasDeviceOutdatedSyncing } from '../state/selectors/settings';
+import { SessionTheme } from '../themes/SessionTheme';
 import { Storage } from '../util/storage';
 import { NoticeBanner } from './NoticeBanner';
 import { Flex } from './basic/Flex';
@@ -144,15 +145,17 @@ export const SessionInboxView = () => {
     <div className="inbox index">
       <Provider store={window.inboxStore}>
         <PersistGate loading={null} persistor={persistor}>
-          <SomeDeviceOutdatedSyncingNotice />
-          <AnimatePresence>
-            <Flex container={true} height="0" flexShrink={100} flexGrow={1}>
-              <StyledGutter>
-                <LeftPane />
-              </StyledGutter>
-              <SessionMainPanel />
-            </Flex>
-          </AnimatePresence>
+          <SessionTheme>
+            <SomeDeviceOutdatedSyncingNotice />
+            <AnimatePresence>
+              <Flex container={true} height="0" flexShrink={100} flexGrow={1}>
+                <StyledGutter>
+                  <LeftPane />
+                </StyledGutter>
+                <SessionMainPanel />
+              </Flex>
+            </AnimatePresence>
+          </SessionTheme>
         </PersistGate>
       </Provider>
     </div>

ts/components/conversation/SessionConversation.tsx

@@ -33,7 +33,6 @@ import {
 } from '../../state/ducks/conversations';
 import { updateConfirmModal } from '../../state/ducks/modalDialog';
 import { addStagedAttachmentsInConversation } from '../../state/ducks/stagedAttachments';
-import { SessionTheme } from '../../themes/SessionTheme';
 import { MIME } from '../../types';
 import { AttachmentTypeWithPath } from '../../types/Attachment';
 import {
@@ -256,7 +255,7 @@ export class SessionConversation extends Component<Props, State> {
         : window.i18n('someOfYourDeviceUseOutdatedVersion');
 
     return (
-      <SessionTheme>
+      <>
         <div className="conversation-header">
           <ConversationHeaderWithDetails />
           {selectedConversation?.hasOutdatedClient?.length ? (
@@ -312,7 +311,7 @@ export class SessionConversation extends Component<Props, State> {
             </StyledRightPanelContainer>
           </>
         )}
-      </SessionTheme>
+      </>
     );
   }
 

ts/components/leftpane/LeftPane.tsx

@@ -4,7 +4,6 @@ import { SectionType } from '../../state/ducks/section';
 import { getLeftPaneConversationIds } from '../../state/selectors/conversations';
 import { getHasSearchResults } from '../../state/selectors/search';
 import { getFocusedSection, getLeftOverlayMode } from '../../state/selectors/section';
-import { SessionTheme } from '../../themes/SessionTheme';
 import { SessionToastContainer } from '../SessionToastContainer';
 import { CallInFullScreenContainer } from '../calling/CallInFullScreenContainer';
 import { DraggableCallContainer } from '../calling/DraggableCallContainer';
@@ -58,17 +57,15 @@ const CallContainer = () => {
 
 export const LeftPane = () => {
   return (
-    <SessionTheme>
-      <div className="module-left-pane-session">
-        <ModalContainer />
-        <CallContainer />
-        <SessionToastContainer />
-        <ActionsPanel />
+    <div className="module-left-pane-session">
+      <ModalContainer />
+      <CallContainer />
+      <SessionToastContainer />
+      <ActionsPanel />
 
-        <StyledLeftPane className="module-left-pane">
-          <LeftPaneSection />
-        </StyledLeftPane>
-      </div>
-    </SessionTheme>
+      <StyledLeftPane className="module-left-pane">
+        <LeftPaneSection />
+      </StyledLeftPane>
+    </div>
   );
 };

ts/themes/constants/colors.tsx

@@ -96,6 +96,7 @@ export type PrimaryColorStateType =
 
 type PrimaryColorType = { id: PrimaryColorStateType; ariaLabel: string; color: string };
 
+// NOTE: Make sure order matches COLORS.PRIMARY
 export const getPrimaryColors = (): Array<PrimaryColorType> => [
   { id: 'green', ariaLabel: window.i18n('primaryColorGreen'), color: COLORS.PRIMARY.GREEN },
   { id: 'blue', ariaLabel: window.i18n('primaryColorBlue'), color: COLORS.PRIMARY.BLUE },