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

feat: starting theming work on left pane and commented on areas that will need to be fixed

Browse Source
pull/2521/head
William Grant 3 years ago
parent 6cd81e06f2
commit 2cb7e72f68
23 changed files with 157 additions and 113 deletions
Show Stats Download Patch File Download Diff File

6
about.html
Unescape Escape View File

@ -18,8 +18,8 @@
<style> <style>
body { body {
text-align: center; text-align: center;
background-color: rgba(0, 0, 0); background-color: var(--background-primary-color);
color: white; color: var(--text-primary-color);
font-size: 14px; font-size: 14px;
} }
@ -29,7 +29,7 @@
} }
a { a {
color: white; color: var(--text-primary-color);
} }
</style> </style>
</head> </head>

2
debug_log.html
Unescape Escape View File

@ -17,7 +17,7 @@
<link href="stylesheets/dist/manifest.css" rel="stylesheet" type="text/css" /> <link href="stylesheets/dist/manifest.css" rel="stylesheet" type="text/css" />
<style> <style>
body { body {
background-color: #000; background-color: var(--background-primary-color);
} }
</style> </style>
</head> </head>

1
stylesheets/_avatar.scss
Unescape Escape View File

@ -9,6 +9,7 @@
img { img {
object-fit: cover; object-fit: cover;
border-radius: 50%; border-radius: 50%;
// TODO Theming update
border: 1px solid var(--color-avatar-border-color); border: 1px solid var(--color-avatar-border-color);
} }
} }

3
stylesheets/_conversation.scss
Unescape Escape View File

@ -55,13 +55,14 @@
} }
.session-icon-button { .session-icon-button {
background-color: var(--color-accent); background-color: var(--button-icon-background-color);
box-shadow: none; box-shadow: none;
filter: brightness(1.05); filter: brightness(1.05);
svg path { svg path {
transition: var(--default-duration); transition: var(--default-duration);
opacity: 0.6; opacity: 0.6;
// TODO Theming remove
fill: var(--color-text-opposite); fill: var(--color-text-opposite);
} }
} }

2
stylesheets/_mentions.scss
Unescape Escape View File

@ -26,5 +26,5 @@
} }
.module-conversation-list-item--mentioned-us { .module-conversation-list-item--mentioned-us {
border-left: 4px solid var(--color-session-green-color) !important; border-left: 4px solid var(--conversation-tab-color-strip-color) !important;
} }

1
stylesheets/_modal.scss
Unescape Escape View File

@ -178,6 +178,7 @@
position: relative; position: relative;
.module-avatar { .module-avatar {
// TODO Theming update
box-shadow: 0px 0px 13px 0.5px var(--color-session-shadow); box-shadow: 0px 0px 13px 0.5px var(--color-session-shadow);
} }

22
stylesheets/_modules.scss
Unescape Escape View File

