1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-07-11 02:38:29 +07:00

Removed unused colors

This commit is contained in:
Fedor Katurov 2022-08-13 18:42:22 +07:00
parent ba1823ee8a
commit f6b76055d3
106 changed files with 563 additions and 546 deletions
src
components
auth
login/LoginDialogButtons
oauth/LoginSocialRegisterButtons
restore
bars
boris
BorisContactItem
BorisStatsGitCard
BorisSuperpowers
BorisUIDemo
charts/StatsCountdownCard
comment
CommentAvatar
CommentContent
CommentDistance
CommentForm
CommentMenu
CommentTextBlock
common
CornerMenu
LoadingProgress
ScrollHelperBottom
containers
dialogs
editors
EditorButtons
EditorConfirmClose
EditorPublicSwitch
EditorUploadButton
EditorUploadCoverButton
VideoEditor
flow
FlowCellMenu
FlowRecentItem
FlowSearchResults
FlowSwiperHero
HeroPlaceholder
input
lab
main
media/AudioPlayer
menu
HorizontalMenu
SeparatedMenu
VerticalMenu
node
CommendDeleted
MenuButton
NodeAuthorBlock
NodeDeletedBadge
NodeImageBlockPlaceholder
NodeImageSwiperBlock
NodeNoComments
NodeRelatedItem
NodeTitle
notifications/NotificationBubble
profile
Message
ProfileAccountsError
ProfileAvatar
ProfileSidebarSettings
sidebar/SidebarStack
tags
TagAutocomplete
TagAutocompleteRow
TagWrapper
upload
AudioUpload
ImageUpload
UploadDropzone
containers
boris/BorisSidebar
dialogs
LoginDialog
LoginSocialRegisterDialog
RestorePasswordDialog
RestoreRequestDialog
flow/FlowStamp
lab/LabStats
main/Header
profile
ProfileAccounts
ProfileMessages
ProfilePageLeft
ProfileQuickInfo
settings
SettingsNotes
UserSettingsView
sidebars/TagSidebar
layouts
styles

View file

@ -1,4 +1,4 @@
@import "src/styles/variables";
@import 'src/styles/variables';
.footer {
padding: $gap;

View file

@ -8,7 +8,7 @@ interface IProps {}
const LoginSocialRegisterButtons: FC<IProps> = () => (
<div className={styles.wrap}>
<Button color="secondary">Впустите меня!</Button>
<Button>Впустите меня!</Button>
</div>
);

View file

@ -1,4 +1,4 @@
@import "src/styles/variables";
@import 'src/styles/variables';
.error_shade {
@include outer_shadow();
@ -19,17 +19,17 @@
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;
}
}

View file

@ -18,9 +18,7 @@ const RestoreSent: VFC<RestoreSentProps> = ({ onClose }) => (
<div />
<Button color="secondary" onClick={onClose}>
Отлично!
</Button>
<Button onClick={onClose}>Отлично!</Button>
</Group>
);

View file

@ -1,4 +1,4 @@
@import "src/styles/variables";
@import 'src/styles/variables';
.shade {
@include outer_shadow();
@ -19,9 +19,9 @@
text-transform: uppercase;
font: $font_18_semibold;
text-align: center;
color: $wisegreen;
color: $color_primary;
svg {
fill: $wisegreen;
fill: $color_primary;
}
}

View file

@ -20,9 +20,7 @@ const RestoreSuccess: VFC<RestoreSuccessProps> = ({ username, onClick }) => (
<div />
<Button color="secondary" onClick={onClick}>
Ура!
</Button>
<Button onClick={onClick}>Ура!</Button>
</Group>
);

View file

@ -1,4 +1,4 @@
@import "src/styles/variables";
@import 'src/styles/variables';
.shade {
@include outer_shadow();
@ -19,9 +19,9 @@
text-transform: uppercase;
font: $font_18_semibold;
text-align: center;
color: $wisegreen;
color: $color_primary;
svg {
fill: $wisegreen;
fill: $color_primary;
}
}

View file

@ -12,7 +12,7 @@
display: flex;
border-radius: $radius $radius 0 0;
align-items: center;
background: lighten($content_bg, 6%);
background: $content_bg_lightest;
position: absolute;
top: 0;
left: 0;
@ -45,7 +45,7 @@
svg {
width: 32px;
height: 32px;
fill: darken(white, 50%);
fill: $gray_50;
stroke: none;
}
}
@ -68,7 +68,7 @@
}
.title {
color: darken(white, 50%);
color: $gray_50;
font: $font_14_semibold;
white-space: nowrap;
overflow: hidden;
@ -88,7 +88,7 @@
left: 0;
width: 100%;
height: 2px;
background: darken(white, 50%);
background: $gray_50;
position: absolute;
border-radius: 2px;
opacity: 0.5;
@ -100,7 +100,7 @@
left: 0;
width: 100%;
height: 6px;
background: darken(white, 50%);
background: $gray_50;
position: absolute;
border-radius: 2px;
}

View file

