diff --git a/src/components/comment/CommentAvatar/styles.module.scss b/src/components/comment/CommentAvatar/styles.module.scss
index 3e0f209b..38d51ab9 100644
--- a/src/components/comment/CommentAvatar/styles.module.scss
+++ b/src/components/comment/CommentAvatar/styles.module.scss
@@ -1,16 +1,20 @@
-@import "src/styles/variables.scss";
+@import 'src/styles/variables.scss';
@keyframes appear {
- 0% { opacity: 0 }
- 100% { opacity: 1 }
+ 0% {
+ opacity: 0;
+ }
+ 100% {
+ opacity: 1;
+ }
}
.popper {
@include outer_shadow;
- background-color: darken($content_bg, 4%);
+ background-color: $content_bg_darker;
padding: $gap;
- box-sizing:border-box;
+ box-sizing: border-box;
touch-action: none;
pointer-events: none;
border-radius: $radius;
diff --git a/src/components/comment/CommentContent/styles.module.scss b/src/components/comment/CommentContent/styles.module.scss
index 9838968f..14954339 100644
--- a/src/components/comment/CommentContent/styles.module.scss
+++ b/src/components/comment/CommentContent/styles.module.scss
@@ -1,5 +1,5 @@
-@import "src/styles/variables";
-@import "~flexbin/flexbin";
+@import 'src/styles/variables';
+@import '~flexbin/flexbin';
.wrap {
@include row_shadow;
@@ -23,7 +23,7 @@
touch-action: none;
transition: opacity 0.25s, transform 0.25s;
cursor: pointer;
- background: $red;
+ background: $color_danger;
z-index: 2;
& > div {
@@ -46,7 +46,7 @@
border-radius: 0 0 0 $radius;
opacity: 1;
transform: translate(0, 0);
- background: transparentize($red, $amount: 0.5);
+ background: $content_bg_danger;
}
}
@@ -93,9 +93,9 @@
padding-bottom: 0 !important;
.date {
- background: transparentize($color: $content_bg, $amount: 0.2);
+ background: $content_bg;
border-radius: $radius 0 $radius 0;
- color: transparentize(white, 0.2);
+ color: $gray_25;
}
}
@@ -108,10 +108,10 @@
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: $comment_bg;
+ background: $content_bg_light;
border-radius: 4px;
pointer-events: none;
touch-action: none;
diff --git a/src/components/comment/CommentDistance/styles.module.scss b/src/components/comment/CommentDistance/styles.module.scss
index 0802138b..226995ca 100644
--- a/src/components/comment/CommentDistance/styles.module.scss
+++ b/src/components/comment/CommentDistance/styles.module.scss
@@ -1,8 +1,8 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
.bar {
font: $font_12_regular;
- color: darken(white, 60%);
+ color: $gray_50;
user-select: none;
width: 100%;
text-align: center;
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 e8f4cdcc..dfc6edcc 100644
--- a/src/components/comment/CommentForm/styles.module.scss
+++ b/src/components/comment/CommentForm/styles.module.scss
@@ -1,4 +1,4 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
.wrap {
display: flex;
@@ -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;
@@ -49,7 +49,7 @@
position: absolute;
bottom: 0;
left: 50%;
- background: $red;
+ background: $color_danger;
z-index: 10;
font: $font_12_regular;
box-sizing: border-box;
diff --git a/src/components/comment/CommentMenu/styles.module.scss b/src/components/comment/CommentMenu/styles.module.scss
index 1943f26c..5d493464 100644
--- a/src/components/comment/CommentMenu/styles.module.scss
+++ b/src/components/comment/CommentMenu/styles.module.scss
@@ -1,4 +1,4 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
.wrap {
position: absolute;
@@ -9,12 +9,6 @@
z-index: 10;
outline: none;
cursor: pointer;
-
- &:hover {
- .dot {
- background: $secondary;
- }
- }
}
@keyframes appear {
@@ -57,6 +51,6 @@
}
&:hover {
- background: $primary;
+ background: $color_primary;
}
}
diff --git a/src/components/comment/CommentTextBlock/styles.module.scss b/src/components/comment/CommentTextBlock/styles.module.scss
index 09814017..2147bf3b 100644
--- a/src/components/comment/CommentTextBlock/styles.module.scss
+++ b/src/components/comment/CommentTextBlock/styles.module.scss
@@ -1,4 +1,4 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
.text {
padding: 0 $gap;
@@ -26,12 +26,12 @@
}
:global(.green) {
- color: $wisegreen;
+ color: $color_primary;
}
& > :last-child::after {
display: inline-block;
- content: " ";
+ content: ' ';
height: 1em;
width: 120px;
flex: 0 0 120px;
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/CornerMenu/styles.module.scss b/src/components/common/CornerMenu/styles.module.scss
index 1943f26c..5d493464 100644
--- a/src/components/common/CornerMenu/styles.module.scss
+++ b/src/components/common/CornerMenu/styles.module.scss
@@ -1,4 +1,4 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
.wrap {
position: absolute;
@@ -9,12 +9,6 @@
z-index: 10;
outline: none;
cursor: pointer;
-
- &:hover {
- .dot {
- background: $secondary;
- }
- }
}
@keyframes appear {
@@ -57,6 +51,6 @@
}
&:hover {
- background: $primary;
+ background: $color_primary;
}
}
diff --git a/src/components/common/LoadingProgress/styles.module.scss b/src/components/common/LoadingProgress/styles.module.scss
index 274bc21f..61b5a8aa 100644
--- a/src/components/common/LoadingProgress/styles.module.scss
+++ b/src/components/common/LoadingProgress/styles.module.scss
@@ -1,4 +1,4 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
@keyframes spin {
0% {
@@ -20,7 +20,7 @@
z-index: 100;
align-items: center;
justify-content: center;
- background: linear-gradient(90deg, $dark_blue, $soft_blue, $dark_blue);
+ background: $global_loader_gradient;
animation: spin infinite 1s linear;
}
@@ -34,5 +34,5 @@
transform: translate(-50%, 0);
padding: 2px 10px;
border-radius: 10px;
- background: $cyan_gradient;
+ background: $magic_gradient;
}
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/common/ScrollHelperBottom/styles.module.scss b/src/components/common/ScrollHelperBottom/styles.module.scss
index 263b9c74..c76eaedf 100644
--- a/src/components/common/ScrollHelperBottom/styles.module.scss
+++ b/src/components/common/ScrollHelperBottom/styles.module.scss
@@ -1,9 +1,9 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
.helper {
position: fixed;
bottom: 0;
- background: radial-gradient($red, transparent) 50% 24px no-repeat;
+ background: radial-gradient($color_danger, transparent) 50% 24px no-repeat;
background-size: 100% 48px;
display: none;
width: calc(100% - 20px);
diff --git a/src/components/containers/Card/styles.module.scss b/src/components/containers/Card/styles.module.scss
index 73ebccac..f2ac642e 100644
--- a/src/components/containers/Card/styles.module.scss
+++ b/src/components/containers/Card/styles.module.scss
@@ -1,7 +1,7 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
.card {
- background-color: $card_bg;
+ background-color: $content_bg;
border-radius: $panel_radius;
padding: $gap;
diff --git a/src/components/containers/CommentWrapper/styles.module.scss b/src/components/containers/CommentWrapper/styles.module.scss
index 2fe8a136..d2ad88e8 100644
--- a/src/components/containers/CommentWrapper/styles.module.scss
+++ b/src/components/containers/CommentWrapper/styles.module.scss
@@ -1,17 +1,27 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
@keyframes highlight {
- 0% { opacity: 0.75; }
- 25% { opacity: 0.5; }
- 50% { opacity: 0.75; }
- 75% { opacity: 0; }
- 100% { opacity: 0; }
+ 0% {
+ opacity: 0.75;
+ }
+ 25% {
+ opacity: 0.5;
+ }
+ 50% {
+ opacity: 0.75;
+ }
+ 75% {
+ opacity: 0;
+ }
+ 100% {
+ opacity: 0;
+ }
}
.wrap {
@include outer_shadow;
- background: $comment_bg;
+ background: $content_bg_light;
min-height: $comment_height;
display: flex;
position: relative;
@@ -35,7 +45,6 @@
right: 0;
bottom: 0;
animation: highlight 1s 0.5s forwards;
- background: transparentize($wisegreen, 0.7);
border-radius: $radius;
pointer-events: none;
touch-action: none;
@@ -64,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;
@@ -73,14 +82,15 @@
flex-direction: row;
flex: 0 0 40px;
padding: 8px;
- box-shadow: inset rgba(255, 255, 255, 0.05) 1px 1px, inset rgba(0, 0, 0, 0.1) -1px -1px;
+ box-shadow: inset rgba(255, 255, 255, 0.05) 1px 1px,
+ inset rgba(0, 0, 0, 0.1) -1px -1px;
border-radius: $panel_radius $panel_radius 0 0;
}
}
div.thumb_image {
height: $comment_height;
- background: transparentize(white, 0.97) no-repeat 50% 50%;
+ background: $gray_90 no-repeat 50% 50%;
border-radius: $panel_radius 0 0 $panel_radius;
background-size: cover;
flex: 0 0 $comment_height;
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/containers/Zone/styles.module.scss b/src/components/containers/Zone/styles.module.scss
index 707673b0..61ce4ad0 100644
--- a/src/components/containers/Zone/styles.module.scss
+++ b/src/components/containers/Zone/styles.module.scss
@@ -1,7 +1,6 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
-$pad_danger: mix($red, $content_bg, 70%);
-$pad_usual: mix(white, $content_bg, 10%);
+$pad_usual: $content_bg_lightest;
.title {
position: relative;
@@ -19,7 +18,7 @@ $pad_usual: mix(white, $content_bg, 10%);
text-transform: uppercase;
.danger & {
- background: $pad_danger;
+ background: $content_bg_danger;
}
}
}
@@ -31,7 +30,7 @@ $pad_usual: mix(white, $content_bg, 10%);
position: relative;
&.danger {
- box-shadow: inset $pad_danger 0 0 0 2px;
+ box-shadow: inset $content_bg_danger 0 0 0 2px;
}
&.with_title {
diff --git a/src/components/dialogs/BetterScrollDialog/styles.module.scss b/src/components/dialogs/BetterScrollDialog/styles.module.scss
index 354f5023..efaf4b1c 100644
--- a/src/components/dialogs/BetterScrollDialog/styles.module.scss
+++ b/src/components/dialogs/BetterScrollDialog/styles.module.scss
@@ -1,9 +1,9 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
.wrap {
width: 100vw;
height: 100vh;
- background: transparentize(darken($content_bg, 4%), 0.5);
+ background: $content_bg_backdrop;
display: flex;
align-items: center;
justify-content: center;
@@ -42,7 +42,7 @@
.footer {
@include outer_shadow();
- background: darken($content_bg, 2%);
+ background: $content_bg_dark;
}
.body {
@@ -66,7 +66,7 @@
.close {
@include outer_shadow;
- background: lighten($content_bg, 4%);
+ background: $content_bg_lighter;
width: 36px;
height: 36px;
position: absolute;
@@ -88,7 +88,7 @@
}
&:hover {
- background-color: $red;
+ background-color: $color_danger;
transform: translate(50%, 0) scale(1.25);
}
@@ -105,7 +105,7 @@
width: 100%;
height: 40px;
pointer-events: none;
- background: linear-gradient(0deg, $red 50%, transparentize($red, 1));
+ background: linear-gradient(0deg, $color_danger 50%, transparent);
display: flex;
align-items: center;
justify-content: center;
@@ -132,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/dialogs/Tabs/styles.module.scss b/src/components/dialogs/Tabs/styles.module.scss
index 848632d5..106cab4c 100644
--- a/src/components/dialogs/Tabs/styles.module.scss
+++ b/src/components/dialogs/Tabs/styles.module.scss
@@ -1,4 +1,4 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
.wrap {
display: flex;
@@ -22,7 +22,7 @@
border: none;
&.active {
- background: lighten($content_bg, 4%);
+ background: $content_bg_lighter;
}
}
diff --git a/src/components/editors/EditorButtons/index.tsx b/src/components/editors/EditorButtons/index.tsx
index 56b04a40..2ffb1e72 100644
--- a/src/components/editors/EditorButtons/index.tsx
+++ b/src/components/editors/EditorButtons/index.tsx
@@ -32,7 +32,7 @@ const EditorButtons: FC = () => {
diff --git a/src/components/editors/EditorConfirmClose/styles.module.scss b/src/components/editors/EditorConfirmClose/styles.module.scss
index f01b873f..d7427e6c 100644
--- a/src/components/editors/EditorConfirmClose/styles.module.scss
+++ b/src/components/editors/EditorConfirmClose/styles.module.scss
@@ -1,4 +1,4 @@
-@import "src/styles/variables.scss";
+@import 'src/styles/variables.scss';
@keyframes appear {
0% {
@@ -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 {
@@ -37,6 +37,6 @@
.subtitle {
font: $font_12_medium;
- color: darken(white, 50%);
+ color: $gray_50;
max-width: 300px;
}
diff --git a/src/components/editors/EditorPublicSwitch/index.tsx b/src/components/editors/EditorPublicSwitch/index.tsx
index f86511f0..9ecd89fa 100644
--- a/src/components/editors/EditorPublicSwitch/index.tsx
+++ b/src/components/editors/EditorPublicSwitch/index.tsx
@@ -12,14 +12,14 @@ interface IProps extends IEditorComponentProps {}
const EditorPublicSwitch: FC
= () => {
const { values, setFieldValue } = useNodeFormContext();
- const onChange = useCallback(() => setFieldValue('is_promoted', !values.is_promoted), [
- values.is_promoted,
- setFieldValue,
- ]);
+ const onChange = useCallback(
+ () => setFieldValue('is_promoted', !values.is_promoted),
+ [values.is_promoted, setFieldValue],
+ );
return (
= ({
event.preventDefault();
const files = Array.from(event.target.files || []).filter(
- file => !type || getFileType(file) === type
+ (file) => !type || getFileType(file) === type,
);
uploadFiles(files);
},
- [type, uploadFiles]
+ [type, uploadFiles],
);
- const color = values.is_promoted ? 'primary' : 'lab';
+ const color = values.is_promoted ? 'flow' : 'lab';
return (
-
+
diff --git a/src/components/editors/EditorUploadCoverButton/styles.module.scss b/src/components/editors/EditorUploadCoverButton/styles.module.scss
index 9a1302c6..36ba7638 100644
--- a/src/components/editors/EditorUploadCoverButton/styles.module.scss
+++ b/src/components/editors/EditorUploadCoverButton/styles.module.scss
@@ -1,4 +1,4 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
.wrap {
@include outer_shadow();
@@ -9,7 +9,7 @@
border-radius: $radius;
cursor: pointer;
transition: opacity 0.5s;
- background: lighten($content_bg, 4%);
+ background: $content_bg_lighter;
flex: 0 1 $upload_button_height * 4;
display: flex;
align-items: center;
@@ -68,11 +68,11 @@
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: lighten($content_bg, 4%), $amount: 0);
+ background: $content_bg_lighter;
&:hover {
svg {
- fill: $red;
+ fill: $color_danger;
}
}
diff --git a/src/components/editors/VideoEditor/styles.module.scss b/src/components/editors/VideoEditor/styles.module.scss
index d81bc274..66256d19 100644
--- a/src/components/editors/VideoEditor/styles.module.scss
+++ b/src/components/editors/VideoEditor/styles.module.scss
@@ -1,4 +1,4 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
.preview {
padding-top: 56.25%;
@@ -6,7 +6,6 @@
border-radius: $radius;
background: 50% 50% no-repeat;
background-size: cover;
- // background: darken($color: $content_bg, $amount: 2%);
}
.input_wrap {
@@ -34,6 +33,6 @@
}
&:global(.active) {
- background: $red;
+ background: $color_danger;
}
}
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 436f9053..37d4336b 100644
--- a/src/components/flow/FlowCellMenu/styles.module.scss
+++ b/src/components/flow/FlowCellMenu/styles.module.scss
@@ -1,8 +1,8 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
.dropdown {
@include outer_shadow;
- @include blur($red, 15px, 0.3);
+ @include blur($content_bg_info);
width: 100%;
height: 100%;
diff --git a/src/components/flow/FlowRecentItem/styles.module.scss b/src/components/flow/FlowRecentItem/styles.module.scss
index 1bf96177..32007320 100644
--- a/src/components/flow/FlowRecentItem/styles.module.scss
+++ b/src/components/flow/FlowRecentItem/styles.module.scss
@@ -1,4 +1,4 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
.item {
display: flex;
@@ -30,7 +30,7 @@
width: 12px;
height: 12px;
border-radius: 100%;
- background: $red;
+ background: $color_danger;
box-shadow: $content_bg 0 0 0 5px;
position: absolute;
right: -2px;
@@ -40,7 +40,7 @@
&.lab {
&::after {
- background: $blue;
+ background: $color_lab;
}
}
}
@@ -61,7 +61,7 @@
.comment {
font: $font_12_regular;
margin-top: 4px;
- color: darken(white, 50%);
+ color: $gray_50;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
diff --git a/src/components/flow/FlowSearchResults/styles.module.scss b/src/components/flow/FlowSearchResults/styles.module.scss
index 2f736f55..5759af1b 100644
--- a/src/components/flow/FlowSearchResults/styles.module.scss
+++ b/src/components/flow/FlowSearchResults/styles.module.scss
@@ -1,4 +1,4 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
.wrap {
flex: 1;
@@ -12,7 +12,7 @@
flex-direction: column;
flex: 1;
opacity: 0.3;
- fill: transparentize(white, 0.7);
+ fill: $gray_75;
stroke: none;
min-height: 250px;
}
diff --git a/src/components/flow/FlowSwiperHero/styles.module.scss b/src/components/flow/FlowSwiperHero/styles.module.scss
index 8694ec73..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($cell_shade, 1) 50%,
- transparentize($cell_shade, 0) 95%
- );
+ background: linear-gradient(182deg, transparent 50%, $content_bg 95%);
z-index: 4;
pointer-events: none;
touch-action: none;
@@ -76,8 +72,7 @@ img.preview {
opacity: 0;
:global(.swiper-slide-active) &,
- :global(.swiper-slide-duplicate-active) &
- {
+ :global(.swiper-slide-duplicate-active) & {
transform: translate(-15%, -20%);
opacity: 1;
}
@@ -164,5 +159,5 @@ img.preview {
display: flex;
align-items: center;
justify-content: center;
- color: transparentize(white, 0.95);
+ color: $gray_90;
}
diff --git a/src/components/flow/HeroPlaceholder/style.scss b/src/components/flow/HeroPlaceholder/style.scss
index e020bcec..38c85817 100644
--- a/src/components/flow/HeroPlaceholder/style.scss
+++ b/src/components/flow/HeroPlaceholder/style.scss
@@ -1,10 +1,11 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
.container {
height: 280px;
width: 100%;
- background: transparentize(white, 0.9)
- url('http://37.192.131.144/hero/photos/photo-20140527-1639766.jpg') no-repeat 50% 30%;
+ background: $gray_90
+ url('http://37.192.131.144/hero/photos/photo-20140527-1639766.jpg')
+ no-repeat 50% 30%;
background-size: cover;
opacity: 0.7;
will-change: transform;
diff --git a/src/components/input/ArcProgress/styles.module.scss b/src/components/input/ArcProgress/styles.module.scss
index 55b8e214..e5ba5472 100644
--- a/src/components/input/ArcProgress/styles.module.scss
+++ b/src/components/input/ArcProgress/styles.module.scss
@@ -1,7 +1,7 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
.icon {
- fill: $red;
+ fill: $color_danger;
stroke: none;
//path {
diff --git a/src/components/input/Button/index.tsx b/src/components/input/Button/index.tsx
index ed7a8f5e..9c7075ee 100644
--- a/src/components/input/Button/index.tsx
+++ b/src/components/input/Button/index.tsx
@@ -1,4 +1,10 @@
-import React, { ButtonHTMLAttributes, DetailedHTMLProps, FC, memo, useMemo } from 'react';
+import React, {
+ ButtonHTMLAttributes,
+ DetailedHTMLProps,
+ FC,
+ memo,
+ useMemo,
+} from 'react';
import Tippy from '@tippyjs/react';
import classnames from 'classnames';
@@ -14,7 +20,17 @@ type IButtonProps = DetailedHTMLProps<
HTMLButtonElement
> & {
size?: 'mini' | 'normal' | 'big' | 'giant' | 'micro' | 'small';
- color?: 'primary' | 'secondary' | 'outline' | 'link' | 'gray' | 'lab' | 'outline-white' | 'flat';
+ color?:
+ | 'primary'
+ | 'danger'
+ | 'info'
+ | 'outline'
+ | 'link'
+ | 'gray'
+ | 'flow'
+ | 'lab'
+ | 'outline-white'
+ | 'flat';
iconLeft?: IIcon;
iconRight?: IIcon;
title?: string;
@@ -65,7 +81,7 @@ const Button: FC = memo(
children,
iconOnly,
round,
- ]
+ ],
);
const loaderSize = useMemo(() => {
@@ -79,9 +95,23 @@ const Button: FC = memo(
return (
- {iconLeft && {title} : children}
- {iconRight &&
@@ -90,7 +120,7 @@ const Button: FC
= memo(
);
- }
+ },
);
export { Button };
diff --git a/src/components/input/Button/styles.module.scss b/src/components/input/Button/styles.module.scss
index 9ccb0db7..5e98344b 100644
--- a/src/components/input/Button/styles.module.scss
+++ b/src/components/input/Button/styles.module.scss
@@ -1,4 +1,4 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
@keyframes pulse {
0% {
@@ -25,7 +25,7 @@
cursor: pointer;
margin: 0;
- background: $button_bg_color;
+ background: $color_primary;
border-radius: $radius;
fill: white;
@@ -36,7 +36,8 @@
align-items: center;
justify-content: center;
- transition: opacity 0.25s, filter 0.25s, box-shadow 0.25s, background-color 0.5s;
+ transition: opacity 0.25s, filter 0.25s, box-shadow 0.25s,
+ background-color 0.5s;
input {
position: absolute;
@@ -68,10 +69,6 @@
&:global(.disabled) {
cursor: auto;
}
-
- &:active {
- box-shadow: transparentize(#e933a5, 0.6) 0 0 0;
- }
}
&:global(.stretchy) {
@@ -81,7 +78,7 @@
&:global(.disabled),
&:global(.grey) {
- background: transparentize(white, 0.9);
+ background: $gray_90;
color: white;
}
@@ -117,26 +114,26 @@
&.outline {
background: transparent;
- box-shadow: inset transparentize(white, 0.8) 0 0 0 2px;
- color: transparentize(white, 0.8);
+ box-shadow: inset $gray_75 0 0 0 2px;
+ color: $gray_75;
svg {
- fill: transparentize(white, 0.8);
+ fill: $gray_75;
}
}
&.outline-white {
background: transparent;
- box-shadow: inset transparentize(white, 0) 0 0 0 2px;
- color: transparentize(white, 0);
+ box-shadow: inset $white 0 0 0 2px;
+ color: $white;
svg {
- fill: transparentize(white, 0);
+ fill: $white;
}
}
&.gray {
- background: lighten($content_bg, 8%);
+ background: $content_bg_lightest;
}
&.link {
@@ -233,22 +230,31 @@
.primary {
@include outer_shadow;
- background: $red_gradient_alt;
+ background: $primary_gradient;
}
-.secondary {
+.danger {
@include outer_shadow;
- background: $green_gradient;
+ background: $danger_gradient;
+}
+
+.info {
+ @include outer_shadow;
+ background: $info_gradient;
}
.lab {
- background: $blue;
+ background: $lab_gradient;
+}
+
+.flow {
+ background: $flow_gradient;
}
.flat {
box-shadow: none;
- background: $comment_bg;
- color: darken(white, 20%);
+ background: $content_bg_light;
+ color: $gray_25;
}
.loading {
@@ -260,5 +266,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 6e991a67..ed16dc16 100644
--- a/src/components/input/Info/style.scss
+++ b/src/components/input/Info/style.scss
@@ -1,4 +1,4 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
.container {
min-height: $info_height;
@@ -6,23 +6,23 @@
display: flex;
align-items: center;
justify-content: center;
- font-size: $text_small;
+ font: $font_14_regular;
line-height: 1.2em;
padding: $gap;
- background: transparentize(white, 0.9);
+ background: $gray_90;
&:global(.danger) {
color: white;
- background: transparentize($red, 0.5);
+ background: $content_bg_danger;
}
&:global(.warning) {
color: white;
- background: transparentize($red, 0.5);
+ background: $content_bg_danger;
}
&:global(.primary) {
color: white;
- background: transparentize($red, 0.5);
+ background: $content_bg_danger;
}
}
diff --git a/src/components/input/InputText/styles.module.scss b/src/components/input/InputText/styles.module.scss
index 833c4013..1422f8fc 100644
--- a/src/components/input/InputText/styles.module.scss
+++ b/src/components/input/InputText/styles.module.scss
@@ -1,4 +1,4 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
.input {
display: flex;
@@ -6,7 +6,7 @@
color: inherit;
&.has_error {
- color: $red;
+ color: $color_danger;
}
&.has_prefix {
@@ -29,7 +29,8 @@
}
}
-.suffix, .prefix{
+.suffix,
+.prefix {
fill: currentColor;
stroke: currentColor;
diff --git a/src/components/input/InputWrapper/styles.module.scss b/src/components/input/InputWrapper/styles.module.scss
index 2e819ea6..b200c3a2 100644
--- a/src/components/input/InputWrapper/styles.module.scss
+++ b/src/components/input/InputWrapper/styles.module.scss
@@ -17,11 +17,12 @@
}
&.has_error {
- box-shadow: inset $red 0 0 0 1px;
+ box-shadow: inset $content_bg_danger 0 0 0 1px;
}
}
-.error, .title {
+.error,
+.title {
pointer-events: none;
touch-action: none;
user-select: none;
@@ -37,7 +38,7 @@
padding: 0 $gap * 0.5;
border-radius: 4px;
color: white;
- background-color: $red;
+ background-color: $content_bg_danger;
bottom: 0;
right: $gap * 0.5;
transform: translate(0, 50%);
@@ -57,12 +58,14 @@
color: $input_grey_color;
text-transform: uppercase;
- .focused &, .not_empty & {
+ .focused &,
+ .not_empty & {
transform: translate(0, -100%) scale(0.75);
}
- .focused.has_error &, .not_empty.has_error & {
+ .focused.has_error &,
+ .not_empty.has_error & {
color: white;
- background-color: $red;
+ background-color: $content_bg_danger;
}
}
diff --git a/src/components/input/Toggle/styles.module.scss b/src/components/input/Toggle/styles.module.scss
index 06cbac81..52db0036 100644
--- a/src/components/input/Toggle/styles.module.scss
+++ b/src/components/input/Toggle/styles.module.scss
@@ -1,11 +1,11 @@
-@import "src/styles/variables.scss";
+@import 'src/styles/variables.scss';
.toggle {
height: 24px;
width: 48px;
flex: 0 0 48px;
border-radius: 12px;
- background-color: transparentize(white, 0.9);
+ background-color: $gray_90;
display: flex;
border: none;
outline: none;
@@ -33,7 +33,7 @@
height: 18px;
width: 18px;
border-radius: 11px;
- background-color: darken(white, 50%);
+ background-color: $gray_50;
transform: translate(0, 0);
transition: transform 0.25s, color 0.25s, background-color;
}
@@ -45,19 +45,19 @@
}
&.primary {
- background-color: $wisegreen;
+ background-color: $color_primary;
}
&.secondary {
- background-color: transparentize(white, 0.85);
+ background-color: $gray_90;
}
&.lab {
- background-color: $blue;
+ background-color: $color_lab;
}
&.danger {
- background-color: $red;
+ background-color: $color_danger;
}
&.monochrome {
diff --git a/src/components/lab/LabBottomPanel/styles.module.scss b/src/components/lab/LabBottomPanel/styles.module.scss
index 0be83ad7..61d0b7df 100644
--- a/src/components/lab/LabBottomPanel/styles.module.scss
+++ b/src/components/lab/LabBottomPanel/styles.module.scss
@@ -1,4 +1,4 @@
-@import "src/styles/variables.scss";
+@import 'src/styles/variables.scss';
.wrap {
padding: $gap $lab_gap $lab_gap;
@@ -10,13 +10,14 @@
.timestamp {
font: $font_12_regular;
- color: darken(white, 40%);
+ color: $gray_50;
}
-.comments, .like {
+.comments,
+.like {
flex: 0;
font: $font_16_semibold;
- color: darken(white, 50%);
+ color: $gray_50;
fill: currentColor;
stroke: none;
column-gap: $gap !important;
@@ -25,6 +26,6 @@
padding-left: $gap;
&.active {
- color: $red;
+ color: $color_danger;
}
}
diff --git a/src/components/lab/LabHero/styles.module.scss b/src/components/lab/LabHero/styles.module.scss
index f70c19b2..be38c3e8 100644
--- a/src/components/lab/LabHero/styles.module.scss
+++ b/src/components/lab/LabHero/styles.module.scss
@@ -1,4 +1,4 @@
-@import "src/styles/variables.scss";
+@import 'src/styles/variables.scss';
.wrap {
min-width: 0;
@@ -7,7 +7,7 @@
}
.star {
- fill: darken(white, 76%);
+ fill: $gray_75;
flex: 0 0 32px;
}
@@ -16,14 +16,14 @@
text-overflow: ellipsis;
line-height: 22px;
word-break: break-all;
- color: darken(white, 40%);
+ color: $gray_50;
- @include clamp(2, 22px)
+ @include clamp(2, 22px);
}
.description {
font: $font_10_regular;
- color: darken(white, 50%);
+ color: $gray_50;
padding-top: 4px;
}
diff --git a/src/components/lab/LabImage/styles.module.scss b/src/components/lab/LabImage/styles.module.scss
index c392b97f..bf0e220c 100644
--- a/src/components/lab/LabImage/styles.module.scss
+++ b/src/components/lab/LabImage/styles.module.scss
@@ -1,4 +1,4 @@
-@import "src/styles/variables.scss";
+@import 'src/styles/variables.scss';
.wrapper {
display: flex;
@@ -21,7 +21,6 @@
font-size: 32px;
}
}
-
}
.slide {
@@ -52,14 +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,
- transparentize(white, 0.95) 0 -1px 2px,
- transparentize(white, 0.95) 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 1ea6165a..250af937 100644
--- a/src/components/lab/LabNode/styles.module.scss
+++ b/src/components/lab/LabNode/styles.module.scss
@@ -1,16 +1,12 @@
-@import "src/styles/variables.scss";
+@import 'src/styles/variables.scss';
.wrap {
@include outer_shadow;
position: relative;
- background-color: $lab_post_bg;
+ background-color: $content_bg;
cursor: pointer;
min-width: 0;
border-radius: $radius;
-
- &.heroic {
- @include hero_gradient;
- }
}
diff --git a/src/components/lab/LabNodeTitle/styles.module.scss b/src/components/lab/LabNodeTitle/styles.module.scss
index 3748513f..81646b92 100644
--- a/src/components/lab/LabNodeTitle/styles.module.scss
+++ b/src/components/lab/LabNodeTitle/styles.module.scss
@@ -1,4 +1,4 @@
-@import "src/styles/variables.scss";
+@import 'src/styles/variables.scss';
.wrap {
padding: $lab_gap - $gap $lab_gap 0;
@@ -30,6 +30,6 @@
}
.star {
- fill: darken(white, 50%);
+ fill: $gray_50;
flex: 0 0 24px;
}
diff --git a/src/components/main/Footer/styles.module.scss b/src/components/main/Footer/styles.module.scss
index f0b19c41..119aa600 100644
--- a/src/components/main/Footer/styles.module.scss
+++ b/src/components/main/Footer/styles.module.scss
@@ -1,14 +1,14 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
.footer {
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;
- color: darken(white, 80%);
+ color: $gray_75;
padding-top: 2px;
box-sizing: border-box;
diff --git a/src/components/main/SidePane/index.tsx b/src/components/main/SidePane/index.tsx
deleted file mode 100644
index 821684ad..00000000
--- a/src/components/main/SidePane/index.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import React, { FC, useCallback, useEffect, useState } from 'react';
-
-import classNames from 'classnames';
-
-import { Group } from '~/components/containers/Group';
-
-import styles from './styles.module.scss';
-
-interface IProps {}
-
-export const SidePane: FC = () => {
- const content_width = 1100;
- const [left, setLeft] = useState(0);
-
- const moveThis = useCallback(() => {
- const { width } = document.body.getBoundingClientRect();
- const shift =
- width > content_width + 64 + 20
- ? (width - content_width - 64 - 20) / 2 - 54 + 64 // + content_width + 74
- : 10;
-
- setLeft(shift);
- }, [setLeft]);
-
- useEffect(() => {
- moveThis();
- window.addEventListener('resize', moveThis);
- document.addEventListener('DOMContentLoaded', moveThis);
-
- return () => {
- window.removeEventListener('resize', moveThis);
- document.removeEventListener('DOMContentLoaded', moveThis);
- };
- }, [moveThis]);
-
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
S
-
= ({ message, incoming }) => {
- return (
-
-
-
-
-
-
-
{getPrettyDate(message.created_at)}
-
= ({ photo, onChangePhoto, canEdit, size }) => {
+const ProfileAvatar: FC = ({
+ photo,
+ onChangePhoto,
+ canEdit,
+ size,
+}) => {
const onInputChange = useCallback(
async (event: ChangeEvent) => {
if (!event.target.files?.length) {
@@ -23,10 +28,12 @@ const ProfileAvatar: FC = ({ photo, onChangePhoto, canEdit,
onChangePhoto(event.target.files[0]);
},
- [onChangePhoto]
+ [onChangePhoto],
);
- const backgroundImage = photo ? `url("${getURL(photo, ImagePresets.avatar)}")` : undefined;
+ const backgroundImage = photo
+ ? `url("${getURL(photo, ImagePresets.avatar)}")`
+ : undefined;
return (
= ({ photo, onChangePhoto, canEdit,
}}
>
{canEdit &&
);
};
diff --git a/src/components/profile/ProfileAvatar/styles.module.scss b/src/components/profile/ProfileAvatar/styles.module.scss
index 3d18310c..0d8edd00 100644
--- a/src/components/profile/ProfileAvatar/styles.module.scss
+++ b/src/components/profile/ProfileAvatar/styles.module.scss
@@ -1,4 +1,4 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
.avatar {
@include outer_shadow();
@@ -21,7 +21,7 @@
}
}
-.can_edit {
+.button {
position: absolute;
right: -4px;
bottom: -4px;
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/profile/ProfileSidebarSettings/index.tsx b/src/components/profile/ProfileSidebarSettings/index.tsx
index 6fcf7db2..389db635 100644
--- a/src/components/profile/ProfileSidebarSettings/index.tsx
+++ b/src/components/profile/ProfileSidebarSettings/index.tsx
@@ -47,9 +47,7 @@ const ProfileSidebarSettings: FC = () => {
Отмена
-
- Сохранить
-
+ Сохранить
diff --git a/src/components/sidebar/SidebarStack/styles.module.scss b/src/components/sidebar/SidebarStack/styles.module.scss
index acc8b946..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";
+@import 'src/styles/variables';
.stack {
- background: transparentize($content_bg, 0.2);
+ background: $content_bg_backdrop;
display: flex;
flex-direction: row-reverse;
width: auto;
@@ -15,7 +15,7 @@
}
.card {
- box-shadow: transparentize(white, 0.9) -1px 0, transparentize(black, 0.7) -5px 0 15px;
+ box-shadow: $gray_90 -1px 0, transparentize(black, 0.7) -5px 0 15px;
border-radius: $radius 0 0 $radius;
display: flex;
flex-direction: column;
diff --git a/src/components/tags/Tag/index.tsx b/src/components/tags/Tag/index.tsx
index 02adb8c8..fe3eea23 100644
--- a/src/components/tags/Tag/index.tsx
+++ b/src/components/tags/Tag/index.tsx
@@ -3,12 +3,6 @@ import React, { FC, FocusEventHandler, useCallback } from 'react';
import { TagWrapper } from '~/components/tags/TagWrapper';
import { ITag } from '~/types';
-const getTagFeature = (tag: Partial) => {
- if (tag?.title?.substr(0, 1) === '/') return 'green';
-
- return '';
-};
-
interface IProps {
tag: Partial;
size?: 'normal' | 'big';
@@ -44,9 +38,11 @@ const Tag: FC = ({
onDelete(tag.ID!);
}, [onDelete, tag]);
+ const isAlbumTag = tag?.title?.substr(0, 1) === '/';
+
return (
void;
}
-const TagAutocompleteRow: FC = ({ selected, type, title, onSelect }) => {
+const TagAutocompleteRow: FC = ({
+ selected,
+ type,
+ title,
+ onSelect,
+}) => {
const onClick = useCallback(() => onSelect(title), [title, onSelect]);
return (
diff --git a/src/components/tags/TagAutocompleteRow/styles.module.scss b/src/components/tags/TagAutocompleteRow/styles.module.scss
index 7a2f3385..21e17077 100644
--- a/src/components/tags/TagAutocompleteRow/styles.module.scss
+++ b/src/components/tags/TagAutocompleteRow/styles.module.scss
@@ -1,4 +1,4 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
$row_height: 26px;
@@ -16,13 +16,14 @@ $row_height: 26px;
text-overflow: ellipsis;
overflow: hidden;
- &:hover, &.selected {
+ &:hover,
+ &.selected {
opacity: 1;
- background: transparentize($wisegreen, 0.6);
+ background: $content_bg_success;
}
&.right {
- color: lighten($wisegreen, 4%);
+ color: $color_primary;
opacity: 1;
}
diff --git a/src/components/tags/TagWrapper/index.tsx b/src/components/tags/TagWrapper/index.tsx
index ded9d919..df0e2714 100644
--- a/src/components/tags/TagWrapper/index.tsx
+++ b/src/components/tags/TagWrapper/index.tsx
@@ -7,8 +7,8 @@ import { Icon } from '~/components/input/Icon';
import styles from './styles.module.scss';
interface IProps {
- feature?: string;
size?: string;
+ color?: 'primary' | 'danger' | 'info' | 'black' | 'default';
deletable?: boolean;
hoverable?: boolean;
editing?: boolean;
@@ -19,8 +19,8 @@ interface IProps {
}
const TagWrapper: FC
= ({
+ color = 'default',
children,
- feature,
size,
deletable,
hoverable,
@@ -32,7 +32,7 @@ const TagWrapper: FC = ({
}) => {
const canBeDeleted = deletable && !editing && !hasInput;
const onDeletePress = useCallback(
- event => {
+ (event) => {
if (!onDelete) {
return;
}
@@ -40,18 +40,23 @@ const TagWrapper: FC = ({
event.stopPropagation();
onDelete();
},
- [onDelete]
+ [onDelete],
);
return (
diff --git a/src/components/tags/TagWrapper/styles.module.scss b/src/components/tags/TagWrapper/styles.module.scss
index e39d213f..bf3670d0 100644
--- a/src/components/tags/TagWrapper/styles.module.scss
+++ b/src/components/tags/TagWrapper/styles.module.scss
@@ -1,4 +1,4 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
$big: 1.2;
@@ -8,7 +8,7 @@ $big: 1.2;
overflow: hidden;
cursor: default;
height: $tag_height;
- background: $tag_bg;
+ background: $content_bg_light;
border-radius: ($tag_height * 0.5) 3px 3px ($tag_height * 0.5);
font: $font_14_semibold;
align-self: flex-start;
@@ -25,7 +25,48 @@ $big: 1.2;
z-index: 40;
}
- &:global(.big) {
+ &.hoverable {
+ cursor: pointer;
+ }
+
+ &.editing {
+ cursor: pointer;
+ background-color: $content_bg;
+ }
+
+ &.input {
+ color: transparent !important;
+ min-width: 100px;
+ }
+
+ &.clickable {
+ cursor: pointer;
+ }
+
+ &.color-danger {
+ background: $danger_gradient;
+ }
+
+ &.color-info {
+ background: $info_gradient;
+ }
+
+ &.color-primary {
+ background: $primary_gradient;
+ }
+
+ &.color-black {
+ background: transparentize(black, 0.7);
+ box-shadow: none;
+ color: $gray_75;
+ font: $font_14_medium;
+
+ .hole::after {
+ background: $gray_90;
+ }
+ }
+
+ &.size-big {
height: $tag_height * $big;
font: $font_16_semibold;
border-radius: ($tag_height * $big * 0.5) 3px 3px ($tag_height * $big * 0.5);
@@ -36,52 +77,6 @@ $big: 1.2;
}
}
- &:global(.is_hoverable) {
- cursor: pointer;
- }
-
- &:global(.is_editing) {
- cursor: pointer;
- background-color: lighten($tag_bg, 10%);
- }
-
- &:global(.red) {
- background: $red_gradient;
- }
-
- &:global(.blue) {
- background: $blue_gradient;
- }
-
- &:global(.green) {
- background: $green_gradient;
- }
-
- &:global(.olive) {
- background: $olive;
- color: transparentize(black, 0.4);
- }
-
- &:global(.black) {
- background: transparentize(black, 0.7);
- box-shadow: none;
- color: transparentize(white, 0.6);
- font: $font_14_medium;
-
- .hole::after {
- background: transparentize(white, 0.98);
- }
- }
-
- &:global(.input) {
- color: transparent !important;
- min-width: 100px;
- }
-
- &:global(.clickable) {
- cursor: pointer;
- }
-
input {
background: none;
border: none;
@@ -129,10 +124,10 @@ $big: 1.2;
}
button.delete {
- box-shadow: inset transparentize(white, 0.9) 1px 0, transparentize(black, 0.7) -1px 0;
+ box-shadow: inset transparentize(white, 0.95) 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;
@@ -148,4 +143,4 @@ button.delete {
padding-right: $gap;
text-overflow: ellipsis;
overflow: hidden;
-}
\ No newline at end of file
+}
diff --git a/src/components/upload/AudioUpload/styles.module.scss b/src/components/upload/AudioUpload/styles.module.scss
index 87ffdf1a..f4a0a500 100644
--- a/src/components/upload/AudioUpload/styles.module.scss
+++ b/src/components/upload/AudioUpload/styles.module.scss
@@ -1,7 +1,7 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
.wrap {
- background: lighten($content_bg, 4%);
+ background: $content_bg_lighter;
// padding-bottom: 100%;
border-radius: $radius;
position: relative;
@@ -72,6 +72,6 @@
&:hover {
opacity: 1;
- background-color: $red;
+ background-color: $color_danger;
}
}
diff --git a/src/components/upload/ImageUpload/styles.module.scss b/src/components/upload/ImageUpload/styles.module.scss
index 91f3d768..976963b6 100644
--- a/src/components/upload/ImageUpload/styles.module.scss
+++ b/src/components/upload/ImageUpload/styles.module.scss
@@ -1,7 +1,7 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
.wrap {
- background: lighten($content_bg, 4%);
+ background: $content_bg_lighter;
padding-bottom: 100%;
border-radius: $radius;
position: relative;
@@ -18,7 +18,7 @@
&:global(.is_uploading) {
.thumb {
- filter: blur(10px);
+ filter: blur(10px);
}
}
}
@@ -81,6 +81,6 @@
&:hover {
opacity: 1;
- background-color: $red;
+ background-color: $color_danger;
}
}
diff --git a/src/components/upload/UploadDropzone/styles.module.scss b/src/components/upload/UploadDropzone/styles.module.scss
index 8bda07d1..8cea5eb4 100644
--- a/src/components/upload/UploadDropzone/styles.module.scss
+++ b/src/components/upload/UploadDropzone/styles.module.scss
@@ -12,17 +12,18 @@
left: 0;
right: 0;
bottom: 0;
- background: transparentize($wisegreen, 0.7);
+ background: $content_bg_success;
border-radius: $radius;
z-index: 10;
- box-shadow: inset $wisegreen 0 0 0 2px;
+ box-shadow: inset $color_primary 0 0 0 2px;
display: none;
align-items: center;
justify-content: center;
pointer-events: none;
touch-action: none;
- &.active, :global(.dragging) & {
+ &.active,
+ :global(.dragging) & {
display: flex;
}
}
@@ -30,5 +31,5 @@
svg.icon {
width: auto;
height: 72px;
- fill: $wisegreen;
+ fill: $color_primary;
}
diff --git a/src/constants/themes/index.ts b/src/constants/themes/index.ts
new file mode 100644
index 00000000..1a03082d
--- /dev/null
+++ b/src/constants/themes/index.ts
@@ -0,0 +1,30 @@
+export enum Theme {
+ Default = 'Default',
+ Horizon = 'Horizon',
+}
+
+interface ThemeColors {
+ colors: string[];
+ background: string;
+ name: string;
+}
+
+export const themeColors: Record
= {
+ [Theme.Default]: {
+ name: 'Волт',
+ colors: [
+ 'linear-gradient(170deg, #00ac35 -50%, #007962 150%)',
+ 'linear-gradient(165deg, #ff7549 -50%, #ff3344 150%)',
+ ],
+ background: `url('/images/noise_top.png') 0% 0% #23201f`,
+ },
+ [Theme.Horizon]: {
+ name: 'Веспера',
+ colors: [
+ 'linear-gradient(170deg, #f09483 -150%, #e95678 100%)',
+ 'linear-gradient(165deg, #fab795 -50%, #fab795 150%)',
+ 'linear-gradient(170deg, #25b0bc, #7693d6)',
+ ],
+ background: `url("/images/horizon_bg.svg") 50% 50% / cover rgb(28, 30, 38)`,
+ },
+};
diff --git a/src/containers/App.tsx b/src/containers/App.tsx
deleted file mode 100644
index a7e657a2..00000000
--- a/src/containers/App.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import React, { VFC } from 'react';
-
-import { observer } from 'mobx-react-lite';
-import { BrowserRouter } from 'react-router-dom';
-
-import { PageCoverProvider } from '~/components/containers/PageCoverProvider';
-import { Modal } from '~/containers/dialogs/Modal';
-import { BottomContainer } from '~/containers/main/BottomContainer';
-import { MainRouter } from '~/containers/main/MainRouter';
-import { DragDetectorProvider } from '~/hooks/dom/useDragDetector';
-import { useGlobalLoader } from '~/hooks/dom/useGlobalLoader';
-import { MainLayout } from '~/layouts/MainLayout';
-import { Sprites } from '~/sprites/Sprites';
-import { UserContextProvider } from '~/utils/context/UserContextProvider';
-import { AudioPlayerProvider } from '~/utils/providers/AudioPlayerProvider';
-import { AuthProvider } from '~/utils/providers/AuthProvider';
-import { MetadataProvider } from '~/utils/providers/MetadataProvider';
-import { SWRConfigProvider } from '~/utils/providers/SWRConfigProvider';
-import { SearchProvider } from '~/utils/providers/SearchProvider';
-import { ToastProvider } from '~/utils/providers/ToastProvider';
-
-const App: VFC = observer(() => {
- useGlobalLoader();
-
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-});
-
-export { App };
diff --git a/src/containers/boris/BorisSidebar/index.tsx b/src/containers/boris/BorisSidebar/index.tsx
index ab1b1d0f..8fb3157b 100644
--- a/src/containers/boris/BorisSidebar/index.tsx
+++ b/src/containers/boris/BorisSidebar/index.tsx
@@ -4,9 +4,10 @@ import { BorisContacts } from '~/components/boris/BorisContacts';
import { BorisStats } from '~/components/boris/BorisStats';
import { Group } from '~/components/containers/Group';
import { SuperPowersToggle } from '~/containers/auth/SuperPowersToggle';
-import styles from '~/layouts/BorisLayout/styles.module.scss';
import { BorisUsageStats } from '~/types/boris';
+import styles from './styles.module.scss';
+
interface Props {
isUser: boolean;
stats: BorisUsageStats;
@@ -14,14 +15,14 @@ interface Props {
}
const BorisSidebar: FC = ({ isUser, stats, isLoading }) => (
-
+
+
diff --git a/src/containers/boris/BorisSidebar/styles.module.scss b/src/containers/boris/BorisSidebar/styles.module.scss
new file mode 100644
index 00000000..0c2697fa
--- /dev/null
+++ b/src/containers/boris/BorisSidebar/styles.module.scss
@@ -0,0 +1,23 @@
+@import 'src/styles/variables';
+
+.wrap {
+ @include tablet {
+ display: none;
+ }
+}
+
+.container {
+ background: $content_bg_dark;
+ border-radius: 0 $radius $radius 0;
+ padding: $gap;
+ box-sizing: border-box;
+ flex: 0 0 auto;
+
+ @include tablet {
+ border-radius: 0;
+ }
+}
+
+.super_powers {
+ padding: $gap * 2 0;
+}
diff --git a/src/containers/dialogs/LoginDialog/styles.module.scss b/src/containers/dialogs/LoginDialog/styles.module.scss
index 3b4fe809..1b35d3e4 100644
--- a/src/containers/dialogs/LoginDialog/styles.module.scss
+++ b/src/containers/dialogs/LoginDialog/styles.module.scss
@@ -1,10 +1,4 @@
-@import "src/styles/variables";
-
-$secondary_color: darken(desaturate($blue, 100%), 30%);
-$vk_color: $secondary_color;
-
-.dialog {
-}
+@import 'src/styles/variables';
.wrap {
display: flex;
@@ -17,32 +11,6 @@ $vk_color: $secondary_color;
}
}
-.secondary_button {
- background: $content_bg;
- box-shadow: inset $vk_color 0 0 0 2px;
- color: $vk_color;
-
- svg {
- fill: $vk_color;
- margin-right: $gap;
- }
-}
-
.forgot_button {
opacity: 0.5;
}
-
-.buttons {
- margin: $gap * 2 0 0 0 !important;
- padding: $gap * 2 0 0 0;
- border-top: 1px solid black;
-}
-
-.links {
- font: $font_14_regular;
- text-align: center;
-
- a {
- color: lighten($content_bg, 40%);
- }
-}
diff --git a/src/containers/dialogs/LoginSocialRegisterDialog/styles.module.scss b/src/containers/dialogs/LoginSocialRegisterDialog/styles.module.scss
index c5619291..75e4460a 100644
--- a/src/containers/dialogs/LoginSocialRegisterDialog/styles.module.scss
+++ b/src/containers/dialogs/LoginSocialRegisterDialog/styles.module.scss
@@ -1,4 +1,4 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
.wrap {
padding: $login_dialog_padding;
@@ -13,6 +13,6 @@
span {
padding-left: $gap;
- color: darken(white, 50%);
+ color: $gray_50;
}
}
diff --git a/src/containers/dialogs/RestorePasswordDialog/styles.module.scss b/src/containers/dialogs/RestorePasswordDialog/styles.module.scss
index 0d7548db..fde782b8 100644
--- a/src/containers/dialogs/RestorePasswordDialog/styles.module.scss
+++ b/src/containers/dialogs/RestorePasswordDialog/styles.module.scss
@@ -1,4 +1,4 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
.wrap {
padding: $gap $gap $gap * 4;
@@ -11,7 +11,7 @@
.text {
font: $font_14_regular;
padding: $gap;
- color: darken(white, 50%);
+ color: $gray_50;
}
.shade,
@@ -34,18 +34,18 @@
text-transform: uppercase;
font: $font_18_semibold;
text-align: center;
- color: $wisegreen;
+ color: $color_primary;
svg {
- fill: $wisegreen;
+ fill: $color_primary;
}
}
.error_shade {
- color: $red;
+ color: $color_danger;
svg {
- fill: $red;
+ fill: $color_danger;
}
}
diff --git a/src/containers/dialogs/RestoreRequestDialog/index.tsx b/src/containers/dialogs/RestoreRequestDialog/index.tsx
index c3b0853e..6df79950 100644
--- a/src/containers/dialogs/RestoreRequestDialog/index.tsx
+++ b/src/containers/dialogs/RestoreRequestDialog/index.tsx
@@ -15,24 +15,24 @@ import styles from './styles.module.scss';
interface RestoreRequestDialogProps extends DialogComponentProps {}
-const RestoreRequestDialog: VFC
= ({ onRequestClose }) => {
+const RestoreRequestDialog: VFC = ({
+ onRequestClose,
+}) => {
useCloseOnEscape(onRequestClose);
const [isSent, setIsSent] = useState(false);
const onSent = useCallback(() => setIsSent(true), [setIsSent]);
- const { isSubmitting, handleSubmit, handleChange, errors, values } = useRestoreRequestForm(
- apiRequestRestoreCode,
- onSent
- );
+ const { isSubmitting, handleSubmit, handleChange, errors, values } =
+ useRestoreRequestForm(apiRequestRestoreCode, onSent);
const buttons = useMemo(
() => (
- Восстановить
+ Восстановить
),
- []
+ [],
);
const header = useMemo(() =>
, []);
@@ -58,7 +58,8 @@ const RestoreRequestDialog: VFC = ({ onRequestClose }
/>
- Введите имя пользователя или адрес почты. Мы пришлем ссылку для сброса пароля.
+ Введите имя пользователя или адрес почты. Мы пришлем ссылку для
+ сброса пароля.
= observer(() => {
[borisCommentedAt, isUser, user.last_seen_boris],
);
- const hasLabUpdates = useMemo(() => labStats.updates.length > 0, [
- labStats.updates,
- ]);
+ const hasLabUpdates = useMemo(
+ () => labStats.updates.length > 0,
+ [labStats.updates],
+ );
const hasFlowUpdates = useMemo(() => flowUpdates.length > 0, [flowUpdates]);
// Needed for SSR
@@ -113,12 +114,7 @@ const Header: FC = observer(() => {
)}
{!isUser && (
-
+
ВДОХ
)}
diff --git a/src/containers/main/Header/styles.module.scss b/src/containers/main/Header/styles.module.scss
index 8226f8f5..33f225bc 100644
--- a/src/containers/main/Header/styles.module.scss
+++ b/src/containers/main/Header/styles.module.scss
@@ -1,4 +1,4 @@
-@import "../../../styles/variables";
+@import '../../../styles/variables';
@keyframes appear {
from {
@@ -28,7 +28,7 @@
}
&.is_scrolled {
- @include blur();
+ @include blur;
}
}
@@ -86,7 +86,7 @@
white-space: nowrap;
&:hover {
- color: $red;
+ color: $color_link;
}
&::before {
@@ -109,7 +109,7 @@
width: 6px;
height: 6px;
border-radius: 4px;
- background: lighten($red, 10%);
+ background: $color_link;
right: 12px;
top: 6px;
transition: opacity 0.5s;
@@ -123,11 +123,11 @@
}
&.lab::after {
- background: lighten($blue, 10%);
+ background: $color_lab;
}
&.boris::after {
- background: lighten($wisegreen, 10%);
+ background: $color_primary;
}
@include tablet {
diff --git a/src/containers/node/NodeBottomBlock/styles.module.scss b/src/containers/node/NodeBottomBlock/styles.module.scss
index 3b067e18..f49eb5ac 100644
--- a/src/containers/node/NodeBottomBlock/styles.module.scss
+++ b/src/containers/node/NodeBottomBlock/styles.module.scss
@@ -1,4 +1,4 @@
-@import "src/styles/variables.scss";
+@import 'src/styles/variables.scss';
.sticky {
width: 100%;
@@ -22,7 +22,6 @@
}
}
-
.panel {
flex: 1 3;
display: flex;
@@ -38,13 +37,6 @@
}
}
-.buttons {
- background: $node_buttons_bg;
- flex: 1;
- border-radius: $panel_radius;
- box-shadow: $comment_shadow;
-}
-
.left {
flex: 1;
min-width: 0;
diff --git a/src/containers/profile/ProfileAccounts/styles.module.scss b/src/containers/profile/ProfileAccounts/styles.module.scss
index 17ba4117..98e81fb7 100644
--- a/src/containers/profile/ProfileAccounts/styles.module.scss
+++ b/src/containers/profile/ProfileAccounts/styles.module.scss
@@ -1,11 +1,11 @@
-@import "../../../styles/variables";
+@import '../../../styles/variables';
.wrap {
}
.list {
border-radius: $radius;
- background: transparentize(white, 0.95);
+ background: $gray_90;
}
.buttons {
@@ -38,7 +38,7 @@
grid-template-columns: 20px auto 20px;
grid-column-gap: $gap * 1.5;
align-items: center;
- border-bottom: 1px solid transparentize(white, 0.9);
+ border-bottom: 1px solid $gray_90;
padding: $gap;
&:last-child {
@@ -70,7 +70,7 @@
cursor: pointer;
opacity: 0.5;
transition: opacity 0.25s;
- fill: $red;
+ fill: $color_danger;
display: flex;
align-items: center;
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
-
-
В будущем мы собираемся убрать сообщения, превратив их в заметки.
-
-
- Вся твоя история сообщений, написанных себе, сохранится. Исчезнут только сообщения другим
- участникам.
-
-
-
- Давай обсудим это в Борисе , если это так важно.
-
-
-
- {messages
- .filter(message => !!message.text)
- .map((
- message // TODO: show files / memo
- ) => (
-
- ))}
-
- {!isLoadingMessages && messages.length > 0 && (
-
Когда-нибудь здесь будут еще сообщения
- )}
-
= ({ onClose }) => {
-
+
+
+
+
+
+
+
diff --git a/src/containers/profile/ProfileToggles/index.tsx b/src/containers/profile/ProfileToggles/index.tsx
index 135d52ea..6a25bf96 100644
--- a/src/containers/profile/ProfileToggles/index.tsx
+++ b/src/containers/profile/ProfileToggles/index.tsx
@@ -7,11 +7,9 @@ import { SuperPowersToggle } from '~/containers/auth/SuperPowersToggle';
interface ProfileTogglesProps {}
const ProfileToggles: FC
= () => (
-
-
-
-
+
+
);
export { ProfileToggles };
diff --git a/src/containers/settings/SettingsNotes/index.tsx b/src/containers/settings/SettingsNotes/index.tsx
index bb2322d5..864f4b33 100644
--- a/src/containers/settings/SettingsNotes/index.tsx
+++ b/src/containers/settings/SettingsNotes/index.tsx
@@ -25,7 +25,7 @@ const List = () => {
return (
<>
- {notes.map(note => (
+ {notes.map((note) => (
onRemove(note.id)}
update={(text, callback) => update(note.id, text, callback)}
@@ -59,7 +59,6 @@ const SettingsNotes: VFC = () => {
onClick={() => setFormIsShown(true)}
size="mini"
iconRight="plus"
- color="secondary"
>
Добавить
diff --git a/src/containers/settings/ThemeSwitcher/index.tsx b/src/containers/settings/ThemeSwitcher/index.tsx
new file mode 100644
index 00000000..25138e2e
--- /dev/null
+++ b/src/containers/settings/ThemeSwitcher/index.tsx
@@ -0,0 +1,47 @@
+import React, { FC } from 'react';
+
+import classNames from 'classnames';
+
+import { Card } from '~/components/containers/Card';
+import { Group } from '~/components/containers/Group';
+import { Theme, themeColors } from '~/constants/themes';
+import { useTheme } from '~/utils/providers/ThemeProvider';
+
+import styles from './styles.module.scss';
+
+interface ThemeSwitcherProps {}
+
+const ThemeSwitcher: FC = () => {
+ const { theme, setTheme } = useTheme();
+
+ return (
+
+ {Object.entries(themeColors).map(([id, item]) => (
+ setTheme(id as Theme)}
+ >
+
+
+ {item.colors.map((color) => (
+
+ ))}
+
+ {item.name}
+
+
+ ))}
+
+ );
+};
+
+export { ThemeSwitcher };
diff --git a/src/containers/settings/ThemeSwitcher/styles.module.scss b/src/containers/settings/ThemeSwitcher/styles.module.scss
new file mode 100644
index 00000000..9df40937
--- /dev/null
+++ b/src/containers/settings/ThemeSwitcher/styles.module.scss
@@ -0,0 +1,30 @@
+@import 'src/styles/variables';
+
+.button {
+ flex: 1;
+}
+
+.card {
+ padding: $gap;
+ flex: 1;
+ cursor: pointer;
+
+ &.active {
+ outline: 1px solid $color_primary;
+ }
+}
+
+.title {
+ font: $font_12_semibold;
+ text-align: left;
+ text-transform: uppercase;
+ color: $gray_50;
+}
+
+.sample {
+ @include outer_shadow;
+
+ border-radius: 100%;
+ flex: 0 1 20px;
+ height: 20px;
+}
diff --git a/src/containers/settings/UserSettingsView/styles.module.scss b/src/containers/settings/UserSettingsView/styles.module.scss
index c0655be0..8448e58c 100644
--- a/src/containers/settings/UserSettingsView/styles.module.scss
+++ b/src/containers/settings/UserSettingsView/styles.module.scss
@@ -1,7 +1,4 @@
-@import "src/styles/variables";
-
-$pad_danger: mix($red, $content_bg, 70%);
-$pad_usual: mix(white, $content_bg, 10%);
+@import 'src/styles/variables';
.about {
flex: 4;
@@ -17,9 +14,6 @@ $pad_usual: mix(white, $content_bg, 10%);
padding: 0 $gap 0;
}
-.grid {
-}
-
div.base_info.base_info {
align-items: stretch;
}
diff --git a/src/containers/sidebars/TagSidebar/styles.module.scss b/src/containers/sidebars/TagSidebar/styles.module.scss
index 6d9b4f17..b5be45b1 100644
--- a/src/containers/sidebars/TagSidebar/styles.module.scss
+++ b/src/containers/sidebars/TagSidebar/styles.module.scss
@@ -1,4 +1,4 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
.wrap {
@include sidebar_content(400px);
@@ -56,7 +56,7 @@
padding-left: $gap * 2;
svg {
- fill: transparentize(white, 0.5);
+ fill: $gray_50;
}
}
@@ -65,28 +65,20 @@
bottom: 0;
left: 0;
width: 100%;
- background: darken($content_bg, 2%);
+ background: $content_bg_dark;
height: 2px;
z-index: 2;
pointer-events: none;
touch-action: none;
}
-.bar {
- position: absolute;
- top: 0;
- left: 0;
- height: 100%;
- background: lighten($content_bg, 20%);
-}
-
.none {
padding: 40px $gap;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
- color: transparentize(white, 0.9);
+ color: $gray_90;
fill: currentColor;
font: $font_18_semibold;
stroke: none;
diff --git a/src/containers/tags/TagInput/index.tsx b/src/containers/tags/TagInput/index.tsx
index 69fd59fc..d667d97a 100644
--- a/src/containers/tags/TagInput/index.tsx
+++ b/src/containers/tags/TagInput/index.tsx
@@ -19,13 +19,8 @@ const placeholder = 'Добавить';
const prepareInput = (input: string): string[] => {
return input
.split(',')
- .map((title: string) =>
- title
- .trim()
- .substring(0, 64)
- .toLowerCase(),
- )
- .filter(el => el.length > 0);
+ .map((title: string) => title.trim().substring(0, 64).toLowerCase())
+ .filter((el) => el.length > 0);
};
interface IProps {
@@ -88,7 +83,7 @@ const TagInput: FC = ({ exclude, onAppend, onClearTag, onSubmit }) => {
const onFocus = useCallback(() => setFocused(true), []);
const onBlur = useCallback(
- event => {
+ (event) => {
if (!wrapper.current || !ref.current) {
return;
}
@@ -122,9 +117,7 @@ const TagInput: FC = ({ exclude, onAppend, onClearTag, onSubmit }) => {
[onAppend, setInput],
);
- const feature = useMemo(() => (input?.substr(0, 1) === '/' ? 'green' : ''), [
- input,
- ]);
+ const isAlbumTag = useMemo(() => input?.substr(0, 1) === '/', [input]);
useEffect(() => {
if (!focused) return;
@@ -138,7 +131,7 @@ const TagInput: FC = ({ exclude, onAppend, onClearTag, onSubmit }) => {
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
);
}
}
diff --git a/src/styles/_colors.scss b/src/styles/_colors.scss
index ab5aca69..8fb17eb8 100644
--- a/src/styles/_colors.scss
+++ b/src/styles/_colors.scss
@@ -1,70 +1,45 @@
-// color 0, 0, 68 is pretty cool, btw
-$red: #ff3344;
-$yellow: #ffd60f;
-$dark_blue: #592071;
-$blue: #582cd0;
-$green: #00d2b9;
-$olive: #8bc12a;
-$orange: #ff7549;
-$grass: #41800d;
-$wisegreen: #007962;
-$lightgreen: lighten(adjust_hue($wisegreen, -30deg), 10%);
-$soft_blue: #3c75ff;
+// main definitions (move to --vars)
+$color_primary: var(--color_primary);
+$color_danger: var(--color_danger);
+$color_online: var(--color_online);
+$color_offline: var(--color_offline);
+$color_link: var(--color_link);
+$color_flow: var(--color_flow);
+$color_lab: var(--color_lab);
+$color_boris: var(--color_boris);
+$color_like: var(--color_like);
-$primary: $red;
-$secondary: $wisegreen;
+// gradients (move to --vars)
+$danger_gradient: var(--danger_gradient);
+$info_gradient: var(--info_gradient);
+$warning_gradient: var(--warning_gradient);
+$primary_gradient: var(--primary_gradient);
+$magic_gradient: var(--magic_gradient);
+$global_loader_gradient: var(--global_loader_gradient);
+$flow_gradient: var(--flow_gradient);
+$lab_gradient: var(--lab_gradient);
-$red_gradient: linear-gradient(165deg, $orange -50%, $red 150%);
-$yellow_gradient: linear-gradient(165deg, $yellow -50%, $red 150%);
-$blue_gradient: linear-gradient(170deg, $blue, $dark_blue);
-$green_gradient: linear-gradient(
- 170deg,
- $lightgreen -50%,
- $wisegreen 150%
-);
-$purple_gradient: linear-gradient(170deg, $red, $dark_blue);
-$cyan_gradient: linear-gradient(260deg, $soft_blue -50%, #7b2653 150%);
+// backgrounds (move to --vars)
+$content_bg: var(--content_bg);
+$content_bg_dark: var(--content_bg_dark);
+$content_bg_darker: var(--content_bg_darker);
+$content_bg_light: var(--content_bg_light);
+$content_bg_lighter: var(--content_bg_lighter);
+$content_bg_lightest: var(--content_bg_lightest);
-$red_gradient_alt: linear-gradient(170deg, #ff4545, #d2004c);
-$purple_gradient_alt: linear-gradient(90deg, #442294, #ff4545);
+$content_bg_success: var(--content_bg_success);
+$content_bg_info: var(--content_bg_info);
+$content_bg_danger: var(--content_bg_danger);
+$content_bg_backdrop: var(--content_bg_backdrop);
-$main_gradient: $green_gradient;
+// white shades (move to --vars)
+$white: var(--white);
+$gray_25: var(--gray_25);
+$gray_50: var(--gray_50);
+$gray_75: var(--gray_75);
+$gray_90: var(--gray_90);
-// $main_bg_color: darken(#2c2b2b, 4%);
-$main_bg_color: darken(#332f2d, 6%);
-$main_text_color: white;
-
-$content_bg: darken($main_bg_color, 0%);
-$content_bg_secondary: darken($content_bg, 2%);
-$lab_post_bg: lighten($content_bg, 4%);
-
-$cell_bg: lighten($main_bg_color, 0%);
-$card_bg: lighten($main_bg_color, 0%);
-
-$text_normal: 16px;
-$text_small: 14px;
-$text_big: 20px;
-$text_sign: 22px;
-
-$button_bg_color: $red_gradient;
-
-$inset_bg: linear-gradient(135deg, darken($content_bg, 2%), $content_bg);
-$comment_bg: lighten($content_bg, 2%);
-
-$panel_bg: transparent;
-$node_bg: darken($content_bg, 2%);
-$node_image_bg: darken($main_bg_color, 4%);
-$node_title_background: darken($main_bg_color, 8%);
-
-$editor_bg: $content_bg;
-$editor_panel_bg: darken($editor_bg, 4%);
-$cell_shade: lighten($content_bg, 10%);
-$scroll_color: $red_gradient;
-$scroll_inactive_opacity: 0.5;
-
-$side_pane_btn_color: lighten($main_bg_color, 0%);
-
-$node_buttons_bg: darken($main_bg_color, 6%);
-
-$tag_bg: lighten($main_bg_color, 4%);
-$menu_bg: lighten($main_bg_color, 4%);
+// global
+$page_background: var(--page-background);
+$page_background_top: var(--page-background-top);
+$boris_background: var(--boris-background);
diff --git a/src/styles/_global.scss b/src/styles/_global.scss
index 432a9324..26856c82 100644
--- a/src/styles/_global.scss
+++ b/src/styles/_global.scss
@@ -1,3 +1,6 @@
+@use './themes/default' as theme_default;
+@use './themes/horizon' as theme_horizon;
+
@import 'src/styles/variables';
@import 'photoswipe/dist/photoswipe';
@import 'photoswipe/dist/default-skin/default-skin';
@@ -10,16 +13,18 @@
@import 'swiper/css/zoom';
@import 'swiper/css/navigation';
+@include theme_default.apply();
+@include theme_horizon.apply();
+
html {
min-height: 100vh;
box-sizing: border-box;
}
body {
- background: darken($main_bg_color, 12%);
min-height: 100vh;
- background: url('../../src/sprites/noise.png') $main_bg_color;
- color: $main_text_color;
+ background: $page_background;
+ color: $white;
font: $font_16_regular;
-webkit-font-smoothing: antialiased;
fill: white;
@@ -33,8 +38,7 @@ body {
top: 0;
left: 0;
z-index: -1;
- background: url('../../src/sprites/noise_top.png') 0% 0%;
- background-size: 600px 600px;
+ background: $page_background_top;
pointer-events: none;
}
@@ -65,11 +69,11 @@ body {
}
.todo {
- background-color: $red;
+ background-color: $color_danger;
}
.done {
- background-color: $green;
+ background-color: $color_primary;
}
h2 {
@@ -77,12 +81,12 @@ h2 {
}
.username {
- color: $wisegreen;
+ color: $color_link;
font-weight: 600;
}
a {
- color: $primary;
+ color: $color_link;
text-decoration: underline;
}
diff --git a/src/styles/_inputs.scss b/src/styles/_inputs.scss
index 5284b00e..0d2b1b5a 100644
--- a/src/styles/_inputs.scss
+++ b/src/styles/_inputs.scss
@@ -1,11 +1,11 @@
-@import "fonts";
+@import 'fonts';
$input_height: 40px;
$input_text_color: #bbbbbb;
-$input_shadow: inset transparentize(white, 0.9) 0 0 0 1px;
-$input_shadow_error: inset $red 0 0 0 1px;
+$input_shadow: inset $gray_90 0 0 0 1px;
+$input_shadow_error: inset $color_danger 0 0 0 1px;
$input_shadow_filled: $input_shadow;
$input_font: $font_16_medium;
$input_placeholder_font: $font_16_medium;
-$input_bg_color: darken($content_bg, 2%);
+$input_bg_color: $content_bg_dark;
$input_grey_color: #444444;
diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss
index bdf53d67..307babfc 100644
--- a/src/styles/_mixins.scss
+++ b/src/styles/_mixins.scss
@@ -1,25 +1,19 @@
-
-@use "sass:math";
+@use 'sass:math';
@mixin outer_shadow() {
- box-shadow:
- inset transparentize(white, 0.95) 1px 1px,
- transparentize(black, 0.8) 1px 1px,
- transparentize(black, 0.6) 0 1px 5px;
+ box-shadow: inset $gray_90 1px 1px, transparentize(black, 0.8) 1px 1px,
+ transparentize(black, 0.6) 0 1px 5px;
}
// same as outer shadow, but higher
@mixin dropdown_shadow {
- box-shadow:
- inset transparentize(white, 0.95) 1px 1px,
- transparentize(black, 0.8) 1px 1px,
- transparentize(black, 0.6) 5px 5px 10px;
+ box-shadow: inset $gray_90 1px 1px, transparentize(black, 0.8) 1px 1px,
+ transparentize(black, 0.6) 5px 5px 10px;
}
@mixin row_shadow() {
&:not(:last-child) {
- box-shadow: transparentize(white, 0.95) 0 1px,
- inset transparentize(black, 0.8) 0 -1px;
+ box-shadow: $gray_90 0 1px, inset transparentize(black, 0.8) 0 -1px;
}
&:only-child {
@@ -28,10 +22,8 @@
}
@mixin inner_shadow() {
- box-shadow:
- inset transparentize(white, 0.95) -1px -1px,
- inset transparentize(black, 0.9) 1px 1px,
- inset transparentize(black, 0.9) 0 0 10px;
+ box-shadow: inset $gray_90 -1px -1px, inset transparentize(black, 0.9) 1px 1px,
+ inset transparentize(black, 0.9) 0 0 10px;
}
@mixin inner_shadow_active() {
@@ -39,12 +31,12 @@
transition: background-color 250ms;
&:hover {
- background: transparentize(white, 0.95);
+ background: $gray_90;
}
}
@mixin input_shadow() {
- box-shadow: inset transparentize(white, 0.92) 0 -1px, inset transparentize(black, 0.8) 0 1px;
+ box-shadow: inset $gray_90 0 -1px, inset transparentize(black, 0.8) 0 1px;
}
@mixin modal_mixin() {
@@ -66,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;
@@ -104,7 +96,7 @@
@content;
& > * {
- margin: $gap*0.5 0 !important;
+ margin: $gap * 0.5 0 !important;
&:first-child {
margin-top: 0 !important;
@@ -117,27 +109,27 @@
}
@mixin can_backdrop {
- @supports ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))) {
+ @supports (
+ (-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))
+ ) {
@content;
}
}
-@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;
}
}
@mixin title_with_line {
font: $font_14_semibold;
text-transform: uppercase;
- color: transparentize(white, 0.3);
+ color: $gray_25;
flex-direction: row;
display: flex;
align-items: center;
@@ -149,7 +141,7 @@
& > :global(.line) {
flex: 1;
height: 2px;
- background: transparentize(white, 0.95);
+ background: $gray_90;
}
}
@@ -162,12 +154,10 @@
}
@mixin sidebar {
- @include blur();
+ @include blur;
}
-@mixin sidebar_content(
- $width: 400px,
-) {
+@mixin sidebar_content($width: 400px) {
height: 100%;
box-sizing: border-box;
display: flex;
@@ -187,15 +177,6 @@
cursor: pointer;
}
-@mixin lab_gradient {
- background: linear-gradient(darken($dark_blue, 0%), darken($blue, 30%));
-}
-
-@mixin hero_gradient {
- $color: mix($wisegreen, $content_bg, 30%);
- background: linear-gradient(170deg, lighten($color, 10%), $color);
-}
-
@mixin flow_grid {
width: 100%;
box-sizing: border-box;
@@ -244,8 +225,12 @@
@mixin appear {
@keyframes __appear {
- from { opacity: 0; }
- to { opacity: 1; }
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
}
animation: __appear 0.25s forwards;
@@ -264,17 +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;
@@ -292,25 +266,25 @@
[data-popper-placement*='bottom'] & {
border-width: 0 10px 10px 10px;
- border-color: transparent transparent lighten($menu_bg, 6%) transparent;
+ border-color: transparent transparent $content_bg_lightest transparent;
top: -10px;
}
[data-popper-placement*='top'] & {
border-width: 10px 10px 0 10px;
- border-color: lighten($menu_bg, 6%) transparent transparent transparent;
+ border-color: $content_bg_lightest transparent transparent transparent;
bottom: -10px;
}
[data-popper-placement*='right'] & {
border-width: 10px 10px 10px 0;
- border-color: transparent lighten($menu_bg, 6%) transparent transparent;
+ border-color: transparent $content_bg_lightest transparent transparent;
left: -10px;
}
[data-popper-placement*='left'] & {
border-width: 10px 0 10px 10px;
- border-color: transparent transparent transparent lighten($menu_bg, 6%);
+ border-color: transparent transparent transparent $content_bg_lightest;
right: -10px;
}
-}
\ No newline at end of file
+}
diff --git a/src/styles/common/markdown.module.scss b/src/styles/common/markdown.module.scss
index e75898b1..30629d2c 100644
--- a/src/styles/common/markdown.module.scss
+++ b/src/styles/common/markdown.module.scss
@@ -1,29 +1,29 @@
-@use "sass:math";
+@use 'sass:math';
-@import "../variables";
+@import '../variables';
$margin: 1em;
.wrapper {
blockquote {
- border-left: 4px solid $wisegreen;
+ border-left: 4px solid $color_primary;
padding: $margin * 0.5 0;
margin-bottom: $margin;
- color: $wisegreen;
+ color: $color_primary;
font-size: 0.9em;
- background-color: transparentize($wisegreen, 0.9);
+ background-color: $content_bg_success;
p {
margin: 0 $margin;
}
- &+blockquote {
+ & + blockquote {
margin-top: -$margin;
}
}
pre {
- background-color: transparentize($blue, 0.9);
+ background-color: $content_bg_info;
font-family: monospace;
font-size: 0.8em;
border-radius: 2px;
@@ -34,18 +34,19 @@ $margin: 1em;
margin-bottom: $margin;
code {
- color: transparentize($wisegreen, 0.1);
+ color: $gray_50;
font-family: monospace;
white-space: pre-wrap;
}
}
- p, li {
+ p,
+ li {
code {
- background-color: transparentize($blue, 0.9);
+ background-color: $content_bg_info;
padding: 2px 4px;
border-radius: 0.3em;
- color: transparentize($wisegreen, 0.1);
+ color: $gray_25;
font-size: 0.8em;
}
}
@@ -55,7 +56,11 @@ $margin: 1em;
margin-bottom: $margin;
}
- h5, h4, h3, h2, h1 {
+ h5,
+ h4,
+ h3,
+ h2,
+ h1 {
line-height: 1.2em;
margin: $margin * 1.5 0 $margin * 0.5;
diff --git a/src/styles/themes/_default.scss b/src/styles/themes/_default.scss
new file mode 100644
index 00000000..ebe869d9
--- /dev/null
+++ b/src/styles/themes/_default.scss
@@ -0,0 +1,81 @@
+// palette (use inside)
+
+$_yellow: #ffd60f;
+$_dark_blue: #592071;
+$_blue: #582cd0;
+$_green: #00d2b9;
+$_wisegreen: #007962;
+$_olive: #6cb337;
+$_red: #ff3344;
+$_orange: #ff7549;
+$_lightgreen: lighten(adjust_hue(#007962, -30deg), 10%);
+$_soft_blue: #3c75ff;
+$_brown: #23201f;
+
+@mixin apply {
+ :root {
+ // main definitions (move to --vars)
+ --color_primary: #{$_wisegreen};
+ --color_danger: #{$_red};
+ --color_online: #{$_olive};
+ --color_offline: #{$_red};
+ --color_link: #{$_red};
+ --color_like: #{$_red};
+ --color_flow: #{$_red};
+ --color_lab: #{$_blue};
+ --color_boris: #{$_wisegreen};
+
+ // gradients (move to --vars)
+ --danger_gradient: linear-gradient(165deg, #{$_orange} -50%, #{$_red} 150%);
+ --info_gradient: linear-gradient(170deg, #{$_blue}, #{$_dark_blue});
+ --warning_gradient: linear-gradient(
+ 165deg,
+ #{$_yellow} -50%,
+ #{$_red} 150%
+ );
+ --primary_gradient: linear-gradient(
+ 170deg,
+ #{$_lightgreen} -50%,
+ #{$_wisegreen} 150%
+ );
+ --magic_gradient: linear-gradient(
+ 260deg,
+ #{$_soft_blue} -50%,
+ #7b2653 150%
+ );
+ --global_loader_gradient: linear-gradient(
+ 90deg,
+ #{$_dark_blue},
+ #{$_soft_blue},
+ #{$_dark_blue}
+ );
+ --flow_gradient: var(--danger_gradient);
+ --lab_gradient: var(--info_gradient);
+
+ // backgrounds (move to --vars)
+ --content_bg: #{$_brown};
+ --content_bg_dark: #{darken($_brown, 2%)};
+ --content_bg_darker: #{darken($_brown, 4%)};
+ --content_bg_light: #{lighten($_brown, 2%)};
+ --content_bg_lighter: #{lighten($_brown, 4%)};
+ --content_bg_lightest: #{lighten($_brown, 6%)};
+
+ --content_bg_success: #{transparentize($_wisegreen, 0.7)};
+ --content_bg_info: #{transparentize($_blue, 0.5)};
+ --content_bg_danger: #{transparentize($_red, 0.5)};
+ --content_bg_backdrop: #{transparentize($_brown, 0.2)};
+
+ // white shades (move to --vars)
+ --white: white;
+ --gray_25: #{transparentize(white, 0.25)};
+ --gray_50: #{transparentize(white, 0.5)};
+ --gray_75: #{transparentize(white, 0.75)};
+ --gray_90: #{transparentize(white, 0.95)};
+
+ // page background
+ --page-background: url('/images/noise.png') 0% 0% #{$_brown};
+ --page-background-top: 600px 600px url('/images/noise_top.png') 0% 0%;
+ --boris-background: 50% 0 / cover no-repeat
+ url('../../sprites/boris_bg.svg');
+ }
+}
diff --git a/src/styles/themes/_horizon.scss b/src/styles/themes/_horizon.scss
new file mode 100644
index 00000000..f968cd33
--- /dev/null
+++ b/src/styles/themes/_horizon.scss
@@ -0,0 +1,92 @@
+// palette (use inside)
+
+$_yellow: #ffd60f;
+$_dark_blue: #592071;
+$_blue: #582cd0;
+$_green: #00d2b9;
+$_wisegreen: #007962;
+$_olive: #6cb337;
+$_red: #ff3344;
+$_orange: #ff7549;
+$_lightgreen: lighten(adjust_hue(#007962, -30deg), 10%);
+$_soft_blue: #7693d6;
+
+$_cold: #1c1e26;
+$_accent: #e95678;
+$_mandarine: #f09483;
+$_lemon: #fab795;
+$_ocean: #25b0bc;
+
+@mixin apply {
+ :root.theme-horizon {
+ // main definitions (move to --vars)
+ --color_primary: #{$_accent};
+ --color_danger: #{$_red};
+ --color_online: #{$_ocean};
+ --color_offline: #{$_mandarine};
+ --color_link: #{$_ocean};
+ --color_like: #{$_lemon};
+ --color_flow: #{$_red};
+ --color_lab: #{$_blue};
+ --color_boris: #{$_wisegreen};
+
+ // gradients (move to --vars)
+ --danger_gradient: linear-gradient(165deg, #{$_orange} -50%, #{$_red} 150%);
+ --info_gradient: linear-gradient(170deg, #{$_ocean}, #{$_soft_blue});
+
+ --warning_gradient: linear-gradient(
+ 165deg,
+ #{$_yellow} -50%,
+ #{$_red} 150%
+ );
+
+ --primary_gradient: linear-gradient(
+ 170deg,
+ #{$_mandarine} -150%,
+ #{$_accent} 100%
+ );
+
+ --magic_gradient: linear-gradient(
+ 260deg,
+ #{$_accent} -50%,
+ #{$_orange} 150%
+ );
+
+ --global_loader_gradient: linear-gradient(
+ 90deg,
+ #{$_lemon},
+ #{$_accent},
+ #{$_mandarine}
+ );
+ --flow_gradient: var(--primary_gradient);
+ --lab_gradient: var(--info_gradient);
+
+ // backgrounds (move to --vars)
+ --content_bg: #{$_cold};
+ --content_bg_dark: #{darken($_cold, 2%)};
+ --content_bg_darker: #{darken($_cold, 4%)};
+ --content_bg_light: #{lighten($_cold, 2%)};
+ --content_bg_lighter: #{lighten($_cold, 4%)};
+ --content_bg_lightest: #{lighten($_cold, 6%)};
+
+ --content_bg_success: #{transparentize($_accent, 0.7)};
+ --content_bg_info: #{transparentize($_lemon, 0.7)};
+ --content_bg_danger: #{transparentize($_red, 0.5)};
+ --content_bg_backdrop: #{transparentize($_cold, 0.2)};
+
+ // white shades (move to --vars)
+ --white: white;
+ --gray_25: #{transparentize(white, 0.25)};
+ --gray_50: #{transparentize(white, 0.5)};
+ --gray_75: #{transparentize(white, 0.75)};
+ --gray_90: #{transparentize(white, 0.95)};
+
+ // page background
+ --page-background: 50% 50% / cover no-repeat url('/images/horizon_bg.svg') #{darken(
+ $_cold,
+ 4%
+ )} fixed;
+ --page-background-top: none;
+ --boris-background: linear-gradient(#{$_ocean} -200%, transparent 50%);
+ }
+}
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index ad04f759..fcbb198b 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -15,7 +15,6 @@ $lab_gap: $gap * 2;
$lab_gap_mobile: $gap * 2;
$grid_line: 5px;
$content_width: $cell * 5 + $grid_line * 4;
-$spc: $gap * 2;
$comment_height: 72px;
$bar_height: 64px;
$page_top_offset: 32px;
@@ -24,7 +23,7 @@ $radius: 8px;
$cell_radius: $radius;
$panel_radius: $radius;
$dialog_radius: $radius * 2;
-$placeholder_bg: transparentize(white, 0.96);
+$placeholder_bg: $gray_90;
$info_height: 24px;
$limited_width: 940px;
@@ -33,13 +32,14 @@ $panel_size: 64px;
$node_title_height: $panel_size;
$upload_button_height: 52px;
-$shadow_depth_1: transparentize(black, 0.8) 0 1px, inset transparentize(white, 0.98) 0 1px;
-$shadow_depth_2: transparentize(black, 0.8) 0 2px, inset transparentize(white, 0.98) 0 1px;
+$shadow_depth_1: transparentize(black, 0.8) 0 1px, inset $gray_90 0 1px;
+$shadow_depth_2: transparentize(black, 0.8) 0 2px, inset $gray_90 0 1px;
$comment_shadow: $shadow_depth_2;
-$node_shadow: transparentize(black, 0.8) 0 2px, transparentize(black, 0.8) 0 2px 4px;
+$node_shadow: transparentize(black, 0.8) 0 2px,
+ transparentize(black, 0.8) 0 2px 4px;
$tag_height: 26px;
$login_dialog_padding: $gap $gap 30px $gap;
-$sidebar_border: transparentize(white, 0.95);
+$sidebar_border: $gray_90;
diff --git a/src/utils/providers/ThemeProvider.tsx b/src/utils/providers/ThemeProvider.tsx
new file mode 100644
index 00000000..4064a824
--- /dev/null
+++ b/src/utils/providers/ThemeProvider.tsx
@@ -0,0 +1,59 @@
+import React, {
+ createContext,
+ FC,
+ useContext,
+ useEffect,
+ useMemo,
+ useState,
+} from 'react';
+
+import { keys } from 'ramda';
+
+import { Theme } from '~/constants/themes';
+
+interface ProvidersProps {}
+
+const ThemeContext = createContext({
+ theme: Theme.Default,
+ setTheme: (theme: Theme) => {},
+});
+
+const themeClass: Record = {
+ [Theme.Default]: '',
+ [Theme.Horizon]: 'theme-horizon',
+};
+
+const ThemeProvider: FC = ({ children }) => {
+ const [theme, setTheme] = useState(Theme.Default);
+ const value = useMemo(() => ({ theme, setTheme }), [theme, setTheme]);
+
+ useEffect(() => {
+ const stored = localStorage.getItem('vault__theme');
+ if (!stored || !keys(themeClass).includes(stored as Theme)) {
+ return;
+ }
+ setTheme(stored as Theme);
+ }, []);
+
+ useEffect(() => {
+ if (!themeClass[theme]) {
+ return;
+ }
+
+ document.documentElement.classList.add(themeClass[theme]);
+
+ try {
+ localStorage.setItem('vault__theme', theme);
+ } catch {}
+
+ return () => document.documentElement.classList.remove(themeClass[theme]);
+ }, [theme]);
+
+ return (
+ {children}
+ );
+};
+
+export const useTheme = () => useContext(ThemeContext);
+
+export { ThemeProvider };
diff --git a/src/utils/toast/styles.module.scss b/src/utils/toast/styles.module.scss
index 7f316f02..9e2012d0 100644
--- a/src/utils/toast/styles.module.scss
+++ b/src/utils/toast/styles.module.scss
@@ -1,4 +1,4 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
div.toast {
@include outer_shadow;
@@ -11,13 +11,13 @@ div.toast {
}
div.toast.error {
- background: $red_gradient_alt;
+ background: $danger_gradient;
}
div.toast.success {
- background: $green_gradient;
+ background: $primary_gradient;
}
div.toast.info {
- background: $cyan_gradient;
+ background: $magic_gradient;
}