@ -42,7 +42,7 @@
display: inline-block; display: inline-block;
position: absolute; position: absolute;
bottom: 4px; bottom: 4px;
@include color-svg('../images/error.svg', var(--color-destructive)); @include color-svg('../images/error.svg', var(--danger-color));
} }
.module-message__error--outgoing { .module-message__error--outgoing {
@ -393,7 +393,7 @@
.module-message-detail__delete-button { .module-message-detail__delete-button {
@include button-reset; @include button-reset;
background-color: var(--color-destructive); background-color: var(--danger-color);
color: var(--color-white-color); color: var(--color-white-color);
box-shadow: 0 0 10px -3px rgba(97, 97, 97, 0.7); box-shadow: 0 0 10px -3px rgba(97, 97, 97, 0.7);
border-radius: 5px; border-radius: 5px;
@ -421,7 +421,7 @@
} }
.module-message-detail__contact__error { .module-message-detail__contact__error {
color: var(--color-destructive); color: var(--danger-color);
font-weight: 300; font-weight: 300;
} }
@ -633,17 +633,17 @@
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background-color: var(--color-dark-gray-color); background-color: var(--conversation-tab-background-hover-color);
} }
&--is-blocked { &--is-blocked {
border-left: 4px solid var(--color-destructive) !important; border-left: 4px solid var(--danger-color) !important;
} }
} }
.module-conversation-list-item__unread-count { .module-conversation-list-item__unread-count {
color: var(--color-white-color); background-color: var(--unread-messages-alert-background-color);
background-color: var(--color-session-green-color); color: var(--unread-messages-alert-text-color);
text-align: center; text-align: center;
padding-top: 1px; padding-top: 1px;
@ -662,7 +662,7 @@
min-width: 16px; min-width: 16px;
line-height: 16px; line-height: 16px;
border-radius: 8px; border-radius: 8px;
// TODO Theming Should we remove this?
box-shadow: 0px 0px 0px 1px var(--color-darkest-gray-color); box-shadow: 0px 0px 0px 1px var(--color-darkest-gray-color);
} }
@ -704,7 +704,7 @@
.module-conversation-list-item__header__date--has-unread { .module-conversation-list-item__header__date--has-unread {
font-weight: 300; font-weight: 300;
color: var(--color-lighter-gray-color); color: var(--conversation-tab-text-unread-color);
} }
.module-conversation-list-item__message { .module-conversation-list-item__message {
@ -720,7 +720,7 @@
font-size: var(--font-size-sm); font-size: var(--font-size-sm);
line-height: 18px; line-height: 18px;
color: var(--color-light-gray-color); color: var(--conversation-tab-text-color);
height: 1.3em; height: 1.3em;
overflow: hidden; overflow: hidden;
@ -733,7 +733,7 @@
.module-conversation-list-item__message__text--has-unread { .module-conversation-list-item__message__text--has-unread {
font-weight: 400; font-weight: 400;
color: var(--color-lighter-gray-color); color: var(--conversation-tab-text-unread-color);
} }
// Module: Image // Module: Image

8
stylesheets/_session.scss
Unescape Escape View File

@ -342,6 +342,7 @@ label {
.conversation-header { .conversation-header {
.module-avatar img { .module-avatar img {
// TODO Theming Update
box-shadow: 0px 0px 5px 0px rgba(var(--color-white-color-rgb), 0.2); box-shadow: 0px 0px 5px 0px rgba(var(--color-white-color-rgb), 0.2);
} }
@ -693,7 +694,7 @@ label {
width: 13px; width: 13px;
height: 13px; height: 13px;
border-radius: 50%; border-radius: 50%;
background: var(--color-session-green-color); background: var(--primary-color);
animation-timing-function: cubic-bezier(0, 1, 1, 0); animation-timing-function: cubic-bezier(0, 1, 1, 0);
} }
div:nth-child(1) { div:nth-child(1) {
@ -836,17 +837,18 @@ input {
width: 40px; width: 40px;
border-radius: 50%; border-radius: 50%;
opacity: 1; opacity: 1;
background-color: var(--color-cell-background); background-color: var(--button-icon-background-color);
box-shadow: var(--color-session-shadow); box-shadow: var(--color-session-shadow);
svg path { svg path {
transition: var(--default-duration); transition: var(--default-duration);
opacity: 0.6; opacity: 0.6;
fill: var(--color-text); fill: var(--button-icon-stroke-color);
} }
&:hover svg path { &:hover svg path {
opacity: 1; opacity: 1;
fill: var(--button-icon-stroke-hover-color);
} }
} }
} }

27
stylesheets/_session_left_pane.scss
Unescape Escape View File

@ -13,30 +13,31 @@ $session-compose-margin: 20px;
} }
&-list-item { &-list-item {
background: var(--conversation-tab-background-color);
transition: var(--default-duration); transition: var(--default-duration);
&:hover { &:hover {
background: var(--color-clickable-hovered); background: var(--conversation-tab-background-hover-color);
} }
&--is-selected { &--is-selected {
background: var(--color-conversation-item-selected); background: var(--conversation-tab-background-selected-color);
.module-conversation__user__profile-number, .module-conversation__user__profile-number,
.module-conversation__user__profile-name, .module-conversation__user__profile-name,
.module-conversation-list-item__message__text { .module-conversation-list-item__message__text {
color: var(--color-text); color: var(--conversation-tab-text-selected-color);
} }
} }
&--has-unread { &--has-unread {
border-left: var(--border-unread); background: var(--conversation-tab-background-unread-color);
background: var(--color-conversation-item-has-unread); border-left: 4px solid var(--conversation-tab-color-strip-color);
} }
&__unread-count { &__unread-count {
color: var(--color-text); background: var(--conversation-tab-bubble-background-color);
background: var(--color-clickable-hovered); color: var(--conversation-tab-bubble-text-color);
position: static !important; position: static !important;
font-weight: 700 !important; font-weight: 700 !important;
@ -52,9 +53,9 @@ $session-compose-margin: 20px;
} }
&__message__text { &__message__text {
color: var(--color-light-gray-color); color: var(--conversation-tab-text-color);
&--has-unread { &--has-unread {
color: var(--color-text); color: var(--conversation-tab-text-unread-color);
} }
} }
@ -65,7 +66,7 @@ $session-compose-margin: 20px;
&__header__name--with-unread .module-conversation__user__profile-number, &__header__name--with-unread .module-conversation__user__profile-number,
&__header__name--with-unread .module-conversation__user__profile-name { &__header__name--with-unread .module-conversation__user__profile-name {
color: var(--color-text); color: var(--conversation-tab-text-unread-color);
} }
} }
} }
@ -98,7 +99,7 @@ $session-compose-margin: 20px;
} }
&-overlay { &-overlay {
background: var(--color-left-pane-overlay-background); background: var(--background-primary-color);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -164,10 +165,6 @@ $session-compose-margin: 20px;
margin-top: 10px; margin-top: 10px;
width: 250px; width: 250px;
filter: var(--filter-session-text); filter: var(--filter-session-text);
transition: 0s; transition: 0s;
.path {
fill: red;
}
} }
} }

