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

refactor: finished converting sass colors in _theme_dark.scss

Browse Source 
converted module-main-header__search__input class to styled component, consolidated blues, grays and whites
pull/2521/head
William Grant 3 years ago
parent 561ea27a92
commit 17d893f2b7
8 changed files with 100 additions and 108 deletions
Show Stats Download Patch File Download Diff File

4
stylesheets/_index.scss
Unescape Escape View File

@ -112,7 +112,7 @@
transform: scaleX(2.5) scaleY(0.75);
}
&:after {
border-color: transparent #2eace0 transparent transparent;
border-color: transparent var(--color-dark-blue-color) transparent transparent;
left: -30px;
}
}
@ -143,7 +143,7 @@
transform: scaleY(2.5) scaleX(0.75);
}
&:after {
border-color: transparent transparent #2eace0 transparent;
border-color: transparent transparent var(--color-dark-blue-color) transparent;
top: -30px;
}
}

25
stylesheets/_modules.scss
Unescape Escape View File

@ -736,31 +736,6 @@
color: var(--color-lighter-gray-color);
}
// Module: Main Header
.module-main-header__search__input {
color: var(--color-lighter-gray-color);
background-color: $color-gray-95;
border: 1px solid $color-light-60;
padding: 0 26px 0 30px;
margin-inline-start: 8px;
margin-inline-end: 8px;
outline: 0;
height: 32px;
width: calc(100% - 16px);
outline-offset: -2px;
font-size: 14px;
line-height: 18px;
font-weight: normal;
position: relative;
border-radius: 4px;
&::placeholder {
color: var(--color-light-gray-color);
}
}
// Module: Image
.module-image {

115
stylesheets/_theme_dark.scss
Unescape Escape View File

@ -6,7 +6,7 @@
.content {
textarea {
background-color: var(--color-darkest-gray-color);
border: 1px solid $color-dark-60;
border: 1px solid var(--color-gray-color);
color: var(--color-lighter-gray-color);
}
}
@ -14,7 +14,7 @@
.result {
.open {
border: solid 1px $color-dark-60;
border: solid 1px var(--color-gray-color);
background-color: var(--color-darkest-gray-color);
color: var(--color-lighter-gray-color);
@ -25,7 +25,7 @@
.link {
color: var(--color-lighter-gray-color);
border: solid 1px $color-dark-60;
border: solid 1px var(--color-gray-color);
border-right: none;
background-color: var(--color-darkest-gray-color);
}
@ -59,59 +59,59 @@
.x {
&:before {
@include color-svg('../images/x.svg', white);
@include color-svg('../images/x.svg', var(--color-white-color));
}
}
input.search {
border: 1px solid $color-light-60;
border: 1px solid var(--color-gray-color);
color: var(--color-lighter-gray-color);
background-color: $color-gray-95;
background-color: var(--color-darkest-gray-color);
&:focus {
outline: solid 1px $blue;
outline: solid 1px var(--color-dark-blue-color);
}
}
.hint {
color: white;
border: 2px dashed white;
color: var(--color-white-color);
border: 2px dashed var(--color-white-color);
&.firstRun {
&:before,
&:after {
border: solid 10px white;
border-color: transparent white transparent transparent;
border: solid 10px var(--color-white-color);
border-color: transparent var(--color-white-color) transparent transparent;
}
&:after {
border-color: transparent #2eace0 transparent transparent;
border-color: transparent var(--color-dark-blue-color) transparent transparent;
}
}
}
.contact.placeholder {
color: white;
border: 2px dashed white;
color: var(--color-white-color);
border: 2px dashed var(--color-white-color);
p {
color: white;
color: var(--color-white-color);
}
&:before,
&:after {
border: solid 10px white;
border-color: transparent transparent white transparent;
border: solid 10px var(--color-white-color);
border-color: transparent transparent var(--color-white-color) transparent;
}
&:after {
border-color: transparent transparent #2eace0 transparent;
border-color: transparent transparent var(--color-dark-blue-color) transparent;
}
}
// _modal
.modal {
background-color: rgba(0, 0, 0, 0.3);
background-color: rgba(var(--color-black-color-rgb), 0.3);
.content {
background-color: $color-gray-95;
box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.2);
background-color: var(--color-darkest-gray-color);
box-shadow: 0px 3px 5px 0px var(--color-light-black-color);
}
}
@ -124,27 +124,28 @@
}
.module-message__img-border-overlay {
box-shadow: inset 0px 0px 0px 1px $color-white-015;
box-shadow: inset 0px 0px 0px 1px var(--color-lighter-white-color);
}
.module-message__img-overlay {
/* TODO does this work? */
background-image: linear-gradient(
to bottom,
var(--color-transparent-color),
/* TODO does this work? */ var(--color-transparent-color) 9%,
rgba(0, 0, 0, 0.02) 17%,
rgba(0, 0, 0, 0.05) 24%,
rgba(0, 0, 0, 0.08) 31%,
rgba(0, 0, 0, 0.12) 37%,
rgba(0, 0, 0, 0.16) 44%,
rgba(0, 0, 0, 0.2) 50%,
rgba(0, 0, 0, 0.24) 56%,
rgba(0, 0, 0, 0.28) 63%,
rgba(0, 0, 0, 0.32) 69%,
rgba(0, 0, 0, 0.35) 76%,
rgba(0, 0, 0, 0.38) 83%,
rgba(0, 0, 0, 0.4) 91%,
rgba(0, 0, 0, 0.4)
var(--color-transparent-color) 9%,
rgba(var(--color-black-color-rgb), 0.02) 17%,
rgba(var(--color-black-color-rgb), 0.05) 24%,
rgba(var(--color-black-color-rgb), 0.08) 31%,
rgba(var(--color-black-color-rgb), 0.12) 37%,
rgba(var(--color-black-color-rgb), 0.16) 44%,
rgba(var(--color-black-color-rgb), 0.2) 50%,
rgba(var(--color-black-color-rgb), 0.24) 56%,
rgba(var(--color-black-color-rgb), 0.28) 63%,
rgba(var(--color-black-color-rgb), 0.32) 69%,
rgba(var(--color-black-color-rgb), 0.35) 76%,
rgba(var(--color-black-color-rgb), 0.38) 83%,
rgba(var(--color-black-color-rgb), 0.4) 91%,
rgba(var(--color-black-color-rgb), 0.4)
);
}
@ -169,7 +170,7 @@
}
.module-message__link-preview__content {
background-color: $color-gray-95;
background-color: var(--color-darkest-gray-color);
border: 1px solid var(--color-gray-color);
}
@ -184,7 +185,7 @@
// Module: Contact Detail
.module-contact-detail__send-message {
background-color: $blue;
background-color: var(--color-dark-blue-color);
color: var(--color-white-color);
}
@ -207,7 +208,7 @@
.module-message-detail__delete-button {
background-color: var(--color-destructive);
color: var(--color-white-color);
box-shadow: 0 0 10px -3px rgba(97, 97, 97, 0.7);
box-shadow: 0 0 10px -3px var(--color-gray-color-rgb);
border: solid 1px var(--color-light-gray-color);
}
@ -232,7 +233,7 @@
}
.module-document-list-item__icon {
@include color-svg('../images/file.svg', $color-dark-60);
@include color-svg('../images/file.svg', var(--color-gray-color));
}
// Module: Media Grid Item
@ -242,21 +243,21 @@
}
.module-media-grid-item__icon-image {
@include color-svg('../images/image.svg', $color-dark-60);
@include color-svg('../images/image.svg', var(--color-gray-color));
}
.module-media-grid-item__icon-video {
@include color-svg('../images/movie.svg', $color-dark-60);
@include color-svg('../images/movie.svg', var(--color-gray-color));
}
.module-media-grid-item__icon-generic {
@include color-svg('../images/file.svg', $color-dark-60);
@include color-svg('../images/file.svg', var(--color-gray-color));
}
// Module: Empty State
.module-empty-state {
color: $color-dark-55;
color: var(--color-light-gray-color);
}
// Module: Conversation List Item
@ -286,24 +287,6 @@
color: var(--color-lighter-gray-color);
}
// Module: Main Header
.module-main-header__search__input {
background-color: $color-gray-95;
border-radius: 14px;
border: solid 1px $color-gray-75;
color: var(--color-lighter-gray-color);
&::placeholder {
color: var(--color-light-gray-color);
}
&:focus {
border: solid 1px blue;
outline: none;
}
}
// Module: Image
.module-image {
@ -311,7 +294,7 @@
}
.module-image__loading-placeholder {
background-color: $color-white-015;
background-color: var(--color-lighter-white-color);
}
// Module: Typing Animation
@ -327,7 +310,7 @@
// Module: Attachments
.module-attachments {
border-top: 1px solid $color-gray-75;
border-top: 1px solid var(--color-dark-gray-color);
}
.module-attachments__close-button {
@ -338,7 +321,7 @@
.module-staged-generic-attachment {
box-shadow: inset 0px 0px 0px 1px var(--color-light-gray-color);
background-color: $color-gray-75;
background-color: var(--color-dark-gray-color);
color: var(--color-lighter-gray-color);
}
@ -360,7 +343,7 @@
border: 1px solid var(--color-gray-color);
&:hover {
background: $color-gray-75;
background: var(--color-dark-gray-color);
}
}

