From 5cda16d8451ba800d684242073e9e6b9436bf3c6 Mon Sep 17 00:00:00 2001 From: William Grant Date: Wed, 17 Apr 2024 11:03:19 +1000 Subject: [PATCH] fix: renamed button modal-confirm to ghost moved SessionButton defaults into component --- ts/components/basic/SessionButton.tsx | 35 ++++++++++--------- .../dialog/TermsOfServicePrivacyDialog.tsx | 8 ++--- ts/themes/classicDark.ts | 8 ++--- ts/themes/classicLight.ts | 8 ++--- ts/themes/oceanDark.ts | 8 ++--- ts/themes/oceanLight.ts | 8 ++--- ts/themes/variableColors.tsx | 12 +++---- 7 files changed, 44 insertions(+), 43 deletions(-) diff --git a/ts/components/basic/SessionButton.tsx b/ts/components/basic/SessionButton.tsx index f387d8581..dfaa20c12 100644 --- a/ts/components/basic/SessionButton.tsx +++ b/ts/components/basic/SessionButton.tsx @@ -6,7 +6,7 @@ export enum SessionButtonType { Outline = 'outline', Simple = 'simple', Solid = 'solid', - ModalConfirm = 'modal-confirm', + Ghost = 'ghost', } export enum SessionButtonShape { @@ -35,7 +35,7 @@ const StyledButton = styled.button<{ buttonType: SessionButtonType; buttonShape: SessionButtonShape; }>` - width: ${props => (props.buttonType === SessionButtonType.ModalConfirm ? '100%' : 'auto')}; + width: ${props => (props.buttonType === SessionButtonType.Ghost ? '100%' : 'auto')}; display: flex; justify-content: center; align-items: center; @@ -47,9 +47,9 @@ const StyledButton = styled.button<{ transition: var(--default-duration); background-repeat: no-repeat; overflow: hidden; - height: ${props => (props.buttonType === SessionButtonType.ModalConfirm ? undefined : '34px')}; + height: ${props => (props.buttonType === SessionButtonType.Ghost ? undefined : '34px')}; padding: ${props => - props.buttonType === SessionButtonType.ModalConfirm ? '16px 24px 24px' : '0px 18px'}; + props.buttonType === SessionButtonType.Ghost ? '16px 24px 24px' : '0px 18px'}; background-color: ${props => props.buttonType === SessionButtonType.Solid && props.color ? `var(--${props.color}-color)` @@ -114,18 +114,28 @@ const StyledButton = styled.button<{ type Props = { text?: string; disabled?: boolean; - buttonType: SessionButtonType; - buttonShape: SessionButtonShape; + buttonType?: SessionButtonType; + buttonShape?: SessionButtonShape; buttonColor?: SessionButtonColor; // will override theme - onClick: any; + onClick?: any; children?: ReactNode; margin?: string; dataTestId?: string; }; export const SessionButton = (props: Props) => { - const { buttonType, buttonShape, dataTestId, buttonColor, text, disabled, onClick, margin } = - props; + const { + buttonType = SessionButtonType.Outline, + buttonShape = buttonType === SessionButtonType.Ghost + ? SessionButtonShape.None + : SessionButtonShape.Round, + dataTestId, + buttonColor, + text, + disabled = false, + onClick = null, + margin, + } = props; const clickHandler = (e: any) => { if (onClick) { @@ -156,10 +166,3 @@ export const SessionButton = (props: Props) => { ); }; - -SessionButton.defaultProps = { - disabled: false, - buttonShape: SessionButtonShape.Round, - buttonType: SessionButtonType.Outline, - onClick: null, -} as Partial; diff --git a/ts/components/dialog/TermsOfServicePrivacyDialog.tsx b/ts/components/dialog/TermsOfServicePrivacyDialog.tsx index eb79ba62c..703d6236d 100644 --- a/ts/components/dialog/TermsOfServicePrivacyDialog.tsx +++ b/ts/components/dialog/TermsOfServicePrivacyDialog.tsx @@ -4,7 +4,7 @@ import styled from 'styled-components'; import { updateTermsOfServicePrivacyModal } from '../../state/onboarding/ducks/modals'; import { SessionWrapperModal } from '../SessionWrapperModal'; import { Flex } from '../basic/Flex'; -import { SessionButton, SessionButtonShape, SessionButtonType } from '../basic/SessionButton'; +import { SessionButton, SessionButtonType } from '../basic/SessionButton'; import { SpacerSM } from '../basic/Text'; // NOTE we want to bypass the padding on the modal body so the buttons take up the full space @@ -43,8 +43,7 @@ export function TermsOfServicePrivacyDialog(props: TermsOfServicePrivacyDialogPr { void shell.openExternal('https://getsession.org/terms-of-service'); }} @@ -52,8 +51,7 @@ export function TermsOfServicePrivacyDialog(props: TermsOfServicePrivacyDialogPr /> { void shell.openExternal('https://getsession.org/privacy-policy'); }} diff --git a/ts/themes/classicDark.ts b/ts/themes/classicDark.ts index 018ce13a1..b9aec7f7e 100644 --- a/ts/themes/classicDark.ts +++ b/ts/themes/classicDark.ts @@ -58,13 +58,13 @@ export const classicDark: ThemeColorVariables = { '--button-solid-disabled-color': THEMES.CLASSIC_DARK.COLOR4, '--button-solid-shadow-color': 'none', + '--button-ghost-background-color': 'none', + '--button-ghost-background-hover-color': THEMES.CLASSIC_DARK.COLOR2, + '--button-ghost-disabled-color': 'none', + '--button-simple-text-color': 'var(--text-primary-color)', '--button-simple-disabled-color': 'var(--disabled-color)', - '--button-modal-confirm-background-color': 'none', - '--button-modal-confirm-background-hover-color': THEMES.CLASSIC_DARK.COLOR2, - '--button-modal-confirm-disabled-color': 'none', - '--button-icon-background-color': 'var(--transparent-color)', '--button-icon-stroke-color': 'var(--text-secondary-color)', '--button-icon-stroke-hover-color': 'var(--text-primary-color)', diff --git a/ts/themes/classicLight.ts b/ts/themes/classicLight.ts index 8742ca18f..a4001157c 100644 --- a/ts/themes/classicLight.ts +++ b/ts/themes/classicLight.ts @@ -58,13 +58,13 @@ export const classicLight: ThemeColorVariables = { '--button-solid-disabled-color': THEMES.CLASSIC_LIGHT.COLOR4, '--button-solid-shadow-color': `rgba(${hexColorToRGB(THEMES.CLASSIC_LIGHT.COLOR0)}, 0.25)`, + '--button-ghost-background-color': 'none', + '--button-ghost-background-hover-color': THEMES.CLASSIC_LIGHT.COLOR4, + '--button-ghost-disabled-color': 'none', + '--button-simple-text-color': 'var(--text-primary-color)', '--button-simple-disabled-color': 'var(--disabled-color)', - '--button-modal-confirm-background-color': 'none', - '--button-modal-confirm-background-hover-color': THEMES.CLASSIC_LIGHT.COLOR4, - '--button-modal-confirm-disabled-color': 'none', - '--button-icon-background-color': 'var(--transparent-color)', '--button-icon-stroke-color': 'var(--text-secondary-color)', '--button-icon-stroke-hover-color': 'var(--text-primary-color)', diff --git a/ts/themes/oceanDark.ts b/ts/themes/oceanDark.ts index 223619b79..c60d16bd4 100644 --- a/ts/themes/oceanDark.ts +++ b/ts/themes/oceanDark.ts @@ -58,13 +58,13 @@ export const oceanDark: ThemeColorVariables = { '--button-solid-disabled-color': THEMES.OCEAN_DARK.COLOR4, '--button-solid-shadow-color': 'none', + '--button-ghost-background-color': 'none', + '--button-ghost-background-hover-color': THEMES.OCEAN_DARK.COLOR6, + '--button-ghost-disabled-color': 'none', + '--button-simple-text-color': 'var(--text-primary-color)', '--button-simple-disabled-color': 'var(--disabled-color)', - '--button-modal-confirm-background-color': 'none', - '--button-modal-confirm-background-hover-color': THEMES.OCEAN_DARK.COLOR6, - '--button-modal-confirm-disabled-color': 'none', - '--button-icon-background-color': 'var(--transparent-color)', '--button-icon-stroke-color': 'var(--text-secondary-color)', '--button-icon-stroke-hover-color': 'var(--text-primary-color)', diff --git a/ts/themes/oceanLight.ts b/ts/themes/oceanLight.ts index 0e565bfa4..43fe0d7c0 100644 --- a/ts/themes/oceanLight.ts +++ b/ts/themes/oceanLight.ts @@ -58,13 +58,13 @@ export const oceanLight: ThemeColorVariables = { '--button-solid-disabled-color': THEMES.OCEAN_LIGHT.COLOR4, '--button-solid-shadow-color': `rgba(${hexColorToRGB(THEMES.OCEAN_LIGHT.COLOR0)}, 0.25)`, + '--button-ghost-background-color': 'none', + '--button-ghost-background-hover-color': THEMES.OCEAN_LIGHT.COLOR6, + '--button-ghost-disabled-color': 'none', + '--button-simple-text-color': 'var(--text-primary-color)', '--button-simple-disabled-color': 'var(--disabled-color)', - '--button-modal-confirm-background-color': 'none', - '--button-modal-confirm-background-hover-color': THEMES.OCEAN_LIGHT.COLOR6, - '--button-modal-confirm-disabled-color': 'none', - '--button-icon-background-color': 'var(--transparent-color)', '--button-icon-stroke-color': 'var(--text-secondary-color)', '--button-icon-stroke-hover-color': 'var(--text-primary-color)', diff --git a/ts/themes/variableColors.tsx b/ts/themes/variableColors.tsx index ace968b83..e28f11cee 100644 --- a/ts/themes/variableColors.tsx +++ b/ts/themes/variableColors.tsx @@ -69,16 +69,16 @@ export type ThemeColorVariables = { '--button-solid-disabled-color': string; '--button-solid-shadow-color': string; + /* Ghost */ + '--button-ghost-background-color': string; + '--button-ghost-background-hover-color': string; + /* Ghost buttons don't change color and use a disabled pointer instead */ + '--button-ghost-disabled-color': string; + /* Simple */ '--button-simple-text-color': string; '--button-simple-disabled-color': string; - /* Confirm */ - '--button-modal-confirm-background-color': string; - '--button-modal-confirm-background-hover-color': string; - /* Confirm buttons stay the same and rely on the disabled pointer */ - '--button-modal-confirm-disabled-color': string; - /* Icons */ '--button-icon-background-color': string; '--button-icon-stroke-color': string;