keejef
/
session-desktop
mirror of https://github.com/oxen-io/session-desktop
2
0
Fork 0
Code Issues 8 Projects Releases Wiki Activity

fix: renamed button modal-confirm to ghost

Browse Source 
moved SessionButton defaults into component
pull/3056/head
William Grant 12 months ago
parent 0f6d80b847
commit 5cda16d845
7 changed files with 44 additions and 43 deletions
Show Stats Download Patch File Download Diff File

35
ts/components/basic/SessionButton.tsx
Unescape Escape View File

@ -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) => {
</StyledButton>
);
};
SessionButton.defaultProps = {
disabled: false,
buttonShape: SessionButtonShape.Round,
buttonType: SessionButtonType.Outline,
onClick: null,
} as Partial<Props>;

8
ts/components/dialog/TermsOfServicePrivacyDialog.tsx
Unescape Escape View File

@ -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
<ConfirmButtonContainer container={true} justifyContent="center" alignItems="center">
<SessionButton
text={window.i18n('termsOfService')}
buttonType={SessionButtonType.ModalConfirm}
buttonShape={SessionButtonShape.None}
buttonType={SessionButtonType.Ghost}
onClick={() => {
void shell.openExternal('https://getsession.org/terms-of-service');
}}
@ -52,8 +51,7 @@ export function TermsOfServicePrivacyDialog(props: TermsOfServicePrivacyDialogPr
/>
<SessionButton
text={window.i18n('privacyPolicy')}
buttonType={SessionButtonType.ModalConfirm}
buttonShape={SessionButtonShape.None}
buttonType={SessionButtonType.Ghost}
onClick={() => {
void shell.openExternal('https://getsession.org/privacy-policy');
}}

8
ts/themes/classicDark.ts
Unescape Escape View File

@ -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)',

8
ts/themes/classicLight.ts
Unescape Escape View File

@ -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)',

8
ts/themes/oceanDark.ts
Unescape Escape View File

@ -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)',

8
ts/themes/oceanLight.ts
Unescape Escape View File

@ -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)',

12
ts/themes/variableColors.tsx
Unescape Escape View File

@ -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;

Write Preview
Loading…
Cancel
Save