feat: settings page now uses new session button

ts/components/basic/SessionButton2.tsx

@@ -0,0 +1,168 @@
+import React, { ReactNode } from 'react';
+import classNames from 'classnames';
+import styled from 'styled-components';
+
+export enum SessionButtonType {
+  Outline = 'outline',
+  Simple = 'simple',
+  Solid = 'solid',
+}
+
+export enum SessionButtonShape {
+  Round = 'round',
+  Square = 'square',
+}
+
+// NOTE References ts/themes/colors.tsx
+export enum SessionButtonColor {
+  Green = 'green',
+  Blue = 'blue',
+  Yellow = 'yellow',
+  Pink = 'pink',
+  Purple = 'purple',
+  Orange = 'orange',
+  Red = 'red',
+  White = 'white',
+  Primary = 'primary',
+  Danger = 'danger',
+  None = 'transparent',
+  // Secondary
+  // Success?
+  // Warning
+}
+
+const StyledButton = styled.div<{
+  color: string | undefined;
+  buttonType: SessionButtonType;
+  buttonShape: SessionButtonShape;
+}>`
+  width: auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: var(--font-size-md);
+  font-weight: 700;
+  user-select: none;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: var(--default-duration);
+  background-repeat: no-repeat;
+  overflow: hidden;
+  height: 34px;
+  padding: 0px 18px;
+  background-color: ${props =>
+    props.buttonType === SessionButtonType.Solid && props.color
+      ? `var(--${props.color}-color)`
+      : `var(--button-${props.buttonType}-background-color)`};
+  color: ${props =>
+    props.color
+      ? props.buttonType !== SessionButtonType.Solid
+        ? `var(--${props.color}-color)`
+        : 'var(--white-color)'
+      : `var(--button-${props.buttonType}-text-color)`};
+  ${props =>
+    props.buttonType === SessionButtonType.Outline &&
+    `outline: none; border: 1px solid ${
+      props.color ? `var(--${props.color}-color)` : 'var(--button-outline-border-color)'
+    }`};
+  ${props =>
+    props.buttonType === SessionButtonType.Solid &&
+    'box-shadow: 0px 0px 6px var(--button-solid-shadow-color);'}
+  border-radius: ${props => (props.buttonShape === SessionButtonShape.Round ? '17px' : '6px')};
+
+  .session-icon {
+    fill: var(--background-primary-color);
+  }
+
+  & > *:hover:not(svg) {
+    filter: brightness(80%);
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+    outline: none;
+    ${props =>
+      props.buttonType === SessionButtonType.Solid
+        ? `background-color: var(--button-solid-disabled-color)`
+        : props.buttonType === SessionButtonType.Outline
+        ? 'border: 1px solid var(--button-outline-disabled-color)'
+        : ''};
+    color: ${props =>
+      props.buttonType === SessionButtonType.Solid
+        ? 'var(--button-solid-text-color)'
+        : `var(--button-${props.buttonType}-disabled-color)`};
+  }
+
+  &:not(.disabled) {
+    &:hover {
+      ${props =>
+        props.buttonType &&
+        `background-color: var(--button-${props.buttonType}-background-hover-color);`};
+      ${props => props.color && `color: var(--button-${props.buttonType}-text-color);`}
+      ${props =>
+        props.buttonType === SessionButtonType.Outline &&
+        `outline: none; border: 1px solid var(--button-outline-border-hover-color);`};
+    }
+  }
+`;
+
+type Props = {
+  text?: string;
+  disabled?: boolean;
+  buttonType: SessionButtonType;
+  buttonShape: SessionButtonShape;
+  buttonColor?: SessionButtonColor; // will override theme
+  onClick: any;
+  children?: ReactNode;
+  margin?: string;
+  dataTestId?: string;
+};
+
+export const SessionButton2 = (props: Props) => {
+  const {
+    buttonType,
+    buttonShape,
+    dataTestId,
+    buttonColor,
+    text,
+    disabled,
+    onClick,
+    margin,
+  } = props;
+
+  const clickHandler = (e: any) => {
+    if (onClick) {
+      e.stopPropagation();
+      onClick();
+    }
+  };
+  const onClickFn = disabled ? () => null : clickHandler;
+
+  return (
+    <StyledButton
+      color={buttonColor}
+      buttonShape={buttonShape}
+      buttonType={buttonType}
+      className={classNames(
+        'session-button',
+        buttonShape,
+        buttonType,
+        buttonColor ?? '',
+        disabled && 'disabled'
+      )}
+      role="button"
+      onClick={onClickFn}
+      data-testid={dataTestId}
+      style={{ margin }}
+    >
+      {props.children || text}
+    </StyledButton>
+  );
+};
+
+SessionButton2.defaultProps = {
+  disabled: false,
+  buttonShape: SessionButtonShape.Round,
+  buttonType: SessionButtonType.Outline,
+  onClick: null,
+} as Partial<Props>;