42
stylesheets/_theme_dark.scss
Unescape Escape View File

@ -259,33 +259,35 @@
.module-empty-state { .module-empty-state {
color: var(--color-light-gray-color); color: var(--color-light-gray-color);
} }
// TODO Theming Remove
// Module: Conversation List Item // Module: Conversation List Item
.module-conversation-list-item--is-selected { // .module-conversation-list-item--is-selected {
background-color: var(--color-dark-gray-color); // background-color: var(--color-dark-gray-color);
} // }
.module-conversation-list-item__unread-count { // .module-conversation-list-item__unread-count {
color: var(--color-white-color); // color: var(--color-white-color);
background-color: var(--color-session-green-color); // background-color: var(--color-session-green-color);
box-shadow: 0px 0px 0px 1px var(--color-darkest-gray-color); // box-shadow: 0px 0px 0px 1px var(--color-darkest-gray-color);
} // }
.module-conversation-list-item__header__name { // .module-conversation-list-item__header__name {
color: var(--color-lighter-gray-color); // color: var(--color-lighter-gray-color);
} // }
.module-conversation-list-item__header__date--has-unread { // .module-conversation-list-item__header__date--has-unread {
color: var(--color-lighter-gray-color); // color: var(--color-lighter-gray-color);
} // }
.module-conversation-list-item__message__text { // .module-conversation-list-item__message__text {
color: var(--color-light-gray-color); // color: var(--color-light-gray-color);
} // }
.module-conversation-list-item__message__text--has-unread { // .module-conversation-list-item__message__text--has-unread {
color: var(--color-lighter-gray-color); // color: var(--color-lighter-gray-color);
} // }
// Module: Image // Module: Image

10
ts/components/avatar/Avatar.tsx
Unescape Escape View File

