Добавил тему "Веспера"

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;
 

src/components/main/SidePane/index.tsx

@@ -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<IProps> = () => {
-  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 (
-    <div className={styles.pane} style={{ transform: `translate(${left}px, 0px)` }}>
-      <Group>
-        <div className={classNames(styles.group, 'logo')}>
-          <div>V</div>
-        </div>
-
-        <div className={styles.btn}>
-          <div>P</div>
-        </div>
-
-        <div className={styles.btn}>
-          <div>F</div>
-        </div>
-
-        <div className={styles.group}>
-          <div className={styles.btn} />
-          <div className={styles.btn} />
-          <div className={styles.btn} />
-          <div className={styles.btn} />
-        </div>
-      </Group>
-
-      <div className={styles.flexy} />
-
-      <div className={styles.btn}>S</div>
-    </div>
-  );
-};

src/components/main/SidePane/styles.module.scss

@@ -1,72 +0,0 @@
-@import "src/styles/variables";
-
-.pane {
-  width: 54px;
-  height: 100%;
-  position: fixed;
-  top: 0;
-  left: 0;
-  box-sizing: border-box;
-  padding: $gap 0;
-  display: flex;
-  flex-direction: column;
-}
-
-.group {
-  width: 54px;
-  border-radius: $panel_radius;
-  background: $panel_bg;
-  box-sizing: border-box;
-
-  &:global(.logo) {
-    height: (54px * 1.5) + $gap * 0.5;
-    background: $red_gradient;
-    background-size: 140px;
-    font-weight: 600;
-    font-size: 14px;
-    text-align: center;
-    box-shadow: inset #111111 0 -1px, inset #222222 0 1px;
-    color: white;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font: $font_24_semibold;
-  }
-
-  .btn {
-    border-radius: 0;
-
-    &:first-child {
-      border-top-left-radius: $panel_radius;
-      border-top-right-radius: $panel_radius;
-    }
-
-    &:last-child {
-      border-bottom-left-radius: $panel_radius;
-      border-bottom-right-radius: $panel_radius;
-    }
-  }
-}
-.btn {
-  height: 54px;
-  box-shadow: inset transparentize(black, 0.9) 0 -1px, inset transparentize(white, 0.95) 0 1px;
-  border-radius: $panel_radius;
-  background: $side_pane_btn_color;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font: $font_24_medium;
-
-  &:global(.orange) {
-    background: linear-gradient(280deg, $red, $orange);
-    color: transparentize(black, 0.7);
-    width: 66px;
-    border-radius: 6px 0 0 6px;
-    position: relative;
-    left: 0;
-  }
-}
-
-.flexy {
-  flex: 1;
-}

src/components/main/UserButton/styles.module.scss

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