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

feat: themed lightbox

This commit is contained in:
William Grant 2022-10-05 08:38:27 +11:00
parent 4762dd2508
commit de7d0f2bdb
3 changed files with 50 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
ts/components/lightbox/Lightbox.tsx
View File

@ -16,11 +16,6 @@ import * as MIME from '../../types/MIME';
import { isUndefined } from 'lodash';
import styled from 'styled-components';
const Colors = {
TEXT_SECONDARY: '#bbb',
ICON_SECONDARY: 'var(--color-light-gray-color)',
};
const colorSVG = (url: string, color: string) => {
return {
WebkitMask: `url(${url}) no-repeat center`,
@ -53,7 +48,7 @@ const styles = {
right: 0,
top: 0,
bottom: 0,
backgroundColor: 'rgba(0, 0, 0, 0.8)',
backgroundColor: 'var(--lightbox-background-color)',
} as React.CSSProperties,
mainContainer: {
display: 'flex',
@ -95,7 +90,7 @@ const styles = {
padding: '1em',
paddingLeft: '3em',
paddingRight: '3em',
backgroundColor: 'rgba(192, 192, 192, .40)',
backgroundColor: 'var(--lightbox-caption-background-color)',
} as React.CSSProperties,
controlsOffsetPlaceholder: {
width: CONTROLS_WIDTH,
@ -181,7 +176,7 @@ const IconButton = ({ onClick, type }: IconButtonProps) => {
iconSize={'huge'}
iconRotation={iconRotation}
// the lightbox has a dark background
iconColor="var(--white-color)"
iconColor="var(--lightbox-icon-stroke-color)"
onClick={clickHandler}
/>
</StyledIconButton>
@ -200,7 +195,7 @@ const Icon = ({
<div
style={{
...(styles.object as any),
...colorSVG(url, Colors.ICON_SECONDARY),
...colorSVG(url, 'var(--lightbox-icon-stroke-color)'),
maxWidth: 200,
}}
onClick={onClick}

6
ts/themes/SessionTheme.tsx
View File

@ -671,6 +671,12 @@ export const SessionGlobalStyles = createGlobalStyle`
--suggestions-background-hover-color: ${THEMES.CLASSIC_LIGHT.COLOR4};
--suggestions-text-color: var(--text-primary-color);
--suggestions-shadow: rgba(${hexColorToRGB(COLORS.BLACK)}, 0.24) 0px 3px 8px;
/* Lightbox */
--lightbox-background-color: rgba(${hexColorToRGB(COLORS.BLACK)}, 0.8);
--lightbox-caption-background-color: 'rgba(192, 192, 192, .40)';
--lightbox-icon-stroke-color: var(--white-color);
};
`;

40
ts/themes/switchTheme.tsx
View File

@ -400,6 +400,16 @@ function loadClassicLight(primaryColor?: PrimaryColorStateType) {
'--suggestions-shadow',
`rgba(${hexColorToRGB(COLORS.BLACK)}, 0.24) 0px 3px 8px`
);
document.documentElement.style.setProperty(
'--lightbox-background-color',
`rgba(${hexColorToRGB(COLORS.BLACK)}, 0.8)`
);
document.documentElement.style.setProperty(
'--lightbox-caption-background-color',
'rgba(192, 192, 192, .40)'
);
document.documentElement.style.setProperty('--lightbox-icon-stroke-color', 'var(--white-color)');
}
function loadClassicDark(primaryColor?: PrimaryColorStateType) {
@ -789,6 +799,16 @@ function loadClassicDark(primaryColor?: PrimaryColorStateType) {
'--suggestions-shadow',
`rgba(${hexColorToRGB(COLORS.BLACK)}, 0.24) 0px 3px 8px`
);
document.documentElement.style.setProperty(
'--lightbox-background-color',
`rgba(${hexColorToRGB(COLORS.BLACK)}, 0.8)`
);
document.documentElement.style.setProperty(
'--lightbox-caption-background-color',
'rgba(192, 192, 192, .40)'
);
document.documentElement.style.setProperty('--lightbox-icon-stroke-color', 'var(--white-color)');
}
function loadOceanLight(primaryColor?: PrimaryColorStateType) {
@ -1184,6 +1204,16 @@ function loadOceanLight(primaryColor?: PrimaryColorStateType) {
'--suggestions-shadow',
`rgba(${hexColorToRGB(COLORS.BLACK)}, 0.24) 0px 3px 8px`
);
document.documentElement.style.setProperty(
'--lightbox-background-color',
`rgba(${hexColorToRGB(COLORS.BLACK)}, 0.8)`
);
document.documentElement.style.setProperty(
'--lightbox-caption-background-color',
'rgba(192, 192, 192, .40)'
);
document.documentElement.style.setProperty('--lightbox-icon-stroke-color', 'var(--white-color)');
}
function loadOceanDark(primaryColor?: PrimaryColorStateType) {
@ -1569,6 +1599,16 @@ function loadOceanDark(primaryColor?: PrimaryColorStateType) {
'--suggestions-shadow',
`rgba(${hexColorToRGB(COLORS.BLACK)}, 0.24) 0px 3px 8px`
);
document.documentElement.style.setProperty(
'--lightbox-background-color',
`rgba(${hexColorToRGB(COLORS.BLACK)}, 0.8)`
);
document.documentElement.style.setProperty(
'--lightbox-caption-background-color',
'rgba(192, 192, 192, .40)'
);
document.documentElement.style.setProperty('--lightbox-icon-stroke-color', 'var(--white-color)');
}
export async function switchTheme(theme: ThemeStateType) {