ts/components/conversation/SessionConversation.tsx

@@ -38,7 +38,7 @@ import { addStagedAttachmentsInConversation } from '../../state/ducks/stagedAtta
 import { MIME } from '../../types';
 import { AttachmentTypeWithPath } from '../../types/Attachment';
 import { arrayBufferToObjectURL, AttachmentUtil, GoogleChrome } from '../../util';
-import { SessionButtonColor } from '../basic/SessionButton';
+import { SessionButtonColor } from '../basic/SessionButton2';
 import { MessageView } from '../MainViewController';
 import { ConversationHeaderWithDetails } from './ConversationHeader';
 import { MessageDetail } from './message/message-item/MessageDetail';

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

@@ -4,7 +4,7 @@ import { Data } from '../../../../data/data';
 import { getConversationController } from '../../../../session/conversations';
 import { AttachmentDownloads } from '../../../../session/utils';
 import { updateConfirmModal } from '../../../../state/ducks/modalDialog';
-import { SessionButtonColor } from '../../../basic/SessionButton';
+import { SessionButtonColor } from '../../../basic/SessionButton2';
 import { SessionIcon } from '../../../icon';
 
 const StyledTrustSenderUI = styled.div`

ts/components/dialog/DeleteAccountModal.tsx

@@ -5,7 +5,12 @@ import { forceNetworkDeletion } from '../../session/apis/snode_api/SNodeAPI';
 import { forceSyncConfigurationNowIfNeeded } from '../../session/utils/syncUtils';
 import { updateConfirmModal, updateDeleteAccountModal } from '../../state/ducks/modalDialog';
 import { SpacerLG } from '../basic/Text';
-import { SessionButton, SessionButtonColor } from '../basic/SessionButton';
+import {
+  SessionButton2,
+  SessionButtonColor,
+  SessionButtonShape,
+  SessionButtonType,
+} from '../basic/SessionButton2';
 import { SessionHtmlRenderer } from '../basic/SessionHTMLRenderer';
 import { SessionSpinner } from '../basic/SessionSpinner';
 import { SessionWrapperModal } from '../SessionWrapperModal';
@@ -190,18 +195,21 @@ export const DeleteAccountModal = () => {
         />
         <SpacerLG />
         <div className="session-modal__button-group">
-          <SessionButton
+          <SessionButton2
             text={window.i18n('entireAccount')}
             buttonColor={SessionButtonColor.Danger}
+            buttonShape={SessionButtonShape.Square}
+            buttonType={SessionButtonType.Solid}
             onClick={() => {
               setDeleteEverythingWithNetwork(true);
             }}
             disabled={deleteEverythingWithNetwork || deleteDeviceOnly}
           />
 
-          <SessionButton
+          <SessionButton2
             text={window.i18n('deviceOnly')}
-            buttonColor={SessionButtonColor.Primary}
+            buttonShape={SessionButtonShape.Square}
+            buttonType={SessionButtonType.Solid}
             onClick={() => {
               setDeleteDeviceOnly(true);
             }}
@@ -229,9 +237,11 @@ export const DeleteAccountModal = () => {
 
         {(deleteDeviceOnly || deleteEverythingWithNetwork) && (
           <div className="session-modal__button-group">
-            <SessionButton
+            <SessionButton2
               text={window.i18n('iAmSure')}
               buttonColor={SessionButtonColor.Danger}
+              buttonShape={SessionButtonShape.Square}
+              buttonType={SessionButtonType.Solid}
               onClick={() => {
                 if (deleteDeviceOnly) {
                   void onDeleteEverythingLocallyOnly();
@@ -242,9 +252,10 @@ export const DeleteAccountModal = () => {
               disabled={isLoading}
             />
 
-            <SessionButton
+            <SessionButton2
               text={window.i18n('cancel')}
-              buttonColor={SessionButtonColor.Primary}
+              buttonShape={SessionButtonShape.Square}
+              buttonType={SessionButtonType.Solid}
               onClick={() => {
                 dispatch(updateDeleteAccountModal(null));
               }}

ts/components/dialog/SessionConfirm.tsx

@@ -2,7 +2,12 @@ import React, { useState } from 'react';
 import { SessionHtmlRenderer } from '../basic/SessionHTMLRenderer';
 import { updateConfirmModal } from '../../state/ducks/modalDialog';
 import { SpacerLG } from '../basic/Text';
-import { SessionButton, SessionButtonColor } from '../basic/SessionButton';
+import {
+  SessionButton2,
+  SessionButtonColor,
+  SessionButtonShape,
+  SessionButtonType,
+} from '../basic/SessionButton2';
 import { SessionSpinner } from '../basic/SessionSpinner';
 import { SessionIcon, SessionIconSize, SessionIconType } from '../icon';
 import { SessionWrapperModal } from '../SessionWrapperModal';
@@ -46,7 +51,7 @@ export const SessionConfirm = (props: SessionConfirmDialogProps) => {
     message = '',
     messageSub = '',
     okTheme = SessionButtonColor.Primary,
-    closeTheme = SessionButtonColor.Primary,
+    closeTheme,
     onClickOk,
     onClickClose,
     hideCancel = false,
@@ -130,16 +135,20 @@ export const SessionConfirm = (props: SessionConfirmDialogProps) => {
       </div>
 
       <div className="session-modal__button-group">
-        <SessionButton
+        <SessionButton2
           text={okText}
           buttonColor={okTheme}
+          buttonShape={SessionButtonShape.Square}
+          buttonType={SessionButtonType.Solid}
           onClick={onClickOkHandler}
           dataTestId="session-confirm-ok-button"
         />
         {!hideCancel && (
-          <SessionButton
+          <SessionButton2
             text={cancelText}
             buttonColor={closeTheme}
+            buttonShape={SessionButtonShape.Square}
+            buttonType={SessionButtonType.Solid}
             onClick={onClickCancelHandler}
             dataTestId="session-confirm-cancel-button"
           />

ts/components/dialog/SessionPasswordDialog.tsx

@@ -7,7 +7,12 @@ import { SpacerLG, SpacerSM } from '../basic/Text';
 import autoBind from 'auto-bind';
 import { sessionPassword } from '../../state/ducks/modalDialog';
 import { LocalizerKeys } from '../../types/LocalizerKeys';
-import { SessionButton, SessionButtonColor } from '../basic/SessionButton';
+import {
+  SessionButton2,
+  SessionButtonColor,
+  SessionButtonShape,
+  SessionButtonType,
+} from '../basic/SessionButton2';
 import { SessionWrapperModal } from '../SessionWrapperModal';
 import { matchesHash, validatePassword } from '../../util/passwordUtils';
 
@@ -59,8 +64,7 @@ export class SessionPasswordDialog extends React.Component<Props, State> {
           ]
         : [window.i18n('enterPassword'), window.i18n('confirmPassword')];
 
-    const confirmButtonColor =
+    const confirmButtonColor = passwordAction === 'remove' ? SessionButtonColor.Danger : undefined;
-      passwordAction === 'remove' ? SessionButtonColor.Danger : SessionButtonColor.Green;
     // do this separately so typescript's compiler likes it
     const localizedKeyAction: LocalizerKeys =
       passwordAction === 'change'
@@ -108,12 +112,19 @@ export class SessionPasswordDialog extends React.Component<Props, State> {
         {this.showError()}
 
         <div className="session-modal__button-group">
-          <SessionButton text={window.i18n('cancel')} onClick={this.closeDialog} />
+          <SessionButton2
-          <SessionButton
             text={window.i18n('ok')}
             buttonColor={confirmButtonColor}
+            buttonShape={SessionButtonShape.Square}
+            buttonType={SessionButtonType.Solid}
             onClick={this.setPassword}
           />
+          <SessionButton2
+            text={window.i18n('cancel')}
+            buttonShape={SessionButtonShape.Square}
+            buttonType={SessionButtonType.Solid}
+            onClick={this.closeDialog}
+          />
         </div>
       </SessionWrapperModal>
     );

ts/components/menu/Menu.tsx

@@ -52,7 +52,7 @@ import { hideMessageRequestBanner } from '../../state/ducks/userConfig';
 import { getFocusedSection } from '../../state/selectors/section';
 import { getTimerOptions } from '../../state/selectors/timerOptions';
 import { LocalizerKeys } from '../../types/LocalizerKeys';
-import { SessionButtonColor } from '../basic/SessionButton';
+import { SessionButtonColor } from '../basic/SessionButton2';
 import { ContextConversationId } from '../leftpane/conversation-list-item/ConversationListItem';
 
 function showTimerOptions(

ts/components/settings/SessionSettingListItem.tsx

@@ -1,5 +1,10 @@
 import React from 'react';
-import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton';
+import {
+  SessionButton2,
+  SessionButtonColor,
+  SessionButtonShape,
+  SessionButtonType,
+} from '../basic/SessionButton2';
 import { SessionToggle } from '../basic/SessionToggle';
 import { SessionConfirmDialogProps } from '../dialog/SessionConfirm';
 import styled from 'styled-components';
@@ -8,8 +13,9 @@ import { SessionIconButton } from '../icon';
 type ButtonSettingsProps = {
   title?: string;
   description?: string;
-  buttonColor: SessionButtonColor;
+  buttonColor?: SessionButtonColor;
-  buttonType: SessionButtonType;
+  buttonType?: SessionButtonType;
+  buttonShape?: SessionButtonShape;
   buttonText: string;
   dataTestId?: string;
   onClick: () => void;
@@ -145,16 +151,26 @@ export const SessionToggleWithDescription = (props: {
 };
 
 export const SessionSettingButtonItem = (props: ButtonSettingsProps) => {
-  const { title, description, buttonColor, buttonType, buttonText, dataTestId, onClick } = props;
+  const {
+    title,
+    description,
+    buttonColor,
+    buttonType,
+    buttonShape,
+    buttonText,
+    dataTestId,
+    onClick,
+  } = props;
 
   return (
     <SessionSettingsItemWrapper title={title} description={description} inline={true}>
-      <SessionButton
+      <SessionButton2
         dataTestId={dataTestId}
         text={buttonText}
         buttonColor={buttonColor}
-        onClick={onClick}
         buttonType={buttonType}
+        buttonShape={buttonShape}
+        onClick={onClick}
       />
     </SessionSettingsItemWrapper>
   );

ts/components/settings/section/CategoryHelp.tsx

@@ -1,6 +1,6 @@
 import { ipcRenderer, shell } from 'electron';
 import React from 'react';
-import { SessionButtonColor, SessionButtonType } from '../../basic/SessionButton';
+import { SessionButtonShape } from '../../basic/SessionButton2';
 
 import { SessionSettingButtonItem, SessionSettingsTitleWithLink } from '../SessionSettingListItem';
 
@@ -12,8 +12,7 @@ export const SettingsCategoryHelp = (props: { hasPassword: boolean | null }) =>
           onClick={() => {
             ipcRenderer.send('show-debug-log');
           }}
-          buttonColor={SessionButtonColor.Primary}
+          buttonShape={SessionButtonShape.Square}
-          buttonType={SessionButtonType.Square}
           buttonText={window.i18n('showDebugLog')}
           title={window.i18n('reportIssue')}
           description={window.i18n('shareBugDetails')}

ts/components/settings/section/CategoryPermissions.tsx

@@ -4,7 +4,7 @@ import useUpdate from 'react-use/lib/useUpdate';
 import { SettingsKey } from '../../../data/settings-key';
 import { CallManager, ToastUtils } from '../../../session/utils';
 import { updateConfirmModal } from '../../../state/ducks/modalDialog';
-import { SessionButtonColor } from '../../basic/SessionButton';
+import { SessionButtonColor } from '../../basic/SessionButton2';
 
 import { SessionToggleWithDescription } from '../SessionSettingListItem';
 

ts/components/settings/section/CategoryPrivacy.tsx

@@ -5,7 +5,7 @@ import { Data, hasLinkPreviewPopupBeenDisplayed } from '../../../data/data';
 import { SettingsKey } from '../../../data/settings-key';
 import { ConversationTypeEnum } from '../../../models/conversationAttributes';
 import { sessionPassword, updateConfirmModal } from '../../../state/ducks/modalDialog';
-import { SessionButtonColor, SessionButtonType } from '../../basic/SessionButton';
+import { SessionButtonColor } from '../../basic/SessionButton2';
 import { SpacerLG } from '../../basic/Text';
 import { TypingBubble } from '../../conversation/TypingBubble';
 import { PasswordAction } from '../../dialog/SessionPasswordDialog';
@@ -99,8 +99,6 @@ export const SettingsCategoryPrivacy = (props: {
             onClick={() => {
               displayPasswordModal('set', props.onPasswordUpdated);
             }}
-            buttonColor={SessionButtonColor.Green}
-            buttonType={SessionButtonType.BrandOutline}
             buttonText={window.i18n('setPassword')}
             dataTestId={'set-password-button'}
           />
@@ -112,8 +110,6 @@ export const SettingsCategoryPrivacy = (props: {
             onClick={() => {
               displayPasswordModal('change', props.onPasswordUpdated);
             }}
-            buttonColor={SessionButtonColor.Green}
-            buttonType={SessionButtonType.BrandOutline}
             buttonText={window.i18n('changePassword')}
           />
         )}
@@ -125,7 +121,6 @@ export const SettingsCategoryPrivacy = (props: {
               displayPasswordModal('remove', props.onPasswordUpdated);
             }}
             buttonColor={SessionButtonColor.Danger}
-            buttonType={SessionButtonType.BrandOutline}
             buttonText={window.i18n('removePassword')}
           />
         )}

ts/interactions/conversationInteractions.ts

@@ -30,7 +30,7 @@ import { getDecryptedMediaUrl } from '../session/crypto/DecryptedAttachmentsMana
 import { IMAGE_JPEG } from '../types/MIME';
 import { fromHexToArray, toHex } from '../session/utils/String';
 import { forceSyncConfigurationNowIfNeeded } from '../session/utils/syncUtils';
-import { SessionButtonColor } from '../components/basic/SessionButton';
+import { SessionButtonColor } from '../components/basic/SessionButton2';
 import { getCallMediaPermissionsSettings } from '../components/settings/SessionSettings';
 import { perfEnd, perfStart } from '../session/utils/Performance';
 import { processNewAttachment } from '../types/MessageAttachment';

ts/interactions/conversations/unsendingInteractions.ts

@@ -11,7 +11,7 @@ import { PubKey } from '../../session/types';
 import { ToastUtils, UserUtils } from '../../session/utils';
 import { resetSelectedMessageIds } from '../../state/ducks/conversations';
 import { updateConfirmModal } from '../../state/ducks/modalDialog';
-import { SessionButtonColor } from '../../components/basic/SessionButton';
+import { SessionButtonColor } from '../../components/basic/SessionButton2';
 import { deleteSogsMessageByServerIds } from '../../session/apis/open_group_api/sogsv3/sogsV3DeleteMessages';
 
 /**

ts/themes/SessionTheme.tsx

@@ -534,10 +534,14 @@ export const SessionGlobalStyles = createGlobalStyle`
     --button-solid-background-hover-color: ${THEMES.CLASSIC_LIGHT.COLOR4};
     --button-solid-text-color: var(--text-primary-color);
     --button-solid-text-hover-color: var(--text-primary-color);
-    --button-solid-disabled-color: var(--text-secondary-color);
+    --button-solid-disabled-color: ${THEMES.CLASSIC_LIGHT.COLOR4};
       /* TODO Theming - Only light themes have shadows? */
     --button-solid-shadow-color: rgba(${hexColorToRGB(THEMES.CLASSIC_LIGHT.COLOR0)}, 0.25);
 
+    /* Simple */
+    /* TODO Theming - Should this be different? */
+    --button-simple-disabled-color: var(--text-primary-color);
+
     /* Icons */
     --button-icon-background-color: var(--transparent-color);
     --button-icon-stroke-color: var(--text-secondary-color);