9
stylesheets/_variables.scss
Unescape Escape View File

@ -4,10 +4,6 @@ $color-loki-extra-dark-gray: #101010;
$color-loki-green-dark: #32b10e;
$color-loki-green-gradient: linear-gradient(to right, rgb(120, 190, 32) 0%, rgb(0, 133, 34) 100%);
$color-gray-75: #3d3e44;
$color-gray-95: #0f1012;
$color-white-015: rgba(var(--color-white-color-rgb), 0.15);
$color-white-02: rgba(var(--color-white-color-rgb), 0.2);
$color-white-04: rgba(var(--color-white-color-rgb), 0.4);
$color-white-05: rgba(var(--color-white-color-rgb), 0.5);
@ -16,11 +12,8 @@ $color-white-07: rgba(var(--color-white-color-rgb), 0.7);
$color-white-075: rgba(var(--color-white-color-rgb), 0.75);
$color-white-08: rgba(var(--color-white-color-rgb), 0.8);
$color-light-20: #c1c5cd;
$color-light-60: #62656a;
$color-light-90: #070c14;
$color-dark-55: #88898c;
$color-dark-60: #797a7c;
$color-dark-72: #31343c;
$color-dark-90: #121417;
$color-black-008: rgba(var(--color-black-color-rgb), 0.08);
@ -30,8 +23,6 @@ $color-black-04: rgba(var(--color-black-color-rgb), 0.4);
// Old colors
$blue: #2090ea;
// A few layout variables used cross-file
$header-height: 55px;