@ -1,4 +1,4 @@
@import "src/styles/variables";
@import 'src/styles/variables';
.wrap {
position: fixed;
@ -14,7 +14,7 @@
}
.button {
background: $red_gradient;
background: $danger_gradient;
width: $bar_height;
height: $bar_height;
border-radius: $bar_height * 0.5;
@ -34,12 +34,12 @@
}
.lab & {
background: $blue_gradient;
background: $info_gradient;
}
}
.panel {
background: lighten($content_bg, 4%);
background: $content_bg_lighter;
position: absolute;
bottom: 0;
z-index: 1;

View file

@ -1,4 +1,4 @@
@import "src/styles/variables.scss";
@import 'src/styles/variables.scss';
.item {
display: flex;
@ -6,7 +6,7 @@
align-items: center;
justify-content: stretch;
text-decoration: none;
color: darken(white, 50%);
color: $gray_50;
padding: $gap;
min-height: 42px;
}

View file

@ -1,4 +1,4 @@
@import "src/styles/variables";
@import 'src/styles/variables';
.wrap {
padding: $gap * 0.5 0;
@ -12,7 +12,7 @@
.time {
font: $font_12_regular;
line-height: 17px;
color: transparentize(white, 0.7)
color: $gray_75;
}
.subject {
@ -30,7 +30,7 @@
text-transform: uppercase;
&.open {
color: $red;
color: $color_danger;
}
&.closed {

View file

@ -1,4 +1,4 @@
@import "src/styles/variables";
@import 'src/styles/variables';
.wrap {
display: grid;
@ -16,5 +16,5 @@
.subtitle {
font: $font_12_regular;
color: transparentize(white, 0.5);
color: $gray_50;
}

View file

@ -18,8 +18,8 @@ const BorisUIDemo: FC<IProps> = () => {
<div className={markdown.wrapper}>
<h1>UI</h1>
<p>
Простая демонстрация элементов интерфейса. Используется, в основном, как подсказка при
разработке
Простая демонстрация элементов интерфейса. Используется, в основном,
как подсказка при разработке
</p>
<h2>Инпуты</h2>
@ -27,8 +27,18 @@ const BorisUIDemo: FC<IProps> = () => {
<form autoComplete="off">
<Group>
<InputText title="Обычный инпут" handler={setText} value={text} />
<InputText title="Инпут с ошибкой" error="Ошибка" handler={setText} value={text} />
<InputText title="Пароль" type="password" handler={setText} value={text} />
<InputText
title="Инпут с ошибкой"
error="Ошибка"
handler={setText}
value={text}
/>
<InputText
title="Пароль"
type="password"
handler={setText}
value={text}
/>
</Group>
</form>
@ -38,7 +48,6 @@ const BorisUIDemo: FC<IProps> = () => {
<Group horizontal className={styles.sample}>
<Button>Primary</Button>
<Button color="secondary">Secondary</Button>
<Button color="outline">Outline</Button>
<Button color="gray">Gray</Button>
<Button color="link">Link</Button>

View file

@ -1,4 +1,4 @@
@import "src/styles/variables.scss";
@import 'src/styles/variables.scss';
.card {
flex: 3;
@ -6,7 +6,7 @@
position: relative;
z-index: 1;
padding: 20px 30px;
background-color: lighten($content_bg, 4%);
background-color: $content_bg_lighter;
}
.sample {

View file

@ -1,4 +1,4 @@
@import "src/styles/variables";
@import 'src/styles/variables';
.content {
width: 100%;
@ -7,7 +7,7 @@
align-items: center;
justify-content: center;
font: $font_18_semibold;
color: transparentize(white, 0.5);
color: $gray_50;
}
span.val {

View file

@ -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;

View file

@ -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: transparentize($color_danger, $amount: 0.5);
}
}
@ -95,7 +95,7 @@
.date {
background: transparentize($color: $content_bg, $amount: 0.2);
border-radius: $radius 0 $radius 0;
color: transparentize(white, 0.2);
color: $gray_25;
}
}
@ -111,7 +111,7 @@
color: transparentize($color: white, $amount: 0.8);
padding: 0 6px 2px;
z-index: 2;
background: $comment_bg;
background: $content_bg_light;
border-radius: 4px;
pointer-events: none;
touch-action: none;

View file

@ -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;

View file

@ -1,4 +1,4 @@
@import "src/styles/variables";
@import 'src/styles/variables';
.wrap {
display: flex;
@ -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;

View file

@ -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;
}
}

View file

@ -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;

View file

@ -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;
}
}

View file

@ -1,4 +1,4 @@
@import "src/styles/variables";
@import 'src/styles/variables';
@keyframes spin {
0% {
@ -34,5 +34,5 @@
transform: translate(-50%, 0);
padding: 2px 10px;
border-radius: 10px;
background: $cyan_gradient;
background: $magic_gradient;
}

View file

@ -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);

View file

@ -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,7 @@
right: 0;
bottom: 0;
animation: highlight 1s 0.5s forwards;
background: transparentize($wisegreen, 0.7);
background: transparentize($color_primary, 0.7);
border-radius: $radius;
pointer-events: none;
touch-action: none;
@ -73,14 +83,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;

View file

@ -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: $color_danger_slate;
}
}
}
@ -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 $color_danger_slate 0 0 0 2px;
}
&.with_title {

View file

@ -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: transparentize($content_bg_darker, 0.5);
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,11 @@
width: 100%;
height: 40px;
pointer-events: none;
background: linear-gradient(0deg, $red 50%, transparentize($red, 1));
background: linear-gradient(
0deg,
$color_danger 50%,
transparentize($color_danger, 1)
);
display: flex;
align-items: center;
justify-content: center;

View file

@ -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;
}
}

