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

feat: can now switch the primary color

Browse Source
pull/2521/head
William Grant 3 years ago
parent f5e5c5ef87
commit 7e29e18a56
10 changed files with 72 additions and 54 deletions
Show Stats Download Patch File Download Diff File

8
stylesheets/_modal.scss
Unescape Escape View File

@ -108,18 +108,18 @@
// button {
// float: right;
// margin-inline-start: 10px;
// background-color: var(--color-session-green-color);
// background-color: var(--primary-color);
// border-radius: 100px;
// padding: 5px 15px;
// border: 1px solid var(--color-session-green-color);
// border: 1px solid var(--primary-color);
// color: white;
// outline: none;
// user-select: none;
// &:hover,
// &:disabled {
// background-color: var(--color-session-green-color)-dark;
// border-color: var(--color-session-green-color)-dark;
// background-color: var(--primary-color)-dark;
// border-color: var(--primary-color)-dark;
// }
// &:disabled {

4
stylesheets/_modules.scss
Unescape Escape View File

@ -597,7 +597,7 @@
height: 36px;
width: 36px;
@include color-svg('../images/play.svg', var(--color-session-green-color));
@include color-svg('../images/play.svg', var(--primary-color));
}
.module-media-grid-item__icon-video {
@ -826,7 +826,7 @@
height: 36px;
width: 36px;
@include color-svg('../images/play.svg', var(--color-session-green-color));
@include color-svg('../images/play.svg', var(--primary-color));
}
.module-image__text-container {

22
stylesheets/_quote.scss
Unescape Escape View File

@ -54,19 +54,19 @@
}
.module-quote__icon-container__icon--file {
@include color-svg('../images/file.svg', var(--color-session-green-color));
@include color-svg('../images/file.svg', var(--primary-color));
}
.module-quote__icon-container__icon--image {
@include color-svg('../images/image.svg', var(--color-session-green-color));
@include color-svg('../images/image.svg', var(--primary-color));
}
.module-quote__icon-container__icon--microphone {
@include color-svg('../images/microphone.svg', var(--color-session-green-color));
@include color-svg('../images/microphone.svg', var(--primary-color));
}
.module-quote__icon-container__icon--play {
@include color-svg('../images/play.svg', var(--color-session-green-color));
@include color-svg('../images/play.svg', var(--primary-color));
}
.module-quote__icon-container__icon--movie {
@include color-svg('../images/movie.svg', var(--color-session-green-color));
@include color-svg('../images/movie.svg', var(--primary-color));
}
.module-quote__generic-file__text {
@ -207,19 +207,19 @@
height: 24px;
&--file {
@include color-svg('../images/file.svg', var(--color-session-green-color));
@include color-svg('../images/file.svg', var(--primary-color));
}
&--image {
@include color-svg('../images/image.svg', var(--color-session-green-color));
@include color-svg('../images/image.svg', var(--primary-color));
}
&--microphone {
@include color-svg('../images/microphone.svg', var(--color-session-green-color));
@include color-svg('../images/microphone.svg', var(--primary-color));
}
&--play {
@include color-svg('../images/play.svg', var(--color-session-green-color));
@include color-svg('../images/play.svg', var(--primary-color));
}
&--movie {
@include color-svg('../images/movie.svg', var(--color-session-green-color));
@include color-svg('../images/movie.svg', var(--primary-color));
}
}
@ -278,7 +278,7 @@
}
}
$session-highlight-message-shadow: 0px 0px 10px 1px var(--color-session-green-color);
$session-highlight-message-shadow: 0px 0px 10px 1px var(--primary-color);
@keyframes remove-box-shadow {
0% {

4
stylesheets/_session.scss
Unescape Escape View File

@ -327,9 +327,9 @@ label {
}
&__text-highlight {
@include text-highlight(var(--color-session-green-color));
@include text-highlight(var(--primary-color));
color: black;
color: var(--black-color);
font-family: monospace;
font-style: normal;

2
stylesheets/_session_conversation.scss
Unescape Escape View File

@ -446,7 +446,7 @@ $rhap_font-family: inherit !default;
height: 15px;
top: -5px;
margin-left: -10px;
background: var(--color-session-green-color);
background: var(--primary-color);
box-shadow: none;
box-shadow: rgba($rhap_theme-color, 0.5) 0 0 5px;
}

6
stylesheets/_theme_dark.scss
Unescape Escape View File

@ -162,7 +162,7 @@
}
.module-message__video-overlay__play-icon {
@include color-svg('../images/play.svg', var(--color-session-green-color));
@include color-svg('../images/play.svg', var(--primary-color));
}
.module-message__broken-video-screenshot {
@ -223,7 +223,7 @@
}
.module-media-gallery__tab--active {
border-bottom: 2px solid var(--color-session-green-color);
border-bottom: 2px solid var(--primary-color);
}
// Module: Document List Item
@ -269,7 +269,7 @@
// .module-conversation-list-item__unread-count {
// color: var(--color-white-color);
// background-color: var(--color-session-green-color);
// background-color: var(--primary-color);
// box-shadow: 0px 0px 0px 1px var(--color-darkest-gray-color);
// }

19
ts/components/settings/SettingsThemeSwitcher.tsx
Unescape Escape View File

@ -2,12 +2,17 @@ import React, { useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import styled from 'styled-components';
import { switchThemeTo } from '../../session/utils/Theme';
import { getPrimaryColors, PrimaryColorIds } from '../../themes/SessionTheme';
import { getTheme } from '../../state/selectors/theme';
import { SessionRadio, SessionRadioPrimaryColors } from '../basic/SessionRadio';
import { SpacerLG, SpacerMD } from '../basic/Text';
import { StyledDescriptionSettingsItem, StyledTitleSettingsItem } from './SessionSettingListItem';
import { THEMES, ThemeStateType } from '../../themes/colors';
import {
getPrimaryColors,
PrimaryColorStateType,
THEMES,
ThemeStateType,
} from '../../themes/colors';
import { switchPrimaryColor } from '../../themes/switchPrimaryColor';
// tslint:disable: use-simple-attributes
@ -155,8 +160,9 @@ const Themes = () => {
};
export const SettingsThemeSwitcher = () => {
//TODO Theming
const [selectedAccent, setSelectedAccent] = useState<PrimaryColorIds | undefined>(undefined);
const [selectedPrimaryColor, setSelectedPrimaryColor] = useState<
PrimaryColorStateType | undefined
>(undefined);
return (
<StyledSwitcherContainer>
@ -172,13 +178,14 @@ export const SettingsThemeSwitcher = () => {
return (
<SessionRadioPrimaryColors
key={item.id}
active={item.id === selectedAccent}
active={item.id === selectedPrimaryColor}
value={item.id}
inputName="primary-colors"
ariaLabel={item.ariaLabel}
color={item.color}
onClick={() => {
setSelectedAccent(item.id);
switchPrimaryColor(item.id);
setSelectedPrimaryColor(item.id);
}}
/>
);

21
ts/themes/SessionTheme.tsx
Unescape Escape View File

@ -644,24 +644,3 @@ export const SessionTheme = ({ children }: { children: any }) => (
{children}
</>
);
/**
* Just putting those new theme values used in the settings to avoid having conflicts for now.
*
*/
export type PrimaryColorIds = 'green' | 'blue' | 'yellow' | 'pink' | 'purple' | 'orange' | 'red';
type PrimaryColorType = { id: PrimaryColorIds; ariaLabel: string; color: string };
export const getPrimaryColors = (): Array<PrimaryColorType> => {
return [
{ id: 'green', ariaLabel: window.i18n('primaryColorGreen'), color: COLORS.PRIMARY.GREEN },
{ id: 'blue', ariaLabel: window.i18n('primaryColorBlue'), color: COLORS.PRIMARY.BLUE },
{ id: 'yellow', ariaLabel: window.i18n('primaryColorYellow'), color: COLORS.PRIMARY.YELLOW },
{ id: 'pink', ariaLabel: window.i18n('primaryColorPink'), color: COLORS.PRIMARY.PINK },
{ id: 'purple', ariaLabel: window.i18n('primaryColorPurple'), color: COLORS.PRIMARY.PURPLE },
{ id: 'orange', ariaLabel: window.i18n('primaryColorOrange'), color: COLORS.PRIMARY.ORANGE },
{ id: 'red', ariaLabel: window.i18n('primaryColorRed'), color: COLORS.PRIMARY.RED },
];
};

31
ts/themes/colors.tsx
Unescape Escape View File

@ -76,6 +76,29 @@ const COLORS: Colors = {
BLACK: black,
};
export type PrimaryColorStateType =
| 'green'
| 'blue'
| 'yellow'
| 'pink'
| 'purple'
| 'orange'
| 'red';
type PrimaryColorType = { id: PrimaryColorStateType; ariaLabel: string; color: string };
export const getPrimaryColors = (): Array<PrimaryColorType> => {
return [
{ id: 'green', ariaLabel: window.i18n('primaryColorGreen'), color: COLORS.PRIMARY.GREEN },
{ id: 'blue', ariaLabel: window.i18n('primaryColorBlue'), color: COLORS.PRIMARY.BLUE },
{ id: 'yellow', ariaLabel: window.i18n('primaryColorYellow'), color: COLORS.PRIMARY.YELLOW },
{ id: 'pink', ariaLabel: window.i18n('primaryColorPink'), color: COLORS.PRIMARY.PINK },
{ id: 'purple', ariaLabel: window.i18n('primaryColorPurple'), color: COLORS.PRIMARY.PURPLE },
{ id: 'orange', ariaLabel: window.i18n('primaryColorOrange'), color: COLORS.PRIMARY.ORANGE },
{ id: 'red', ariaLabel: window.i18n('primaryColorRed'), color: COLORS.PRIMARY.RED },
];
};
// Themes
export type ThemeStateType = 'classic-light' | 'classic-dark' | 'ocean-light' | 'ocean-dark'; // used for redux state
@ -95,7 +118,7 @@ type ThemeColors = {
type Themes = Record<ThemeNames, ThemeColors>;
// Classic Light
const classicLightPrimary = '#31F196';
const classicLightPrimary = primaryGreen;
const classicLightDanger = dangerDark;
const classicLight0 = '#000000';
const classicLight1 = '#6D6D6D';
@ -106,7 +129,7 @@ const classicLight5 = '#F9F9F9';
const classicLight6 = '#FFFFFF';
// Classic Dark
const classicDarkPrimary = '#31F196';
const classicDarkPrimary = primaryGreen;
const classicDarkDanger = dangerLight;
const classicDark0 = '#000000';
const classicDark1 = '#1B1B1B';
@ -117,7 +140,7 @@ const classicDark5 = '#A1A2A1';
const classicDark6 = '#FFFFFF';
// Ocean Light
const oceanLightPrimary = '#57C9FA';
const oceanLightPrimary = primaryBlue;
const oceanLightDanger = dangerLight;
const oceanLight0 = '#000000';
const oceanLight1 = '#19345D';
@ -129,7 +152,7 @@ const oceanLight6 = '#ECFAFB';
const oceanLight7 = '#FCFFFF';
// Ocean Dark
const oceanDarkPrimary = '#57C9FA';
const oceanDarkPrimary = primaryBlue;
const oceanDarkDanger = dangerDark;
const oceanDark0 = '#000000';
const oceanDark1 = '#1A1C28';

9
ts/themes/switchPrimaryColor.ts
Unescape Escape View File

@ -0,0 +1,9 @@
import { COLORS, PrimaryColorStateType } from './colors';
export function switchPrimaryColor(color: PrimaryColorStateType) {
document.documentElement.style.setProperty(
'--primary-color',
(COLORS.PRIMARY as any)[`${color.toUpperCase()}`]
);
// TODO Store in Database
}
Write Preview
Loading…
Cancel
Save