styles and back button

src/components/main/SidePane/index.tsx

@@ -55,9 +55,7 @@ export const SidePane: FC<IProps> = ({
 
       <div className={styles.flexy} />
 
-      <div className={styles.group}>
-        <div className={styles.btn} />
-      </div>
+      <div className={styles.btn}>S</div>
     </div>
   );
 };

src/components/main/SidePane/styles.scss

@@ -54,11 +54,15 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  font: $font_24_semibold;
+  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;
   }
 }
 

src/components/node/NodePanel/styles.scss

@@ -59,8 +59,9 @@
     right: 4px;
     width: 24px;
     height: 52px;
-    background: $olive;
+    background: $green_gradient;
     box-shadow: transparentize(black, 0.8) 4px 2px;
+    border-radius: 2px;
   }
 }
 

src/components/node/NodeRelated/styles.scss

@@ -1,6 +1,7 @@
 .wrap {
   padding: $gap;
   background: transparentize(black, 0.8);
+  border-radius: $panel_radius;
 }
 
 .grid {
@@ -21,7 +22,7 @@
 .title {
   font: $font_14_semibold;
   text-transform: uppercase;
-  color: transparentize(white, 0.7);
+  color: transparentize(white, 0.3);
   flex-direction: row;
   display: flex;
   align-items: center;

src/containers/examples/ImageExample/index.tsx

@@ -84,9 +84,7 @@ const ImageExample: FC<IProps> = () => (
 
                 <TagField>
                   <Tag title="Избранный" feature="red" />
-                  <Tag title="Some another tag" feature="blue" />
                   <Tag title="Плэйлист" feature="green" />
-                  <Tag title="/Revelations" feature="olive" />
                   <Tag title="Tag" />
                   <Tag title="Фотография" feature="black" />
                   <Tag title="С музыкой" feature="black" />
@@ -96,8 +94,6 @@ const ImageExample: FC<IProps> = () => (
                   title="First album"
                 />
 
-                <div />
-
                 <NodeRelated
                   title="Second album"
                 />

src/styles/colors.scss

@@ -5,10 +5,11 @@ $blue: #3ca1ff;
 $green: #00d2b9;
 $olive: #8bc12a;
 $orange: #ff7549;
+$grass: #41800d;
 
-$red_gradient: linear-gradient(170deg, $orange, $red);
+$red_gradient: linear-gradient(170deg, $orange -50%, $red 150%);
 $blue_gradient: linear-gradient(170deg, $green, $dark_blue);
-$green_gradient: linear-gradient(170deg, $green, $olive);
+$green_gradient: linear-gradient(170deg, $olive -20%, $grass 120%);
 $purple_gradient: linear-gradient(170deg, $red, $dark_blue);
 //$color_yellow: complement($color_red);
 //$color_yellow: yellow;

src/styles/variables.scss

@@ -30,6 +30,7 @@ $font: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helve
 $font_48_semibold: $semibold 48px $font;
 $font_24_bold: $bold 24px $font;
 $font_24_semibold: $bold 24px $font;
+$font_24_medium: $medium 24px $font;
 $font_24_regular: $regular 24px $font;
 $font_18_regular: $regular 18px $font;
 $font_18_extra_light: $extra_light 18px $font;