diff --git a/stylesheets/_index.scss b/stylesheets/_index.scss index 17b3e5633..e9b15666a 100644 --- a/stylesheets/_index.scss +++ b/stylesheets/_index.scss @@ -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; } } diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss index 78469b3ba..c43faf822 100644 --- a/stylesheets/_modules.scss +++ b/stylesheets/_modules.scss @@ -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 { diff --git a/stylesheets/_theme_dark.scss b/stylesheets/_theme_dark.scss index d3fbc01c9..21e4d82f5 100644 --- a/stylesheets/_theme_dark.scss +++ b/stylesheets/_theme_dark.scss @@ -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); } } diff --git a/stylesheets/_variables.scss b/stylesheets/_variables.scss index 6ff81e9e7..eb913db48 100644 --- a/stylesheets/_variables.scss +++ b/stylesheets/_variables.scss @@ -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; diff --git a/ts/components/SessionHeaderSearchInput.tsx b/ts/components/SessionHeaderSearchInput.tsx new file mode 100644 index 000000000..4c332432c --- /dev/null +++ b/ts/components/SessionHeaderSearchInput.tsx @@ -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; + } +`; diff --git a/ts/components/dialog/BanOrUnbanUserDialog.tsx b/ts/components/dialog/BanOrUnbanUserDialog.tsx index 670a5a051..4df761d28 100644 --- a/ts/components/dialog/BanOrUnbanUserDialog.tsx +++ b/ts/components/dialog/BanOrUnbanUserDialog.tsx @@ -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: { }} > - { 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) => { >

Add Moderator:

-