oxen-io/session-desktop
1
0
Fork 0
mirror of https://github.com/oxen-io/session-desktop.git synced 2023-12-14 02:12:57 +01:00
Code Issues Projects Releases Wiki Activity

feat: updated session toggle styling

Browse source
This commit is contained in:
William Grant 2022-09-19 15:10:02 +10:00
parent 0ab882ec86
commit 7cf9d2f05c
2 changed files with 17 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
ts/components/basic/SessionToggle.tsx
View file

@ -2,19 +2,19 @@ import React from 'react';
import { updateConfirmModal } from '../../state/ducks/modalDialog';
import { useDispatch } from 'react-redux';
import styled from 'styled-components';
import { whiteColor } from '../../themes/SessionTheme';
const StyledKnob = styled.div<{ active: boolean }>`
position: absolute;
top: 0.5px;
left: 0.5px;
top: ${props => (props.active ? '1px' : '0.5px')};
left: ${props => (props.active ? '2px' : '0.5px')};
height: 21px;
width: 21px;
border-radius: 28px;
/* TODO Theming update */
background-color: ${whiteColor};
background-color: var(--toggle-switch-ball-color);
box-shadow: ${props =>
props.active ? '-2px 1px 3px rgba(0, 0, 0, 0.15)' : '2px 1px 3px rgba(0, 0, 0, 0.15);'};
props.active
? '-2px 1px 3px var(--toggle-switch-ball-shadow-color);'
: '2px 1px 3px var(--toggle-switch-ball-shadow-color);'};
transition: transform var(--default-duration) ease, background-color var(--default-duration) ease;
@ -24,17 +24,22 @@ const StyledKnob = styled.div<{ active: boolean }>`
const StyledSessionToggle = styled.div<{ active: boolean }>`
width: 51px;
height: 25px;
border: 1px solid #e5e5ea; // TODO Theming update
background-color: (--toggle-switch-off-background-color);
border: 1px solid var(--toggle-switch-off-border-color);
border-radius: 16px;
position: relative;
cursor: pointer;
background-color: var(--color-transparent-color);
transition: var(--default-duration);
background-color: ${props =>
props.active ? 'var(--color-accent)' : 'var(--color-clickable-hovered)'};
border-color: ${props => (props.active ? 'var(--color-accent)' : 'var(--color-cell-background)')};
props.active
? 'var(--toggle-switch-on-background-color)'
: 'var(--toggle-switch-off-background-color)'};
border-color: ${props =>
props.active
? 'var(--toggle-switch-on-border-color)'
: 'var(--toggle-switch-off-border-color)'};
`;
type Props = {

3
ts/themes/SessionTheme.tsx
View file

@ -583,7 +583,8 @@ export const SessionGlobalStyles = createGlobalStyle`
--zoom-bar-selector-color: var(--primary-color);
/* Toggle Switch */
--toggle-switch-ball-color: ;
--toggle-switch-ball-color: var(--white-color);
--toggle-switch-ball-shadow-color: rgba(${hexColorToRGB(COLORS.BLACK)}, 0.15);
/* TODO Theming think this should be white instead of transparent */
--toggle-switch-off-background-color: var(--transparent-color);
--toggle-switch-off-border-color: var(--border-color);