From 53dc60bad5b66805a92afbda234b11765e61bfe0 Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Sat, 13 Aug 2022 21:33:37 +0700 Subject: [PATCH] removed all scss functions around colors --- .../comment/CommentContent/styles.module.scss | 6 +- .../CommentEmbedBlock/styles.module.scss | 4 +- .../comment/CommentForm/styles.module.scss | 2 +- .../common/Avatar/styles.module.scss | 4 +- .../common/MenuDots/styles.module.scss | 6 +- .../CommentWrapper/styles.module.scss | 3 +- .../CoverBackdrop/styles.module.scss | 4 +- .../PageCoverProvider/styles.module.scss | 4 +- .../BetterScrollDialog/styles.module.scss | 10 +- .../dialogs/ModalWrapper/styles.module.scss | 4 +- .../EditorConfirmClose/styles.module.scss | 4 +- .../styles.module.scss | 2 +- .../flow/CellShade/styles.module.scss | 4 +- .../flow/FlowCell/styles.module.scss | 4 +- .../flow/FlowCellMenu/styles.module.scss | 2 +- .../flow/FlowSwiperHero/styles.module.scss | 8 +- .../input/Button/styles.module.scss | 6 +- .../input/ButtonGroup/styles.module.scss | 3 +- src/components/input/Info/style.scss | 6 +- .../lab/LabImage/styles.module.scss | 6 -- src/components/lab/LabNode/styles.module.scss | 4 - src/components/main/Footer/styles.module.scss | 2 +- .../media/AudioPlayer/styles.module.scss | 4 +- .../menu/MenuButton/styles.module.scss | 6 +- .../menu/VerticalMenu/styles.module.scss | 4 +- .../styles.module.scss | 2 +- .../node/NodeNoComments/styles.module.scss | 2 +- .../node/NodeRelated/styles.module.scss | 4 +- .../node/NodeTitle/styles.module.scss | 43 +------- src/components/profile/Message/index.tsx | 37 ------- .../profile/Message/styles.module.scss | 100 ------------------ .../ProfileAccountsError/styles.module.scss | 2 +- .../ProfileDescription/styles.module.scss | 4 +- .../sidebar/SidebarStack/styles.module.scss | 2 +- .../TagAutocompleteRow/styles.module.scss | 2 +- .../tags/TagWrapper/styles.module.scss | 1 - .../upload/UploadDropzone/styles.module.scss | 2 +- .../flow/FlowStamp/styles.module.scss | 5 +- src/containers/main/Header/styles.module.scss | 2 +- .../profile/ProfileInfo/styles.module.scss | 4 +- .../profile/ProfileMessages/index.tsx | 54 ---------- .../ProfileMessages/styles.module.scss | 43 -------- src/styles/_colors.scss | 7 +- src/styles/_mixins.scss | 31 +----- src/styles/common/markdown.module.scss | 8 +- 45 files changed, 72 insertions(+), 395 deletions(-) delete mode 100644 src/components/profile/Message/index.tsx delete mode 100644 src/components/profile/Message/styles.module.scss delete mode 100644 src/containers/profile/ProfileMessages/index.tsx delete mode 100644 src/containers/profile/ProfileMessages/styles.module.scss diff --git a/src/components/comment/CommentContent/styles.module.scss b/src/components/comment/CommentContent/styles.module.scss index 9d996123..14954339 100644 --- a/src/components/comment/CommentContent/styles.module.scss +++ b/src/components/comment/CommentContent/styles.module.scss @@ -46,7 +46,7 @@ border-radius: 0 0 0 $radius; opacity: 1; transform: translate(0, 0); - background: transparentize($color_danger, $amount: 0.5); + background: $content_bg_danger; } } @@ -93,7 +93,7 @@ padding-bottom: 0 !important; .date { - background: transparentize($color: $content_bg, $amount: 0.2); + background: $content_bg; border-radius: $radius 0 $radius 0; color: $gray_25; } @@ -108,7 +108,7 @@ bottom: 1px; right: 0; font: $font_12_regular; - color: transparentize($color: white, $amount: 0.8); + color: $gray_75; padding: 0 6px 2px; z-index: 2; background: $content_bg_light; diff --git a/src/components/comment/CommentEmbedBlock/styles.module.scss b/src/components/comment/CommentEmbedBlock/styles.module.scss index 16b6c185..a8e0520b 100644 --- a/src/components/comment/CommentEmbedBlock/styles.module.scss +++ b/src/components/comment/CommentEmbedBlock/styles.module.scss @@ -1,4 +1,4 @@ -@import "src/styles/variables"; +@import 'src/styles/variables'; .embed { padding: 0 $gap; @@ -43,7 +43,7 @@ left: 0; width: 100%; height: 100%; - background: transparentize($content_bg, 0.15) 50% 50%; + background: $content_bg_backdrop 50% 50%; background-size: cover; z-index: 15; border-radius: $radius; diff --git a/src/components/comment/CommentForm/styles.module.scss b/src/components/comment/CommentForm/styles.module.scss index 0c0b52bc..dfc6edcc 100644 --- a/src/components/comment/CommentForm/styles.module.scss +++ b/src/components/comment/CommentForm/styles.module.scss @@ -21,7 +21,7 @@ position: relative; z-index: 1; display: flex; - background: transparentize(black, 0.8); + background: $content_bg_dark; border-radius: 0 0 $radius $radius; flex-wrap: wrap; padding: $gap * 0.25; diff --git a/src/components/common/Avatar/styles.module.scss b/src/components/common/Avatar/styles.module.scss index c7faf5db..4225c783 100644 --- a/src/components/common/Avatar/styles.module.scss +++ b/src/components/common/Avatar/styles.module.scss @@ -1,11 +1,11 @@ -@import "src/styles/variables"; +@import 'src/styles/variables'; .avatar { @include outer_shadow; width: $comment_height; height: $comment_height; - background-color: transparentize(black, 0.9); + background-color: $content_bg_dark; flex-shrink: 0; overflow: hidden; border-radius: $radius; diff --git a/src/components/common/MenuDots/styles.module.scss b/src/components/common/MenuDots/styles.module.scss index 0931dbdc..1639828e 100644 --- a/src/components/common/MenuDots/styles.module.scss +++ b/src/components/common/MenuDots/styles.module.scss @@ -1,5 +1,5 @@ -@import "src/styles/variables"; -@import "src/styles/mixins"; +@import 'src/styles/variables'; +@import 'src/styles/mixins'; .button { width: 48px; @@ -14,7 +14,7 @@ } .dots { - @include blur($content_bg, 5px, 0.7); + @include blur; padding: 5px 0 0 0; background: $content_bg; diff --git a/src/components/containers/CommentWrapper/styles.module.scss b/src/components/containers/CommentWrapper/styles.module.scss index bb9684d7..d2ad88e8 100644 --- a/src/components/containers/CommentWrapper/styles.module.scss +++ b/src/components/containers/CommentWrapper/styles.module.scss @@ -45,7 +45,6 @@ right: 0; bottom: 0; animation: highlight 1s 0.5s forwards; - background: transparentize($color_primary, 0.7); border-radius: $radius; pointer-events: none; touch-action: none; @@ -74,7 +73,7 @@ .thumb { flex: 0 0 $comment_height; border-radius: $panel_radius 0 0 $panel_radius; - background-color: transparentize(black, 0.9); + background-color: $content_bg; display: flex; flex-direction: column; box-sizing: border-box; diff --git a/src/components/containers/CoverBackdrop/styles.module.scss b/src/components/containers/CoverBackdrop/styles.module.scss index ee320c92..34d5741d 100644 --- a/src/components/containers/CoverBackdrop/styles.module.scss +++ b/src/components/containers/CoverBackdrop/styles.module.scss @@ -1,4 +1,4 @@ -@import "src/styles/variables"; +@import 'src/styles/variables'; .cover { position: absolute; @@ -22,7 +22,7 @@ height: 100%; top: 0; left: 0; - background: url('../../../sprites/stripes.svg') transparentize($color: #000000, $amount: 0.5); + background: url('../../../sprites/stripes.svg') $content_bg_backdrop; } img { diff --git a/src/components/containers/PageCoverProvider/styles.module.scss b/src/components/containers/PageCoverProvider/styles.module.scss index da90a36b..2025720f 100644 --- a/src/components/containers/PageCoverProvider/styles.module.scss +++ b/src/components/containers/PageCoverProvider/styles.module.scss @@ -1,4 +1,4 @@ -@import "src/styles/variables"; +@import 'src/styles/variables'; @keyframes fadeIn { 0% { @@ -29,7 +29,7 @@ left: 0; width: 100%; height: 100%; - background: url(../../../sprites/stripes.svg) transparentize($content_bg, 0.2); + background: url(../../../sprites/stripes.svg) $content_bg_backdrop; } @include tablet { diff --git a/src/components/dialogs/BetterScrollDialog/styles.module.scss b/src/components/dialogs/BetterScrollDialog/styles.module.scss index 088148ae..efaf4b1c 100644 --- a/src/components/dialogs/BetterScrollDialog/styles.module.scss +++ b/src/components/dialogs/BetterScrollDialog/styles.module.scss @@ -3,7 +3,7 @@ .wrap { width: 100vw; height: 100vh; - background: transparentize($content_bg_darker, 0.5); + background: $content_bg_backdrop; display: flex; align-items: center; justify-content: center; @@ -105,11 +105,7 @@ width: 100%; height: 40px; pointer-events: none; - background: linear-gradient( - 0deg, - $color_danger 50%, - transparentize($color_danger, 1) - ); + background: linear-gradient(0deg, $color_danger 50%, transparent); display: flex; align-items: center; justify-content: center; @@ -136,7 +132,7 @@ .shade { position: absolute; - background: transparentize($content_bg, 0.3); + background: $content_bg_backdrop; top: 0; left: 0; width: 100%; diff --git a/src/components/dialogs/ModalWrapper/styles.module.scss b/src/components/dialogs/ModalWrapper/styles.module.scss index aa38755c..d0b96daf 100644 --- a/src/components/dialogs/ModalWrapper/styles.module.scss +++ b/src/components/dialogs/ModalWrapper/styles.module.scss @@ -1,4 +1,4 @@ -@import "src/styles/variables"; +@import 'src/styles/variables'; .fixed { position: fixed; @@ -46,7 +46,7 @@ } .overlay { - @include modal_backdrop(); + @include blur; position: absolute; top: 0; diff --git a/src/components/editors/EditorConfirmClose/styles.module.scss b/src/components/editors/EditorConfirmClose/styles.module.scss index 0ec355ec..d7427e6c 100644 --- a/src/components/editors/EditorConfirmClose/styles.module.scss +++ b/src/components/editors/EditorConfirmClose/styles.module.scss @@ -10,6 +10,8 @@ } .wrap { + @include blur; + position: absolute; top: 0; left: 0; @@ -20,8 +22,6 @@ align-items: center; justify-content: center; animation: appear 0.25s forwards; - - @include blur(); } .title { diff --git a/src/components/editors/EditorUploadCoverButton/styles.module.scss b/src/components/editors/EditorUploadCoverButton/styles.module.scss index 9ddbc230..36ba7638 100644 --- a/src/components/editors/EditorUploadCoverButton/styles.module.scss +++ b/src/components/editors/EditorUploadCoverButton/styles.module.scss @@ -68,7 +68,7 @@ justify-content: center; box-shadow: inset rgba(255, 255, 255, 0.05) 1px 1px, rgba(0, 0, 0, 0.3) -1px 0; border-radius: $upload_button_height; - background: transparentize($color: $content_bg_lighter, $amount: 0); + background: $content_bg_lighter; &:hover { svg { diff --git a/src/components/flow/CellShade/styles.module.scss b/src/components/flow/CellShade/styles.module.scss index 83e0546f..31e34882 100644 --- a/src/components/flow/CellShade/styles.module.scss +++ b/src/components/flow/CellShade/styles.module.scss @@ -1,7 +1,7 @@ -@import "src/styles/variables"; +@import 'src/styles/variables'; .shade { - background: linear-gradient(7deg, transparentize($content_bg, 0.05) 30px, transparentize($content_bg, 1) 250px); + background: linear-gradient(7deg, $content_bg 30px, transparent 250px); pointer-events: none; touch-action: none; diff --git a/src/components/flow/FlowCell/styles.module.scss b/src/components/flow/FlowCell/styles.module.scss index 66be8c25..511f7d4e 100644 --- a/src/components/flow/FlowCell/styles.module.scss +++ b/src/components/flow/FlowCell/styles.module.scss @@ -1,4 +1,4 @@ -@import "src/styles/variables"; +@import 'src/styles/variables'; .cell { @include inner_shadow; @@ -57,13 +57,11 @@ .quadro &, .horizontal & { max-width: calc(50% - 15px); - @include blur(transparentize($content_bg, 0), 10px, 0.5) } .quadro &, .vertical & { max-height: calc(50% - 15px); - @include blur(transparentize($content_bg, 0), 10px, 0.5) } } diff --git a/src/components/flow/FlowCellMenu/styles.module.scss b/src/components/flow/FlowCellMenu/styles.module.scss index 0e58cefc..37d4336b 100644 --- a/src/components/flow/FlowCellMenu/styles.module.scss +++ b/src/components/flow/FlowCellMenu/styles.module.scss @@ -2,7 +2,7 @@ .dropdown { @include outer_shadow; - @include blur($color_danger, 15px, 0.3); + @include blur($content_bg_info); width: 100%; height: 100%; diff --git a/src/components/flow/FlowSwiperHero/styles.module.scss b/src/components/flow/FlowSwiperHero/styles.module.scss index 6103a2d3..d61130fd 100644 --- a/src/components/flow/FlowSwiperHero/styles.module.scss +++ b/src/components/flow/FlowSwiperHero/styles.module.scss @@ -46,7 +46,7 @@ background: url('../../../sprites/stripes.svg') rgba(0, 0, 0, 0.3); z-index: -1; pointer-events: none; - box-shadow: inset transparentize($color: white, $amount: 0.85) 0 1px; + box-shadow: inset $gray_90 0 1px; touch-action: none; border-radius: $radius; } @@ -58,11 +58,7 @@ left: 0; width: 100%; height: 100%; - background: linear-gradient( - 182deg, - transparentize($content_bg, 1) 50%, - transparentize($content_bg, 0) 95% - ); + background: linear-gradient(182deg, transparent 50%, $content_bg 95%); z-index: 4; pointer-events: none; touch-action: none; diff --git a/src/components/input/Button/styles.module.scss b/src/components/input/Button/styles.module.scss index 3dc19045..acaa6a55 100644 --- a/src/components/input/Button/styles.module.scss +++ b/src/components/input/Button/styles.module.scss @@ -69,10 +69,6 @@ &:global(.disabled) { cursor: auto; } - - &:active { - box-shadow: transparentize(#e933a5, 0.6) 0 0 0; - } } &:global(.stretchy) { @@ -266,5 +262,5 @@ display: flex; align-items: center; justify-content: center; - background: transparentize($content_bg, 0.1); + background: $content_bg_backdrop; } diff --git a/src/components/input/ButtonGroup/styles.module.scss b/src/components/input/ButtonGroup/styles.module.scss index 45cebaa4..336e2298 100644 --- a/src/components/input/ButtonGroup/styles.module.scss +++ b/src/components/input/ButtonGroup/styles.module.scss @@ -1,4 +1,4 @@ -@import "src/styles/variables"; +@import 'src/styles/variables'; .wrap { display: flex; @@ -6,7 +6,6 @@ & > * { border-radius: 0; - box-shadow: transparentize($color: #000000, $amount: 0.1) 1px 0; &:last-child { border-radius: 0 $radius $radius 0; diff --git a/src/components/input/Info/style.scss b/src/components/input/Info/style.scss index f961b0cf..ed16dc16 100644 --- a/src/components/input/Info/style.scss +++ b/src/components/input/Info/style.scss @@ -13,16 +13,16 @@ &:global(.danger) { color: white; - background: transparentize($color_danger, 0.5); + background: $content_bg_danger; } &:global(.warning) { color: white; - background: transparentize($color_danger, 0.5); + background: $content_bg_danger; } &:global(.primary) { color: white; - background: transparentize($color_danger, 0.5); + background: $content_bg_danger; } } diff --git a/src/components/lab/LabImage/styles.module.scss b/src/components/lab/LabImage/styles.module.scss index 076d3f73..bf0e220c 100644 --- a/src/components/lab/LabImage/styles.module.scss +++ b/src/components/lab/LabImage/styles.module.scss @@ -51,12 +51,6 @@ max-height: calc(100vh - 70px - 70px); max-width: 100%; transition: box-shadow 1s; - box-shadow: transparentize(black, 0.7) 0 3px 5px; - - :global(.swiper-slide-active) & { - box-shadow: transparentize(black, 0.9) 0 10px 5px 4px, - transparentize(black, 0.7) 0 5px 5px, $gray_90 0 -1px 2px, $gray_90 0 -1px; - } @include tablet { padding-bottom: 0; diff --git a/src/components/lab/LabNode/styles.module.scss b/src/components/lab/LabNode/styles.module.scss index 97d4b5c2..250af937 100644 --- a/src/components/lab/LabNode/styles.module.scss +++ b/src/components/lab/LabNode/styles.module.scss @@ -9,8 +9,4 @@ min-width: 0; border-radius: $radius; - - &.heroic { - @include hero_gradient; - } } diff --git a/src/components/main/Footer/styles.module.scss b/src/components/main/Footer/styles.module.scss index ff791c41..119aa600 100644 --- a/src/components/main/Footer/styles.module.scss +++ b/src/components/main/Footer/styles.module.scss @@ -4,7 +4,7 @@ display: flex; flex-direction: row; font: $font_12_semibold; - background: transparentize(black, 0.9); + background: $content_bg_dark; border-radius: 0 0 $radius $radius; align-items: center; text-transform: uppercase; diff --git a/src/components/media/AudioPlayer/styles.module.scss b/src/components/media/AudioPlayer/styles.module.scss index 2e274db9..d5e10846 100644 --- a/src/components/media/AudioPlayer/styles.module.scss +++ b/src/components/media/AudioPlayer/styles.module.scss @@ -21,8 +21,8 @@ svg { width: 32px; height: 32px; - fill: transparentize($color: white, $amount: 0.5); - stroke: transparentize($color: white, $amount: 0.5); + fill: $gray_50; + stroke: $gray_50; transition: fill 250ms, stroke 250ms; } diff --git a/src/components/menu/MenuButton/styles.module.scss b/src/components/menu/MenuButton/styles.module.scss index e3c01533..b6675ef2 100644 --- a/src/components/menu/MenuButton/styles.module.scss +++ b/src/components/menu/MenuButton/styles.module.scss @@ -1,4 +1,4 @@ -@import "src/styles/variables.scss"; +@import 'src/styles/variables.scss'; .menu { position: relative; @@ -14,7 +14,7 @@ visibility: hidden; pointer-events: none; touch-action: none; - background-color: transparentize($content_bg, 0.05); + background-color: $content_bg_backdrop; &.visible { visibility: visible; @@ -27,7 +27,7 @@ } &.translucent { - @include blur($content_bg, 15px, 0.5); + @include blur; } } diff --git a/src/components/menu/VerticalMenu/styles.module.scss b/src/components/menu/VerticalMenu/styles.module.scss index ac8b0d12..dbbf5441 100644 --- a/src/components/menu/VerticalMenu/styles.module.scss +++ b/src/components/menu/VerticalMenu/styles.module.scss @@ -30,11 +30,11 @@ a.item { padding: $gap; font: $font_16_semibold; cursor: pointer; - background-color: transparentize($color_primary, 1); + background-color: transparent; transition: background-color 0.25s; &:hover { - background-color: transparentize($color_primary, 0.5); + background-color: $content_bg_success; } &:first-child { diff --git a/src/components/node/NodeImageBlockPlaceholder/styles.module.scss b/src/components/node/NodeImageBlockPlaceholder/styles.module.scss index 5c734036..da820924 100644 --- a/src/components/node/NodeImageBlockPlaceholder/styles.module.scss +++ b/src/components/node/NodeImageBlockPlaceholder/styles.module.scss @@ -2,7 +2,7 @@ .placeholder { height: 320px; - background: transparentize(black, 0.8); + background: $content_bg_dark; border: $radius $radius 0 0; @include outer_shadow(); diff --git a/src/components/node/NodeNoComments/styles.module.scss b/src/components/node/NodeNoComments/styles.module.scss index 0589c915..cdae439c 100644 --- a/src/components/node/NodeNoComments/styles.module.scss +++ b/src/components/node/NodeNoComments/styles.module.scss @@ -9,7 +9,7 @@ &::after { content: ' '; position: absolute; - background: linear-gradient(transparentize($content_bg, 1), $content_bg); + background: linear-gradient(transparent, $content_bg); border-radius: 0 0 $radius $radius; height: 100px; width: 100%; diff --git a/src/components/node/NodeRelated/styles.module.scss b/src/components/node/NodeRelated/styles.module.scss index 0a877b3d..ee44bbea 100644 --- a/src/components/node/NodeRelated/styles.module.scss +++ b/src/components/node/NodeRelated/styles.module.scss @@ -1,8 +1,6 @@ -@import "src/styles/variables"; +@import 'src/styles/variables'; .wrap { - // padding: $gap; - //background: transparentize(black, 0.8); border-radius: $panel_radius; padding: $gap 0; } diff --git a/src/components/node/NodeTitle/styles.module.scss b/src/components/node/NodeTitle/styles.module.scss index 4b22caaf..4a3ec9c6 100644 --- a/src/components/node/NodeTitle/styles.module.scss +++ b/src/components/node/NodeTitle/styles.module.scss @@ -1,34 +1,5 @@ @import 'src/styles/variables'; -@mixin button { - margin: 0 $gap; - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - - svg { - fill: $gray_50; - transition: fill 0.25s; - } - - &:hover { - svg { - fill: $color_danger; - } - } - - &::after { - content: ' '; - flex: 0 0 6px; - height: $gap; - width: 6px; - border-radius: 4px; - background: transparentize(black, 0.7); - margin-left: $gap * 2; - } -} - .wrap { display: flex; position: relative; @@ -83,15 +54,6 @@ } } -.btn { - flex: 1; - height: 100%; - display: flex; - align-items: center; - justify-content: center; - fill: $gray_50; -} - .panel { flex: 1; min-width: 0; @@ -163,7 +125,7 @@ padding: 0 3px; border-radius: 10px; z-index: 3; - color: transparentize($color: white, $amount: 0.5); + color: $gray_50; pointer-events: none; touch-action: none; } @@ -178,6 +140,7 @@ } .button { - color: white; @include hover_opacity; + color: white; + cursor: pointer; } diff --git a/src/components/profile/Message/index.tsx b/src/components/profile/Message/index.tsx deleted file mode 100644 index f96726d6..00000000 --- a/src/components/profile/Message/index.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import React, { FC } from 'react'; - -import classNames from 'classnames'; - -import { Group } from '~/components/containers/Group'; -import { ImagePresets } from '~/constants/urls'; -import markdown from '~/styles/common/markdown.module.scss'; -import { IMessage } from '~/types'; -import { formatText, getPrettyDate, getURL } from '~/utils/dom'; - -import styles from './styles.module.scss'; - -interface IProps { - message: IMessage; - incoming: boolean; -} - -const Message: FC = ({ message, incoming }) => { - return ( -
-
- -
- -
- -
{getPrettyDate(message.created_at)}
-
- ); -}; -export { Message }; diff --git a/src/components/profile/Message/styles.module.scss b/src/components/profile/Message/styles.module.scss deleted file mode 100644 index 4dca2de7..00000000 --- a/src/components/profile/Message/styles.module.scss +++ /dev/null @@ -1,100 +0,0 @@ -@import 'src/styles/variables'; - -$incoming_color: transparentize($color_primary, 0.7); -$outgoing_color: $content_bg_light; - -.message { - align-items: flex-end !important; - display: flex; - flex-direction: row; - padding: 0 0 0 42px; - position: relative; - word-break: break-word; - - &::before { - position: absolute; - content: ''; - width: 0; - height: 0; - border-style: solid; - border-width: 20px 0 0 20px; - border-color: transparent transparent transparent $content_bg_light; - bottom: 0; - right: 24px; - } - - &.incoming { - flex-direction: row-reverse; - padding: 0 40px 0 0; - - .text { - background: $incoming_color; - border-radius: $radius $radius $radius 0; - } - - .stamp { - left: auto; - right: 42px; - } - - &::before { - content: ''; - border-width: 0 0 16px 16px; - border-color: transparent transparent $incoming_color transparent; - left: 24px; - right: auto; - z-index: 1; - } - } -} - -.avatar { - width: 40px; - height: 40px; - flex: 0 0 40px; - border-radius: $radius; - - background: 50% 50% no-repeat; - background-size: cover; -} - -.text { - padding: $gap $gap $gap * 2 $gap; - background: $outgoing_color; - word-wrap: break-word; - word-break: break-word; - width: 100%; - border-radius: $radius $radius 0 $radius; - position: relative; - box-sizing: border-box; -} - -.form { - width: 100%; - border-radius: $radius $radius 0 $radius; - background: $outgoing_color; - box-sizing: border-box; -} - -.stamp { - position: absolute; - opacity: 0.5; - // background: transparentize($color: #000000, $amount: 0.9); - font: $font_10_regular; - bottom: 0; - left: 42px; - padding: 2px $gap; - border-radius: $radius; -} - -.restore { - color: $color_danger; - fill: $color_danger; -} - -.deleted { - background: mix($color_danger, $content_bg, 50%); - border-radius: $radius $radius $radius 0; - padding: $gap * 0.5; - z-index: 2; -} diff --git a/src/components/profile/ProfileAccountsError/styles.module.scss b/src/components/profile/ProfileAccountsError/styles.module.scss index 7238aa5c..0b17ca72 100644 --- a/src/components/profile/ProfileAccountsError/styles.module.scss +++ b/src/components/profile/ProfileAccountsError/styles.module.scss @@ -15,7 +15,7 @@ box-sizing: border-box; border-radius: $radius; - @include blur($color_danger); + @include blur; } .title { diff --git a/src/components/profile/ProfileDescription/styles.module.scss b/src/components/profile/ProfileDescription/styles.module.scss index 0095bad7..1ee22389 100644 --- a/src/components/profile/ProfileDescription/styles.module.scss +++ b/src/components/profile/ProfileDescription/styles.module.scss @@ -1,4 +1,4 @@ -@import "src/styles/variables"; +@import 'src/styles/variables'; .content { padding: $gap * 2; @@ -17,7 +17,7 @@ min-height: 33vh; padding: 40px; box-sizing: border-box; - color: transparentize($color: white, $amount: 0.8); + color: $gray_75; text-transform: uppercase; font: $font_16_semibold; } diff --git a/src/components/sidebar/SidebarStack/styles.module.scss b/src/components/sidebar/SidebarStack/styles.module.scss index 63dce738..faeeb43f 100644 --- a/src/components/sidebar/SidebarStack/styles.module.scss +++ b/src/components/sidebar/SidebarStack/styles.module.scss @@ -1,7 +1,7 @@ @import 'src/styles/variables'; .stack { - background: transparentize($content_bg, 0.2); + background: $content_bg_backdrop; display: flex; flex-direction: row-reverse; width: auto; diff --git a/src/components/tags/TagAutocompleteRow/styles.module.scss b/src/components/tags/TagAutocompleteRow/styles.module.scss index 9dd1ece5..1e4afcb2 100644 --- a/src/components/tags/TagAutocompleteRow/styles.module.scss +++ b/src/components/tags/TagAutocompleteRow/styles.module.scss @@ -19,7 +19,7 @@ $row_height: 26px; &:hover, &.selected { opacity: 1; - background: transparentize($color_primary, 0.6); + background: $content_bg_success; } &.right { diff --git a/src/components/tags/TagWrapper/styles.module.scss b/src/components/tags/TagWrapper/styles.module.scss index 9c3e4a88..3aa61676 100644 --- a/src/components/tags/TagWrapper/styles.module.scss +++ b/src/components/tags/TagWrapper/styles.module.scss @@ -127,7 +127,6 @@ button.delete { box-shadow: inset $gray_90 1px 0, transparentize(black, 0.7) -1px 0; width: 24px; height: $tag_height; - background: transparentize($content_bg, 0.75); z-index: 24; border: none; padding: 0; diff --git a/src/components/upload/UploadDropzone/styles.module.scss b/src/components/upload/UploadDropzone/styles.module.scss index 63c3b24f..8cea5eb4 100644 --- a/src/components/upload/UploadDropzone/styles.module.scss +++ b/src/components/upload/UploadDropzone/styles.module.scss @@ -12,7 +12,7 @@ left: 0; right: 0; bottom: 0; - background: transparentize($color_primary, 0.7); + background: $content_bg_success; border-radius: $radius; z-index: 10; box-shadow: inset $color_primary 0 0 0 2px; diff --git a/src/containers/flow/FlowStamp/styles.module.scss b/src/containers/flow/FlowStamp/styles.module.scss index 15c50fe1..7140b0f2 100644 --- a/src/containers/flow/FlowStamp/styles.module.scss +++ b/src/containers/flow/FlowStamp/styles.module.scss @@ -25,10 +25,7 @@ left: 0; height: 60px; width: 100%; - background: linear-gradient( - transparentize($content_bg, 1), - $content_bg 90% - ); + background: linear-gradient(transparent, $content_bg 90%); pointer-events: none; touch-action: none; diff --git a/src/containers/main/Header/styles.module.scss b/src/containers/main/Header/styles.module.scss index 7ede6837..0d0ef597 100644 --- a/src/containers/main/Header/styles.module.scss +++ b/src/containers/main/Header/styles.module.scss @@ -28,7 +28,7 @@ } &.is_scrolled { - @include blur(); + @include blur; } } diff --git a/src/containers/profile/ProfileInfo/styles.module.scss b/src/containers/profile/ProfileInfo/styles.module.scss index 7e490d63..d86cb86d 100644 --- a/src/containers/profile/ProfileInfo/styles.module.scss +++ b/src/containers/profile/ProfileInfo/styles.module.scss @@ -1,4 +1,4 @@ -@import "src/styles/variables"; +@import 'src/styles/variables'; .wrap { justify-content: flex-start; @@ -25,6 +25,6 @@ } .description { - color: transparentize($color: white, $amount: 0.7); + color: $gray_25; font: $font_14_regular; } diff --git a/src/containers/profile/ProfileMessages/index.tsx b/src/containers/profile/ProfileMessages/index.tsx deleted file mode 100644 index f81702d0..00000000 --- a/src/containers/profile/ProfileMessages/index.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import React, { FC } from 'react'; - -import { Anchor } from '~/components/common/Anchor'; -import { NodeNoComments } from '~/components/node/NodeNoComments'; -import { Message } from '~/components/profile/Message'; -import { useUser } from '~/hooks/auth/useUser'; -import { useMessages } from '~/hooks/messages/useMessages'; -import { useProfileContext } from '~/utils/providers/ProfileProvider'; - -import styles from './styles.module.scss'; - -const ProfileMessages: FC = () => { - const { profile, isLoading: isLoadingProfile } = useProfileContext(); - const { user } = useUser(); - const { messages, isLoading: isLoadingMessages } = useMessages(profile?.username || ''); - - if (!messages.length || isLoadingProfile) - return ; - - if (messages.length <= 0) { - return null; - } - - return ( -
-
-

В будущем мы собираемся убрать сообщения, превратив их в заметки.

- -

- Вся твоя история сообщений, написанных себе, сохранится. Исчезнут только сообщения другим - участникам. -

- -

- Давай обсудим это в Борисе, если это так важно. -

-
- - {messages - .filter(message => !!message.text) - .map(( - message // TODO: show files / memo - ) => ( - - ))} - - {!isLoadingMessages && messages.length > 0 && ( -
Когда-нибудь здесь будут еще сообщения
- )} -
- ); -}; - -export { ProfileMessages }; diff --git a/src/containers/profile/ProfileMessages/styles.module.scss b/src/containers/profile/ProfileMessages/styles.module.scss deleted file mode 100644 index ffc5de4c..00000000 --- a/src/containers/profile/ProfileMessages/styles.module.scss +++ /dev/null @@ -1,43 +0,0 @@ -@import 'src/styles/variables'; - -.messages { - padding: $gap; - background: $content_bg_dark; - display: flex; - flex-direction: column !important; - overflow: auto; - - & > * { - margin: $gap * 0.5 0; - - &:last-child { - margin-top: 0; - } - - &:first-child { - margin-bottom: 0; - } - } -} - -.placeholder { - font: $font_12_regular; - padding: $gap; - text-align: center; -} - -div.warning.warning { - padding: $gap; - box-shadow: $color_danger 0 0 0 2px; - border-radius: $radius; - font: $font_14_semibold; - margin-bottom: $gap * 2; - - p { - margin-bottom: $gap; - - &:last-child { - margin-bottom: 0; - } - } -} diff --git a/src/styles/_colors.scss b/src/styles/_colors.scss index 15ede08c..45fff7c7 100644 --- a/src/styles/_colors.scss +++ b/src/styles/_colors.scss @@ -45,9 +45,10 @@ $content_bg_light: lighten($brown, 2%); $content_bg_lighter: lighten($brown, 4%); $content_bg_lightest: lighten($brown, 6%); -$content_bg_success: mix($brown, $blue, 90%); -$content_bg_info: mix($brown, $wisegreen, 90%); -$content_bg_danger: mix($red, $brown, 50%); +$content_bg_success: transparentize($wisegreen, 0.5); +$content_bg_info: transparentize($blue, 0.5); +$content_bg_danger: transparentize($red, 0.5); +$content_bg_backdrop: transparentize($content_bg, 0.2); // white shades (move to --vars) $white: white; diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss index 0ffbc5d9..e33470eb 100644 --- a/src/styles/_mixins.scss +++ b/src/styles/_mixins.scss @@ -58,7 +58,7 @@ left: 0; height: 120px; width: 100%; - background: linear-gradient(transparentize($color, 1), $color); + background: linear-gradient(transparent, $color); border-radius: $radius; pointer-events: none; touch-action: none; @@ -116,15 +116,13 @@ } } -@mixin blur($color: $content_bg, $radius: 15px, $opacity: 0.5) { - background: transparentize($color, math.div($opacity, 1.5)); - backdrop-filter: blur($radius); - -webkit-backdrop-filter: blur($radius); +@mixin blur($color: $content_bg_backdrop, $radius: 15px) { + background: $color; @include can_backdrop { backdrop-filter: blur($radius); -webkit-backdrop-filter: blur($radius); - background-color: transparentize($color, $opacity); + background-color: $color; } } @@ -156,7 +154,7 @@ } @mixin sidebar { - @include blur(); + @include blur; } @mixin sidebar_content($width: 400px) { @@ -179,11 +177,6 @@ cursor: pointer; } -@mixin hero_gradient { - $color: mix($color_primary, $content_bg, 30%); - background: linear-gradient(170deg, lighten($color, 10%), $color); -} - @mixin flow_grid { width: 100%; box-sizing: border-box; @@ -256,20 +249,6 @@ } } -@mixin modal_backdrop { - @include blur(); - background: transparentize($content_bg, 0.3) - url('../../src/sprites/noise.png'); - - @include can_backdrop { - @supports (backdrop-filter: blur(5px)) and - (background-image: url('../../src/sprites/noise.png')) { - background: transparentize($content_bg, 0.5) - url('../../src/sprites/noise.png'); - } - } -} - @mixin hover_opacity($initial_opacity: 0.5) { opacity: $initial_opacity; transition: opacity 0.25s; diff --git a/src/styles/common/markdown.module.scss b/src/styles/common/markdown.module.scss index e43bae3d..4ee9bbf0 100644 --- a/src/styles/common/markdown.module.scss +++ b/src/styles/common/markdown.module.scss @@ -11,7 +11,7 @@ $margin: 1em; margin-bottom: $margin; color: $color_primary; font-size: 0.9em; - background-color: transparentize($color_primary, 0.9); + background-color: $content_bg_success; p { margin: 0 $margin; @@ -34,7 +34,7 @@ $margin: 1em; margin-bottom: $margin; code { - color: transparentize($color_primary, 0.1); + color: $content_bg_info; font-family: monospace; white-space: pre-wrap; } @@ -43,10 +43,10 @@ $margin: 1em; p, li { code { - background-color: transparentize($color_primary, 0.9); + background-color: $content_bg_info; padding: 2px 4px; border-radius: 0.3em; - color: transparentize($color_primary, 0.1); + color: $gray_25; font-size: 0.8em; } }