From 1b37ed4bbf59570b9c802cd2f4249740f74e4069 Mon Sep 17 00:00:00 2001
From: muerwre <gotham48@gmail.com>
Date: Sat, 27 Jul 2019 06:51:03 +0700
Subject: [PATCH] colors

---
 src/components/main/SidePane/index.tsx    | 31 +++++++++++++++--------
 src/components/main/SidePane/styles.scss  | 12 +++++++--
 src/components/node/NodeRelated/index.tsx |  2 +-
 src/components/node/Tag/styles.scss       |  7 +++--
 src/styles/colors.scss                    |  6 +++++
 webpack.config.js                         |  4 +--
 6 files changed, 42 insertions(+), 20 deletions(-)

diff --git a/src/components/main/SidePane/index.tsx b/src/components/main/SidePane/index.tsx
index ef8a8197..1d1276d7 100644
--- a/src/components/main/SidePane/index.tsx
+++ b/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)` }}>
-      <div
-        className={classNames(styles.group, 'logo')}
-      >
-        <div>V</div>
-      </div>
+      <Group>
+        <div className={classNames(styles.btn, "orange")}><div>‹</div></div>
 
-      <div className={styles.group}>
-        <div className={styles.btn} />
-        <div className={styles.btn} />
-        <div className={styles.btn} />
-        <div className={styles.btn} />
-      </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} />
 
diff --git a/src/components/main/SidePane/styles.scss b/src/components/main/SidePane/styles.scss
index 28d98ac3..7a6d3be7 100644
--- a/src/components/main/SidePane/styles.scss
+++ b/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 {
diff --git a/src/components/node/NodeRelated/index.tsx b/src/components/node/NodeRelated/index.tsx
index 98bf666f..e83b82bd 100644
--- a/src/components/node/NodeRelated/index.tsx
+++ b/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>
diff --git a/src/components/node/Tag/styles.scss b/src/components/node/Tag/styles.scss
index 2a4a76db..0c8b65f3 100644
--- a/src/components/node/Tag/styles.scss
+++ b/src/components/node/Tag/styles.scss
@@ -17,16 +17,15 @@
   }
 
   &:global(.red) {
-    background: $red;
+    background: $red_gradient;
   }
 
   &:global(.blue) {
-    background: $blue;
-    //color: transparentize(black, 0.4);
+    background: $blue_gradient;
   }
 
   &:global(.green) {
-    background: $green;
+    background: $green_gradient;
     color: transparentize(black, 0.4);
   }
 
diff --git a/src/styles/colors.scss b/src/styles/colors.scss
index 6056f6c8..a815eab0 100644
--- a/src/styles/colors.scss
+++ b/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;
 
diff --git a/webpack.config.js b/webpack.config.js
index 9d5d11a7..a5d8c241 100644
--- a/webpack.config.js
+++ b/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' },