View file

@ -32,7 +32,7 @@ const EditorButtons: FC = () => {
<Button
title={isTablet ? undefined : 'Сохранить'}
iconRight="check"
color={values.is_promoted ? 'primary' : 'lab'}
color={values.is_promoted ? 'danger' : 'info'}
disabled={isSubmitting}
type="submit"
/>

View file

@ -1,4 +1,4 @@
@import "src/styles/variables.scss";
@import 'src/styles/variables.scss';
@keyframes appear {
0% {
@ -37,6 +37,6 @@
.subtitle {
font: $font_12_medium;
color: darken(white, 50%);
color: $gray_50;
max-width: 300px;
}

View file

@ -12,14 +12,14 @@ interface IProps extends IEditorComponentProps {}
const EditorPublicSwitch: FC<IProps> = () => {
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 (
<Button
color={values.is_promoted ? 'primary' : 'lab'}
color={values.is_promoted ? 'danger' : 'info'}
type="button"
size="giant"
label={

View file

@ -31,18 +31,25 @@ const EditorUploadButton: FC<IProps> = ({
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 ? 'danger' : 'info';
return (
<Button type="button" round size="giant" className={styles.wrap} label={label} color={color}>
<Button
type="button"
round
size="giant"
className={styles.wrap}
label={label}
color={color}
>
<Icon icon={icon} size={24} />
<input type="file" onChange={onInputChange} accept={accept} multiple />
</Button>

View file

@ -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: transparentize($color: $content_bg_lighter, $amount: 0);
&:hover {
svg {
fill: $red;
fill: $color_danger;
}
}

View file

@ -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;
}
}

View file

@ -1,8 +1,8 @@
@import "src/styles/variables";
@import 'src/styles/variables';
.dropdown {
@include outer_shadow;
@include blur($red, 15px, 0.3);
@include blur($color_danger, 15px, 0.3);
width: 100%;
height: 100%;

View file

@ -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;
@ -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;

View file

@ -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;
}

View file

@ -163,5 +163,5 @@ img.preview {
display: flex;
align-items: center;
justify-content: center;
color: transparentize(white, 0.95);
color: $gray_90;
}

View file

@ -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;

View file

@ -1,7 +1,7 @@
@import "src/styles/variables";
@import 'src/styles/variables';
.icon {
fill: $red;
fill: $color_danger;
stroke: none;
//path {

View file

@ -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,16 @@ 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'
| 'lab'
| 'outline-white'
| 'flat';
iconLeft?: IIcon;
iconRight?: IIcon;
title?: string;
@ -65,7 +80,7 @@ const Button: FC<IButtonProps> = memo(
children,
iconOnly,
round,
]
],
);
const loaderSize = useMemo(() => {
@ -79,9 +94,23 @@ const Button: FC<IButtonProps> = memo(
return (
<Tippy content={label || ''} disabled={!label}>
<button className={computedClassName} {...props}>
{iconLeft && <Icon icon={iconLeft} size={20} key={0} className={styles.icon_left} />}
{iconLeft && (
<Icon
icon={iconLeft}
size={20}
key={0}
className={styles.icon_left}
/>
)}
{!!title ? <span>{title}</span> : children}
{iconRight && <Icon icon={iconRight} size={20} key={2} className={styles.icon_right} />}
{iconRight && (
<Icon
icon={iconRight}
size={20}
key={2}
className={styles.icon_right}
/>
)}
{loading && (
<div className={styles.loading}>
<LoaderCircle size={loaderSize} />
@ -90,7 +119,7 @@ const Button: FC<IButtonProps> = memo(
</button>
</Tippy>
);
}
},
);
export { Button };

View file

@ -25,7 +25,7 @@
cursor: pointer;
margin: 0;
background: $primary;
background: $color_primary;
border-radius: $radius;
fill: white;
@ -82,7 +82,7 @@
&:global(.disabled),
&:global(.grey) {
background: transparentize(white, 0.9);
background: $gray_90;
color: white;
}
@ -118,26 +118,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 {
@ -234,12 +234,17 @@
.primary {
@include outer_shadow;
background: $red_gradient_alt;
background: $color_primary_gradient;
}
.secondary {
.danger {
@include outer_shadow;
background: $red;
background: $danger_gradient;
}
.info {
@include outer_shadow;
background: $info_gradient;
}
.lab {
@ -248,8 +253,8 @@
.flat {
box-shadow: none;
background: $comment_bg;
color: darken(white, 20%);
background: $content_bg_light;
color: $gray_25;
}
.loading {

View file

@ -9,20 +9,20 @@
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: transparentize($color_danger, 0.5);
}
&:global(.warning) {
color: white;
background: transparentize($red, 0.5);
background: transparentize($color_danger, 0.5);
}
&:global(.primary) {
color: white;
background: transparentize($red, 0.5);
background: transparentize($color_danger, 0.5);
}
}

View file

@ -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;

View file

@ -17,11 +17,12 @@
}
&.has_error {
box-shadow: inset $red 0 0 0 1px;
box-shadow: inset $color_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: $color_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: $color_danger;
}
}

View file

@ -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,11 +45,11 @@
}
&.primary {
background-color: $wisegreen;
background-color: $color_primary;
}
&.secondary {
background-color: transparentize(white, 0.85);
background-color: $gray_90;
}
&.lab {
@ -57,7 +57,7 @@
}
&.danger {
background-color: $red;
background-color: $color_danger;
}
&.monochrome {

View file

@ -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;
}
}

View file

@ -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;
}

View file

@ -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 {
@ -56,9 +55,7 @@
: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;
transparentize(black, 0.7) 0 5px 5px, $gray_90 0 -1px 2px, $gray_90 0 -1px;
}
@include tablet {

View file

@ -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;
}

View file

@ -1,4 +1,4 @@
@import "src/styles/variables";
@import 'src/styles/variables';
.footer {
display: flex;
@ -8,7 +8,7 @@
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;

View file

@ -1,4 +1,4 @@
@import "src/styles/variables";
@import 'src/styles/variables';
.wrap {
position: relative;
@ -30,7 +30,7 @@
background: white;
border-radius: $radius;
margin-left: ($gap + 2px) !important;
background: 50% 50% no-repeat $wisegreen;
background: 50% 50% no-repeat $color_primary;
display: flex;
align-items: center;
justify-content: center;

View file

@ -67,7 +67,7 @@
opacity: 1;
font-size: 12px;
padding-right: 140px;
color: transparentize(white, 0.7);
color: $gray_75;
}
}
@ -92,7 +92,7 @@
position: absolute;
height: 10px;
border-radius: 5px;
background: transparentize(white, 0.95);
background: $gray_90;
width: 100%;
top: 5px;
left: 0;
@ -100,7 +100,7 @@
}
.bar {
background: $green_gradient;
background: $color_primary_gradient;
position: absolute;
height: 10px;
left: 0;

View file

@ -1,4 +1,4 @@
@import "src/styles/variables.scss";
@import 'src/styles/variables.scss';
.menu {
@include inner_shadow;
@ -21,9 +21,9 @@
.item {
flex: 0 0 auto;
padding: $gap * 0.5 $gap $gap * 0.5 $gap;
padding: $gap * 0.5 $gap $gap * 0.5 $gap;
fill: currentColor;
color: darken(white, 50%);
color: $gray_50;
transition: color 0.25s;
cursor: pointer;
border-radius: $radius;
@ -46,15 +46,15 @@
color: white;
&.green {
background: $green_gradient;
background: $color_primary_gradient;
}
&.orange {
background: $red_gradient;
background: $danger_gradient;
}
&.yellow {
background: $yellow_gradient;
background: $warning_gradient;
}
}
}

View file

@ -1,5 +1,5 @@
@import "src/styles/mixins";
@import "src/styles/variables";
@import 'src/styles/mixins';
@import 'src/styles/variables';
.menu {
flex: 0;
@ -27,14 +27,14 @@
position: absolute;
width: 3px;
height: 16px;
background: darken($content_bg, 1%);
background: $content_bg_darker;
display: flex;
top: 5px;
right: -$gap * 2 - 2px;
border-radius: 2px;
@include tablet {
right : -$gap - 1px;
right: -$gap - 1px;
}
}
}

View file

@ -1,5 +1,5 @@
@import "src/styles/variables";
@import "src/styles/mixins";
@import 'src/styles/variables';
@import 'src/styles/mixins';
.menu {
border-radius: $radius;
@ -30,11 +30,11 @@ a.item {
padding: $gap;
font: $font_16_semibold;
cursor: pointer;
background-color: transparentize($secondary, 1);
background-color: transparentize($color_primary, 1);
transition: background-color 0.25s;
&:hover {
background-color: transparentize($secondary, 0.5);
background-color: transparentize($color_primary, 0.5);
}
&:first-child {

View file

@ -1,4 +1,4 @@
@import "src/styles/variables";
@import 'src/styles/variables';
.wrap {
display: flex;
@ -15,9 +15,9 @@
}
.button {
color: $red !important;
color: $color_danger !important;
svg {
fill: $red !important;
fill: $color_danger !important;
}
}

View file

@ -1,4 +1,4 @@
@import "src/styles/variables";
@import 'src/styles/variables';
.button {
fill: white;
@ -24,6 +24,6 @@
.description {
font: $font_12_regular;
color: transparentize(white, 0.6);
color: $gray_75;
white-space: nowrap;
}

View file

@ -1,10 +1,10 @@
@import "src/styles/variables.scss";
@import 'src/styles/variables.scss';
div.block {
@include inner_shadow_active;
cursor: pointer;
background: $inset_bg;
background: linear-gradient(135deg, $content_bg_dark, $content_bg);
padding: $gap;
border-radius: $radius;
display: flex;

View file

@ -1,10 +1,10 @@
@import "src/styles/variables";
@import 'src/styles/variables';
.badge {
padding: $gap;
text-align: center;
border-radius: $radius;
color: $red;
color: $color_danger;
padding: $gap * 4 $gap;
text-transform: uppercase;
font: $font_18_semibold;

View file

@ -1,4 +1,4 @@
@import "src/styles/variables";
@import 'src/styles/variables';
.placeholder {
height: 320px;
@ -11,6 +11,6 @@
justify-content: center;
svg {
fill: transparentize(white, 0.95);
fill: $gray_90;
}
}

View file

@ -1,4 +1,4 @@
@import "src/styles/variables.scss";
@import 'src/styles/variables.scss';
.wrapper {
border-radius: $radius;
@ -15,7 +15,7 @@
left: 50%;
bottom: $gap * 2;
transform: translate(-50%, 0);
background: darken($content_bg, 4%);
background: $content_bg_darker;
width: auto;
padding: 5px 10px;
border-radius: 10px;
@ -82,7 +82,6 @@
}
}
}
}
.slide.slide {
@ -127,9 +126,7 @@
: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;
transparentize(black, 0.7) 0 5px 5px, $gray_90 0 -1px 2px, $gray_90 0 -1px;
}
@include tablet {

View file

@ -1,4 +1,4 @@
@import "src/styles/variables";
@import 'src/styles/variables';
.wrap {
user-select: none;
@ -49,7 +49,7 @@
transform: translate(-50%, -50%);
font: $font_18_semibold;
text-transform: uppercase;
color: darken(white, 75%);
color: $gray_75;
height: 20px;
margin-top: 0 !important;
text-align: center;

View file

@ -1,7 +1,7 @@
@import "src/styles/variables";
@import 'src/styles/variables';
.item {
background: lighten($content_bg, 2%) 50% 50% no-repeat;
background: $content_bg_light 50% 50% no-repeat;
padding-bottom: 100%;
border-radius: $cell_radius;
cursor: pointer;
@ -29,7 +29,8 @@ div.thumb {
}
}
.letters, .title {
.letters,
.title {
@include outer_shadow;
position: absolute;
@ -41,7 +42,7 @@ div.thumb {
width: 100%;
height: 100%;
font: $font_24_semibold;
color: transparentize(white, 0.5);
color: $gray_50;
border-radius: $cell_radius;
}
@ -53,7 +54,7 @@ div.thumb {
justify-content: flex-start;
word-break: break-word;
overflow: hidden;
color: transparentize(white, 0.3);
color: $gray_25;
.large & {
font: $font_14_semibold;

View file

@ -8,13 +8,13 @@
justify-content: center;
svg {
fill: darken(white, 50%);
fill: $gray_50;
transition: fill 0.25s;
}
&:hover {
svg {
fill: $red;
fill: $color_danger;
}
}
@ -75,7 +75,7 @@
.name {
font: $font_12_regular;
color: transparentize(white, 0.5);
color: $gray_50;
text-transform: lowercase;
@include tablet {
@ -89,7 +89,7 @@
display: flex;
align-items: center;
justify-content: center;
fill: transparentize(white, 0.5);
fill: $gray_50;
}
.panel {
@ -134,16 +134,16 @@
opacity: 1;
svg {
fill: $red;
fill: $color_danger;
}
.like_count {
color: $red;
color: $color_danger;
}
}
&:hover {
fill: $red;
fill: $color_danger;
animation: pulse 0.75s infinite;
.like_count {
@ -159,7 +159,7 @@
bottom: 0;
opacity: 1;
transition: opacity 0.25s, color 0.25s;
background: $node_bg;
background: $content_bg_dark;
padding: 0 3px;
border-radius: 10px;
z-index: 3;

View file

@ -1,6 +1,6 @@
@import "src/styles/variables";
@import 'src/styles/variables';
$notification_color: darken($content_bg, 2%);
$notification_color: $content_bg_dark;
@keyframes appear {
0% {

View file

@ -1,7 +1,7 @@
@import "src/styles/variables";
@import 'src/styles/variables';
$incoming_color: transparentize($wisegreen, 0.7);
$outgoing_color: $comment_bg;
$incoming_color: transparentize($color_primary, 0.7);
$outgoing_color: $content_bg_light;
.message {
align-items: flex-end !important;
@ -18,7 +18,7 @@ $outgoing_color: $comment_bg;
height: 0;
border-style: solid;
border-width: 20px 0 0 20px;
border-color: transparent transparent transparent $comment_bg;
border-color: transparent transparent transparent $content_bg_light;
bottom: 0;
right: 24px;
}
@ -88,12 +88,12 @@ $outgoing_color: $comment_bg;
}
.restore {
color: $red;
fill: $red;
color: $color_danger;
fill: $color_danger;
}
.deleted {
background: mix($red, $content_bg, 50%);
background: mix($color_danger, $content_bg, 50%);
border-radius: $radius $radius $radius 0;
padding: $gap * 0.5;
z-index: 2;

View file

@ -1,4 +1,4 @@
@import "src/styles/variables";
@import 'src/styles/variables';
.wrap {
position: absolute;
@ -15,7 +15,7 @@
box-sizing: border-box;
border-radius: $radius;
@include blur($red);
@include blur($color_danger);
}
.title {

View file

@ -14,7 +14,12 @@ export interface ProfileAvatarProps {
onChangePhoto: (file: File) => void;
}
const ProfileAvatar: FC<ProfileAvatarProps> = ({ photo, onChangePhoto, canEdit, size }) => {
const ProfileAvatar: FC<ProfileAvatarProps> = ({
photo,
onChangePhoto,
canEdit,
size,
}) => {
const onInputChange = useCallback(
async (event: ChangeEvent<HTMLInputElement>) => {
if (!event.target.files?.length) {
@ -23,10 +28,12 @@ const ProfileAvatar: FC<ProfileAvatarProps> = ({ 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 (
<div
@ -38,7 +45,15 @@ const ProfileAvatar: FC<ProfileAvatarProps> = ({ photo, onChangePhoto, canEdit,
}}
>
{canEdit && <input type="file" onInput={onInputChange} />}
{canEdit && <Button iconLeft="photo_add" round iconOnly className={styles.can_edit} />}
{canEdit && (
<Button
color="info"
iconLeft="photo_add"
round
iconOnly
className={styles.button}
/>
)}
</div>
);
};

View file

@ -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;

View file

@ -47,9 +47,7 @@ const ProfileSidebarSettings: FC<IProps> = () => {
Отмена
</Button>
<Button color="secondary" type="submit">
Сохранить
</Button>
<Button type="submit">Сохранить</Button>
</div>
</Form>
</SettingsProvider>

View file

@ -1,4 +1,4 @@
@import "src/styles/variables";
@import 'src/styles/variables';
.stack {
background: transparentize($content_bg, 0.2);
@ -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;

View file

@ -1,8 +1,12 @@
@import "src/styles/variables";
@import 'src/styles/variables';
@keyframes appear {
0% { opacity: 0 }
100% { opacity: 100 }
0% {
opacity: 0;
}
100% {
opacity: 100;
}
}
$row_height: 24px;
@ -16,7 +20,7 @@ $row_height: 24px;
right: -2px;
width: calc(100vw - 15px);
max-width: 300px;
background: darken($content_bg, 2%);
background: $content_bg_dark;
z-index: 10;
border-radius: 4px;
animation: appear 0.25s forwards;

View file

@ -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: transparentize($color_primary, 0.6);
}
&.right {
color: lighten($wisegreen, 4%);
color: lighten($color_primary, 4%);
opacity: 1;
}

View file

@ -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;
@ -42,29 +42,29 @@ $big: 1.2;
&:global(.is_editing) {
cursor: pointer;
background-color: lighten($tag_bg, 10%);
background-color: lighten($content_bg_light, 10%);
}
&:global(.red) {
background: $red_gradient;
background: $danger_gradient;
}
&:global(.blue) {
background: $blue_gradient;
background: $info_gradient;
}
&:global(.green) {
background: $green_gradient;
background: $color_primary_gradient;
}
&:global(.black) {
background: transparentize(black, 0.7);
box-shadow: none;
color: transparentize(white, 0.6);
color: $gray_75;
font: $font_14_medium;
.hole::after {
background: transparentize(white, 0.98);
background: $gray_90;
}
}
@ -124,8 +124,7 @@ $big: 1.2;
}
button.delete {
box-shadow: inset transparentize(white, 0.9) 1px 0,
transparentize(black, 0.7) -1px 0;
box-shadow: inset $gray_90 1px 0, transparentize(black, 0.7) -1px 0;
width: 24px;
height: $tag_height;
background: transparentize($content_bg, 0.75);

View file

@ -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;
}
}

View file

@ -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;
}
}

View file

@ -12,17 +12,18 @@
left: 0;
right: 0;
bottom: 0;
background: transparentize($wisegreen, 0.7);
background: transparentize($color_primary, 0.7);
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;
}

View file

@ -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<Props> = ({ isUser, stats, isLoading }) => (
<Group className={styles.stats__container}>
<Group className={styles.container}>
<div className={styles.super_powers}>
<SuperPowersToggle />
</div>
<BorisContacts />
<div className={styles.stats__wrap}>
<div className={styles.wrap}>
<BorisStats stats={stats} isLoading={isLoading} />
</div>
</Group>

View file

@ -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;
}

View file

@ -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%);
}
}

View file

@ -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;
}
}

View file

@ -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;
}
}

View file

@ -15,24 +15,24 @@ import styles from './styles.module.scss';
interface RestoreRequestDialogProps extends DialogComponentProps {}
const RestoreRequestDialog: VFC<RestoreRequestDialogProps> = ({ onRequestClose }) => {
const RestoreRequestDialog: VFC<RestoreRequestDialogProps> = ({
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(
() => (
<Group className={styles.buttons}>
<Button color="secondary">Восстановить</Button>
<Button>Восстановить</Button>
</Group>
),
[]
[],
);
const header = useMemo(() => <div className={styles.illustration} />, []);
@ -58,7 +58,8 @@ const RestoreRequestDialog: VFC<RestoreRequestDialogProps> = ({ onRequestClose }
/>
<div className={styles.text}>
Введите имя пользователя или адрес почты. Мы пришлем ссылку для сброса пароля.
Введите имя пользователя или адрес почты. Мы пришлем ссылку для
сброса пароля.
</div>
</Group>
</div>

View file

@ -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;
}
.illustration {

View file

@ -1,4 +1,4 @@
@import "../../../styles/variables";
@import '../../../styles/variables';
.wrap {
display: flex;
@ -25,7 +25,10 @@
left: 0;
height: 60px;
width: 100%;
background: linear-gradient(transparentize($content_bg, 1), $content_bg 90%);
background: linear-gradient(
transparentize($content_bg, 1),
$content_bg 90%
);
pointer-events: none;
touch-action: none;
@ -73,7 +76,7 @@
.search {
@include outer_shadow();
background: lighten($content_bg, 3%);
background: $content_bg_lighter;
padding: $gap;
border-radius: $radius;
}
@ -91,7 +94,6 @@
}
.toggles {
& > div {
padding: $gap;
font: $font_14_semibold;

View file

@ -1,4 +1,4 @@
@import "src/styles/variables.scss";
@import 'src/styles/variables.scss';
.title {
padding-bottom: $gap;
@ -16,7 +16,7 @@
@include outer_shadow;
border-radius: $radius;
background: $comment_bg;
background: $content_bg_light;
padding: $gap;
}

View file

@ -52,9 +52,10 @@ const Header: FC<HeaderProps> = 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<HeaderProps> = observer(() => {
)}
{!isUser && (
<Button
className={styles.user_button}
onClick={onLogin}
round
color="secondary"
>
<Button className={styles.user_button} onClick={onLogin} round>
ВДОХ
</Button>
)}

View file

@ -1,4 +1,4 @@
@import "../../../styles/variables";
@import '../../../styles/variables';
@keyframes appear {
from {
@ -86,7 +86,7 @@
white-space: nowrap;
&:hover {
color: $red;
color: $color_danger;
}
&::before {
@ -109,7 +109,7 @@
width: 6px;
height: 6px;
border-radius: 4px;
background: lighten($red, 10%);
background: lighten($color_danger, 10%);
right: 12px;
top: 6px;
transition: opacity 0.5s;
@ -127,7 +127,7 @@
}
&.boris::after {
background: lighten($wisegreen, 10%);
background: lighten($color_primary, 10%);
}
@include tablet {

View file

@ -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;

View file

@ -1,8 +1,8 @@
@import "src/styles/variables";
@import 'src/styles/variables';
.messages {
padding: $gap;
background: $node_bg;
background: $content_bg_dark;
display: flex;
flex-direction: column !important;
overflow: auto;
@ -28,7 +28,7 @@
div.warning.warning {
padding: $gap;
box-shadow: $red 0 0 0 2px;
box-shadow: $color_danger 0 0 0 2px;
border-radius: $radius;
font: $font_14_semibold;
margin-bottom: $gap * 2;

View file

@ -1,4 +1,4 @@
@import "src/styles/variables";
@import 'src/styles/variables';
.wrap {
@include outer_shadow;
@ -9,7 +9,7 @@
align-items: stretch;
justify-content: stretch;
flex-direction: column;
background: $comment_bg;
background: $content_bg_light;
height: 100%;
border-radius: $radius;
}
@ -39,7 +39,7 @@
font: $font_14_regular;
box-sizing: border-box;
width: 100%;
color: transparentize(white, 0.5);
color: $gray_50;
}
.description {

View file

@ -1,4 +1,4 @@
@import "src/styles/variables";
@import 'src/styles/variables';
.wrapper {
@include outer_shadow;
@ -35,10 +35,10 @@ div.top.top {
.status {
font: $font_12_regular;
margin-top: $gap;
color: darken(white, 50%);
color: $gray_50;
&.active {
color: $olive;
color: $color_online;
}
&::before {

View file

@ -25,7 +25,7 @@ const List = () => {
return (
<>
{notes.map(note => (
{notes.map((note) => (
<NoteCard
remove={() => onRemove(note.id)}
update={(text, callback) => update(note.id, text, callback)}
@ -59,7 +59,6 @@ const SettingsNotes: VFC<SettingsNotesProps> = () => {
onClick={() => setFormIsShown(true)}
size="mini"
iconRight="plus"
color="secondary"
>
Добавить
</Button>

View file

@ -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;
}

View file

@ -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;

View file

@ -1,4 +1,4 @@
@import "src/styles/variables";
@import 'src/styles/variables';
.wrap {
display: flex;
@ -7,7 +7,6 @@
flex-direction: column;
}
.grid {
padding: $gap;
}
@ -117,40 +116,6 @@
text-transform: uppercase;
margin-bottom: $gap * 2;
}
&__container {
background: darken($content_bg, 4%);
border-radius: 0 $radius $radius 0;
box-shadow: inset transparentize(mix($wisegreen, white, 60%), 0.6) 0 1px;
padding: $gap;
box-sizing: border-box;
flex: 0 0 auto;
@include tablet {
border-radius: 0;
}
}
&__title {
font: $font_12_semibold;
text-transform: uppercase;
opacity: 0.3;
margin-top: 16px !important;
}
&__about {
line-height: 1.4em;
p {
margin-bottom: $gap;
}
}
&__wrap {
@include tablet {
display: none;
}
}
}
.content {
@ -162,7 +127,3 @@
border-radius: 0;
}
}
.super_powers {
padding: $gap * 2 0;
}

View file

@ -1,6 +1,6 @@
@use "sass:math";
@use 'sass:math';
@import "src/styles/variables";
@import 'src/styles/variables';
.wrap {
max-width: 2000px;
@ -36,7 +36,7 @@ $cols: math.div($content_width, $cell);
grid-row-end: 2;
grid-column-start: 1;
grid-column-end: -1;
background: darken($content_bg, 2%);
background: $content_bg_dark;
border-radius: $radius;
display: flex;
align-items: center;
@ -53,7 +53,7 @@ $cols: math.div($content_width, $cell);
overflow: hidden;
position: relative;
@media(max-width: $flow_hide_recents) {
@media (max-width: $flow_hide_recents) {
grid-column-start: 1;
grid-row-end: span 1;
}

View file

@ -1,4 +1,4 @@
@import "src/styles/variables";
@import 'src/styles/variables';
.container {
width: 100vw;
@ -22,7 +22,7 @@
display: flex;
flex-direction: row;
margin-top: $page_top_offset;
background: darken($content_bg, 2%);
background: $content_bg_dark;
@include tablet {
margin-top: 0;

View file

@ -1,39 +1,47 @@
// palette
$red: #ff3344;
// palette (use inside)
$yellow: #ffd60f;
$dark_blue: #592071;
$blue: #582cd0;
$green: #00d2b9;
$olive: #8bc12a;
$orange: #ff7549;
$wisegreen: #007962;
$lightgreen: lighten(adjust_hue($wisegreen, -30deg), 10%);
$olive: #8bc12a;
$red: #ff3344;
$orange: #ff7549;
$color_primary: #007962;
$lightgreen: lighten(adjust_hue(#007962, -30deg), 10%);
$soft_blue: #3c75ff;
$color_danger_slate: mix(#ff3344, #23201f, 60%);
// main definitions
$primary: $red;
$secondary: $wisegreen;
// main definitions (move to --vars)
$color_primary: $wisegreen;
$color_danger: $red;
$color_online: $olive;
$color_link: $red;
$color_flow: $red;
$color_lab: $blue;
// gradients
$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%);
$cyan_gradient: linear-gradient(260deg, $soft_blue -50%, #7b2653 150%);
$red_gradient_alt: linear-gradient(170deg, #ff4545, #d2004c);
// gradients (move to --vars)
$danger_gradient: linear-gradient(165deg, $orange -50%, $color_danger 150%);
$info_gradient: linear-gradient(170deg, $blue, $dark_blue);
$warning_gradient: linear-gradient(165deg, $yellow -50%, $color_danger 150%);
$color_primary_gradient: linear-gradient(
170deg,
$lightgreen -50%,
$color_primary 150%
);
$magic_gradient: linear-gradient(260deg, $soft_blue -50%, #7b2653 150%);
$text_color: white;
$scroll_color: $red_gradient;
$scroll_inactive_opacity: 0.5;
// --color-base
// backgrounds (move to --vars)
$content_bg: #23201f;
$content_bg_dark: darken($content_bg, 2%);
$content_bg_darker: darken($content_bg, 4%);
$content_bg_light: lighten($content_bg, 2%);
$content_bg_lighter: lighten($content_bg, 4%);
$content_bg_lightest: lighten($content_bg, 6%);
// --color-base-light
$comment_bg: lighten($content_bg, 2%);
$tag_bg: lighten($content_bg, 2%);
$menu_bg: lighten($content_bg, 2%);
// --color-base-dark
$node_bg: darken($content_bg, 2%);
$inset_bg: linear-gradient(135deg, darken($content_bg, 2%), $content_bg);
// white shades (move to --vars)
$white: white;
$gray_25: mix($content_bg, white, 25%);
$gray_50: mix($content_bg, white, 50%);
$gray_75: mix($content_bg, white, 75%);
$gray_90: mix($content_bg, white, 92%);

Some files were not shown because too many files have changed in this diff Show more