feat: updated all session buttons to use new button

small style fixes and sass cleanup

stylesheets/_session.scss

@@ -72,148 +72,6 @@ textarea {
   margin-inline-end: 5px;
 }
 
-.session-button {
-  @mixin transparent-background($textAndBorderColor) {
-    background-color: Transparent;
-    background-repeat: no-repeat;
-    overflow: hidden;
-    outline: none;
-    color: $textAndBorderColor;
-    border: 2px solid $textAndBorderColor;
-  }
-
-  width: auto;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-weight: 700;
-  user-select: none;
-  white-space: nowrap;
-  cursor: pointer;
-  transition: var(--default-duration);
-  background-color: var(--color-transparent-color);
-
-  &.disabled {
-    cursor: not-allowed;
-  }
-
-  &.default,
-  &.square,
-  &.brand {
-    color: var(--color-foreground-primary);
-
-    &:not(.disabled):hover {
-      background: var(--color-clickable-hovered);
-    }
-
-    &.green {
-      background-color: var(--color-accent-button);
-      color: var(--color-text-opposite);
-    }
-
-    &.white {
-      color: var(--color-text);
-    }
-    &.primary {
-      background-color: var(--color-background-primary);
-      color: var(--color-white-color);
-
-      .session-icon {
-        fill: var(--color-foreground-primary);
-      }
-    }
-    &.secondary {
-      background-color: var(--color-darkest-gray-color);
-    }
-    &.success {
-      /* TODO is this correct? */
-      background-color: var(--color-text);
-    }
-    &.danger {
-      background-color: var(--color-destructive);
-    }
-    &.danger-alt {
-      background-color: var(--color-destructive-alt);
-    }
-    &.warning {
-      background-color: var(--color-light-gray-color);
-    }
-  }
-
-  &.brand-outline,
-  &.default-outline,
-  &.square-outline {
-    border: none;
-
-    &.green {
-      @include transparent-background(var(--color-button-green));
-    }
-    &.white {
-      @include transparent-background(var(--color-text));
-    }
-    &.primary {
-      @include transparent-background(var(--color-dark-gray-color));
-    }
-    &.secondary {
-      @include transparent-background(var(--color-darkest-gray-color));
-    }
-    &.danger {
-      @include transparent-background(var(--color-destructive));
-    }
-    &.warning {
-      @include transparent-background(var(--color-warning));
-    }
-    &.warning,
-    &.danger,
-    &.secondary,
-    &.primary,
-    &.white,
-    &.green {
-      &.disabled {
-        @include transparent-background(var(--color-text-subtle));
-
-        &:hover {
-          @include transparent-background(var(--color-text-subtle));
-        }
-      }
-    }
-  }
-
-  &.brand {
-    min-width: 165px;
-    height: 34px;
-    align-items: center;
-    padding: 0px var(--margins-lg);
-    font-size: $session-font-md;
-    font-family: $session-font-accent;
-    border-radius: 500px;
-
-    &:not(.disabled):hover {
-      color: var(--color-text);
-      border-color: var(--color-text);
-    }
-  }
-
-  &.default,
-  &.square,
-  &.default-outline,
-  &.square-outline {
-    border-radius: 2px;
-    height: 33px;
-    padding: 0px 18px;
-    font-size: $session-font-sm;
-  }
-
-  &.square,
-  &.square-outline {
-    border-radius: 0px;
-  }
-
-  & > *:hover:not(svg) {
-    filter: brightness(80%);
-  }
-}
-
 .session-label {
   color: var(--color-white-color);
   padding: var(--margins-sm);
@@ -365,10 +223,6 @@ label {
   visibility: hidden;
 }
 
-.session-button div[role='button'] {
-  cursor: pointer;
-}
-
 .Toastify__toast {
   background: var(--color-cell-background);
   color: var(--color-text);

stylesheets/_session_constants.scss

@@ -176,9 +176,3 @@ $session-transition-duration: 0.25s;
     opacity: 1;
   }
 }
-
-// //////////////////////////////////////////////
-// ///////////////// Various ////////////////////
-// //////////////////////////////////////////////
-
-$composition-container-height: 60px;

stylesheets/_session_conversation.scss

@@ -74,7 +74,7 @@
       float: left;
     }
 
