diff --git a/preload.js b/preload.js
index eb964c2c3..43829eec0 100644
--- a/preload.js
+++ b/preload.js
@@ -29,7 +29,7 @@ window.sessionFeatureFlags = {
useTestNet: Boolean(
process.env.NODE_APP_INSTANCE && process.env.NODE_APP_INSTANCE.includes('testnet')
),
- useSettingsThemeSwitcher: false,
+ useSettingsThemeSwitcher: true,
debug: {
debugFileServerRequests: false,
debugNonSnodeRequests: false,
diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss
index 29688fad1..2095b5fbc 100644
--- a/stylesheets/_session.scss
+++ b/stylesheets/_session.scss
@@ -874,7 +874,7 @@ input {
}
&-disabled {
- border: 1px solid var(--color-darker-gray-color) !important;
+ border: 1px solid var(--border-color) !important;
}
}
}
diff --git a/ts/components/MemberListItem.tsx b/ts/components/MemberListItem.tsx
index 3b06be785..2ac831d7b 100644
--- a/ts/components/MemberListItem.tsx
+++ b/ts/components/MemberListItem.tsx
@@ -39,8 +39,11 @@ const StyledSessionMemberItem = styled.button<{
props.selected && 'var(--color-conversation-item-selected) !important'};
:not(:last-child) {
- border-bottom: var(--border-session);
+ border-bottom: var(--border-color);
}
+
+ background-color: ${props =>
+ props.selected ? 'var(--conversation-tab-background-selected-color) !important' : null};
`;
const StyledInfo = styled.div`
@@ -98,7 +101,7 @@ export const MemberListItem = (props: {
style={
!inMentions && !disableBg
? {
- backgroundColor: 'var(--color-cell-background)',
+ backgroundColor: 'var(--background-secondary-color)',
}
: {}
}
diff --git a/ts/components/basic/SessionRadio.tsx b/ts/components/basic/SessionRadio.tsx
index 6db7d945a..e969f4b5d 100644
--- a/ts/components/basic/SessionRadio.tsx
+++ b/ts/components/basic/SessionRadio.tsx
@@ -1,6 +1,5 @@
import React, { ChangeEvent } from 'react';
import styled from 'styled-components';
-import { black } from '../../state/ducks/SessionTheme';
import { Flex } from '../basic/Flex';
// tslint:disable: react-unused-props-and-state
@@ -16,7 +15,7 @@ type Props = {
const StyledInput = styled.input<{
filledSize: number;
outlineOffset: number;
- selectedColor: string;
+ selectedColor?: string;
}>`
opacity: 0;
position: absolute;
@@ -25,12 +24,11 @@ const StyledInput = styled.input<{
height: ${props => props.filledSize + props.outlineOffset}px;
:checked + label:before {
- background: ${props => props.selectedColor};
+ background: ${props => (props.selectedColor ? props.selectedColor : 'var(--primary-color)')};
}
`;
const StyledLabel = styled.label<{
- selectedColor: string;
filledSize: number;
outlineOffset: number;
beforeMargins?: string;
@@ -44,7 +42,7 @@ const StyledLabel = styled.label<{
transition: var(--default-duration);
padding: ${props => props.filledSize}px;
- outline: var(--color-text) solid 1px;
+ outline: var(--text-primary-color) solid 1px;
border: none;
outline-offset: ${props => props.outlineOffset}px;
${props => props.beforeMargins && `margin: ${props.beforeMargins};`};
@@ -62,7 +60,6 @@ export const SessionRadio = (props: Props) => {
}
}
- const selectedColor = 'var(--color-accent)';
const filledSize = 15 / 2;
const outlineOffset = 2;
@@ -77,17 +74,15 @@ export const SessionRadio = (props: Props) => {
onChange={clickHandler}
filledSize={filledSize * 2}
outlineOffset={outlineOffset}
- selectedColor={selectedColor}
/>
{label}
@@ -101,13 +96,13 @@ const StyledInputOutlineSelected = styled(StyledInput)`
outline: none;
}
:checked + label:before {
- outline: var(--color-text) solid 1px;
+ outline: var(--text-primary-color) solid 1px;
}
`;
const StyledLabelOutlineSelected = styled(StyledLabel)<{ selectedColor: string }>`
:before {
- background: ${props => props.selectedColor};
- outline: ${black} solid 1px;
+ background: ${props => (props.selectedColor ? props.selectedColor : 'var(--primary-color)')};
+ outline: var(--transparent-color) solid 1px;
}
`;
diff --git a/ts/components/basic/SessionToggle.tsx b/ts/components/basic/SessionToggle.tsx
index 03a576dd7..2dd1a9beb 100644
--- a/ts/components/basic/SessionToggle.tsx
+++ b/ts/components/basic/SessionToggle.tsx
@@ -2,7 +2,7 @@ import React from 'react';
import { updateConfirmModal } from '../../state/ducks/modalDialog';
import { useDispatch } from 'react-redux';
import styled from 'styled-components';
-import { white } from '../../state/ducks/SessionTheme';
+import { whiteColor } from '../../themes/SessionTheme';
const StyledKnob = styled.div<{ active: boolean }>`
position: absolute;
@@ -11,7 +11,8 @@ const StyledKnob = styled.div<{ active: boolean }>`
height: 21px;
width: 21px;
border-radius: 28px;
- background-color: ${white};
+ /* TODO Theming update */
+ background-color: ${whiteColor};
box-shadow: ${props =>
props.active ? '-2px 1px 3px rgba(0, 0, 0, 0.15)' : '2px 1px 3px rgba(0, 0, 0, 0.15);'};
diff --git a/ts/components/basic/Text.tsx b/ts/components/basic/Text.tsx
index 3dafd86cf..dfb683a5f 100644
--- a/ts/components/basic/Text.tsx
+++ b/ts/components/basic/Text.tsx
@@ -16,7 +16,7 @@ const StyledDefaultText = styled.div`
padding: ${props => (props.padding ? props.padding : '')};
text-align: ${props => (props.textAlign ? props.textAlign : '')};
font-family: var(--font-default);
- color: ${props => (props.subtle ? 'var(--color-text-subtle)' : 'var(--color-text)')};
+ color: ${props => (props.subtle ? 'var(--text-secondary-color)' : 'var(--text-primary-color)')};
white-space: ${props => (props.ellipsisOverflow ? 'nowrap' : null)};
overflow: ${props => (props.ellipsisOverflow ? 'hidden' : null)};
text-overflow: ${props => (props.ellipsisOverflow ? 'ellipsis' : null)};
diff --git a/ts/components/basic/YourSessionIDPill.tsx b/ts/components/basic/YourSessionIDPill.tsx
index f949b9313..903bbf672 100644
--- a/ts/components/basic/YourSessionIDPill.tsx
+++ b/ts/components/basic/YourSessionIDPill.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components';
import { UserUtils } from '../../session/utils';
const StyledPillDividerLine = styled.div`
- border-bottom: 1px solid var(--color-pill-divider);
+ border-bottom: 1px solid var(--border-color);
line-height: 0.1em;
flex-grow: 1;
height: 1px;
@@ -13,8 +13,8 @@ const StyledPillDividerLine = styled.div`
const StyledPillSpan = styled.span`
padding: 5px 15px;
border-radius: 50px;
- color: var(--color-pill-divider-text);
- border: 1px solid var(--color-pill-divider);
+ color: var(--text-primary-color);
+ border: 1px solid var(--border-color);
`;
const StyledPillDivider = styled.div`
@@ -39,8 +39,8 @@ const StyledYourSessionIDSelectable = styled.p`
text-align: center;
word-break: break-all;
font-weight: 300;
- color: var(--color-text);
font-size: var(--font-size-sm);
+ color: var(--text-primary-color);
`;
export const YourSessionIDSelectable = () => {
diff --git a/ts/components/button/MenuButton.tsx b/ts/components/button/MenuButton.tsx
index 4ef998b49..254e0a732 100644
--- a/ts/components/button/MenuButton.tsx
+++ b/ts/components/button/MenuButton.tsx
@@ -27,12 +27,6 @@ const StyledMenuButton = styled.button`
}
`;
-const StyledMenuInput = styled.input`
- opacity: 0;
- width: 0;
- height: 0;
-`;
-
/**
* This is the Session Menu Botton. i.e. the button on top of the conversation list to start a new conversation.
* It has two state: selected or not and so we use an checkbox input to keep the state in sync.
@@ -57,8 +51,8 @@ export const MenuButton = () => {
'--fg-color': 'white',
} as CSSProperties
}
+ onClick={onClickFn}
>
-
{
const overlayMode = useSelector(getOverlayMode);
diff --git a/ts/components/leftpane/overlay/OverlayClosedGroup.tsx b/ts/components/leftpane/overlay/OverlayClosedGroup.tsx
index 6c606f603..f2145191f 100644
--- a/ts/components/leftpane/overlay/OverlayClosedGroup.tsx
+++ b/ts/components/leftpane/overlay/OverlayClosedGroup.tsx
@@ -22,7 +22,7 @@ import { VALIDATION } from '../../../session/constants';
const StyledMemberListNoContacts = styled.div`
font-family: var(--font-font-mono);
- background: var(--color-cell-background);
+ background: var(--background-secondary-color);
text-align: center;
padding: 20px;
`;
@@ -32,7 +32,7 @@ const StyledGroupMemberListContainer = styled.div`
width: 100%;
max-height: 400px;
overflow-y: auto;
- border: var(--border-session);
+ border: var(--border-color);
`;
const NoContacts = () => {
diff --git a/ts/components/leftpane/overlay/OverlayHeader.tsx b/ts/components/leftpane/overlay/OverlayHeader.tsx
index 01765382b..9f7a66f84 100644
--- a/ts/components/leftpane/overlay/OverlayHeader.tsx
+++ b/ts/components/leftpane/overlay/OverlayHeader.tsx
@@ -6,10 +6,10 @@ import { Flex } from '../../basic/Flex';
import { SpacerSM } from '../../basic/Text';
import { SessionIconButton } from '../../icon';
-const StyledGreenBorder = styled.hr`
+const StyledPrimaryBorder = styled.hr`
position: absolute;
- color: var(--color-accent);
- background-color: var(--color-accent);
+ color: var(--primary-color);
+ background-color: var(--primary-color);
height: 5px;
left: -10px;
@@ -19,7 +19,9 @@ const StyledGreenBorder = styled.hr`
z-index: 1;
`;
-const StyledWhiteBorder = styled.hr`
+const StyledBackgroundBorder = styled.hr`
+ color: var(--background-primary-color);
+ background-color: var(--background-primary-color);
width: 100%;
position: relative;
height: 1px;
@@ -63,9 +65,9 @@ export const OverlayHeader = ({ subtitle, title }: { title: string; subtitle: st
{subtitle}
-
+
-
+
);
};
diff --git a/ts/components/leftpane/overlay/OverlayMessageRequest.tsx b/ts/components/leftpane/overlay/OverlayMessageRequest.tsx
index eafb262d3..7c4c7d37d 100644
--- a/ts/components/leftpane/overlay/OverlayMessageRequest.tsx
+++ b/ts/components/leftpane/overlay/OverlayMessageRequest.tsx
@@ -21,6 +21,39 @@ import {
} from '../../../state/ducks/conversations';
import { updateConfirmModal } from '../../../state/ducks/modalDialog';
+const MessageRequestListPlaceholder = styled.div`
+ color: var(--conversation-tab-text-color);
+ margin-bottom: auto;
+`;
+
+const MessageRequestListContainer = styled.div`
+ width: 100%;
+ overflow-y: auto;
+ border: var(--border-color);
+ margin-bottom: auto;
+`;
+
+/**
+ * A request needs to be be unapproved and not blocked to be valid.
+ * @returns List of message request items
+ */
+const MessageRequestList = () => {
+ const conversationRequests = useSelector(getConversationRequests);
+ return (
+
+ {conversationRequests.map(conversation => {
+ return (
+
+ );
+ })}
+
+ );
+};
+
export const OverlayMessageRequest = () => {
useKey('Escape', closeOverlay);
const dispatch = useDispatch();
@@ -116,36 +149,3 @@ export const OverlayMessageRequest = () => {
);
};
-
-const MessageRequestListPlaceholder = styled.div`
- color: var(--color-text);
- margin-bottom: auto;
-`;
-
-const MessageRequestListContainer = styled.div`
- width: 100%;
- overflow-y: auto;
- border: var(--border-session);
- margin-bottom: auto;
-`;
-
-/**
- * A request needs to be be unapproved and not blocked to be valid.
- * @returns List of message request items
- */
-const MessageRequestList = () => {
- const conversationRequests = useSelector(getConversationRequests);
- return (
-
- {conversationRequests.map(conversation => {
- return (
-
- );
- })}
-
- );
-};
diff --git a/ts/themes/SessionTheme.tsx b/ts/themes/SessionTheme.tsx
index 7dcd4e2e7..8bc48ce1d 100644
--- a/ts/themes/SessionTheme.tsx
+++ b/ts/themes/SessionTheme.tsx
@@ -4,7 +4,7 @@ import { createGlobalStyle } from 'styled-components';
import { hexColorToRGB } from '../util/hexColorToRGB';
import { COLORS, THEMES } from './colors';
-const whiteColor = '#ffffff';
+export const whiteColor = '#ffffff';
const whiteColorRGB = '255, 255, 255'; // we need rgb values if we want css variables within rgba
const blackColor = '#000000';
const blackColorRGB = '0, 0, 0'; // we need rgb values if we want css variables within rgba
@@ -456,13 +456,13 @@ export const SessionGlobalStyles = createGlobalStyle`
/* New Theme Variables */
/* 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},
+ --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};
@@ -540,7 +540,7 @@ export const SessionGlobalStyles = createGlobalStyle`
/* TODO Theming Consolidate with code */
/* Conversation Tab */
- /* This is also user for Overlay Tabs, Contact Rows, Convesation List Items, Message Search Results, Session Search Input?, Message Requests Banner etc. */
+ /* This is also user for Overlay Tabs, Contact Rows, Convesation List Items, Message Search Results, Session Search Input?, Message Requests Banner, Member List Item etc. */
--conversation-tab-background-color: ${THEMES.CLASSIC_LIGHT.COLOR5};
--conversation-tab-background-hover-color: ${THEMES.CLASSIC_LIGHT.COLOR4};
--conversation-tab-background-selected-color: ${THEMES.CLASSIC_LIGHT.COLOR4};
@@ -599,6 +599,8 @@ export const SessionGlobalStyles = createGlobalStyle`
/* NOTE only used for + icon */
--emoji-reaction-bar-icon-background-color: var(--background-primary-color);
--emoji-reaction-bar-icon-color: var(--text-primary-color);
+
+ /* TODO Theming - Should Pills have their own colors? */
};
`;