@ -43,20 +43,20 @@ const Identicon = (props: Props) => {
}; };
const CrownWrapper = styled.div` const CrownWrapper = styled.div`
position: absolute;
display: flex; display: flex;
align-items: center;
justify-content: center;
position: absolute;
bottom: 0%; bottom: 0%;
right: 12%; right: 12%;
height: 20px; height: 20px;
width: 20px; width: 20px;
transform: translate(25%, 25%); transform: translate(25%, 25%);
color: #f7c347; color: #f7c347;
background: var(--color-inbox-background); background: var(--background-primary-color);
border-radius: 50%; border-radius: 50%;
/* TODO Theming update? */
filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.3)); filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.3));
align-items: center;
justify-content: center;
`; `;
export const CrownIcon = () => { export const CrownIcon = () => {

5
ts/components/avatar/AvatarPlaceHolder/AvatarPlaceHolder.tsx
Unescape Escape View File

@ -1,4 +1,5 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { COLORS } from '../../../themes/colors';
import { getInitials } from '../../../util/getInitials'; import { getInitials } from '../../../util/getInitials';
type Props = { type Props = {
@ -20,7 +21,7 @@ const sha512FromPubkey = async (pubkey: string): Promise<string> => {
// key is the pubkey, value is the hash // key is the pubkey, value is the hash
const cachedHashes = new Map<string, number>(); const cachedHashes = new Map<string, number>();
const avatarPlaceholderColors = ['#5ff8b0', '#26cdb9', '#f3c615', '#fcac5a']; const avatarPlaceholderColors = Object.values(COLORS.PRIMARY);
function useHashBasedOnPubkey(pubkey: string) { function useHashBasedOnPubkey(pubkey: string) {
const [hash, setHash] = useState<number | undefined>(undefined); const [hash, setHash] = useState<number | undefined>(undefined);
@ -79,6 +80,7 @@ export const AvatarPlaceHolder = (props: Props) => {
if (loading || !hash) { if (loading || !hash) {
// return grey circle // return grey circle
// TODO Theming update
return ( return (
<svg viewBox={viewBox}> <svg viewBox={viewBox}>
<g id="UrTavla"> <g id="UrTavla">
@ -104,6 +106,7 @@ export const AvatarPlaceHolder = (props: Props) => {
const bgColor = avatarPlaceholderColors[bgColorIndex]; const bgColor = avatarPlaceholderColors[bgColorIndex];
// TODO Theming Update
return ( return (
<svg viewBox={viewBox}> <svg viewBox={viewBox}>
<g id="UrTavla"> <g id="UrTavla">

13
ts/components/dialog/OnionStatusPathDialog.tsx
Unescape Escape View File

@ -154,7 +154,7 @@ export const OnionNodeStatusLight = (props: OnionNodeStatusLightType): JSX.Eleme
<ModalStatusLight <ModalStatusLight
glowDuration={glowDuration} glowDuration={glowDuration}
glowStartDelay={glowStartDelay} glowStartDelay={glowStartDelay}
color={'var(--color-accent)'} color={'var(--button-path-default-color)'}
/> />
); );
}; };
@ -195,15 +195,16 @@ export const ActionPanelOnionStatusLight = (props: {
const isOnline = useSelector(getIsOnline); const isOnline = useSelector(getIsOnline);
// Set icon color based on result // Set icon color based on result
const red = 'var(--color-destructive)'; const errorColor = 'var(--button-path-error-color)';
const green = 'var(--color-accent)'; const defaultColor = 'var(--button-path-default-color)';
const orange = 'var(--color-warning)'; const connectingColor = 'var(--button-path-connecting-color)';
// start with red // start with red
let iconColor = red; let iconColor = errorColor;
//if we are not online or the first path is not valid, we keep red as color //if we are not online or the first path is not valid, we keep red as color
if (isOnline && firstPathLength > 1) { if (isOnline && firstPathLength > 1) {
iconColor = onionPathsCount >= 2 ? green : onionPathsCount >= 1 ? orange : red; iconColor =
onionPathsCount >= 2 ? defaultColor : onionPathsCount >= 1 ? connectingColor : errorColor;
} }
return ( return (

6
ts/components/icon/SessionIcon.tsx
Unescape Escape View File

@ -127,9 +127,11 @@ const Svg = React.memo(styled.svg<StyledSvgProps>`
transform: ${props => `rotate(${props.iconRotation}deg)`}; transform: ${props => `rotate(${props.iconRotation}deg)`};
animation: ${props => animation(props)}; animation: ${props => animation(props)};
border-radius: ${props => props.borderRadius}; border-radius: ${props => props.borderRadius};
background-color: ${props => (props.backgroundColor ? props.backgroundColor : '')}; background-color: ${props =>
props.backgroundColor ? props.backgroundColor : '--button-icon-background-color'};
border-radius: ${props => (props.borderRadius ? props.borderRadius : '')}; border-radius: ${props => (props.borderRadius ? props.borderRadius : '')};
filter: ${props => (props.noScale ? `drop-shadow(0px 0px 4px ${props.iconColor})` : '')}; filter: ${props => (props.noScale ? `drop-shadow(0px 0px 4px ${props.iconColor})` : '')};
fill: ${props => (props.iconColor ? props.iconColor : '--button-icon-stroke-color')};
padding: ${props => (props.iconPadding ? props.iconPadding : '')}; padding: ${props => (props.iconPadding ? props.iconPadding : '')};
transition: inherit; transition: inherit;
`); `);
@ -150,7 +152,7 @@ const SessionSvg = (props: {
backgroundColor?: string; backgroundColor?: string;
iconPadding?: string; iconPadding?: string;
}) => { }) => {
const colorSvg = props.iconColor; const colorSvg = props.iconColor ? props.iconColor : '--button-icon-stroke-color';
const pathArray = props.path instanceof Array ? props.path : [props.path]; const pathArray = props.path instanceof Array ? props.path : [props.path];
const propsToPick = { const propsToPick = {
width: props.width, width: props.width,

6
ts/components/icon/SessionNotificationCount.tsx
Unescape Escape View File

@ -20,12 +20,12 @@ const StyledCountContainer = styled.div<{ shouldRender: boolean }>`
font-family: var(--font-default); font-family: var(--font-default);
border-radius: 50%; border-radius: 50%;
font-weight: 700; font-weight: 700;
background: var(--color-destructive); /* TODO Theming Update */
background: var(--unread-messages-alert-background-color);
transition: var(--default-duration); transition: var(--default-duration);
opacity: ${props => (props.shouldRender ? 1 : 0)}; opacity: ${props => (props.shouldRender ? 1 : 0)};
text-align: center; text-align: center;
color: white; color: var(--unread-messages-alert-text-color);
/* cursor: */
`; `;
const StyledCount = styled.div<{ countOverflow: boolean }>` const StyledCount = styled.div<{ countOverflow: boolean }>`

1
ts/components/leftpane/ActionsPanel.tsx
Unescape Escape View File

@ -65,6 +65,7 @@ const Section = (props: { type: SectionType }) => {
if (type === SectionType.Profile) { if (type === SectionType.Profile) {
dispatch(editProfileModal({})); dispatch(editProfileModal({}));
} else if (type === SectionType.Moon) { } else if (type === SectionType.Moon) {
// TODO Theming Toggle current theme light and dark mode with new system
const currentTheme = window.Events.getThemeSetting(); const currentTheme = window.Events.getThemeSetting();
const newTheme = currentTheme === 'dark' ? 'light' : 'dark'; const newTheme = currentTheme === 'dark' ? 'light' : 'dark';

10
ts/components/leftpane/LeftPaneMessageSection.tsx
Unescape Escape View File

@ -32,14 +32,20 @@ export interface Props {
overlayMode: OverlayMode | undefined; overlayMode: OverlayMode | undefined;
} }
const StyledLeftPaneContent = styled.div`
display: flex;
flex-direction: column;
flex: 1;
overflow: hidden;
`;
const StyledConversationListContent = styled.div` const StyledConversationListContent = styled.div`
background: var(--background-primary-color);
overflow-x: hidden; overflow-x: hidden;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-grow: 1; flex-grow: 1;
transition: none; transition: none;
background: var(--color-conversation-list);
`; `;
const StyledLeftPaneContent = styled.div` const StyledLeftPaneContent = styled.div`

2
ts/components/leftpane/LeftPaneSectionContainer.tsx
Unescape Escape View File

@ -5,7 +5,7 @@ export const LeftPaneSectionContainer = styled.div`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
border-right: var(--border-session); border-right: var(--border-color);
overflow-y: auto; overflow-y: auto;
.session-icon-button { .session-icon-button {

18
ts/components/leftpane/conversation-list-item/HeaderItem.tsx
Unescape Escape View File

@ -31,11 +31,19 @@ const NotificationSettingIcon = (props: { isMessagesSection: boolean }) => {
return null; return null;
case 'disabled': case 'disabled':
return ( return (
<SessionIcon iconType="mute" iconColor={'var(--color-text-subtle)'} iconSize="small" /> <SessionIcon
iconType="mute"
iconColor={'var(--conversation-tab-text-color)'}
iconSize="small"
/>
); );
case 'mentions_only': case 'mentions_only':
return ( return (
<SessionIcon iconType="bell" iconColor={'var(--color-text-subtle)'} iconSize="small" /> <SessionIcon
iconType="bell"
iconColor={'var(--conversation-tab-text-color)'}
iconSize="small"
/>
); );
default: default:
return null; return null;
@ -71,7 +79,11 @@ const ListItemIcons = () => {
const pinIcon = const pinIcon =
isMessagesSection && isPinned ? ( isMessagesSection && isPinned ? (
<SessionIcon iconType="pin" iconColor={'var(--color-text-subtle)'} iconSize="small" /> <SessionIcon
iconType="pin"
iconColor={'var(--conversation-tab-text-color)'}
iconSize="small"
/>
) : null; ) : null;
return ( return (
<StyledConversationListItemIconWrapper> <StyledConversationListItemIconWrapper>

11
ts/components/leftpane/overlay/choose-action/ContactRow.tsx
Unescape Escape View File

@ -35,6 +35,7 @@ const AvatarItem = (props: Pick<Props, 'displayName' | 'id'>) => {
}; };
const StyledContactRowName = styled.div` const StyledContactRowName = styled.div`
color: var(--text-primary-color);
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -47,14 +48,14 @@ const StyledRowContainer = styled.button`
padding: 0 var(--margins-lg); padding: 0 var(--margins-lg);
transition: background-color var(--default-duration) linear; transition: background-color var(--default-duration) linear;
cursor: pointer; cursor: pointer;
border-bottom: 1px var(--color-session-border) solid; border-bottom: 1px var(--border-color) solid;
&:first-child { &:first-child {
border-top: 1px var(--color-session-border) solid; border-top: 1px var(--border-color) solid;
} }
:hover { :hover {
background-color: var(--color-clickable-hovered); background-color: var(--conversation-tab-background-hover-color);
} }
`; `;
@ -62,11 +63,11 @@ const StyledBreak = styled.div`
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0 var(--margins-lg); padding: 0 var(--margins-lg);
color: var(--color-text-subtle); color: var(--text-secondary-color);
font-size: var(--font-size-md); font-size: var(--font-size-md);
height: 30px; // should also be changed in rowHeight height: 30px; // should also be changed in rowHeight
border-bottom: 1px var(--color-session-border) solid; border-bottom: 1px var(--border-color) solid;
`; `;
export const ContactRowBreak = (props: { char: string; key: string; style: CSSProperties }) => { export const ContactRowBreak = (props: { char: string; key: string; style: CSSProperties }) => {

8
ts/components/leftpane/overlay/choose-action/OverlayChooseAction.tsx
Unescape Escape View File

@ -12,21 +12,21 @@ const StyledActionRow = styled.button`
border: none; border: none;
display: flex; display: flex;
align-items: center; align-items: center;
border-bottom: 1px var(--color-session-border) solid; border-bottom: 1px var(--border-color) solid;
transition-duration: 0.25s; transition-duration: 0.25s;
width: 100%; width: 100%;
&:first-child { &:first-child {
border-top: 1px var(--color-session-border) solid; border-top: 1px var(--border-color) solid;
} }
:hover { :hover {
background: var(--color-clickable-hovered); background: var(--conversation-tab-background-hover-color);
} }
`; `;
export const StyledChooseActionTitle = styled.span` export const StyledChooseActionTitle = styled.span`
color: var(--color-text); color: var(--text-primary-color);
font-size: 18px; font-size: 18px;
padding: var(--margins-xs) var(--margins-lg); padding: var(--margins-xs) var(--margins-lg);
`; `;

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

@ -456,6 +456,17 @@ export const SessionGlobalStyles = createGlobalStyle`
/* New Theme Variables */ /* New Theme Variables */
/* Colors */ /* Colors */
--green-color: ${COLORS.PRIMARY.GREEN},
--blue-color: ${COLORS.PRIMARY.BLUE},
--yellow-color: ${COLORS.PRIMARY.YELLOW},
--pink-color: ${COLORS.PRIMARY.PINK},
--purple-color: ${COLORS.PRIMARY.PURPLE},
--orange-color: ${COLORS.PRIMARY.ORANGE},
--red-color: ${COLORS.PRIMARY.RED},
/* TODO Theming this should be overridable */
--primary-color: ${THEMES.CLASSIC_LIGHT.PRIMARY};
--danger-color: ${COLORS.DANGER.LIGHT};
/* Backgrounds */ /* Backgrounds */
--background-primary-color: ${THEMES.CLASSIC_LIGHT.COLOR6}; --background-primary-color: ${THEMES.CLASSIC_LIGHT.COLOR6};
--background-secondary-color: ${THEMES.CLASSIC_LIGHT.COLOR5}; --background-secondary-color: ${THEMES.CLASSIC_LIGHT.COLOR5};
@ -468,7 +479,7 @@ export const SessionGlobalStyles = createGlobalStyle`
--border-color: ${THEMES.CLASSIC_LIGHT.COLOR3}; --border-color: ${THEMES.CLASSIC_LIGHT.COLOR3};
/* Modals */ /* Modals */
/* TODO Clarify what those transparent colors mean */ /* TODO Theming Clarify what those transparent colors mean */
/* Text Box */ /* Text Box */
--text-box-background-color: var(--background-primary-color); --text-box-background-color: var(--background-primary-color);
@ -477,14 +488,14 @@ export const SessionGlobalStyles = createGlobalStyle`
--text-box-border-color: ${THEMES.CLASSIC_LIGHT.COLOR2}; --text-box-border-color: ${THEMES.CLASSIC_LIGHT.COLOR2};
/* Message Bubbles */ /* Message Bubbles */
--message-bubbles-outgoing-background-color: ${THEMES.CLASSIC_LIGHT.PRIMARY}; --message-bubbles-outgoing-background-color: var(--primary-color);
--message-bubbles-incoming-background-color: ${THEMES.CLASSIC_LIGHT.COLOR3}; --message-bubbles-incoming-background-color: ${THEMES.CLASSIC_LIGHT.COLOR3};
--message-bubbles-outgoing-text-color: var(--text-primary-color); --message-bubbles-outgoing-text-color: var(--text-primary-color);
--message-bubbles-incoming-text-color: var(--text-primary-color); --message-bubbles-incoming-text-color: var(--text-primary-color);
/* Menu Button */ /* Menu Button */
--menu-button-background-color: ${THEMES.CLASSIC_LIGHT.COLOR0}; --menu-button-background-color: ${THEMES.CLASSIC_LIGHT.COLOR0};
/* TODO Make a icon fill varible that uses the background color? */ /* TODO Theming Make a icon fill varible that uses the background color? */
--menu-button-icon-color: ${THEMES.CLASSIC_LIGHT.COLOR6}; --menu-button-icon-color: ${THEMES.CLASSIC_LIGHT.COLOR6};
/* Chat (Interaction) Buttons */ /* Chat (Interaction) Buttons */
@ -498,9 +509,9 @@ export const SessionGlobalStyles = createGlobalStyle`
--settings-tab-background-selected-color: ${THEMES.CLASSIC_LIGHT.COLOR3}; --settings-tab-background-selected-color: ${THEMES.CLASSIC_LIGHT.COLOR3};
--settings-tab-text-color: var(--text-primary-color); --settings-tab-text-color: var(--text-primary-color);
/* TODO probably consolidate this */ /* TODO Theming probably consolidate this */
/* Buttons */ /* Buttons */
/* TODO are solid buttons ever disabled? */ /* TODO Theming are solid buttons ever disabled? */
/* Solid */ /* Solid */
--button-solid-background-color: var(--background-primary-color); --button-solid-background-color: var(--background-primary-color);
--button-solid-background-hover-color: ${THEMES.CLASSIC_LIGHT.COLOR4}; --button-solid-background-hover-color: ${THEMES.CLASSIC_LIGHT.COLOR4};
@ -513,19 +524,21 @@ export const SessionGlobalStyles = createGlobalStyle`
THEMES.CLASSIC_LIGHT.COLOR0 THEMES.CLASSIC_LIGHT.COLOR0
)}, 0.1); )}, 0.1);
--button-outline-text-color: var(--text-primary-color); --button-outline-text-color: var(--text-primary-color);
/* TODO we might not need this */ /* TODO Theming we might not need this */
--button-outline-text-hover-color: var(--text-primary-color); --button-outline-text-hover-color: var(--text-primary-color);
--button-outline-border-color: var(--text-primary-color); --button-outline-border-color: var(--text-primary-color);
--button-outline-border-hover-color: var(--text-primary-color); --button-outline-border-hover-color: var(--text-primary-color);
--button-outline-disabled-color: var(--text-secondary-color); --button-outline-disabled-color: var(--text-secondary-color);
/* Icons */ /* Icons */
--button-icon-background-color: ${COLORS.TRANSPARENT};
--button-icon-stroke-color: var(--text-secondary-color); --button-icon-stroke-color: var(--text-secondary-color);
--button-icon-stroke-hover-color: var(--text-primary-color); --button-icon-stroke-hover-color: var(--text-primary-color);
--button-icon-stroke-selected-color: var(--text-primary-color); --button-icon-stroke-selected-color: var(--text-primary-color);
/* Consolidate with code */ /* TODO Theming Consolidate with code */
/* Conversation Tab */ /* Conversation Tab */
/* This is also user for Overlay Tabs, Contact Rows, Convesation List Items etc. */
--conversation-tab-background-color: ${THEMES.CLASSIC_LIGHT.COLOR5}; --conversation-tab-background-color: ${THEMES.CLASSIC_LIGHT.COLOR5};
--conversation-tab-background-hover-color: ${THEMES.CLASSIC_LIGHT.COLOR4}; --conversation-tab-background-hover-color: ${THEMES.CLASSIC_LIGHT.COLOR4};
--conversation-tab-background-selected-color: ${THEMES.CLASSIC_LIGHT.COLOR4}; --conversation-tab-background-selected-color: ${THEMES.CLASSIC_LIGHT.COLOR4};
@ -537,8 +550,8 @@ export const SessionGlobalStyles = createGlobalStyle`
--conversation-tab-text-selected-color: var(--text-primary-color); --conversation-tab-text-selected-color: var(--text-primary-color);
--conversation-tab-bubble-background-color: ${THEMES.CLASSIC_LIGHT.COLOR3}; --conversation-tab-bubble-background-color: ${THEMES.CLASSIC_LIGHT.COLOR3};
--conversation-tab-bubble-text-color: var(--text-primary-color); --conversation-tab-bubble-text-color: var(--text-primary-color);
/* TODO account for overriding */ /* TODO Theming account for overriding */
--conversation-tab-color-strip-color: ${THEMES.CLASSIC_LIGHT.PRIMARY}; --conversation-tab-color-strip-color: var(--primary-color);
/* Search Bar */ /* Search Bar */
--search-bar-background-color: var(--background-secondary-color); --search-bar-background-color: var(--background-secondary-color);
@ -548,25 +561,25 @@ export const SessionGlobalStyles = createGlobalStyle`
--search-bar-icon-hover-color: var(--text-primary-color); --search-bar-icon-hover-color: var(--text-primary-color);
/* Scroll Bars */ /* Scroll Bars */
/* TODO think this is the track? Should add thumb and other scroll colors here */ /* TODO Theming think this is the track? Should add thumb and other scroll colors here */
/* Default */ /* Default */
--scroll-bar-fill-color: var(--text-secondary-color); --scroll-bar-fill-color: var(--text-secondary-color);
/* Zoom Bar */ /* Zoom Bar */
--zoom-bar-interval-color: var(--text-secondary-color); --zoom-bar-interval-color: var(--text-secondary-color);
/* TODO think this is the thumb? */ /* TODO Theming think this is the thumb? */
--zoom-bar-selector-color: ${THEMES.CLASSIC_LIGHT.PRIMARY}; --zoom-bar-selector-color: var(--primary-color);
/* Toggle Switch */ /* Toggle Switch */
--toggle-switch-ball-color: ; --toggle-switch-ball-color: ;
/* TODO think this should be white instead of transparent */ /* TODO Theming think this should be white instead of transparent */
--toggle-switch-off-background-color: ${COLORS.TRANSPARENT}; --toggle-switch-off-background-color: ${COLORS.TRANSPARENT};
--toggle-switch-off-border-color: var(--border-color); --toggle-switch-off-border-color: var(--border-color);
--toggle-switch-on-background-color: ${THEMES.CLASSIC_LIGHT.PRIMARY}; --toggle-switch-on-background-color: var(--primary-color);
--toggle-switch-on-border-color: ${COLORS.TRANSPARENT}; --toggle-switch-on-border-color: ${COLORS.TRANSPARENT};
/* TODO Think this is part of the Convesations Tab */ /* TODO Theming Think this is part of the Convesations Tab */
/* Unread Messages Alert */ /* Unread Messages Alert */
--unread-messages-alert-background-color: ${THEMES.CLASSIC_LIGHT.PRIMARY}; --unread-messages-alert-background-color: var(--primary-color);
--unread-messages-alert-text-color: var(--text-primary-color); --unread-messages-alert-text-color: var(--text-primary-color);
/* toggles between the Light and Dark mode for a Theme */ /* toggles between the Light and Dark mode for a Theme */
@ -600,6 +613,7 @@ export const SessionTheme = ({ children }: { children: any }) => (
* *
*/ */
// TODO Theming need to improve this somehow
type SettingsThemeSwitcherColor = { type SettingsThemeSwitcherColor = {
background: string; background: string;
border: string; border: string;
@ -626,12 +640,12 @@ type PrimaryColorType = { id: PrimaryColorIds; ariaLabel: string; color: string
export const getPrimaryColors = (): Array<PrimaryColorType> => { export const getPrimaryColors = (): Array<PrimaryColorType> => {
return [ return [
{ id: 'green', ariaLabel: window.i18n('primaryColorGreen'), color: '#31F196' }, { id: 'green', ariaLabel: window.i18n('primaryColorGreen'), color: COLORS.PRIMARY.GREEN },
{ id: 'blue', ariaLabel: window.i18n('primaryColorBlue'), color: '#57C9FA' }, { id: 'blue', ariaLabel: window.i18n('primaryColorBlue'), color: COLORS.PRIMARY.BLUE },
{ id: 'yellow', ariaLabel: window.i18n('primaryColorYellow'), color: '#FAD657' }, { id: 'yellow', ariaLabel: window.i18n('primaryColorYellow'), color: COLORS.PRIMARY.YELLOW },
{ id: 'pink', ariaLabel: window.i18n('primaryColorPink'), color: '#FF95EF' }, { id: 'pink', ariaLabel: window.i18n('primaryColorPink'), color: COLORS.PRIMARY.PINK },
{ id: 'purple', ariaLabel: window.i18n('primaryColorPurple'), color: '#C993FF' }, { id: 'purple', ariaLabel: window.i18n('primaryColorPurple'), color: COLORS.PRIMARY.PURPLE },
{ id: 'orange', ariaLabel: window.i18n('primaryColorOrange'), color: '#FCB159' }, { id: 'orange', ariaLabel: window.i18n('primaryColorOrange'), color: COLORS.PRIMARY.ORANGE },
{ id: 'red', ariaLabel: window.i18n('primaryColorRed'), color: '#FF9C8E' }, { id: 'red', ariaLabel: window.i18n('primaryColorRed'), color: COLORS.PRIMARY.RED },
]; ];
}; };

Write Preview
Loading…
Cancel
Save