-    .session-button.default.danger {
+    .session-button.danger {
       display: flex;
     }
   }
@@ -184,51 +184,6 @@
       width: 30px;
     }
   }
-
-  .send-message-input {
-    cursor: text;
-    display: flex;
-    align-items: center;
-    flex-grow: 1;
-    min-height: $composition-container-height;
-    padding: var(--margins-xs) 0;
-    z-index: 1;
-    background-color: inherit;
-
-    ul {
-      max-height: 70vh;
-      overflow: auto;
-    }
-
-    textarea {
-      font-family: $session-font-default;
-      min-height: calc($composition-container-height / 3);
-      max-height: 3 * $composition-container-height;
-      margin-right: var(--margins-md);
-      color: var(--color-text);
-
-      background: transparent;
-      resize: none;
-      display: flex;
-      flex-grow: 1;
-      outline: none;
-      border: none;
-      font-size: 14px;
-      line-height: $session-font-h2;
-      letter-spacing: 0.5px;
-    }
-
-    &__emoji-overlay {
-      // Should have identical properties to the textarea above to line up perfectly.
-      position: absolute;
-      font-size: 14px;
-      font-family: $session-font-default;
-      margin-left: 2px;
-      line-height: $session-font-h2;
-      letter-spacing: 0.5px;
-      color: var(--color-transparent-color);
-    }
-  }
 }
 
 .session-emoji-panel {
@@ -325,7 +280,7 @@
 }
 
 .session-recording {
-  height: $composition-container-height;
+  height: var(--composition-container-height);
   display: flex;
   justify-content: space-between;
   align-items: center;

stylesheets/_session_group_panel.scss

@@ -63,18 +63,6 @@
     border-top: none;
   }
 
-  // bottom button
-  .session-button.square-outline.danger {
-    margin-top: auto;
-    width: 100%;
-    border: none;
-    height: $composition-container-height;
-    flex-shrink: 0;
-    align-items: center;
-    border: none;
-    border-top: var(--border-session);
-  }
-
   .module-empty-state {
     text-align: center;
   }

stylesheets/_session_left_pane.scss

