feat: updated SessionIconButton to support themes

stylesheets/_conversation.scss

@@ -55,16 +55,7 @@
     }
 
     .session-icon-button {
-      background-color: var(--button-icon-background-color);
+      background-color: var(--primary-color);
-      box-shadow: none;
-
-      filter: brightness(1.05);
-      svg path {
-        transition: var(--default-duration);
-        opacity: 0.6;
-        // TODO Theming remove
-        fill: var(--color-text-opposite);
-      }
     }
   }
 }

stylesheets/_session.scss

@@ -21,10 +21,6 @@
   word-break: break-all;
 }
 
-.session-icon-button svg path {
-  transition: fill 0.3s ease;
-}
-
 input,
 textarea {
   caret-color: var(--color-text) !important;
@@ -91,17 +87,7 @@ textarea {
   cursor: pointer;
   display: inline-block;
   position: relative;
-  opacity: 0.4;
   transform: translateZ(0);
-
-  &:hover {
-    opacity: 1;
-  }
-  transition: opacity var(--default-duration);
-
-  &.no-opacity {
-    opacity: 1;
-  }
 }
 
 /* CONVERSATION AND MESSAGES */
@@ -454,10 +440,6 @@ label {
 
   &:hover {
     background: var(--color-clickable-hovered);
-
-    .session-icon {
-      opacity: 1;
-    }
   }
 }
 
@@ -666,20 +648,6 @@ input {
     height: 40px;
     width: 40px;
     border-radius: 50%;
-    opacity: 1;
-    background-color: var(--button-icon-background-color);
-    box-shadow: var(--color-session-shadow);
-
-    svg path {
-      transition: var(--default-duration);
-      opacity: 0.6;
-      fill: var(--button-icon-stroke-color);
-    }
-
-    &:hover svg path {
-      opacity: 1;
-      fill: var(--button-icon-stroke-hover-color);
-    }
   }
 }
 

stylesheets/_session_conversation.scss

@@ -165,18 +165,11 @@
   z-index: 1;
 
   .session-icon-button {
-    margin-right: var(--margins-sm);
-
     display: flex;
     justify-content: center;
     align-items: center;
-    opacity: 0.7;
 
-    &:hover {
+    margin-right: var(--margins-sm);
-      opacity: 1;
-      filter: brightness(0.9);
-      transition: var(--default-duration);
-    }
 
     .send {
       padding: var(--margins-xs);

ts/components/conversation/SessionMessagesListContainer.tsx

@@ -68,19 +68,6 @@ const StyledMessagesContainer = styled.div<{}>`
     height: 40px;
     width: 40px;
     border-radius: 50%;
-    opacity: 1;
-    background-color: var(--color-cell-background);
-    box-shadow: var(--color-session-shadow);
-
-    svg path {
-      transition: var(--default-duration);
-      opacity: 0.6;
-      fill: var(--color-text);
-    }
-
-    &:hover svg path {
-      opacity: 1;
-    }
   }
 `;
 

ts/components/conversation/SessionRecording.tsx

@@ -127,7 +127,7 @@ export class SessionRecording extends React.Component<Props, State> {
               <SessionIconButton
                 iconType="stop"
                 iconSize="medium"
-                iconColor={'#FF4538'}
+                iconColor={'var(--danger-color)'}
                 onClick={actionPauseFn}
               />
             )}
@@ -174,6 +174,7 @@ export class SessionRecording extends React.Component<Props, State> {
               iconSize={'large'}
               iconRotation={90}
               onClick={this.onSendVoiceMessage}
+              margin={'var(--margins-sm)'}
             />
           </div>
         )}

ts/components/conversation/composition/CompositionButtons.tsx

@@ -1,54 +1,77 @@
 import React from 'react';
+import styled from 'styled-components';
 import { SessionIconButton } from '../../icon';
 
