refactor: finished converting sass colors in _theme_dark.scss
converted module-main-header__search__input class to styled component, consolidated blues, grays and whites
This commit is contained in:
William Grant
parent
561ea27a92
commit
17d893f2b7
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
`;
|
||||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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};
|
||||
|
|
|
|||
Loading…
Reference in New Issue