@@ -133,6 +133,7 @@ $session-compose-margin: 20px;
     }
 
     .session-button {
+      min-width: 160px;
       width: fit-content;
       margin-top: 1rem;
       margin-bottom: 3rem;

stylesheets/_session_signin.scss

@@ -5,9 +5,6 @@
     background-color: var(--color-white-color);
   }
   &-content {
-    .session-button.brand-outline.brand.green:hover {
-      background-color: var(--color-accent);
-    }
     &-accent {
       &-text {
         font-family: $session-font-accent;
@@ -197,7 +194,7 @@
     justify-content: center;
     padding: 20px;
     border-radius: 13px;
-    border: 1px solid subtle(var(--color-darker-gray-color));
+    border: 1px solid var(--border-color);
     margin-bottom: 20px;
 
     textarea {

ts/components/DebugLogView.tsx

@@ -6,7 +6,7 @@ import {
   switchHtmlToLightTheme,
 } from '../themes/SessionTheme';
 import { fetch } from '../util/logging';
-import { SessionButton } from './basic/SessionButton';
+import { SessionButton2, SessionButtonType } from './basic/SessionButton2';
 
 const StyledContent = styled.div`
   background-color: var(--color-modal-background);
@@ -50,8 +50,9 @@ const DebugLogTextArea = (props: { content: string }) => {
 const DebugLogButtons = (props: { content: string }) => {
   return (
     <div className="buttons">
-      <SessionButton
+      <SessionButton2
         text={window.i18n('saveLogToDesktop')}
+        buttonType={SessionButtonType.Simple}
         onClick={() => {
           if (props.content.length <= 20) {
             // loading

ts/components/SessionPasswordPrompt.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import { SessionIcon } from './icon';
 import { withTheme } from 'styled-components';
 import autoBind from 'auto-bind';
-import { SessionButton, SessionButtonColor, SessionButtonType } from './basic/SessionButton';
+import { SessionButton2, SessionButtonColor } from './basic/SessionButton2';
 import { Constants } from '../session';
 import { SessionSpinner } from './basic/SessionSpinner';
 
@@ -172,22 +172,20 @@ class SessionPasswordPromptInner extends React.PureComponent<{}, State> {
 
     return (
       <div className={classNames(showResetElements && 'button-group')}>
+        <SessionButton2
+          text={window.i18n('unlock')}
+          buttonColor={SessionButtonColor.Primary}
+          onClick={this.initLogin}
+        />
         {showResetElements && (
           <>
-            <SessionButton
+            <SessionButton2
               text="Reset Database"
-              buttonType={SessionButtonType.BrandOutline}
               buttonColor={SessionButtonColor.Danger}
               onClick={this.initClearDataView}
             />
           </>
         )}
-        <SessionButton
-          text={window.i18n('unlock')}
-          buttonType={SessionButtonType.BrandOutline}
-          buttonColor={SessionButtonColor.Green}
-          onClick={this.initLogin}
-        />
       </div>
     );
   }
@@ -195,21 +193,17 @@ class SessionPasswordPromptInner extends React.PureComponent<{}, State> {
   private renderClearDataViewButtons(): JSX.Element {
     return (
       <div className="button-group">
-        <SessionButton
+        <SessionButton2
+          text={window.i18n('clearAllData')}
+          buttonColor={SessionButtonColor.Danger}
+          onClick={window.clearLocalData}
+        />
+        <SessionButton2
           text={window.i18n('cancel')}
-          buttonType={SessionButtonType.Default}
-          buttonColor={SessionButtonColor.Primary}
           onClick={() => {
             this.setState({ clearDataView: false });
           }}
         />
-
-        <SessionButton
-          text={window.i18n('clearAllData')}
-          buttonType={SessionButtonType.Default}
-          buttonColor={SessionButtonColor.Danger}
-          onClick={window.clearLocalData}
-        />
       </div>
     );
   }

ts/components/basic/SessionButton2.tsx

@@ -26,9 +26,6 @@ export enum SessionButtonColor {
   Primary = 'primary',
   Danger = 'danger',
   None = 'transparent',
-  // Secondary
-  // Success?
-  // Warning
 }
 
 const StyledButton = styled.div<{
@@ -83,7 +80,7 @@ const StyledButton = styled.div<{
     outline: none;
     ${props =>
       props.buttonType === SessionButtonType.Solid
-        ? `background-color: var(--button-solid-disabled-color)`
+        ? 'background-color: var(--button-solid-disabled-color)'
         : props.buttonType === SessionButtonType.Outline
         ? 'border: 1px solid var(--button-outline-disabled-color)'
         : ''};
@@ -101,7 +98,7 @@ const StyledButton = styled.div<{
       ${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);`};
+        'outline: none; border: 1px solid var(--button-outline-border-hover-color);'};
     }
   }
 `;

ts/components/conversation/ConversationHeader.tsx

@@ -39,7 +39,12 @@ import {
   useIsKickedFromGroup,
   useIsRequest,
 } from '../../hooks/useParamSelector';
-import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton';
+import {
+  SessionButton2,
+  SessionButtonColor,
+  SessionButtonShape,
+  SessionButtonType,
+} from '../basic/SessionButton2';
 import { SessionIconButton } from '../icon';
 import { ConversationHeaderMenu } from '../menu/ConversationHeaderMenu';
 import { Flex } from '../basic/Flex';
@@ -116,16 +121,18 @@ const SelectionOverlay = () => {
 
       <div className="button-group">
         {!isOnlyServerDeletable && (
-          <SessionButton
-            buttonType={SessionButtonType.Default}
+          <SessionButton2
             buttonColor={SessionButtonColor.Danger}
+            buttonShape={SessionButtonShape.Square}
+            buttonType={SessionButtonType.Solid}
             text={deleteMessageButtonText}
             onClick={onDeleteSelectedMessages}
           />
         )}
-        <SessionButton
-          buttonType={SessionButtonType.Default}
+        <SessionButton2
           buttonColor={SessionButtonColor.Danger}
+          buttonShape={SessionButtonShape.Square}
+          buttonType={SessionButtonType.Solid}
           text={deleteForEveryoneMessageButtonText}
           onClick={onDeleteSelectedMessagesForEveryone}
         />

ts/components/conversation/ConversationRequestButtons.tsx

@@ -11,7 +11,7 @@ import {
   getSelectedConversation,
   hasSelectedConversationIncomingMessages,
 } from '../../state/selectors/conversations';
-import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton';
+import { SessionButton2, SessionButtonColor } from '../basic/SessionButton2';
 
 const handleDeclineConversationRequest = (convoId: string) => {
   declineConversationWithConfirm(convoId, true);
@@ -41,18 +41,16 @@ export const ConversationMessageRequestButtons = () => {
   return (
     <ConversationRequestBanner>
       <ConversationBannerRow>
-        <SessionButton
-          buttonColor={SessionButtonColor.Green}
-          buttonType={SessionButtonType.BrandOutline}
+        <SessionButton2
+          buttonColor={SessionButtonColor.Primary}
           onClick={async () => {
             await handleAcceptConversationRequest(selectedConversation.id);
           }}
           text={window.i18n('accept')}
           dataTestId="accept-message-request"
         />
-        <SessionButton
+        <SessionButton2
           buttonColor={SessionButtonColor.Danger}
-          buttonType={SessionButtonType.BrandOutline}
           text={window.i18n('decline')}
           onClick={() => {
             handleDeclineConversationRequest(selectedConversation.id);

ts/components/conversation/H5AudioPlayer.tsx

@@ -11,7 +11,7 @@ import {
   isMessageSelectionMode,
 } from '../../state/selectors/conversations';
 import { getAudioAutoplay } from '../../state/selectors/userConfig';
-import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton';
+import { SessionButton2, SessionButtonType } from '../basic/SessionButton2';
 import { SessionIcon } from '../icon';
 
 const StyledSpeedButton = styled.div`