+const StyledChatButtonContainer = styled.div`
+  .session-icon-button {
+    svg {
+      background-color: var(--chat-buttons-background-color);
+    }
+
+    &:hover svg {
+      background-color: var(--chat-buttons-background-hover-color);
+    }
+  }
+`;
+
 export const AddStagedAttachmentButton = (props: { onClick: () => void }) => {
   return (
-    <SessionIconButton
+    <StyledChatButtonContainer>
-      iconType="plusThin"
+      <SessionIconButton
-      backgroundColor={'var(--color-compose-view-button-background)'}
+        iconType="plusThin"
-      iconSize={'huge2'}
+        backgroundColor={'var(--chat-buttons-background-color)'}
-      borderRadius="300px"
+        iconColor={'var(--chat-buttons-icon-color)'}
-      iconPadding="8px"
+        iconSize={'huge2'}
-      onClick={props.onClick}
+        borderRadius="300px"
-    />
+        iconPadding="8px"
+        onClick={props.onClick}
+      />
+    </StyledChatButtonContainer>
   );
 };
 
 export const StartRecordingButton = (props: { onClick: () => void }) => {
   return (
-    <SessionIconButton
+    <StyledChatButtonContainer>
-      iconType="microphone"
-      iconSize={'huge2'}
-      backgroundColor={'var(--color-compose-view-button-background)'}
-      borderRadius="300px"
-      iconPadding="6px"
-      onClick={props.onClick}
-    />
-  );
-};
-
-export const ToggleEmojiButton = React.forwardRef<HTMLDivElement, { onClick: () => void }>(
-  (props, ref) => {
-    return (
       <SessionIconButton
-        iconType="emoji"
+        iconType="microphone"
-        ref={ref}
-        backgroundColor="var(--color-compose-view-button-background)"
         iconSize={'huge2'}
+        backgroundColor={'var(--chat-buttons-background-color)'}
+        iconColor={'var(--chat-buttons-icon-color)'}
         borderRadius="300px"
         iconPadding="6px"
         onClick={props.onClick}
       />
+    </StyledChatButtonContainer>
+  );
+};
+
+export const ToggleEmojiButton = React.forwardRef<HTMLDivElement, { onClick: () => void }>(
+  (props, ref) => {
+    return (
+      <StyledChatButtonContainer>
+        <SessionIconButton
+          iconType="emoji"
+          ref={ref}
+          backgroundColor={'var(--chat-buttons-background-color)'}
+          iconColor={'var(--chat-buttons-icon-color)'}
+          iconSize={'huge2'}
+          borderRadius="300px"
+          iconPadding="6px"
+          onClick={props.onClick}
+        />
+      </StyledChatButtonContainer>
     );
   }
 );
 
 export const SendMessageButton = (props: { onClick: () => void }) => {
   return (
-    <div className="send-message-button">
+    <StyledChatButtonContainer className="send-message-button">
       <SessionIconButton
         iconType="send"
-        backgroundColor={'var(--color-compose-view-button-background)'}
+        backgroundColor={'var(--chat-buttons-background-color)'}
+        iconColor={'var(--chat-buttons-icon-color)'}
         iconSize={'huge2'}
         iconRotation={90}
         borderRadius="300px"
@@ -56,6 +79,6 @@ export const SendMessageButton = (props: { onClick: () => void }) => {
         onClick={props.onClick}
         dataTestId="send-message-button"
       />
-    </div>
+    </StyledChatButtonContainer>
   );
 };

ts/components/conversation/message/message-content/MessageReactBar.tsx

@@ -12,7 +12,7 @@ type Props = {
 };
 
 const StyledMessageReactBar = styled.div`
-  background-color: var(--color-received-message-background);
+  background-color: var(--emoji-reaction-bar-background-color);
   border-radius: 25px;
   box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.2), 0 0px 20px 0 rgba(0, 0, 0, 0.19);
 
@@ -26,9 +26,10 @@ const StyledMessageReactBar = styled.div`
   align-items: center;
 
   .session-icon-button {
-    border-color: transparent !important;
-    box-shadow: none !important;
     margin: 0 4px;
+    &:hover svg {
+      background-color: var(--chat-buttons-background-hover-color);
+    }
   }
 `;
 
@@ -44,7 +45,7 @@ const ReactButton = styled.span`
   font-size: 24px;
 
   :hover {
-    background-color: var(--color-compose-view-button-background);
+    background-color: var(--chat-buttons-background-hover-color);
   }
 `;
 
@@ -79,11 +80,11 @@ export const MessageReactBar = (props: Props): ReactElement => {
           </ReactButton>
         ))}
       <SessionIconButton
-        iconColor={'var(--color-text)'}
+        iconColor={'var(--emoji-reaction-bar-icon-color)'}
-        iconPadding={'12px'}
+        iconPadding={'8px'}
-        iconSize={'huge2'}
+        iconSize={'huge'}
         iconType="plusThin"
-        backgroundColor={'var(--color-compose-view-button-background)'}
+        backgroundColor={'var(--emoji-reaction-bar-icon-background-color)'}
         borderRadius="300px"
         onClick={additionalAction}
       />

ts/components/conversation/message/message-item/GroupInvitation.tsx

@@ -25,8 +25,8 @@ export const GroupInvitation = (props: PropsForGroupInvitation) => {
         <div className={classNames(classes)}>
           <div className="contents">
             <SessionIconButton
+              iconColor="var(--background-secondary-color)"
               iconType="plus"
-              iconColor={'var(--color-accent)'}
               iconSize={'large'}
               onClick={() => {
                 acceptOpenGroupInvitation(props.acceptUrl, props.serverName);

ts/components/dialog/SessionConfirm.tsx

@@ -64,7 +64,7 @@ export const SessionConfirm = (props: SessionConfirmDialogProps) => {
   const cancelText = props.cancelText || window.i18n('cancel');
   const showHeader = !!props.title;
 
-  const messageSubText = messageSub ? 'session-confirm-main-message' : 'subtle';
+  const messageSubText = messageSub ? 'session-confirm-main-message' : undefined;
 
   const onClickOkHandler = async () => {
     if (onClickOk) {
@@ -120,11 +120,7 @@ export const SessionConfirm = (props: SessionConfirmDialogProps) => {
         )}
 
         <SessionHtmlRenderer tag="span" className={messageSubText} html={message} />
-        <SessionHtmlRenderer
+        <SessionHtmlRenderer tag="span" className="session-confirm-sub-message" html={messageSub} />
-          tag="span"
-          className="session-confirm-sub-message subtle"
-          html={messageSub}
-        />
 
         <SessionSpinner loading={isLoading} />
       </div>

ts/components/icon/SessionIconButton.tsx

@@ -3,6 +3,7 @@ import classNames from 'classnames';
 import { SessionIcon, SessionIconProps } from '../icon';
 import _ from 'lodash';
 import { SessionNotificationCount } from './SessionNotificationCount';
+import styled from 'styled-components';
 
 interface SProps extends SessionIconProps {
   onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
@@ -15,6 +16,26 @@ interface SProps extends SessionIconProps {
   style?: object;
 }
 
+const StyledSessionIconButton = styled.div<{ color?: string; isSelected?: boolean }>`
+  background-color: var(--button-icon-background-color);
+
+  svg path {
+    transition: var(--default-duration);
+    ${props =>
+      !props.color &&
+      `fill:
+        ${
+          props.isSelected
+            ? 'var(--button-icon-stroke-selected-color)'
+            : 'var(--button-icon-stroke-color)'
+        };`}
+  }
+
+  &:hover svg path {
+    ${props => !props.color && `fill: var(--button-icon-stroke-hover-color);`}
+  }
+`;
+
 const SessionIconButtonInner = React.forwardRef<HTMLDivElement, SProps>((props, ref) => {
   const {
     iconType,
@@ -43,8 +64,10 @@ const SessionIconButtonInner = React.forwardRef<HTMLDivElement, SProps>((props,
   };
 
   return (
-    <div
+    <StyledSessionIconButton
-      className={classNames('session-icon-button', iconSize, isSelected ? 'no-opacity' : '')}
+      color={iconColor}
+      isSelected={isSelected}
+      className={classNames('session-icon-button', iconSize)}
       role="button"
       ref={ref}
       id={id}
@@ -65,7 +88,7 @@ const SessionIconButtonInner = React.forwardRef<HTMLDivElement, SProps>((props,
         iconPadding={iconPadding}
       />
       {Boolean(notificationCount) && <SessionNotificationCount count={notificationCount} />}
-    </div>
+    </StyledSessionIconButton>
   );
 });
 

ts/components/leftpane/ActionsPanel.tsx

@@ -101,7 +101,6 @@ const Section = (props: { type: SectionType }) => {
           iconSize="medium"
           dataTestId="message-section"
           iconType={'chatBubble'}
-          iconColor={undefined}
           notificationCount={unreadToShow}
           onClick={handleClick}
           isSelected={isSelected}
@@ -113,7 +112,6 @@ const Section = (props: { type: SectionType }) => {
           iconSize="medium"
           dataTestId="settings-section"
           iconType={'gear'}
-          iconColor={undefined}
           notificationCount={unreadToShow}
           onClick={handleClick}
           isSelected={isSelected}
@@ -134,7 +132,6 @@ const Section = (props: { type: SectionType }) => {
           iconSize="medium"
           iconType={'moon'}
           dataTestId="theme-section"
-          iconColor={undefined}
           notificationCount={unreadToShow}
           onClick={handleClick}
           isSelected={isSelected}

ts/components/lightbox/Lightbox.tsx

@@ -14,6 +14,7 @@ import { Flex } from '../basic/Flex';
 import { SessionIconButton, SessionIconType } from '../icon';
 import * as MIME from '../../types/MIME';
 import { isUndefined } from 'lodash';
+import styled from 'styled-components';
 
 const Colors = {
   TEXT_SECONDARY: '#bbb',
@@ -127,6 +128,17 @@ const styles = {
   },
 };
 
+const StyledIconButton = styled.div`
+  .session-icon-button {
+    opacity: 0.4;
+    transition: opacity var(--default-duration);
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+`;
+
 interface IconButtonProps {
   onClick?: () => void;
   style?: React.CSSProperties;
@@ -162,14 +174,16 @@ const IconButton = ({ onClick, type }: IconButtonProps) => {
   }
 
   return (
-    <SessionIconButton
+    <StyledIconButton>
-      iconType={iconType}
+      <SessionIconButton
-      iconSize={'huge'}
+        iconType={iconType}
-      iconRotation={iconRotation}
+        iconSize={'huge'}
-      // the lightbox has a dark background
+        iconRotation={iconRotation}
-      iconColor="white"
+        // the lightbox has a dark background
-      onClick={clickHandler}
+        iconColor="var(--white-color)"
-    />
+        onClick={clickHandler}
+      />
+    </StyledIconButton>
   );
 };
 

ts/themes/SessionTheme.tsx

@@ -504,6 +504,7 @@ export const SessionGlobalStyles = createGlobalStyle`
     --menu-button-icon-color: ${THEMES.CLASSIC_LIGHT.COLOR6};
 
     /* Chat (Interaction) Buttons */
+    /* Also used for Reaction Bar Buttons */
     --chat-buttons-background-color: ${THEMES.CLASSIC_LIGHT.COLOR4};
     --chat-buttons-background-hover-color: ${THEMES.CLASSIC_LIGHT.COLOR3};
     --chat-buttons-icon-color: var(--text-primary-color);