34
ts/components/SessionHeaderSearchInput.tsx
Unescape Escape View File

@ -0,0 +1,34 @@
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')});
padding: 0 26px 0 30px;
margin-inline-start: 8px;
margin-inline-end: 8px;
outline: 0;
height: 32px;
width: calc(100% - 16px);
outline-offset: -2px;
font-size: 14px;
line-height: 18px;
font-weight: normal;
position: relative;
border-radius: ${props => (props.darkMode ? '14px' : '4px')};
&::placeholder {
color: var(--color-light-gray-color);
}
&:focus {
border: solid 1px var(${props => (props.darkMode ? '--color-accent' : '--color-text')});
outline: none;
}
`;

9
ts/components/dialog/BanOrUnbanUserDialog.tsx
Unescape Escape View File

@ -2,7 +2,7 @@ import React, { useRef, useState } from 'react';
import { PubKey } from '../../session/types';
import { ToastUtils } from '../../session/utils';
import { Flex } from '../basic/Flex';
import { useDispatch } from 'react-redux';
import { useDispatch, useSelector } from 'react-redux';
import { BanType, updateBanOrUnbanUserModal } from '../../state/ducks/modalDialog';
import { SpacerSM } from '../basic/Text';
import { getConversationController } from '../../session/conversations/ConversationController';
@ -16,6 +16,8 @@ import {
sogsV3BanUser,
sogsV3UnbanUser,
} from '../../session/apis/open_group_api/sogsv3/sogsV3BanUnban';
import { SessionHeaderSearchInput } from '../SessionHeaderSearchInput';
import { getTheme } from '../../state/selectors/theme';
// tslint:disable: use-simple-attributes
@ -65,6 +67,7 @@ export const BanOrUnBanUserDialog = (props: {
const { i18n } = window;
const isBan = banType === 'ban';
const dispatch = useDispatch();
const darkMode = useSelector(getTheme) === 'dark';
const convo = getConversationController().get(conversationId);
const inputRef = useRef(null);
@ -126,10 +129,10 @@ export const BanOrUnBanUserDialog = (props: {
}}
>
<Flex container={true} flexDirection="column" alignItems="center">
<input
<SessionHeaderSearchInput
ref={inputRef}
type="text"
className="module-main-header__search__input"
darkMode={darkMode}
placeholder={i18n('enterSessionID')}
dir="auto"
onChange={onPubkeyBoxChanges}

9
ts/components/dialog/ModeratorsAddDialog.tsx
Unescape Escape View File

@ -3,12 +3,14 @@ import { PubKey } from '../../session/types';
import { ToastUtils } from '../../session/utils';
import { Flex } from '../basic/Flex';
import { getConversationController } from '../../session/conversations';
import { useDispatch } from 'react-redux';
import { useDispatch, useSelector } from 'react-redux';
import { updateAddModeratorsModal } from '../../state/ducks/modalDialog';
import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton';
import { SessionSpinner } from '../basic/SessionSpinner';
import { SessionWrapperModal } from '../SessionWrapperModal';
import { sogsV3AddAdmin } from '../../session/apis/open_group_api/sogsv3/sogsV3AddRemoveMods';
import { SessionHeaderSearchInput } from '../SessionHeaderSearchInput';
import { getTheme } from '../../state/selectors/theme';
type Props = {
conversationId: string;
@ -18,6 +20,7 @@ export const AddModeratorsDialog = (props: Props) => {
const { conversationId } = props;
const dispatch = useDispatch();
const darkMode = useSelector(getTheme) === 'dark';
const convo = getConversationController().get(conversationId);
const [inputBoxValue, setInputBoxValue] = useState('');
@ -79,9 +82,9 @@ export const AddModeratorsDialog = (props: Props) => {
>
<Flex container={true} flexDirection="column" alignItems="center">
<p>Add Moderator:</p>
<input
<SessionHeaderSearchInput
type="text"
className="module-main-header__search__input"
darkMode={darkMode}
placeholder={i18n('enterSessionID')}
dir="auto"
onChange={onPubkeyBoxChanges}

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

@ -23,6 +23,7 @@ const avatarBorderColor = '#00000059';
// Blues
const lightBlueColor = '#a2d2f4';
const darkBlueColor = '#2090ea';
// Greens
const sessionGreenColor = accentDarkTheme;
@ -395,6 +396,7 @@ export const SessionGlobalStyles = createGlobalStyle`
--color-white-color: ${whiteColor};
--color-white-color-rgb: ${whiteColorRGB};
--color-lighter-white-color: ${`rgba(${whiteColorRGB}, 0.15)`};
--color-darkest-white-color: ${`rgba(${whiteColorRGB}, 0.85)`};
--color-gray-color: ${grayColor};
@ -407,6 +409,7 @@ export const SessionGlobalStyles = createGlobalStyle`
--color-darker-gray-color: ${darkerGrayColor};
--color-darkest-gray-color: ${darkestGrayColor};
--color-light-blue-color: ${lightBlueColor};
--color-dark-blue-color: ${darkBlueColor};
--color-transparent-color: ${transparentColor};
--color-warning: ${warning};

Write Preview
Loading…
Cancel
Save