@@ -25,10 +25,8 @@ const StyledSpeedButton = styled.div`
 
   .session-button {
     transition: none;
-
-    &:hover {
-      color: var(--color-text-opposite);
-    }
+    width: 34px;
+    padding: 0px;
   }
 `;
 
@@ -120,13 +118,12 @@ export const AudioPlayerWithEncryptedFile = (props: {
       customControlsSection={[
         RHAP_UI.MAIN_CONTROLS,
         <StyledSpeedButton key="togglePlaybackSpeed">
-          <SessionButton
+          <SessionButton2
             text={`${playbackSpeed}x`}
             onClick={() => {
               setPlaybackSpeed(playbackSpeed === 1 ? 1.5 : 1);
             }}
             buttonType={SessionButtonType.Simple}
-            buttonColor={SessionButtonColor.None}
           />
         </StyledSpeedButton>,
       ]}

ts/components/conversation/SessionRightPanel.tsx

@@ -21,12 +21,13 @@ import { getSelectedConversation, isRightPanelShowing } from '../../state/select
 import { getTimerOptions } from '../../state/selectors/timerOptions';
 import { AttachmentTypeWithPath } from '../../types/Attachment';
 import { Avatar, AvatarSize } from '../avatar/Avatar';
-import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton';
+import { SessionButton2, SessionButtonColor, SessionButtonType } from '../basic/SessionButton2';
 import { SessionDropdown } from '../basic/SessionDropdown';
 import { SpacerLG } from '../basic/Text';
 import { MediaItemType } from '../lightbox/LightboxGallery';
 import { MediaGallery } from './media-gallery/MediaGallery';
 import { getAbsoluteAttachmentPath } from '../../types/MessageAttachment';
+import styled from 'styled-components';
 
 async function getMediaGalleryProps(
   conversationId: string
@@ -141,6 +142,25 @@ const HeaderItem = () => {
   );
 };
 
+const StyledLeaveButton = styled.div`
+  width: 100%;
+  .session-button {
+    margin-top: auto;
+    width: 100%;
+    height: var(--composition-container-height);
+    flex-shrink: 0;
+    align-items: center;
+    border-top: var(--border-color);
+    border-radius: 0px;
+
+    &:not(.disabled) {
+      &:hover {
+        background-color: var(--button-solid-background-hover-color);
+      }
+    }
+  }
+`;
+
 // tslint:disable: cyclomatic-complexity
 // tslint:disable: max-func-body-length
 export const SessionRightPanelWithDetails = () => {
@@ -302,13 +322,15 @@ export const SessionRightPanelWithDetails = () => {
       <MediaGallery documents={documents} media={media} />
       {isGroup && (
         // tslint:disable-next-line: use-simple-attributes
-        <SessionButton
-          text={leaveGroupString}
-          buttonColor={SessionButtonColor.Danger}
-          disabled={isKickedFromGroup || left}
-          buttonType={SessionButtonType.SquareOutline}
-          onClick={deleteConvoAction}
-        />
+        <StyledLeaveButton>
+          <SessionButton2
+            text={leaveGroupString}
+            buttonColor={SessionButtonColor.Danger}
+            buttonType={SessionButtonType.Simple}
+            disabled={isKickedFromGroup || left}
+            onClick={deleteConvoAction}
+          />
+        </StyledLeaveButton>
       )}
     </div>
   );

ts/components/conversation/composition/CompositionBox.tsx

@@ -218,7 +218,7 @@ const StyledSendMessageInput = styled.div`
   display: flex;
   align-items: center;
   flex-grow: 1;
-  min-height: var(--compositionContainerHeight);
+  min-height: var(--composition-container-height);
   padding: var(--margins-xs) 0;
   z-index: 1;
   background-color: inherit;
@@ -230,8 +230,8 @@ const StyledSendMessageInput = styled.div`
 
   textarea {
     font-family: var(--font-default);
-    min-height: calc(var(--compositionContainerHeight) / 3);
-    max-height: 3 * var(--compositionContainerHeight);
+    min-height: calc(var(--composition-container-height) / 3);
+    max-height: 3 * var(--composition-container-height);
     margin-right: var(--margins-md);
     color: var(--color-text);
 

ts/components/dialog/EditProfileDialog.tsx

@@ -9,7 +9,6 @@ import { SyncUtils, ToastUtils, UserUtils } from '../../session/utils';
 import { ConversationModel } from '../../models/conversation';
 
 import { getConversationController } from '../../session/conversations';
-import { SpacerLG, SpacerMD } from '../basic/Text';
 import autoBind from 'auto-bind';
 import { editProfileModal } from '../../state/ducks/modalDialog';
 import { uploadOurAvatar } from '../../interactions/conversationInteractions';

ts/components/dialog/SessionConfirm.tsx

@@ -2,12 +2,7 @@ import React, { useState } from 'react';
 import { SessionHtmlRenderer } from '../basic/SessionHTMLRenderer';
 import { updateConfirmModal } from '../../state/ducks/modalDialog';
 import { SpacerLG } from '../basic/Text';
-import {
-  SessionButton2,
-  SessionButtonColor,
-  SessionButtonShape,
-  SessionButtonType,
-} from '../basic/SessionButton2';
+import { SessionButton2, SessionButtonColor, SessionButtonType } from '../basic/SessionButton2';
 import { SessionSpinner } from '../basic/SessionSpinner';
 import { SessionIcon, SessionIconSize, SessionIconType } from '../icon';
 import { SessionWrapperModal } from '../SessionWrapperModal';

ts/components/dialog/UserDetailsDialog.tsx

@@ -10,7 +10,7 @@ import { ToastUtils } from '../../session/utils';
 import { openConversationWithMessages } from '../../state/ducks/conversations';
 import { updateUserDetailsModal, UserDetailsModalState } from '../../state/ducks/modalDialog';
 import { Avatar, AvatarSize } from '../avatar/Avatar';
-import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton';
+import { SessionButton2, SessionButtonType } from '../basic/SessionButton2';
 import { SessionIdEditable } from '../basic/SessionIdEditable';
 import { SpacerLG } from '../basic/Text';
 import { SessionWrapperModal } from '../SessionWrapperModal';
@@ -73,21 +73,19 @@ export const UserDetailsDialog = (props: UserDetailsModalState) => {
       <SessionIdEditable editable={false} text={props.conversationId} />
 
       <div className="session-modal__button-group__center">
-        <SessionButton
+        <SessionButton2
+          text={window.i18n('startConversation')}
+          buttonType={SessionButtonType.Simple}
+          onClick={onClickStartConversation}
+        />
+        <SessionButton2
           text={window.i18n('editMenuCopy')}
-          buttonType={SessionButtonType.Default}
-          buttonColor={SessionButtonColor.Primary}
+          buttonType={SessionButtonType.Simple}
           onClick={() => {
             copyToClipboard(props.conversationId);
             ToastUtils.pushCopiedToClipBoard();
           }}
         />
-        <SessionButton
-          text={window.i18n('startConversation')}
-          buttonType={SessionButtonType.Default}
-          buttonColor={SessionButtonColor.Green}
-          onClick={onClickStartConversation}
-        />
       </div>
     </SessionWrapperModal>
   );

ts/components/leftpane/LeftPaneSectionHeader.tsx

@@ -7,7 +7,7 @@ import { recoveryPhraseModal } from '../../state/ducks/modalDialog';
 import { Flex } from '../basic/Flex';
 import { getFocusedSection, getOverlayMode } from '../../state/selectors/section';
 import { SectionType } from '../../state/ducks/section';
-import { SessionButton, SessionButtonType } from '../basic/SessionButton';
+import { SessionButton2 } from '../basic/SessionButton2';
 import { isSignWithRecoveryPhrase } from '../../util/storage';
 import { MenuButton } from '../button/MenuButton';
 
@@ -59,7 +59,7 @@ const StyledBannerInner = styled.div`
   }
 
   .session-button {
-    margin-top: var(--margins-sm);
+    margin-top: var(--margins-md);
   }
 `;
 
@@ -74,8 +74,7 @@ const BannerInner = () => {
   return (
     <StyledBannerInner>
       <p>{window.i18n('recoveryPhraseRevealMessage')}</p>
-      <SessionButton
-        buttonType={SessionButtonType.Default}
+      <SessionButton2
         text={window.i18n('recoveryPhraseRevealButtonText')}
         onClick={showRecoveryPhraseModal}
         dataTestId="reveal-recovery-phrase"

ts/components/leftpane/overlay/OverlayClosedGroup.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 
 import { useDispatch, useSelector } from 'react-redux';
 
-import { SessionButton, SessionButtonColor, SessionButtonType } from '../../basic/SessionButton';
+import { SessionButton2 } from '../../basic/SessionButton2';
 import { SessionIdEditable } from '../../basic/SessionIdEditable';
 import { SessionSpinner } from '../../basic/SessionSpinner';
 import { MemberListItem } from '../../MemberListItem';
@@ -134,9 +134,7 @@ export const OverlayClosedGroup = () => {
 
       <SpacerLG style={{ flexShrink: 0 }} />
 
-      <SessionButton
-        buttonColor={SessionButtonColor.Green}
-        buttonType={SessionButtonType.BrandOutline}
+      <SessionButton2
         text={buttonText}
         disabled={disableCreateButton}
         onClick={onEnterPressed}

ts/components/leftpane/overlay/OverlayCommunity.tsx

@@ -3,7 +3,7 @@ import React, { useState } from 'react';
 
 import { SessionJoinableRooms } from './SessionJoinableDefaultRooms';
 
-import { SessionButton, SessionButtonColor, SessionButtonType } from '../../basic/SessionButton';
+import { SessionButton2 } from '../../basic/SessionButton2';
 import { SessionIdEditable } from '../../basic/SessionIdEditable';
 import { SessionSpinner } from '../../basic/SessionSpinner';
 import { OverlayHeader } from './OverlayHeader';
@@ -100,13 +100,7 @@ export const OverlayCommunity = () => {
         />
       </div>
 
-      <SessionButton
-        buttonColor={SessionButtonColor.Green}
-        buttonType={SessionButtonType.BrandOutline}
-        text={buttonText}
-        disabled={!groupUrl}
-        onClick={onTryJoinRoom}
-      />
+      <SessionButton2 text={buttonText} disabled={!groupUrl} onClick={onTryJoinRoom} />
 
       <SessionSpinner loading={loading} />
       <SessionJoinableRooms onJoinClick={onTryJoinRoom} alreadyJoining={loading} />

ts/components/leftpane/overlay/OverlayMessage.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 // tslint:disable: use-simple-attributes no-submodule-imports
 
 import { useDispatch } from 'react-redux';
-import { SessionButton, SessionButtonColor, SessionButtonType } from '../../basic/SessionButton';
+import { SessionButton2 } from '../../basic/SessionButton2';
 import { SessionIdEditable } from '../../basic/SessionIdEditable';
 import { SessionSpinner } from '../../basic/SessionSpinner';
 import { OverlayHeader } from './OverlayHeader';
@@ -127,9 +127,7 @@ export const OverlayMessage = () => {
         <YourSessionIDSelectable />
         <SessionIconButton iconSize="small" iconType="copy" onClick={copyOurSessionID} />
       </Flex>
-      <SessionButton
-        buttonColor={SessionButtonColor.Green}
-        buttonType={SessionButtonType.BrandOutline}
+      <SessionButton2
         text={buttonText}
         disabled={disableNextButton}
         onClick={handleMessageButtonClick}

ts/components/leftpane/overlay/OverlayMessageRequest.tsx

@@ -9,7 +9,7 @@ import {
 } from '../../../state/selectors/conversations';
 import { MemoConversationListItemWithDetails } from '../conversation-list-item/ConversationListItem';
 import styled from 'styled-components';
-import { SessionButton, SessionButtonColor, SessionButtonType } from '../../basic/SessionButton';
+import { SessionButton2, SessionButtonColor } from '../../basic/SessionButton2';
 import { resetOverlayMode, SectionType, showLeftPaneSection } from '../../../state/ducks/section';
 import { getConversationController } from '../../../session/conversations';
 import { forceSyncConfigurationNowIfNeeded } from '../../../session/utils/syncUtils';
@@ -129,9 +129,8 @@ export const OverlayMessageRequest = () => {
         <>
           <MessageRequestList />
           <SpacerLG />
-          <SessionButton
+          <SessionButton2
             buttonColor={SessionButtonColor.Danger}
-            buttonType={SessionButtonType.BrandOutline}
             text={buttonText}
             onClick={() => {
               handleClearAllRequestsClick(messageRequests);

ts/components/registration/SignInTab.tsx

@@ -1,7 +1,7 @@
 import React, { useContext, useState } from 'react';
 import { sanitizeSessionUsername } from '../../session/utils/String';
 import { Flex } from '../basic/Flex';
-import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton';
+import { SessionButton2 } from '../basic/SessionButton2';
 import { SessionSpinner } from '../basic/SessionSpinner';
 import { SpacerLG } from '../basic/Text';
 import {
@@ -24,10 +24,8 @@ export enum SignInMode {
 
 const LinkDeviceButton = (props: { onLinkDeviceButtonClicked: () => any }) => {
   return (
-    <SessionButton
+    <SessionButton2
       onClick={props.onLinkDeviceButtonClicked}
-      buttonType={SessionButtonType.BrandOutline}
-      buttonColor={SessionButtonColor.Green}
       text={window.i18n('linkDevice')}
       dataTestId="link-device"
     />
@@ -36,10 +34,8 @@ const LinkDeviceButton = (props: { onLinkDeviceButtonClicked: () => any }) => {
 
 const RestoreUsingRecoveryPhraseButton = (props: { onRecoveryButtonClicked: () => any }) => {
   return (
-    <SessionButton
+    <SessionButton2
       onClick={props.onRecoveryButtonClicked}
-      buttonType={SessionButtonType.BrandOutline}
-      buttonColor={SessionButtonColor.Green}
       text={window.i18n('restoreUsingRecoveryPhrase')}
       dataTestId="restore-using-recovery"
     />
@@ -51,10 +47,8 @@ const ContinueYourSessionButton = (props: {
   disabled: boolean;
 }) => {
   return (
-    <SessionButton
+    <SessionButton2
       onClick={props.handleContinueYourSessionClick}
-      buttonType={SessionButtonType.Brand}
-      buttonColor={SessionButtonColor.Green}
       text={window.i18n('continueYourSession')}
       disabled={props.disabled}
       dataTestId="continue-session-button"

ts/components/registration/SignUpTab.tsx

@@ -1,7 +1,7 @@
 import React, { useContext, useEffect, useState } from 'react';
 import { sanitizeSessionUsername } from '../../session/utils/String';
 import { Flex } from '../basic/Flex';
-import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton';
+import { SessionButton2 } from '../basic/SessionButton2';
 import { SessionIdEditable } from '../basic/SessionIdEditable';
 import { SessionIconButton } from '../icon';
 import { RegistrationContext, RegistrationPhase, signUp } from './RegistrationStages';
@@ -16,25 +16,11 @@ export enum SignUpMode {
 }
 
 const CreateSessionIdButton = ({ createSessionID }: { createSessionID: any }) => {
-  return (
-    <SessionButton
-      onClick={createSessionID}
-      buttonType={SessionButtonType.BrandOutline}
-      buttonColor={SessionButtonColor.Green}
-      text={window.i18n('createSessionID')}
-    />
-  );
+  return <SessionButton2 onClick={createSessionID} text={window.i18n('createSessionID')} />;
 };
 
 const ContinueSignUpButton = ({ continueSignUp }: { continueSignUp: any }) => {
-  return (
-    <SessionButton
-      onClick={continueSignUp}
-      buttonType={SessionButtonType.Brand}
-      buttonColor={SessionButtonColor.Green}
-      text={window.i18n('continue')}
-    />
-  );
+  return <SessionButton2 onClick={continueSignUp} text={window.i18n('continue')} />;
 };
 
 const SignUpDefault = (props: { createSessionID: () => void }) => {
@@ -151,10 +137,8 @@ export const SignUpTab = () => {
         }}
         stealAutoFocus={true}
       />
-      <SessionButton
+      <SessionButton2
         onClick={signUpWithDetails}
-        buttonType={SessionButtonType.Brand}
-        buttonColor={SessionButtonColor.Green}
         text={window.i18n('getStarted')}
         disabled={!enableCompleteSignUp}
       />

ts/components/settings/BlockedList.tsx

@@ -6,7 +6,7 @@ import styled from 'styled-components';
 import { useSet } from '../../hooks/useSet';
 import { ToastUtils } from '../../session/utils';
 import { BlockedNumberController } from '../../util';
-import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton';
+import { SessionButton2, SessionButtonColor } from '../basic/SessionButton2';
 import { SpacerLG } from '../basic/Text';
 import { SessionIconButton } from '../icon';
 import { MemberListItem } from '../MemberListItem';
@@ -128,9 +128,8 @@ export const BlockedContactsList = () => {
           ) : (
             <BlockedContactListTitleButtons>
               {hasAtLeastOneSelected && expanded ? (
-                <SessionButton
+                <SessionButton2
                   buttonColor={SessionButtonColor.Danger}
-                  buttonType={SessionButtonType.BrandOutline}
                   text={window.i18n('unblockUser')}
                   onClick={unBlockThoseUsers}
                 />

ts/components/settings/SessionNotificationGroupSettings.tsx

@@ -4,7 +4,7 @@ import useUpdate from 'react-use/lib/useUpdate';
 import styled from 'styled-components';
 import { SettingsKey } from '../../data/settings-key';
 import { Notifications } from '../../util/notifications';
-import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton';
+import { SessionButton2 } from '../basic/SessionButton2';
 import { SessionRadioGroup } from '../basic/SessionRadioGroup';
 import { SpacerLG } from '../basic/Text';
 import { SessionSettingsItemWrapper, SessionToggleWithDescription } from './SessionSettingListItem';
@@ -100,12 +100,7 @@ export const SessionNotificationGroupSettings = (props: { hasPassword: boolean |
           />
           <StyledButtonContainer>
             <SpacerLG />
-            <SessionButton
-              text={window.i18n('notificationPreview')}
-              buttonColor={SessionButtonColor.Green}
-              onClick={onClickPreview}
-              buttonType={SessionButtonType.BrandOutline}
-            />
+            <SessionButton2 text={window.i18n('notificationPreview')} onClick={onClickPreview} />
           </StyledButtonContainer>
         </SessionSettingsItemWrapper>
       ) : null}

ts/themes/SessionTheme.tsx

@@ -382,7 +382,7 @@ export const SessionGlobalStyles = createGlobalStyle`
     --border-session:  ${lightColorSessionBorder};
 
     /* CONSTANTS */
-    --compositionContainerHeight: 60px;
+    --composition-container-height: 60px;
     --search-input-height: 34px;
 
     /* COLORS NOT CHANGING BETWEEN THEMES */