added horizon theme

src/components/bars/SubmitBar/styles.module.scss

@@ -14,7 +14,7 @@
 }
 
 .button {
-  background: $danger_gradient;
+  background: $flow_gradient;
   width: $bar_height;
   height: $bar_height;
   border-radius: $bar_height * 0.5;

src/components/charts/BasicCurveChart/index.tsx

@@ -29,15 +29,18 @@ const BasicCurveChart: VFC<BasicCurveChartProps> = ({
         (acc, val, index) => [
           ...acc,
           index === 0
-            ? { x: borderGap, y: height - (val / max) * (height - gap * 2) - gap }
+            ? {
+                x: borderGap,
+                y: height - (val / max) * (height - gap * 2) - gap,
+              }
             : {
                 x: ((width - borderGap) / (items.length - 1)) * index,
                 y: height - (val / max) * (height - gap * 2) - gap,
               },
         ],
-        []
+        [],
       ),
-    [height, width, items, gap]
+    [height, width, items, gap],
   );
 
   if (!points.length) {
@@ -49,20 +52,29 @@ const BasicCurveChart: VFC<BasicCurveChartProps> = ({
       {...props}
       width="100%"
       height="100%"
-      viewBox={`0 0 ${width} ${height}`}
+      viewBox={`0 0 ${width} ${height * 1.05}`}
       preserveAspectRatio="none"
     >
       <defs>
         <filter id="f1" x="-50%" y="-50%" width="200%" height="200%">
           <feGaussianBlur in="SourceGraphic" stdDeviation="2" />
         </filter>
+
+        <filter id="brighter">
+          <feComponentTransfer>
+            <feFuncR type="linear" slope="3" />
+            <feFuncG type="linear" slope="3" />
+            <feFuncB type="linear" slope="3" />
+          </feComponentTransfer>
+        </filter>
       </defs>
 
       <path
         d={makeBezierCurve(points)}
         fill="none"
         x={0}
-        y={0}
+        y={gap / 2}
+        opacity={0.5}
         stroke={stroke}
         strokeWidth={2}
         strokeLinecap="round"
@@ -74,6 +86,7 @@ const BasicCurveChart: VFC<BasicCurveChartProps> = ({
         fill="none"
         x={0}
         y={0}
+        opacity={0.3}
         stroke={stroke}
         strokeWidth={2}
         strokeLinecap="round"
@@ -84,9 +97,11 @@ const BasicCurveChart: VFC<BasicCurveChartProps> = ({
         fill="none"
         x={0}
         y={0}
-        stroke={lighten(stroke, 0.1)}
+        stroke={stroke}
+        opacity={1}
         strokeWidth={1}
         strokeLinecap="round"
+        filter="url(#brighter)"
       />
     </svg>
   );

src/components/charts/StatsGraphCard/index.tsx

@@ -15,11 +15,19 @@ interface StatsGraphCardProps extends CardProps {
   right?: string | number;
 }
 
-const StatsGraphCard: VFC<StatsGraphCardProps> = ({ total, title, data, left, right }) => (
+const StatsGraphCard: VFC<StatsGraphCardProps> = ({
+  total,
+  title,
+  data,
+  left,
+  right,
+}) => (
   <StatsCard
     title={title}
     total={total}
-    background={<BasicCurveChart items={data} />}
+    background={
+      <BasicCurveChart items={data} stroke={'var(--color_primary)'} />
+    }
     className={styles.card}
   >
     <div className={styles.content}>

src/components/editors/EditorButtons/index.tsx

@@ -32,7 +32,7 @@ const EditorButtons: FC = () => {
         <Button
           title={isTablet ? undefined : 'Сохранить'}
           iconRight="check"
-          color={values.is_promoted ? 'danger' : 'info'}
+          color={values.is_promoted ? 'flow' : 'lab'}
           disabled={isSubmitting}
           type="submit"
         />

src/components/editors/EditorPublicSwitch/index.tsx

@@ -19,7 +19,7 @@ const EditorPublicSwitch: FC<IProps> = () => {
 
   return (
     <Button
-      color={values.is_promoted ? 'danger' : 'info'}
+      color={values.is_promoted ? 'flow' : 'lab'}
       type="button"
       size="giant"
       label={

src/components/editors/EditorUploadButton/index.tsx

@@ -39,7 +39,7 @@ const EditorUploadButton: FC<IProps> = ({
     [type, uploadFiles],
   );
 
-  const color = values.is_promoted ? 'danger' : 'info';
+  const color = values.is_promoted ? 'flow' : 'lab';
 
   return (
     <Button

src/components/input/Button/index.tsx

@@ -27,6 +27,7 @@ type IButtonProps = DetailedHTMLProps<
     | 'outline'
     | 'link'
     | 'gray'
+    | 'flow'
     | 'lab'
     | 'outline-white'
     | 'flat';

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

@@ -244,7 +244,11 @@
 }
 
 .lab {
-  background: $color_lab;
+  background: $lab_gradient;
+}
+
+.flow {
+  background: $flow_gradient;
 }
 
 .flat {

src/components/node/NodeTitle/styles.module.scss

@@ -96,16 +96,16 @@
     opacity: 1;
 
     svg {
-      fill: $color_danger;
+      fill: $color_like;
     }
 
     .like_count {
-      color: $color_danger;
+      color: $color_like;
     }
   }
 
   &:hover {
-    fill: $color_danger;
+    fill: $color_like;
     animation: pulse 0.75s infinite;
 
     .like_count {

src/components/tags/Tag/index.tsx

@@ -3,12 +3,6 @@ import React, { FC, FocusEventHandler, useCallback } from 'react';
 import { TagWrapper } from '~/components/tags/TagWrapper';
 import { ITag } from '~/types';
 
-const getTagFeature = (tag: Partial<ITag>) => {
-  if (tag?.title?.substr(0, 1) === '/') return 'green';
-
-  return '';
-};
-
 interface IProps {
   tag: Partial<ITag>;
   size?: 'normal' | 'big';
@@ -44,9 +38,11 @@ const Tag: FC<IProps> = ({
     onDelete(tag.ID!);
   }, [onDelete, tag]);
 
+  const isAlbumTag = tag?.title?.substr(0, 1) === '/';
+
   return (
     <TagWrapper
-      feature={getTagFeature(tag)}
+      color={isAlbumTag ? 'primary' : undefined}
       size={size}
       deletable={deletable}
       hoverable={hoverable}

src/components/tags/TagAutocompleteRow/index.tsx

@@ -9,16 +9,23 @@ import styles from './styles.module.scss';
 interface IProps {
   selected: boolean;
   title: string;
-  type: string;
+  type: 'enter' | 'right' | 'tag';
   onSelect: (val: string) => void;
 }
 
-const TagAutocompleteRow: FC<IProps> = ({ selected, type, title, onSelect }) => {
+const TagAutocompleteRow: FC<IProps> = ({
+  selected,
+  type,
+  title,
+  onSelect,
+}) => {
   const onClick = useCallback(() => onSelect(title), [title, onSelect]);
 
   return (
     <div
-      className={classNames(styles.row, styles[type], { [styles.selected]: selected })}
+      className={classNames(styles.row, styles[type], {
+        [styles.selected]: selected,
+      })}
       onClick={onClick}
     >
       <Icon icon={type} size={16} />

src/components/tags/TagAutocompleteRow/styles.module.scss

@@ -23,7 +23,7 @@ $row_height: 26px;
   }
 
   &.right {
-    color: lighten($color_primary, 4%);
+    color: $color_primary;
     opacity: 1;
   }
 

src/components/tags/TagWrapper/index.tsx

@@ -7,8 +7,8 @@ import { Icon } from '~/components/input/Icon';
 import styles from './styles.module.scss';
 
 interface IProps {
-  feature?: string;
   size?: string;
+  color?: 'primary' | 'danger' | 'info' | 'black' | 'default';
   deletable?: boolean;
   hoverable?: boolean;
   editing?: boolean;
@@ -19,8 +19,8 @@ interface IProps {
 }
 
 const TagWrapper: FC<IProps> = ({
+  color = 'default',
   children,
-  feature,
   size,
   deletable,
   hoverable,
@@ -32,7 +32,7 @@ const TagWrapper: FC<IProps> = ({
 }) => {
   const canBeDeleted = deletable && !editing && !hasInput;
   const onDeletePress = useCallback(
-    event => {
+    (event) => {
       if (!onDelete) {
         return;
       }
@@ -40,18 +40,23 @@ const TagWrapper: FC<IProps> = ({
       event.stopPropagation();
       onDelete();
     },
-    [onDelete]
+    [onDelete],
   );
 
   return (
     <div
-      className={classNames(styles.tag, feature, size, {
-        is_hoverable: hoverable,
-        is_editing: editing,
-        deletable: canBeDeleted,
-        input: hasInput,
-        clickable: onClick,
-      })}
+      className={classNames(
+        styles.tag,
+        size && styles[`size-${size}`],
+        styles[`color-${color}`],
+        {
+          [styles.hoverable]: hoverable,
+          [styles.editing]: editing,
+          [styles.deletable]: canBeDeleted,
+          [styles.input]: hasInput,
+          [styles.clickable]: onClick,
+        },
+      )}
       onClick={onClick}
     >
       <div className={styles.hole} />

src/components/tags/TagWrapper/styles.module.scss

@@ -25,39 +25,37 @@ $big: 1.2;
     z-index: 40;
   }
 
-  &:global(.big) {
-    height: $tag_height * $big;
-    font: $font_16_semibold;
-    border-radius: ($tag_height * $big * 0.5) 3px 3px ($tag_height * $big * 0.5);
-
-    .hole {
-      width: $tag_height * $big;
-      height: $tag_height * $big;
-    }
-  }
-
-  &:global(.is_hoverable) {
+  &.hoverable {
     cursor: pointer;
   }
 
-  &:global(.is_editing) {
+  &.editing {
     cursor: pointer;
-    background-color: lighten($content_bg_light, 10%);
+    background-color: $content_bg;
   }
 
-  &:global(.red) {
+  &.input {
+    color: transparent !important;
+    min-width: 100px;
+  }
+
+  &.clickable {
+    cursor: pointer;
+  }
+
+  &.color-danger {
     background: $danger_gradient;
   }
 
-  &:global(.blue) {
+  &.color-info {
     background: $info_gradient;
   }
 
-  &:global(.green) {
+  &.color-primary {
     background: $primary_gradient;
   }
 
-  &:global(.black) {
+  &.color-black {
     background: transparentize(black, 0.7);
     box-shadow: none;
     color: $gray_75;
@@ -68,13 +66,15 @@ $big: 1.2;
     }
   }
 
-  &:global(.input) {
-    color: transparent !important;
-    min-width: 100px;
-  }
+  &.size-big {
+    height: $tag_height * $big;
+    font: $font_16_semibold;
+    border-radius: ($tag_height * $big * 0.5) 3px 3px ($tag_height * $big * 0.5);
 
-  &:global(.clickable) {
-    cursor: pointer;
+    .hole {
+      width: $tag_height * $big;
+      height: $tag_height * $big;
+    }
   }
 
   input {
@@ -124,7 +124,8 @@ $big: 1.2;
 }
 
 button.delete {
-  box-shadow: inset $gray_90 1px 0, transparentize(black, 0.7) -1px 0;
+  box-shadow: inset transparentize(white, 0.95) 1px 0,
+    transparentize(black, 0.7) -1px 0;
   width: 24px;
   height: $tag_height;
   z-index: 24;