fix: resolved all outstanding theming todos

stylesheets/_modules.scss

@@ -968,8 +968,7 @@
 }
 
 // Module: Caption Editor
-// TODO Theming We don't seem to use this can we delete?'
-// TODO we will probably remove this and the related component.
+// NOTE This is currently not in use
 .module-caption-editor {
   background-color: rgba(0, 0, 0, 0.8);
   z-index: 20;
@@ -1139,7 +1138,6 @@
   outline: none;
 }
 
-// TODO Theming - Needs Improvement
 // Module H5AudioPlayer
 .module-message__container--outgoing {
   .rhap_container {

stylesheets/_session_left_pane.scss

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

stylesheets/_session_signin.scss

@@ -179,8 +179,7 @@
   &-description-long {
     padding-top: 0;
     padding-bottom: 20px;
-    // TODO Theming needs to be updated
-    color: rgba(var(--black-color), 0.6);
+    color: var(--text-secondary-color);
     text-align: center;
     font-size: 12px;
     line-height: 20px;

ts/components/avatar/Avatar.tsx

@@ -55,8 +55,7 @@ const CrownWrapper = styled.div`
   color: #f7c347;
   background: var(--background-primary-color);
   border-radius: 50%;
-  /* TODO Theming update? */
-  filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.3));
+  box-shadow: var(--drop-shadow);
 `;
 
 export const CrownIcon = () => {

ts/components/calling/InConversationCallContainer.tsx

@@ -34,7 +34,6 @@ const InConvoCallWindow = styled.div`
   padding: 1rem;
   display: flex;
 
-  /* TODO Theming - Update? */
   background-color: hsl(0, 0%, 15.7%);
 
   flex-shrink: 1;
@@ -69,9 +68,8 @@ const StyledCenteredLabel = styled.div`
   transform: translateX(-50%);
   height: min-content;
   white-space: nowrap;
-  /* TODO Theming - Update? */
   color: var(--white-color);
-  text-shadow: 0px 0px 8px white;
+  text-shadow: 0px 0px 8px var(--white-color);
   z-index: 5;
 `;
 

ts/components/conversation/ConversationRequestInfo.tsx

@@ -14,7 +14,6 @@ const ConversationRequestTextBottom = styled.div`
   padding: var(--margins-lg);
 `;
 
-// TODO Theming - Confirm this is correct?
 const ConversationRequestTextInner = styled.div`
   color: var(--text-secondary-color);
   text-align: center;

ts/components/dialog/SessionModal.tsx

@@ -27,7 +27,7 @@ interface State {
   isVisible: boolean;
 }
 
-// TODO Theming - Can we remove this.
+// NOTE This is currently unused.
 export class SessionModal extends React.PureComponent<Props, State> {
   public static defaultProps = {
     showExitIcon: true,

ts/components/icon/SessionNotificationCount.tsx

@@ -20,7 +20,6 @@ const StyledCountContainer = styled.div<{ shouldRender: boolean }>`
   font-family: var(--font-default);
   border-radius: 50%;
   font-weight: 700;
-  /* TODO Theming Update */
   background: var(--unread-messages-alert-background-color);
   transition: var(--default-duration);
   opacity: ${props => (props.shouldRender ? 1 : 0)};

ts/components/leftpane/MessageRequestsBanner.tsx

@@ -17,11 +17,8 @@ const StyledMessageRequestBanner = styled.div`
   padding: 8px 12px; // adjusting for unread border always being active
   align-items: center;
   cursor: pointer;
-  /* TODO Theming - Discuss with Connnor */
   background: var(--conversation-tab-background-color);
 
-  transition: var(--default-duration);
-
   &:hover {
     background: var(--conversation-tab-background-hover-color);
   }
@@ -30,7 +27,7 @@ const StyledMessageRequestBanner = styled.div`
 const StyledMessageRequestBannerHeader = styled.span`
   font-weight: bold;
   font-size: var(--font-size-md);
-  color: var(--conversation-tab-text-color);
+  color: var(--text-primary-color);
   padding-left: var(--margins-xs);
   margin-inline-start: 12px;
   line-height: 18px;
@@ -66,7 +63,6 @@ const StyledGridContainer = styled.div`
   align-items: center;
   border-radius: 50%;
   justify-content: center;
-  /* TODO Theming - Is this right? */
   background-color: var(--text-secondary-color);
 `;
 
@@ -79,7 +75,6 @@ export const CirclularIcon = (props: { iconType: SessionIconType; iconSize: Sess
         <SessionIcon
           iconType={iconType}
           iconSize={iconSize}
-          // TODO Theming - Is this right?
           iconColor="var(--background-primary-color)"
         />
       </StyledGridContainer>

ts/components/leftpane/conversation-list-item/HeaderItem.tsx

@@ -116,7 +116,6 @@ const MentionAtSymbol = styled.span`
   cursor: pointer;
 
   :hover {
-    /* TODO Theming, should this be changed? */
     filter: grayscale(0.7);
   }
 `;

ts/components/menu/MessageRequestBannerContextMenu.tsx

@@ -13,7 +13,6 @@ const MessageRequestBannerContextMenu = (props: PropsContextConversationItem) =>
   const { triggerId } = props;
 
   return (
-    // TODO Theming - Waiting on Session Components for correct colors
     <SessionContextMenuContainer>
       <Menu id={triggerId} animation={animation.fade}>
         <HideBannerMenuItem />

ts/interactions/conversationInteractions.ts

@@ -491,7 +491,6 @@ export async function showLinkSharingConfirmationModalDialog(e: any) {
     const alreadyDisplayedPopup =
       (await Data.getItemById(hasLinkPreviewPopupBeenDisplayed))?.value || false;
     if (!alreadyDisplayedPopup) {
-      // TODO Theming possibly update
       window.inboxStore?.dispatch(
         updateConfirmModal({
           shouldShowConfirm:

ts/types/Reaction.ts

@@ -58,7 +58,6 @@ export interface NativeEmojiData {
 export interface FixedPickerProps {
   autoFocus?: boolean | undefined;
   title?: string | undefined;
-  // TODO Theming - Add Ocean Colors
   theme?: 'auto' | 'light' | 'dark' | undefined;
   perLine?: number | undefined;
   stickySearch?: boolean | undefined;