diff --git a/stylesheets/_session_signin.scss b/stylesheets/_session_signin.scss index 730e03c64..12eabac6c 100644 --- a/stylesheets/_session_signin.scss +++ b/stylesheets/_session_signin.scss @@ -48,7 +48,8 @@ width: 289px; .session-button { - width: 100%; + width: 80%; + margin: auto; } } @@ -175,7 +176,7 @@ } } - session-description-long { + &-description-long { padding-top: 0; padding-bottom: 20px; diff --git a/ts/components/basic/SessionRadio.tsx b/ts/components/basic/SessionRadio.tsx index 275dabc47..44f6379d4 100644 --- a/ts/components/basic/SessionRadio.tsx +++ b/ts/components/basic/SessionRadio.tsx @@ -8,6 +8,7 @@ type Props = { value: string; active: boolean; inputName?: string; + beforeMargins?: string; onClick?: (value: string) => void; }; @@ -22,8 +23,7 @@ const StyledInput = styled.input<{ width: ${props => props.filledSize + props.outlineOffset}px; height: ${props => props.filledSize + props.outlineOffset}px; - :checked + label:before, - :hover + label:before { + :checked + label:before { background: ${props => props.selectedColor}; } `; @@ -32,6 +32,7 @@ const StyledLabel = styled.label<{ selectedColor: string; filledSize: number; outlineOffset: number; + beforeMargins?: string; }>` cursor: pointer; @@ -45,15 +46,12 @@ const StyledLabel = styled.label<{ outline: var(--color-text) solid 1px; border: none; outline-offset: ${props => props.outlineOffset}px; - - :hover { - background: ${props => props.selectedColor}; - } + margin: ${props => props.beforeMargins || ''}; } `; export const SessionRadio = (props: Props) => { - const { label, inputName, value, active, onClick } = props; + const { label, inputName, value, active, onClick, beforeMargins } = props; function clickHandler(e: ChangeEvent) { if (onClick) { @@ -76,7 +74,7 @@ export const SessionRadio = (props: Props) => { aria-checked={active} checked={active} onChange={clickHandler} - filledSize={filledSize} + filledSize={filledSize * 2} outlineOffset={outlineOffset} selectedColor={selectedColor} /> @@ -87,6 +85,7 @@ export const SessionRadio = (props: Props) => { selectedColor={selectedColor} filledSize={filledSize} outlineOffset={outlineOffset} + beforeMargins={beforeMargins} > {label} diff --git a/ts/components/basic/SessionRadioGroup.tsx b/ts/components/basic/SessionRadioGroup.tsx index eedfeaa40..3d9d193e1 100644 --- a/ts/components/basic/SessionRadioGroup.tsx +++ b/ts/components/basic/SessionRadioGroup.tsx @@ -12,6 +12,10 @@ interface Props { } const StyledFieldSet = styled.fieldset` + display: flex; + flex-direction: column; + gap: var(--margins-xs); + border: none; margin-inline-start: var(--margins-sm); margin-top: var(--margins-sm); @@ -41,6 +45,7 @@ export const SessionRadioGroup = (props: Props) => { setActiveItem(value); props.onClick(value); }} + beforeMargins={'0 var(--margins-sm) 0 0 '} /> ); })} diff --git a/ts/components/settings/SettingsThemeSwitcher.tsx b/ts/components/settings/SettingsThemeSwitcher.tsx index 7701b8a0b..ab7af0f6d 100644 --- a/ts/components/settings/SettingsThemeSwitcher.tsx +++ b/ts/components/settings/SettingsThemeSwitcher.tsx @@ -86,17 +86,7 @@ const ThemePreview = (props: { style: StyleSessionSwitcher }) => { ); }; -const Themes = (props: { selectedAccent?: PrimaryColorIds }) => { - const { selectedAccent } = props; - - // I am not too sure if we want to override the accent color on the Theme switcher of not. - // If we do, we also need a way to rollback to the default, I guess? - const overridenAccent = selectedAccent - ? getPrimaryColors().find(e => { - return e.id === selectedAccent; - })?.color - : undefined; - +const Themes = () => { const themes: Array = [ { id: 'dark', @@ -105,7 +95,7 @@ const Themes = (props: { selectedAccent?: PrimaryColorIds }) => { background: '#000000', border: '#414141', receivedBg: darkColorReceivedMessageBg, - sentBg: overridenAccent || darkColorSentMessageBg, + sentBg: darkColorSentMessageBg, }, }, { @@ -115,7 +105,7 @@ const Themes = (props: { selectedAccent?: PrimaryColorIds }) => { background: '#ffffff', border: '#414141', receivedBg: lightColorReceivedMessageBg, - sentBg: overridenAccent || lightColorSentMessageBg, + sentBg: lightColorSentMessageBg, }, }, { @@ -125,7 +115,7 @@ const Themes = (props: { selectedAccent?: PrimaryColorIds }) => { background: OceanBlueDark.background, border: OceanBlueDark.border, receivedBg: OceanBlueDark.received, - sentBg: overridenAccent || OceanBlueDark.sent, + sentBg: OceanBlueDark.sent, }, }, { @@ -135,7 +125,7 @@ const Themes = (props: { selectedAccent?: PrimaryColorIds }) => { background: OceanBlueLight.background, border: OceanBlueLight.border, receivedBg: OceanBlueLight.received, - sentBg: overridenAccent || OceanBlueLight.sent, + sentBg: OceanBlueLight.sent, }, }, ]; @@ -176,7 +166,7 @@ export const SettingsThemeSwitcher = () => { {window.i18n('themesSettingTitle')} - + {window.i18n('primaryColor')}