colors

src/components/main/SidePane/index.tsx

@@ -1,6 +1,7 @@
 import React, { FC, LegacyRef, ReactChild, useCallback, useEffect, useState } from 'react';
 import * as styles from './styles.scss';
 import classNames from 'classnames';
+import {Group} from "~/components/containers/Group";
 
 interface IProps {
 }
@@ -31,18 +32,26 @@ export const SidePane: FC<IProps> = ({
 
   return (
     <div className={styles.pane} style={{ transform: `translate(${left}px, 0px)` }}>
+      <Group>
+        <div className={classNames(styles.btn, "orange")}><div>‹</div></div>
+
         <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} />
 

src/components/main/SidePane/styles.scss

@@ -5,7 +5,7 @@
   top: 0;
   left: 0;
   box-sizing: border-box;
-  padding: $gap / 2 0;
+  padding: $gap 0;
   display: flex;
   flex-direction: column;
 }
@@ -13,7 +13,6 @@
 .group {
   width: 54px;
   border-radius: $panel_radius;
-  margin: ($gap / 2) 0;
   background: $panel_bg;
   box-sizing: border-box;
 
@@ -52,6 +51,15 @@
   box-shadow: inset transparentize(black, 0.9) 0 -1px, inset transparentize(white, 0.95) 0 1px;
   border-radius: $panel_radius;
   background: #191919;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font: $font_24_semibold;
+
+  &:global(.orange) {
+    background: linear-gradient(280deg, $red, $orange);
+    color: transparentize(black, 0.7);
+  }
 }
 
 .flexy {

src/components/node/NodeRelated/index.tsx

@@ -16,7 +16,7 @@ const NodeRelated: FC<IProps> = ({
     </div>
     <div className={styles.grid}>
       {
-        range(1,7).map(el => (<div className={styles.item} />))
+        range(1,7).map(el => (<div className={styles.item} key={el} />))
       }
     </div>
   </Group>

src/components/node/Tag/styles.scss

@@ -17,16 +17,15 @@
   }
 
   &:global(.red) {
-    background: $red;
+    background: $red_gradient;
   }
 
   &:global(.blue) {
-    background: $blue;
+    background: $blue_gradient;
-    //color: transparentize(black, 0.4);
   }
 
   &:global(.green) {
-    background: $green;
+    background: $green_gradient;
     color: transparentize(black, 0.4);
   }
 

src/styles/colors.scss

@@ -4,6 +4,12 @@ $dark_blue: #3c75ff;
 $blue: #3ca1ff;
 $green: #00d2b9;
 $olive: #8bc12a;
+$orange: #ff7549;
+
+$red_gradient: linear-gradient(170deg, $orange, $red);
+$blue_gradient: linear-gradient(170deg, $green, $dark_blue);
+$green_gradient: linear-gradient(170deg, $green, $olive);
+$purple_gradient: linear-gradient(170deg, $red, $dark_blue);
 //$color_yellow: complement($color_red);
 //$color_yellow: yellow;
 

webpack.config.js

@@ -61,7 +61,7 @@ module.exports = () => {
                 modules: true,
                 sourceMap: true,
                 importLoaders: 2,
-                localIdentName: '[name]__[local]__[hash:base64:5]'
+                localIdentName: '[folder]__[local]__[hash:base64:5]'
               }
             },
             { loader: 'less-loader' }
@@ -77,7 +77,7 @@ module.exports = () => {
                 modules: true,
                 sourceMap: true,
                 importLoaders: 2,
-                localIdentName: '[name]__[local]__[hash:base64:5]'
+                localIdentName: '[folder]__[local]__[hash:base64:5]'
               }
             },
             { loader: 'resolve-url-loader' },