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,6 +145,7 @@ export const SessionInboxView = () => {
     <div className="inbox index">
       <Provider store={window.inboxStore}>
         <PersistGate loading={null} persistor={persistor}>
+          <SessionTheme>
             <SomeDeviceOutdatedSyncingNotice />
             <AnimatePresence>
               <Flex container={true} height="0" flexShrink={100} flexGrow={1}>
@@ -153,6 +155,7 @@ export const SessionInboxView = () => {
                 <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,7 +57,6 @@ const CallContainer = () => {
 
 export const LeftPane = () => {
   return (
-    <SessionTheme>
     <div className="module-left-pane-session">
       <ModalContainer />
       <CallContainer />
@@ -69,6 +67,5 @@ export const LeftPane = () => {
         <LeftPaneSection />
       </StyledLeftPane>
     </div>
-    </SessionTheme>
   );
 };

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 },