fixed lab header colors

src/components/lab/LabHead/index.tsx

@@ -18,6 +18,7 @@ const LabHead: FC<IProps> = ({ isLoading }) => {
     <Group className={styles.wrap} horizontal>
       <div className={styles.group}>
         <LabHeadItem
+          color="green"
           icon="recent"
           active={sort === LabNodesSort.New}
           isLoading={isLoading}
@@ -27,6 +28,7 @@ const LabHead: FC<IProps> = ({ isLoading }) => {
         </LabHeadItem>
 
         <LabHeadItem
+          color="orange"
           icon="hot"
           active={sort === LabNodesSort.Hot}
           isLoading={isLoading}
@@ -34,6 +36,16 @@ const LabHead: FC<IProps> = ({ isLoading }) => {
         >
           Популярные
         </LabHeadItem>
+
+        <LabHeadItem
+          color="yellow"
+          icon="star_full"
+          isLoading={isLoading}
+          active={sort === LabNodesSort.Heroic}
+          onClick={() => setSort(LabNodesSort.Heroic)}
+        >
+          Важные
+        </LabHeadItem>
       </div>
     </Group>
   );

src/components/lab/LabHead/styles.module.scss

@@ -1,20 +1,20 @@
 @import "src/styles/variables.scss";
 
 .wrap {
-  @include inner_shadow;
-
   border-radius: $radius;
-  background-color: $content_bg;
-  padding: 0 $gap * 0.5;
 }
 
 .group {
+  @include inner_shadow;
   display: flex;
+  background-color: $content_bg;
+  border-radius: $radius;
 
   @include tablet {
     flex-wrap: wrap;
-    align-items: center;
+    align-items: stretch;
     justify-content: center;
+    flex: 1;
   }
 
   & > * {

src/components/lab/LabHeadItem/index.tsx

@@ -10,12 +10,13 @@ import styles from './styles.module.scss';
 
 interface IProps {
   icon: string;
+  color: 'green' | 'orange' | 'yellow';
   isLoading?: boolean;
   active?: boolean;
   onClick?: () => void;
 }
 
-const LabHeadItem: FC<IProps> = ({ icon, children, isLoading, active, onClick }) => {
+const LabHeadItem: FC<IProps> = ({ icon, color, children, isLoading, active, onClick }) => {
   if (isLoading) {
     return (
       <Group horizontal className={styles.item} key="loading">
@@ -26,14 +27,13 @@ const LabHeadItem: FC<IProps> = ({ icon, children, isLoading, active, onClick })
   }
 
   return (
-    <Group
-      horizontal
-      className={classNames(styles.item, { [styles.active]: active })}
+    <div
+      className={classNames(styles.item, { [styles.active]: active }, styles[color])}
       onClick={onClick}
     >
       <Icon icon={icon} size={24} />
       <span className={styles.text}>{children}</span>
-    </Group>
+    </div>
   );
 };
 

src/components/lab/LabHeadItem/styles.module.scss

@@ -2,21 +2,52 @@
 
 .item {
   flex: 0 0 auto;
-  padding: $gap * 0.5;
+  padding: $gap * 0.5 $gap * 1.5 $gap * 0.5 $gap;
   fill: currentColor;
   color: darken(white, 50%);
   transition: color 0.25s;
   cursor: pointer;
+  border-radius: $radius;
+  min-height: 36px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
 
   &:hover {
     color: white;
   }
 
+  @include tablet {
+    flex-direction: column;
+    flex: 1;
+  }
+
   &.active {
-    color: $wisegreen;
+    @include outer_shadow;
+    color: white;
+
+    &.green {
+      background: $green_gradient;
+    }
+
+    &.orange {
+      background: $red_gradient;
+    }
+
+    &.yellow {
+      background: $yellow_gradient;
+    }
   }
 }
 
 .text {
-  font: $font_16_semibold;
+  font: $font_14_semibold;
+  text-transform: uppercase;
+  padding-bottom: 1px;
+  padding-left: $gap * 0.75;
+
+  @include tablet {
+    padding-top: $gap * 0.5;
+    font: $font_12_semibold;
+  }
 }