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 modal colors and making progress through different dialogs 

styled inputs in modals, fixed member list item and radio button styling, fixed some borders
This commit is contained in:
William Grant 2022-10-05 17:52:45 +11:00
parent de7d0f2bdb
commit a47e96ca34
18 changed files with 213 additions and 170 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
stylesheets/_mentions.scss
View File

@ -3,26 +3,6 @@
max-height: 240px;
overflow-y: auto;
margin: 4px;
.check-mark {
float: right;
text-align: center;
color: darkslategrey;
margin: 4px;
min-width: 20px;
}
}
.member-list-container {
margin: 0;
padding: 0;
max-height: 240px;
overflow-y: scroll;
.check-mark {
display: none;
}
}
.module-conversation-list-item--mentioned-us {

32
stylesheets/_modal.scss
View File

@ -4,7 +4,7 @@
left: 0;
height: 100vh;
width: 100vw;
background-color: rgba(0, 0, 0, 0.3);
background-color: var(--modal-background-color);
padding: 0 20px;
z-index: 100;
overflow-y: auto;
@ -14,10 +14,10 @@
max-width: 350px;
margin: 100px auto;
padding: 1em;
background-color: white;
background-color: var(--modal-background-content-color);
border-radius: $border-radius;
overflow: auto;
box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.2);
box-shadow: var(--modal-drop-shadow);
}
}
@ -76,7 +76,7 @@
.edit-profile-dialog {
.error-message {
text-align: center;
color: red;
color: var(--danger-color);
display: block;
user-select: none;
}
@ -102,10 +102,10 @@
max-width: 75%;
min-width: 60%;
padding: 1em;
background: white;
background: var(--modal-background-content-color);
border-radius: $border-radius;
overflow: auto;
box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 15px 0px var(--modal-background-color);
}
input[type='radio'] {
@ -122,7 +122,6 @@
border: 0;
outline: none;
border-radius: 4px;
background-color: var(--color-lighter-gray-color);
&:focus {
outline: none;
@ -143,9 +142,13 @@
}
input {
background-color: var(--color-input-background);
color: var(--color-text);
border: var(--border-session);
background-color: var(--input-background-color);
color: var(--input-text-color);
border: 1px solid var(--input-border-color);
&::placeholder {
color: var(--input-text-placeholder-color);
}
}
}
@ -180,7 +183,7 @@
height: 30px;
width: 30px;
border-radius: 50%;
background-color: white;
background-color: var(--white-color);
transition: var(--default-duration);
&:hover {
@ -212,9 +215,10 @@
border-radius: 5px;
text-align: center;
font-size: $session-font-md;
background: var(--color-input-background);
color: var(--color-text);
border: var(--border-session);
// TODO Theming - Is this redundant?
background-color: var(--input-background-color);
color: var(--input-text-color);
border: 1px solid var(--input-border-color);
}
&-uneditable {

17
stylesheets/_session.scss
View File

@ -183,8 +183,9 @@ label {
visibility: hidden;
}
// TODO Theming update
.Toastify__toast {
background: var(--modal-background-color);
background: var(--modal-background-content-color);
color: var(--modal-text-color);
border-left: 4px solid var(--primary-color);
@ -205,11 +206,11 @@ label {
max-height: 70vh;
max-width: calc(min(70vw, 800px));
font-family: $session-font-default;
background-color: var(--color-modal-background);
color: var(--color-text);
border: var(--border-session);
background-color: var(--modal-background-content-color);
color: var(--modal-text-color);
border: 1px solid var(--border-color);
border-radius: 14px;
box-shadow: var(--color-session-shadow);
box-shadow: var(--modal-drop-shadow);
overflow: hidden;
display: flex;
@ -313,7 +314,7 @@ label {
&__text-highlight {
@include text-highlight(var(--primary-color));
color: var(--black-color);
color: var(--modal-text-color);
font-family: monospace;
font-style: normal;
@ -395,10 +396,10 @@ label {
transition: var(--default-duration);
&:first-child {
border-top: var(--border-color);
border-top: 1px solid var(--border-color);
}
&:last-child {
border-top: var(--border-color);
border-top: 1px solid var(--border-color);
}
.session-icon {

32
stylesheets/_session_signin.scss
View File

@ -2,7 +2,7 @@
&-fullscreen {
width: 100%;
height: 100%;
background-color: var(--color-white-color);
background-color: var(--background-primary-color);
}
&-content {
&-accent {
@ -56,7 +56,7 @@
}
@mixin registration-label-mixin {
color: var(--color-text);
color: var(--text-primary-color);
font-weight: bold;
padding: 20px;
@ -90,7 +90,7 @@
height: 46.5px;
width: 280px;
font-family: $session-font-default;
color: var(--color-text);
color: var(--text-primary-color);
padding: 2px 0 2px 0;
transition: opacity var(--default-duration);
@ -100,7 +100,7 @@
label {
line-height: 14px;
opacity: 0;
color: var(--color-text);
color: var(--text-primary-color);
font-size: 10px;
line-height: 11px;
@ -113,7 +113,7 @@
}
&.error {
color: var(--color-destructive);
color: var(--danger-color);
}
input {
@ -122,7 +122,7 @@
height: 14px;
width: 280px;
background: transparent;
color: var(--color-text);
color: var(--input-text-color);
font-family: $session-font-default;
font-size: 12px;
@ -130,10 +130,14 @@
position: absolute;
top: 50%;
transform: translateY(-50%);
&::placeholder {
color: var(--input-text-placeholder-color);
}
}
hr {
border: var(--border-session);
border: 1px solid var(--border-color);
width: 100%;
position: absolute;
@ -151,7 +155,7 @@
&-terms-conditions-agreement {
padding-top: var(--margins-md);
color: var(--color-text-subtle);
color: var(--text-secondary-color);
text-align: center;
font-size: 12px;
@ -159,15 +163,15 @@
white-space: nowrap;
font-weight: bold;
text-decoration: none;
color: var(--color-text-subtle);
color: var(--text-secondary-color);
transition: var(--default-duration);
&:visited &:link {
color: var(--color-text-subtle);
color: var(--text-secondary-color);
}
&:hover {
color: var(--color-text);
color: var(--text-primary-color);
}
}
}
@ -176,7 +180,7 @@
padding-top: 0;
padding-bottom: 20px;
// TODO Theming needs to be updated
color: rgba(black, 0.6);
color: rgba(var(--black-color), 0.6);
text-align: center;
font-size: 12px;
line-height: 20px;
@ -202,7 +206,7 @@
outline: 0;
border: none;
background: transparent;
color: var(--color-text);
color: var(--text-primary-color);
font-size: var(--font-size-md);
line-height: 18px;
text-align: center;
@ -220,6 +224,6 @@
[contenteditable='true']:empty::before {
content: attr(placeholder);
color: var(--color-text-subtle);
color: var(--text-secondary-color);
font-size: var(--font-size-sm);
}

157
stylesheets/_theme_dark.scss
View File

@ -1,110 +1,103 @@
.dark-theme {
// _debugLog
// TODO Theming - Most of this should be removed when the debug window is properly styled
.debug-log {
&.modal {
.content {
textarea {
background-color: var(--color-darkest-gray-color);
border: 1px solid var(--color-gray-color);
color: var(--color-lighter-gray-color);
background-color: var(--input-background-color);
border: 1px solid var(--border-color);
color: var(--input-text-color);
}
}
}
.result {
.open {
border: solid 1px var(--color-gray-color);
background-color: var(--color-darkest-gray-color);
color: var(--color-lighter-gray-color);
textarea {
background-color: var(--input-background-color);
border: 1px solid var(--border-color);
color: var(--input-text-color);
&:before {
@include header-icon-white('../images/open_link.svg');
&:before {
@include color-svg('../images/open_link.svg', var(--button-icon-stroke-color));
}
}
.link {
color: var(--text-primary-color);
border: 1px solid var(--border-color);
border-right: none;
background-color: var(--background-primary-color);
}
}
}
.link {
color: var(--color-lighter-gray-color);
border: solid 1px var(--color-gray-color);
border-right: none;
background-color: var(--color-darkest-gray-color);
// _global
.title-bar {
color: var(--text-primary-color);
}
// TODO Theming - Do we still use this?
button.grey {
border: 1px solid var(--color-light-gray-color);
color: var(--color-gray-color);
background: var(--color-lightest-gray-color);
box-shadow: 0 0 10px -5px rgba(var(--color-gray-color-rgb), 0.5);
&:hover {
box-shadow: 0 0 10px -3px rgba(var(--color-gray-color-rgb), 0.7);
}
}
}
// _global
.title-bar {
color: var(--color-lighter-gray-color);
}
button.grey {
border: solid 1px var(--color-light-gray-color);
color: var(--color-gray-color);
background: var(--color-lightest-gray-color);
box-shadow: 0 0 10px -5px rgba(var(--color-gray-color-rgb), 0.5);
&:hover {
box-shadow: 0 0 10px -3px rgba(var(--color-gray-color-rgb), 0.7);
.loading {
position: relative;
// TODO Theming - Review
&::before {
border: 3px solid;
border-color: var(--color-light-blue-color) var(--color-light-blue-color)
var(--color-lightest-gray-color) var(--color-lightest-gray-color) !important;
}
}
}
.loading {
position: relative;
&::before {
border: solid 3px;
border-color: var(--color-light-blue-color) var(--color-light-blue-color)
var(--color-lightest-gray-color) var(--color-lightest-gray-color) !important;
.x {
&:before {
@include color-svg('../images/x.svg', var(--white-color));
}
}
}
.x {
&:before {
@include color-svg('../images/x.svg', var(--color-white-color));
}
}
// TODO Theming - Do we use this anywhere?
// .hint {
// color: var(--color-white-color);
// border: 2px dashed var(--color-white-color);
// TODO Theming - Do we use this anywhere?
// .hint {
// color: var(--color-white-color);
// border: 2px dashed var(--color-white-color);
// &.firstRun {
// &:before,
// &:after {
// border: solid 10px var(--color-white-color);
// border-color: transparent var(--color-white-color) transparent transparent;
// }
// &:after {
// border-color: transparent var(--color-dark-blue-color) transparent transparent;
// }
// }
// }
// &.firstRun {
// &:before,
// &:after {
// border: solid 10px var(--color-white-color);
// border-color: transparent var(--color-white-color) transparent transparent;
// }
// &:after {
// border-color: transparent var(--color-dark-blue-color) transparent transparent;
// }
// }
// }
// TODO Theming - I don't think we use this.
// .contact.placeholder {
// color: var(--color-white-color);
// border: 2px dashed var(--color-white-color);
// p {
// color: var(--color-white-color);
// }
// &:before,
// &:after {
// border: solid 10px var(--color-white-color);
// border-color: transparent transparent var(--color-white-color) transparent;
// }
// &:after {
// border-color: transparent transparent var(--color-dark-blue-color) transparent;
// }
// }
// _modal
// TODO Theming
.modal {
background-color: rgba(var(--color-black-color-rgb), 0.3);
.content {
background-color: var(--color-darkest-gray-color);
box-shadow: 0px 3px 5px 0px var(--color-light-black-color);
}
// TODO Theming - I don't think we use this.
// .contact.placeholder {
// color: var(--color-white-color);
// border: 2px dashed var(--color-white-color);
// p {
// color: var(--color-white-color);
// }
// &:before,
// &:after {
// border: solid 10px var(--color-white-color);
// border-color: transparent transparent var(--color-white-color) transparent;
// }
// &:after {
// border-color: transparent transparent var(--color-dark-blue-color) transparent;
// }
}
}

4
ts/components/MemberListItem.tsx
View File

@ -42,7 +42,7 @@ const StyledSessionMemberItem = styled.button<{
: null};
:not(:last-child) {
border-bottom: var(--border-color);
border-bottom: 1px solid var(--border-color);
}
`;
@ -101,7 +101,7 @@ export const MemberListItem = (props: {
style={
!inMentions && !disableBg
? {
backgroundColor: 'var(--background-secondary-color)',
backgroundColor: 'var(--background-primary-color)',
}
: {}
}

17
ts/components/SessionHeaderSearchInput.tsx
View File

@ -1,14 +1,9 @@
import styled from 'styled-components';
export const SessionHeaderSearchInput = styled.input<{ darkMode: boolean }>`
color: var(
${props => (props.darkMode ? '--color-lighter-gray-color' : '--color-lighter-gray-color')}
);
background-color: var(
${props => (props.darkMode ? '--color-darkest-gray-color' : '--color-darkest-gray-color')}
);
border: 1px solid
var(${props => (props.darkMode ? '--color-dark-gray-color' : '--color-gray-color')});
color: var(--input-text-color);
background-color: var(--input-background-color);
border: 1px solid var(--input-border-color);
padding: 0 26px 0 30px;
margin-inline-start: 8px;
margin-inline-end: 8px;
@ -21,14 +16,14 @@ export const SessionHeaderSearchInput = styled.input<{ darkMode: boolean }>`
font-weight: normal;
position: relative;
border-radius: ${props => (props.darkMode ? '14px' : '4px')};
border-radius: '4px';
&::placeholder {
color: var(--color-light-gray-color);
color: var(--input-text-placeholder-color);
}
&:focus {
border: solid 1px var(${props => (props.darkMode ? '--color-accent' : '--color-text')});
border: solid 1px var(${props => (props.darkMode ? '--primary-color' : '--input-text-color')});
outline: none;
}
`;

7
ts/components/basic/SessionRadio.tsx
View File

@ -35,6 +35,7 @@ const StyledLabel = styled.label<{
beforeMargins?: string;
}>`
cursor: pointer;
color: var(--text-primary-color);
:before {
content: '';
@ -43,8 +44,8 @@ const StyledLabel = styled.label<{
transition: var(--default-duration);
padding: ${props => props.filledSize}px;
outline: var(--text-primary-color) solid 1px;
border: none;
outline: 1px solid currentColor; /* CSS varibles didn't work here */
outline-offset: ${props => props.outlineOffset}px;
${props => props.beforeMargins && `margin: ${props.beforeMargins};`};
}
@ -85,7 +86,6 @@ export const SessionRadio = (props: Props) => {
beforeMargins={beforeMargins}
aria-label={label}
data-testid={`label-${value}`}
// TODO Theming does this need a selected color
>
{label}
</StyledLabel>
@ -94,12 +94,13 @@ export const SessionRadio = (props: Props) => {
};
const StyledInputOutlineSelected = styled(StyledInput)`
color: var(--text-primary-color);
label:before,
label:before {
outline: none;
}
:checked + label:before {
outline: var(--text-primary-color) solid 1px;
outline-color: 1px solid currentColor;
}
`;
const StyledLabelOutlineSelected = styled(StyledLabel)<{ selectedColor: string }>`

2
ts/components/calling/CallInFullScreenContainer.tsx
View File

@ -22,7 +22,7 @@ const CallInFullScreenVisible = styled.div`
display: flex;
flex-direction: column;
background-color: var(--black-color);
border: var(--border-color);
border: 1px solid var(--border-color);
opacity: 1;
`;

4
ts/components/calling/DraggableCallContainer.tsx
View File

@ -20,8 +20,8 @@ export const DraggableCallWindow = styled.div`
width: 12vw;
display: flex;
flex-direction: column;
background-color: var(--modal-background-color);
border: var(--border-color);
background-color: var(--modal-background-content-color);
border: 1px solid var(--border-color);
`;
export const StyledVideoElement = styled.video<{ isVideoMuted: boolean }>`

4
ts/components/calling/IncomingCallDialog.tsx
View File

@ -20,8 +20,8 @@ export const CallWindow = styled.div`
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
background-color: var(--modal-background-color);
border: var(--border-color);
background-color: var(--modal-background-content-color);
border: 1px solid var(--border-color);
`;
const IncomingCallAvatarContainer = styled.div`

1
ts/components/dialog/SessionModal.tsx
View File

@ -27,6 +27,7 @@ interface State {
isVisible: boolean;
}
// TODO Theming - Can we remove this.
export class SessionModal extends React.PureComponent<Props, State> {
public static defaultProps = {
showExitIcon: true,

1
ts/components/leftpane/LeftPaneSectionContainer.tsx
View File

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

2
ts/components/leftpane/LeftPaneSectionHeader.tsx
View File

@ -47,7 +47,7 @@ export const StyledLeftPaneBanner = styled.div`
background: var(--background-primary-color);
display: flex;
flex-direction: column;
border-bottom: var(--border-color);
border-bottom: 1px solid var(--border-color);
`;
const StyledBannerInner = styled.div`

3
ts/components/leftpane/overlay/OverlayClosedGroup.tsx
View File

@ -32,7 +32,8 @@ const StyledGroupMemberListContainer = styled.div`
width: 100%;
max-height: 400px;
overflow-y: auto;
border: var(--border-color);
border-top: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
`;
const NoContacts = () => {

2
ts/components/leftpane/overlay/OverlayMessageRequest.tsx
View File

@ -29,7 +29,7 @@ const MessageRequestListPlaceholder = styled.div`
const MessageRequestListContainer = styled.div`
width: 100%;
overflow-y: auto;
border: var(--border-color);
border: 1px solid var(--border-color);
margin-bottom: auto;
`;

12
ts/themes/SessionTheme.tsx
View File

@ -626,9 +626,11 @@ export const SessionGlobalStyles = createGlobalStyle`
/* TODO Theming - Should Pills have their own colors? */
/* Modals */
--modal-background-color: ${THEMES.CLASSIC_LIGHT.COLOR6};
--modal-background-color: rgba(${hexColorToRGB(COLORS.BLACK)}, 0.3);
--modal-background-content-color: ${THEMES.CLASSIC_LIGHT.COLOR6};
--modal-text-color: var(--text-primary-color);
--modal-text-danger-color: var(--danger-color);
--modal-drop-shadow: 0px 0px 10px rgba(${hexColorToRGB(COLORS.BLACK)}, 0.22);
/* Toasts */
--toast-progress-color: rgba(${hexColorToRGB(THEMES.CLASSIC_LIGHT.COLOR0)}, 0.1);
@ -677,6 +679,14 @@ export const SessionGlobalStyles = createGlobalStyle`
--lightbox-caption-background-color: 'rgba(192, 192, 192, .40)';
--lightbox-icon-stroke-color: var(--white-color);
/* Inputs */
/* Also used for some TextAreas */
--input-background-color: var(--background-secondary-color);
--input-background-hover-color: var(--background-secondary-color);
--input-text-placeholder-color: var(--text-secondary-color);
--input-text-color: var(--text-primary-color);
--input-border-color: var(--border-color);
};
`;

66
ts/themes/switchTheme.tsx
View File

@ -324,7 +324,7 @@ function loadClassicLight(primaryColor?: PrimaryColorStateType) {
);
document.documentElement.style.setProperty(
'--modal-background-color',
'--modal-background-content-color',
THEMES.CLASSIC_LIGHT.COLOR6
);
document.documentElement.style.setProperty('--modal-text-color', 'var(--text-primary-color)');
@ -410,6 +410,21 @@ function loadClassicLight(primaryColor?: PrimaryColorStateType) {
'rgba(192, 192, 192, .40)'
);
document.documentElement.style.setProperty('--lightbox-icon-stroke-color', 'var(--white-color)');
document.documentElement.style.setProperty(
'--input-background-color',
'var(--background-secondary-color)'
);
document.documentElement.style.setProperty(
'--input-background-hover-color',
'var(--background-secondary-color)'
);
document.documentElement.style.setProperty(
'--input-text-placeholder-color',
'var(--text-secondary-color)'
);
document.documentElement.style.setProperty('--input-text-color', ' var(--text-primary-color)');
document.documentElement.style.setProperty('--input-border-color', 'var(--border-color)');
}
function loadClassicDark(primaryColor?: PrimaryColorStateType) {
@ -725,8 +740,8 @@ function loadClassicDark(primaryColor?: PrimaryColorStateType) {
);
document.documentElement.style.setProperty(
'--modal-background-color',
'var(--background-secondary-color)'
'--modal-background-content-color',
'var(--background-primary-color)'
);
document.documentElement.style.setProperty('--modal-text-color', 'var(--text-primary-color)');
document.documentElement.style.setProperty('--modal-text-danger-color', 'var(--danger-color)');
@ -809,6 +824,21 @@ function loadClassicDark(primaryColor?: PrimaryColorStateType) {
'rgba(192, 192, 192, .40)'
);
document.documentElement.style.setProperty('--lightbox-icon-stroke-color', 'var(--white-color)');
document.documentElement.style.setProperty(
'--input-background-color',
'var(--background-secondary-color)'
);
document.documentElement.style.setProperty(
'--input-background-hover-color',
'var(--background-primary-color)'
);
document.documentElement.style.setProperty(
'--input-text-placeholder-color',
'var(--text-secondary-color)'
);
document.documentElement.style.setProperty('--input-text-color', ' var(--text-primary-color)');
document.documentElement.style.setProperty('--input-border-color', 'var(--border-color)');
}
function loadOceanLight(primaryColor?: PrimaryColorStateType) {
@ -1128,7 +1158,7 @@ function loadOceanLight(primaryColor?: PrimaryColorStateType) {
);
document.documentElement.style.setProperty(
'--modal-background-color',
'--modal-background-content-color',
'var(--background-primary-color)'
);
document.documentElement.style.setProperty('--modal-text-color', 'var(--text-primary-color)');
@ -1214,6 +1244,18 @@ function loadOceanLight(primaryColor?: PrimaryColorStateType) {
'rgba(192, 192, 192, .40)'
);
document.documentElement.style.setProperty('--lightbox-icon-stroke-color', 'var(--white-color)');
document.documentElement.style.setProperty('--input-background-color', THEMES.OCEAN_LIGHT.COLOR5);
document.documentElement.style.setProperty(
'--input-background-hover-color',
'var(--background-secondary-color)'
);
document.documentElement.style.setProperty(
'--input-text-placeholder-color',
'var(--text-secondary-color)'
);
document.documentElement.style.setProperty('--input-text-color', ' var(--text-primary-color)');
document.documentElement.style.setProperty('--input-border-color', 'var(--border-color)');
}
function loadOceanDark(primaryColor?: PrimaryColorStateType) {
@ -1525,8 +1567,8 @@ function loadOceanDark(primaryColor?: PrimaryColorStateType) {
);
document.documentElement.style.setProperty(
'--modal-background-color',
'var(--background-primary-color)'
'--modal-background-content-color',
'var(--background-secondary-color)'
);
document.documentElement.style.setProperty('--modal-text-color', 'var(--text-primary-color)');
document.documentElement.style.setProperty('--modal-text-danger-color', 'var(--danger-color)');
@ -1609,6 +1651,18 @@ function loadOceanDark(primaryColor?: PrimaryColorStateType) {
'rgba(192, 192, 192, .40)'
);
document.documentElement.style.setProperty('--lightbox-icon-stroke-color', 'var(--white-color)');
document.documentElement.style.setProperty('--input-background-color', THEMES.OCEAN_DARK.COLOR3);
document.documentElement.style.setProperty(
'--input-background-hover-color',
'var(--background-secondary-color)'
);
document.documentElement.style.setProperty(
'--input-text-placeholder-color',
'var(--text-secondary-color)'
);
document.documentElement.style.setProperty('--input-text-color', ' var(--text-primary-color)');
document.documentElement.style.setProperty('--input-border-color', 'var(--border-color)');
}
export async function switchTheme(theme: ThemeStateType) {