#23 changed promoted button appearance

src/components/editors/EditorPublicSwitch/index.tsx

@@ -1,7 +1,8 @@
-import React, { FC, useCallback, useEffect, useRef } from 'react';
+import React, { FC, useCallback } from 'react';
 import { IEditorComponentProps } from '~/redux/node/types';
-import { usePopper } from 'react-popper';
 import { Button } from '~/components/input/Button';
+import { Icon } from '~/components/input/Icon';
+import styles from './styles.module.scss';
 
 interface IProps extends IEditorComponentProps {}
 
@@ -17,9 +18,8 @@ const EditorPublicSwitch: FC<IProps> = ({ data, setData }) => {
 
   return (
     <Button
-      color={data.is_promoted ? 'primary' : 'secondary'}
+      color={data.is_promoted ? 'primary' : 'lab'}
       type="button"
-      iconLeft={data.is_promoted ? 'waves' : 'lab'}
       size="giant"
       label={
         data.is_promoted
@@ -27,8 +27,17 @@ const EditorPublicSwitch: FC<IProps> = ({ data, setData }) => {
           : 'Видно только сотрудникам в лаборатории'
       }
       onClick={onChange}
+      className={styles.button}
       round
-    />
+    >
+      {data.is_promoted ? (
+        <Icon icon="waves" size={24} />
+      ) : (
+        <div className={styles.lab_wrapper}>
+          <Icon icon="lab" size={24} />
+        </div>
+      )}
+    </Button>
   );
 };
 

src/components/editors/EditorPublicSwitch/styles.module.scss

@@ -1,63 +1,63 @@
 @import "src/styles/variables";
 
-.wrap {
-  @include outer_shadow();
-  @include editor_round_button();
-
-  transition: all 0.5s;
-  fill: $content_bg;
-  background-color: $olive;
-
-  &.promoted {
-    background-color: lighten($content_bg, 4%);
-    fill: $red;
+@keyframes move_1 {
+  0% {
+    transform: scale(0) translate(0, 0);
+    opacity: 0;
   }
 
-  &:hover {
+  50% {
+    transform: scale(1)  translate(5px, -5px);
     opacity: 1;
+  }
 
-    .tooltip {
-      opacity: 1;
+  100% {
+    transform: scale(1.2) translate(-5px, -10px);
+    opacity: 0;
+  }
+}
+
+
+@keyframes move_2 {
+  0% {
+    transform: scale(0) translate(0, 0);
+    opacity: 0;
+  }
+
+  50% {
+    transform: scale(1)  translate(-5px, -5px);
+    opacity: 1;
+  }
+
+  100% {
+    transform: scale(1.6) translate(5px, -10px);
+    opacity: 0;
+  }
+}
+
+.button {
+
+}
+
+.lab_wrapper {
+  position: relative;
+  bottom: -2px;
+
+  .button:hover & {
+    &:before,&:after {
+      content: ' ';
+      position: absolute;
+      top: 1px;
+      left: 10px;
+      width: 2px;
+      height: 2px;
+      box-shadow: white 0 0 0 2px;
+      border-radius: 4px;
+      animation: move_1 0.5s infinite linear;
+    }
+
+    &:after {
+      animation: move_2 0.5s -0.25s infinite linear;
     }
   }
-
-  input {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-    opacity: 0;
-    z-index: 1;
-    cursor: pointer;
-  }
-}
-
-.icon {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.tooltip {
-  border-radius: 2px;
-  background: darken($content_bg, 6%);
-  padding: $gap;
-  position: absolute;
-  font: $font_12_semibold;
-  bottom: 100%;
-  right: 0;
-  transform: translate(0, -$gap);
-  text-align: center;
-  touch-action: none;
-  pointer-events: none;
-  opacity: 0;
-  width: 100px;
-  user-select: none;
-  transition: all 0.1s;
 }

src/components/input/Button/index.tsx

@@ -11,7 +11,7 @@ type IButtonProps = DetailedHTMLProps<
   HTMLButtonElement
 > & {
   size?: 'mini' | 'normal' | 'big' | 'giant' | 'micro' | 'small';
-  color?: 'primary' | 'secondary' | 'outline' | 'link' | 'gray';
+  color?: 'primary' | 'secondary' | 'outline' | 'link' | 'gray' | 'lab';
   iconLeft?: IIcon;
   iconRight?: IIcon;
   title?: string;

src/components/input/Button/styles.module.scss

@@ -36,7 +36,7 @@
 
   filter: grayscale(0);
 
-  transition: opacity 0.25s, filter 0.25s, box-shadow 0.25s;
+  transition: opacity 0.25s, filter 0.25s, box-shadow 0.25s, background-color 0.5s;
   opacity: 0.8;
 
   @include outer_shadow();
@@ -77,12 +77,6 @@
     }
   }
 
-  &:global(.red) {
-    fill: $red;
-    stroke: $red;
-    color: $red;
-  }
-
   &:global(.stretchy) {
     flex: 1;
   }
@@ -123,14 +117,6 @@
     padding-right: $gap;
   }
 
-  &.primary {
-    background: $red_gradient;
-  }
-
-  &.secondary {
-    background: $green_gradient;
-  }
-
   &.outline {
     background: transparent;
     box-shadow: inset transparentize(white, 0.8) 0 0 0 2px;
@@ -231,3 +217,15 @@
   width: 20px;
   height: 20px;
 }
+
+.primary {
+  background: $red;
+}
+
+.secondary {
+  background: $wisegreen;
+}
+
+.lab {
+  background: $blue;
+}