From 87b66794ed8997bc75c95c99bc3988f4cf489886 Mon Sep 17 00:00:00 2001 From: William Grant Date: Fri, 16 Sep 2022 13:39:19 +1000 Subject: [PATCH] feat: updated all session buttons to use new button small style fixes and sass cleanup --- stylesheets/_session.scss | 146 ------------------ stylesheets/_session_constants.scss | 6 - stylesheets/_session_conversation.scss | 49 +----- stylesheets/_session_group_panel.scss | 12 -- stylesheets/_session_left_pane.scss | 1 + stylesheets/_session_signin.scss | 5 +- ts/components/DebugLogView.tsx | 5 +- ts/components/SessionPasswordPrompt.tsx | 32 ++-- ts/components/basic/SessionButton2.tsx | 7 +- .../conversation/ConversationHeader.tsx | 17 +- .../ConversationRequestButtons.tsx | 10 +- ts/components/conversation/H5AudioPlayer.tsx | 11 +- .../conversation/SessionRightPanel.tsx | 38 ++++- .../composition/CompositionBox.tsx | 6 +- ts/components/dialog/EditProfileDialog.tsx | 1 - ts/components/dialog/SessionConfirm.tsx | 7 +- ts/components/dialog/UserDetailsDialog.tsx | 18 +-- .../leftpane/LeftPaneSectionHeader.tsx | 7 +- .../leftpane/overlay/OverlayClosedGroup.tsx | 6 +- .../leftpane/overlay/OverlayCommunity.tsx | 10 +- .../leftpane/overlay/OverlayMessage.tsx | 6 +- .../overlay/OverlayMessageRequest.tsx | 5 +- ts/components/registration/SignInTab.tsx | 14 +- ts/components/registration/SignUpTab.tsx | 24 +-- ts/components/settings/BlockedList.tsx | 5 +- .../SessionNotificationGroupSettings.tsx | 9 +- ts/themes/SessionTheme.tsx | 2 +- 27 files changed, 108 insertions(+), 351 deletions(-) diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss index 2095b5fbc..3a3599b3d 100644 --- a/stylesheets/_session.scss +++ b/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); diff --git a/stylesheets/_session_constants.scss b/stylesheets/_session_constants.scss index 0096a4d62..2a9d6c570 100644 --- a/stylesheets/_session_constants.scss +++ b/stylesheets/_session_constants.scss @@ -176,9 +176,3 @@ $session-transition-duration: 0.25s; opacity: 1; } } - -// ////////////////////////////////////////////// -// ///////////////// Various //////////////////// -// ////////////////////////////////////////////// - -$composition-container-height: 60px; diff --git a/stylesheets/_session_conversation.scss b/stylesheets/_session_conversation.scss index 1164bfb5c..a8e6b86ae 100644 --- a/stylesheets/_session_conversation.scss +++ b/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; diff --git a/stylesheets/_session_group_panel.scss b/stylesheets/_session_group_panel.scss index 215b89b28..0a651b143 100644 --- a/stylesheets/_session_group_panel.scss +++ b/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; } diff --git a/stylesheets/_session_left_pane.scss b/stylesheets/_session_left_pane.scss index 3872d6a89..d85e49724 100644 --- a/stylesheets/_session_left_pane.scss +++ b/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; diff --git a/stylesheets/_session_signin.scss b/stylesheets/_session_signin.scss index 729a76859..ce2628d7b 100644 --- a/stylesheets/_session_signin.scss +++ b/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 { diff --git a/ts/components/DebugLogView.tsx b/ts/components/DebugLogView.tsx index a2ea2d428..928d2bf7d 100644 --- a/ts/components/DebugLogView.tsx +++ b/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 (
- { if (props.content.length <= 20) { // loading diff --git a/ts/components/SessionPasswordPrompt.tsx b/ts/components/SessionPasswordPrompt.tsx index 521744b05..782218e8e 100644 --- a/ts/components/SessionPasswordPrompt.tsx +++ b/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 (
+ {showResetElements && ( <> - )} -
); } @@ -195,21 +193,17 @@ class SessionPasswordPromptInner extends React.PureComponent<{}, State> { private renderClearDataViewButtons(): JSX.Element { return (
- + { this.setState({ clearDataView: false }); }} /> - -
); } diff --git a/ts/components/basic/SessionButton2.tsx b/ts/components/basic/SessionButton2.tsx index 2fbbf455e..af74b7c9c 100644 --- a/ts/components/basic/SessionButton2.tsx +++ b/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);'}; } } `; diff --git a/ts/components/conversation/ConversationHeader.tsx b/ts/components/conversation/ConversationHeader.tsx index 6ec78fcf6..c84bf868f 100644 --- a/ts/components/conversation/ConversationHeader.tsx +++ b/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 = () => {
{!isOnlyServerDeletable && ( - )} - diff --git a/ts/components/conversation/ConversationRequestButtons.tsx b/ts/components/conversation/ConversationRequestButtons.tsx index d274c2262..53561a142 100644 --- a/ts/components/conversation/ConversationRequestButtons.tsx +++ b/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 ( - { await handleAcceptConversationRequest(selectedConversation.id); }} text={window.i18n('accept')} dataTestId="accept-message-request" /> - { handleDeclineConversationRequest(selectedConversation.id); diff --git a/ts/components/conversation/H5AudioPlayer.tsx b/ts/components/conversation/H5AudioPlayer.tsx index 8de5d639f..52de95f2d 100644 --- a/ts/components/conversation/H5AudioPlayer.tsx +++ b/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, - { setPlaybackSpeed(playbackSpeed === 1 ? 1.5 : 1); }} buttonType={SessionButtonType.Simple} - buttonColor={SessionButtonColor.None} /> , ]} diff --git a/ts/components/conversation/SessionRightPanel.tsx b/ts/components/conversation/SessionRightPanel.tsx index 83c840607..dc760504d 100644 --- a/ts/components/conversation/SessionRightPanel.tsx +++ b/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 = () => { {isGroup && ( // tslint:disable-next-line: use-simple-attributes - + + + )}
); diff --git a/ts/components/conversation/composition/CompositionBox.tsx b/ts/components/conversation/composition/CompositionBox.tsx index 6a9273152..45ba66261 100644 --- a/ts/components/conversation/composition/CompositionBox.tsx +++ b/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); diff --git a/ts/components/dialog/EditProfileDialog.tsx b/ts/components/dialog/EditProfileDialog.tsx index 775f62c7f..6f95ec841 100644 --- a/ts/components/dialog/EditProfileDialog.tsx +++ b/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'; diff --git a/ts/components/dialog/SessionConfirm.tsx b/ts/components/dialog/SessionConfirm.tsx index fbcf90a07..f663dcfb0 100644 --- a/ts/components/dialog/SessionConfirm.tsx +++ b/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'; diff --git a/ts/components/dialog/UserDetailsDialog.tsx b/ts/components/dialog/UserDetailsDialog.tsx index f8d43c69c..6e82680a8 100644 --- a/ts/components/dialog/UserDetailsDialog.tsx +++ b/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) => {
- + { copyToClipboard(props.conversationId); ToastUtils.pushCopiedToClipBoard(); }} /> -
); diff --git a/ts/components/leftpane/LeftPaneSectionHeader.tsx b/ts/components/leftpane/LeftPaneSectionHeader.tsx index 3d5860d0e..b2b25c1f5 100644 --- a/ts/components/leftpane/LeftPaneSectionHeader.tsx +++ b/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 (

{window.i18n('recoveryPhraseRevealMessage')}

- { - { />
- + diff --git a/ts/components/leftpane/overlay/OverlayMessage.tsx b/ts/components/leftpane/overlay/OverlayMessage.tsx index 93a7ede6d..92536dde1 100644 --- a/ts/components/leftpane/overlay/OverlayMessage.tsx +++ b/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 = () => { - { <> - { handleClearAllRequestsClick(messageRequests); diff --git a/ts/components/registration/SignInTab.tsx b/ts/components/registration/SignInTab.tsx index f0505c862..472eae03e 100644 --- a/ts/components/registration/SignInTab.tsx +++ b/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 ( - @@ -36,10 +34,8 @@ const LinkDeviceButton = (props: { onLinkDeviceButtonClicked: () => any }) => { const RestoreUsingRecoveryPhraseButton = (props: { onRecoveryButtonClicked: () => any }) => { return ( - @@ -51,10 +47,8 @@ const ContinueYourSessionButton = (props: { disabled: boolean; }) => { return ( - { - return ( - - ); + return ; }; const ContinueSignUpButton = ({ continueSignUp }: { continueSignUp: any }) => { - return ( - - ); + return ; }; const SignUpDefault = (props: { createSessionID: () => void }) => { @@ -151,10 +137,8 @@ export const SignUpTab = () => { }} stealAutoFocus={true} /> - diff --git a/ts/components/settings/BlockedList.tsx b/ts/components/settings/BlockedList.tsx index e32c80ace..4730cc7f7 100644 --- a/ts/components/settings/BlockedList.tsx +++ b/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 = () => { ) : ( {hasAtLeastOneSelected && expanded ? ( - diff --git a/ts/components/settings/SessionNotificationGroupSettings.tsx b/ts/components/settings/SessionNotificationGroupSettings.tsx index e5e96256e..57477b504 100644 --- a/ts/components/settings/SessionNotificationGroupSettings.tsx +++ b/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 | /> - + ) : null} diff --git a/ts/themes/SessionTheme.tsx b/ts/themes/SessionTheme.tsx index 0319d204e..ea41be377 100644 --- a/ts/themes/SessionTheme.tsx +++ b/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 */