fixed inputs

src/components/boris/BorisUIDemo/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, useState } from 'react';
 import { Card } from '~/components/containers/Card';
 import styles from './styles.module.scss';
 import markdown from '~/styles/common/markdown.module.scss';
@@ -8,7 +8,10 @@ import { InputText } from '~/components/input/InputText';
 
 interface IProps {}
 
-const BorisUIDemo: FC<IProps> = () => (
+const BorisUIDemo: FC<IProps> = () => {
+  const [text, setText] = useState('');
+
+  return (
     <Card className={styles.card}>
       <div className={markdown.wrapper}>
         <h1>UI</h1>
@@ -20,9 +23,11 @@ const BorisUIDemo: FC<IProps> = () => (
         <h2>Инпуты</h2>
 
         <form autoComplete="off">
-        <InputText title="Обычный инпут" />
+          <Group>
-        <InputText title="Инпут с ошибкой" error="Ошибка" />
+            <InputText title="Обычный инпут" handler={setText} value={text} />
-        <InputText title="Пароль" type="password" />
+            <InputText title="Инпут с ошибкой" error="Ошибка" handler={setText} value={text} />
+            <InputText title="Пароль" type="password" handler={setText} value={text} />
+          </Group>
         </form>
 
         <h2>Кнопки</h2>
@@ -55,6 +60,7 @@ const BorisUIDemo: FC<IProps> = () => (
         </Group>
       </div>
     </Card>
-);
+  );
+};
 
 export { BorisUIDemo };

src/components/comment/LocalCommentFormTextarea/index.tsx

@@ -27,8 +27,7 @@ const LocalCommentFormTextarea: FC<IProps> = ({ setRef }) => {
       onKeyDown={onKeyDown}
       disabled={isSubmitting}
       placeholder={placeholder}
-      minRows={2}
+      ref={setRef}
-      setRef={setRef}
     />
   );
 };

src/components/editors/EditorButtons/index.tsx

@@ -5,6 +5,7 @@ import { InputText } from '~/components/input/InputText';
 import { Button } from '~/components/input/Button';
 import { Padder } from '~/components/containers/Padder';
 import { useNodeFormContext } from '~/hooks/node/useNodeFormFormik';
+import { Filler } from '~/components/containers/Filler';
 
 const EditorButtons: FC = () => {
   const { values, handleChange, isSubmitting } = useNodeFormContext();
@@ -14,6 +15,7 @@ const EditorButtons: FC = () => {
       <EditorActionsPanel />
 
       <Group horizontal>
+        <Filler>
           <InputText
             title="Название"
             value={values.title}
@@ -22,6 +24,7 @@ const EditorButtons: FC = () => {
             maxLength={256}
             disabled={isSubmitting}
           />
+        </Filler>
 
         <Button
           title="Сохранить"

src/components/editors/TextEditor/index.tsx

@@ -4,11 +4,13 @@ import { Textarea } from '~/components/input/Textarea';
 import { path } from 'ramda';
 import { NodeEditorProps } from '~/types/node';
 import { useNodeFormContext } from '~/hooks/node/useNodeFormFormik';
+import { useRandomPhrase } from '~/constants/phrases';
 
 type IProps = NodeEditorProps & {};
 
 const TextEditor: FC<IProps> = () => {
   const { values, setFieldValue } = useNodeFormContext();
+  const placeholder = useRandomPhrase('SIMPLE');
 
   const setText = useCallback((text: string) => setFieldValue('blocks', [{ type: 'text', text }]), [
     setFieldValue,
@@ -18,7 +20,7 @@ const TextEditor: FC<IProps> = () => {
 
   return (
     <div className={styles.wrap}>
-      <Textarea value={text} handler={setText} minRows={6} />
+      <Textarea value={text} handler={setText} minRows={6} placeholder={placeholder} />
     </div>
   );
 };

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

@@ -24,7 +24,7 @@
   margin: 0;
 
   background: $button_bg_color;
-  border-radius: $input_radius;
+  border-radius: $radius;
 
   fill: white;
   stroke: white;

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

@@ -9,7 +9,7 @@
     box-shadow: transparentize($color: #000000, $amount: 0.1) 1px 0;
 
     &:last-child {
-      border-radius: 0 $input_radius $input_radius 0;
+      border-radius: 0 $radius $radius 0;
 
       &.small {
         border-radius: 0 3px 3px 0;
@@ -17,7 +17,7 @@
     }
 
     &:first-child {
-      border-radius: $input_radius 0 0 $input_radius;
+      border-radius: $radius 0 0 $radius;
     }
   }
 }

src/components/input/Info/style.scss

@@ -2,7 +2,7 @@
 
 .container {
   min-height: $info_height;
-  border-radius: $input_radius;
+  border-radius: $radius;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -26,4 +26,3 @@
     background: transparentize($red, 0.5);
   }
 }
-

src/components/input/InputText/index.tsx

@@ -1,27 +1,24 @@
-import React, { ChangeEvent, FC, useCallback, useEffect, useState } from 'react';
+import React, { ChangeEvent, FC, useCallback, useState } from 'react';
 import classNames from 'classnames';
-import styles from '~/styles/common/inputs.module.scss';
-import { Icon } from '~/components/input/Icon';
 import { IInputTextProps } from '~/redux/types';
-import { LoaderCircle } from '~/components/input/LoaderCircle';
 import { useTranslatedError } from '~/hooks/data/useTranslatedError';
+import { InputWrapper } from '~/components/input/InputWrapper';
+import styles from './styles.module.scss';
+import { Icon } from '~/components/input/Icon';
+import { useFocusEvent } from '~/hooks/dom/useFocusEvent';
 
 const InputText: FC<IInputTextProps> = ({
-  wrapperClassName,
   className = '',
   handler,
   required = false,
-  status,
   title,
   error,
   value = '',
-  onRef,
+  suffix,
-  is_loading,
-  after,
   ...props
 }) => {
-  const [focused, setFocused] = useState(false);
+  const { focused, onFocus, onBlur } = useFocusEvent();
-  const [inner_ref, setInnerRef] = useState<HTMLInputElement | null>(null);
+  const [revealed, setRevealed] = useState(false);
 
   const onInput = useCallback(
     ({ target }: ChangeEvent<HTMLInputElement>) => {
@@ -34,69 +31,35 @@ const InputText: FC<IInputTextProps> = ({
     [handler]
   );
 
-  const onFocus = useCallback(() => setFocused(true), []);
+  const toggleRevealed = useCallback(() => setRevealed(!revealed), [setRevealed, revealed]);
-  const onBlur = useCallback(() => setFocused(false), []);
 
   const translatedError = useTranslatedError(error);
 
-  useEffect(() => {
+  const type = props.type === 'password' && revealed ? 'text' : props.type;
-    if (onRef) onRef(inner_ref);
-  }, [inner_ref, onRef]);
 
   return (
-    <div
+    <InputWrapper title={title} error={translatedError} focused={focused} notEmpty={!!value}>
-      className={classNames(styles.input_text_wrapper, wrapperClassName, {
+      <div className={classNames(styles.input, { [styles.has_error]: !!error })}>
-        [styles.required]: required,
-        [styles.focused]: focused,
-        [styles.has_status]: !!status || !!error,
-        [styles.has_value]: !!value,
-        [styles.has_error]: !!error,
-        [styles.has_loader]: is_loading,
-      })}
-    >
-      <div className={styles.input}>
         <input
-          type="text"
+          {...props}
-          onChange={onInput}
-          className={classNames(styles.input_text, className)}
           onFocus={onFocus}
           onBlur={onBlur}
+          type={type}
+          onChange={onInput}
+          className={classNames(styles.input_text, className)}
           value={value || ''}
-          ref={setInnerRef}
-          {...props}
         />
-      </div>
 
-      <div className={styles.status}>
+        {(!!suffix || props.type === 'password') && (
-        <div className={classNames(styles.success_icon, { active: status === 'success' })}>
+          <div className={styles.suffix}>
-          <Icon icon="check" size={20} />
+            {suffix}
-        </div>
+            {props.type === 'password' && (
-
+              <Icon icon="eye" onClick={toggleRevealed} className={styles.reveal} />
-        <div className={classNames(styles.error_icon, { active: status === 'error' || !!error })}>
+            )}
-          <Icon icon="close" size={20} />
-        </div>
-      </div>
-
-      <div className={styles.loader}>
-        <div className={classNames({ active: is_loading })}>
-          <LoaderCircle size={20} />
-        </div>
-      </div>
-
-      {title && (
-        <div className={classNames(styles.title)}>
-          <span>{title}</span>
           </div>
         )}
-
-      {!!translatedError && (
-        <div className={styles.error}>
-          <span>{translatedError}</span>
-        </div>
-      )}
-
-      {!!after && <div className={styles.after}>{after}</div>}
       </div>
+    </InputWrapper>
   );
 };
 

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

@@ -0,0 +1,39 @@
+@import "~/styles/variables";
+
+.input {
+  display: flex;
+  align-items: center;
+  color: inherit;
+
+  &.has_error {
+    color: $red;
+  }
+
+  input {
+    height: $input_height;
+    border: none;
+    flex: 1;
+    outline: none;
+    color: inherit;
+    min-width: 0;
+    background: none;
+    padding: 0 $gap 0 $gap;
+    font: $font_14_semibold;
+    border-radius: $radius;
+  }
+}
+
+.suffix {
+  fill: currentColor;
+  stroke: currentColor;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: $input_grey_color;
+  padding: 0 $gap;
+}
+
+.reveal {
+  cursor: pointer;
+}

src/components/input/InputWrapper/index.tsx

@@ -0,0 +1,26 @@
+import React, { FC } from 'react';
+import styles from './styles.module.scss';
+import classNames from 'classnames';
+
+interface InputWrapperProps {
+  title?: string;
+  error?: string;
+  focused: boolean;
+  notEmpty: boolean;
+}
+
+const InputWrapper: FC<InputWrapperProps> = ({ children, notEmpty, title, focused, error }) => (
+  <div
+    className={classNames(styles.content, {
+      [styles.has_error]: !!error,
+      [styles.focused]: focused,
+      [styles.not_empty]: notEmpty,
+    })}
+  >
+    {!!title && <div className={styles.title}>{title}</div>}
+    {children}
+    {!!error && <div className={styles.error}>{error}</div>}
+  </div>
+);
+
+export { InputWrapper };

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

@@ -0,0 +1,62 @@
+@import '~/styles/variables';
+
+.content {
+  @include inner_shadow;
+
+  background: $input_bg_color;
+  min-height: $input_height;
+  border-radius: $radius;
+  position: relative;
+  color: $input_text_color;
+  font: $input_font;
+
+  ::placeholder {
+    font: $input_placeholder_font;
+    color: $input-grey_color;
+    text-transform: uppercase;
+  }
+
+  &.has_error {
+    box-shadow: inset $red 0 0 0 1px;
+  }
+}
+
+.error {
+  position: absolute;
+  font: $font_12_semibold;
+  padding: 0 $gap / 2;
+  border-radius: 4px;
+  color: white;
+  background-color: $red;
+  bottom: 0;
+  right: $gap / 2;
+  transform: translate(0, 50%);
+  pointer-events: none;
+  touch-action: none;
+}
+
+.title {
+  position: absolute;
+  top: $gap;
+  left: $gap / 2;
+  padding: 0 $gap / 2;
+  transform: translate(0, 0) scale(1);
+  font: $input_font;
+  transition: transform 0.25s;
+  transform-origin: 0 50%;
+  border-radius: 6px;
+  background-color: $input_bg_color;
+  color: $input_grey_color;
+  text-transform: uppercase;
+  pointer-events: none;
+  touch-action: none;
+
+  .focused &, .not_empty & {
+    transform: translate(0, -100%) scale(0.75);
+  }
+
+  .focused.has_error &, .not_empty.has_error & {
+    color: white;
+    background-color: $red;
+  }
+}

src/components/input/Textarea/index.tsx

@@ -10,44 +10,35 @@ import React, {
 } from 'react';
 import classNames from 'classnames';
 import autosize from 'autosize';
+import styles from './styles.module.scss';
 
-import styles from '~/styles/common/inputs.module.scss';
+import { InputWrapper } from '~/components/input/InputWrapper';
-import { Icon } from '../Icon';
 
 type IProps = DetailedHTMLProps<
   TextareaHTMLAttributes<HTMLTextAreaElement>,
   HTMLTextAreaElement
 > & {
-  value: string;
-  placeholder?: string;
-  rows?: number;
-  className?: string;
   minRows?: number;
   maxRows?: number;
+  error?: string;
+  value: string;
+  className?: string;
   handler: (value: string) => void;
-  required?: boolean;
-  status?: 'error' | 'success' | '';
   title?: string;
-  seamless?: boolean;
-  setRef?: (r: HTMLTextAreaElement) => void;
 };
 
 const Textarea = memo<IProps>(
   ({
     placeholder,
-    className,
+    error,
     minRows = 3,
     maxRows = 30,
+    className,
     handler,
-    required = false,
     title = '',
-    status = '',
-    seamless,
     value,
-    setRef,
     ...props
   }) => {
-    const [rows, setRows] = useState(minRows || 1);
     const [focused, setFocused] = useState(false);
     const ref = useRef<HTMLTextAreaElement>(null);
 
@@ -60,17 +51,10 @@ const Textarea = memo<IProps>(
     const onBlur = useCallback(() => setFocused(false), [setFocused]);
 
     useEffect(() => {
-      const target = ref?.current;
+      if (!ref?.current) return;
-      if (!target) return;
+      autosize(ref.current);
-
+      return () => autosize.destroy(ref.current);
-      autosize(target);
+    }, [ref]);
-
-      if (setRef) {
-        setRef(target);
-      }
-
-      return () => autosize.destroy(target);
-    }, [ref, setRef]);
 
     useEffect(() => {
       if (!ref.current) return;
@@ -79,18 +63,13 @@ const Textarea = memo<IProps>(
     }, [value]);
 
     return (
-      <div
+      <InputWrapper title={title} error={error} focused={focused} notEmpty={!!value}>
-        className={classNames(styles.input_text_wrapper, styles.textarea_wrapper, {
-          [styles.required]: required,
-          [styles.focused]: focused,
-          [styles.has_status]: !!status,
-          [styles.has_value]: !!value,
-          [styles.seamless]: !!seamless,
-        })}
-      >
-        <div className={styles.input}>
         <textarea
-            rows={rows}
+          {...props}
+          style={{
+            ...props.style,
+            minHeight: minRows * 20,
+          }}
           value={value || ''}
           placeholder={placeholder}
           className={classNames(styles.textarea, className)}
@@ -98,29 +77,8 @@ const Textarea = memo<IProps>(
           ref={ref}
           onFocus={onFocus}
           onBlur={onBlur}
-            style={{
-              // maxHeight: maxRows * 20,
-              minHeight: minRows * 20,
-            }}
-            {...props}
         />
-        </div>
+      </InputWrapper>
-
-        <div className={styles.status}>
-          <div className={classNames({ active: status === 'success' })}>
-            <Icon icon="check" size={20} />
-          </div>
-          <div className={classNames({ active: status === 'error' })}>
-            <Icon icon="hide" size={20} />
-          </div>
-        </div>
-
-        {title && (
-          <div className={styles.title}>
-            <span>{title}</span>
-          </div>
-        )}
-      </div>
     );
   }
 );

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

@@ -0,0 +1,12 @@
+@import "~/styles/variables";
+
+.textarea {
+  background: none;
+  color: inherit;
+  font: inherit;
+  width: 100%;
+  border: none;
+  padding: $gap;
+  outline: none;
+  resize: none;
+}

src/components/main/Header/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, memo, useCallback, useEffect, useMemo, useState } from 'react';
+import React, { FC, useCallback, useEffect, useMemo, useState } from 'react';
 import { connect } from 'react-redux';
 import { push as historyPush } from 'connected-react-router';
 import { Link } from 'react-router-dom';

src/components/main/UserButton/styles.module.scss

@@ -68,7 +68,7 @@
 
 .user_button {
   align-items: center;
-  border-radius: $input_radius;
+  border-radius: $radius;
   font: $font_16_semibold;
   text-transform: uppercase;
   flex: 0 !important;

src/components/profile/MessageForm/index.tsx

@@ -70,7 +70,6 @@ const MessageFormUnconnected: FC<IProps> = ({
           handler={setText}
           minRows={1}
           maxRows={isEditing ? 15 : 5}
-          seamless
           onKeyDown={onKeyDown}
           disabled={is_sending_messages}
           autoFocus

src/components/profile/MessageForm/styles.module.scss

@@ -13,7 +13,7 @@
 .content {
   @include inner_shadow();
   background: $input_bg_color;
-  border-radius: $input_radius;
+  border-radius: $radius;
 }
 
 .buttons {

src/containers/flow/FlowStamp/index.tsx

@@ -62,7 +62,7 @@ const FlowStamp: FC<IProps> = ({ isFluid, onToggleLayout }) => {
           title="Поиск"
           value={searchText}
           handler={setSearchText}
-          after={after}
+          suffix={after}
           onKeyUp={onKeyUp}
         />
       </form>

src/containers/flow/FlowStamp/styles.module.scss

@@ -79,8 +79,6 @@
 }
 
 .search_icon {
-  fill: lighten($content_bg, 8%);
-  stroke: lighten($content_bg, 8%);
   stroke-width: 0.5;
   pointer-events: none;
   touch-action: none;
@@ -88,14 +86,8 @@
 
 .close_icon {
   cursor: pointer;
-  stroke: white;
   stroke-width: 0.5;
-  opacity: 0.5;
   transition: opacity 0.25s;
-
-  &:hover {
-    opacity: 0.7;
-  }
 }
 
 .toggles {

src/hooks/dom/useFocusEvent.ts

@@ -1,6 +1,6 @@
 import { useCallback, useState } from 'react';
 
-export const useFocusEvent = (initialState = false) => {
+export const useFocusEvent = (initialState = false, delay = 0) => {
   const [focused, setFocused] = useState(initialState);
 
   const onFocus = useCallback(
@@ -12,7 +12,7 @@ export const useFocusEvent = (initialState = false) => {
     },
     [setFocused]
   );
-  const onBlur = useCallback(() => setTimeout(() => setFocused(false), 300), [setFocused]);
+  const onBlur = useCallback(() => setTimeout(() => setFocused(false), delay), [delay]);
 
   return { focused, onBlur, onFocus };
 };

src/hooks/search/useSearch.ts

@@ -5,7 +5,6 @@ import { getSearchResults } from '~/redux/flow/api';
 import { KeyLoader } from 'swr';
 import { INode } from '~/redux/types';
 import { GetSearchResultsRequest } from '~/redux/flow/types';
-import { COMMENTS_DISPLAY } from '~/constants/node';
 
 const RESULTS_COUNT = 20;
 

src/pages/index.tsx

@@ -2,7 +2,6 @@ import React, { FC } from 'react';
 import { FlowLayout } from '~/layouts/FlowLayout';
 import { useFlow } from '~/hooks/flow/useFlow';
 import { FlowContextProvider } from '~/utils/context/FlowContextProvider';
-import { SearchProvider } from '~/utils/providers/SearchProvider';
 import { observer } from 'mobx-react';
 
 interface Props {}

src/redux/types.ts

@@ -21,18 +21,10 @@ export type IInputTextProps = DetailedHTMLProps<
   InputHTMLAttributes<HTMLInputElement>,
   HTMLInputElement
 > & {
-  wrapperClassName?: string;
   handler?: (value: string) => void;
-  required?: boolean;
   title?: string;
   error?: string;
-  can_negative?: boolean;
+  suffix?: ReactElement;
-  status?: string;
-  maskChar?: string;
-  mask?: string;
-  onRef?: (ref: any) => void;
-  is_loading?: boolean;
-  after?: ReactElement;
 };
 
 export type IIcon = string;

src/styles/_colors.scss

@@ -1,11 +1,9 @@
 // color 0, 0, 68 is pretty cool, btw
-// $red: #ff3344;
 $red: #ff3344;
 $yellow: #ffd60f;
 $dark_blue: #592071;
 $blue: #582cd0;
 $green: #00d2b9;
-//$green: #00503c;
 $olive: #8bc12a;
 $orange: #ff7549;
 $grass: #41800d;
@@ -46,7 +44,6 @@ $text_small: 14px;
 $text_big: 20px;
 $text_sign: 22px;
 
-$input_bg_color: darken($content_bg, 2%);
 $button_bg_color: $red_gradient;
 
 $inset_bg: linear-gradient(135deg, darken($content_bg, 2%), $content_bg);

src/styles/_fonts.scss

@@ -0,0 +1,41 @@
+
+$bold: 700;
+$semibold: 600;
+$regular: 400;
+$medium: 500;
+$light: 300;
+$extra_light: 200;
+
+
+$font: Montserrat, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
+'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+'Noto Color Emoji';
+
+$font_48_semibold: $semibold 48px $font;
+$font_48_bold: $bold 48px $font;
+$font_32_bold: $bold 32px $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_20_semibold: $bold 24px $font;
+$font_18_regular: $regular 18px $font;
+$font_18_extra_light: $extra_light 18px $font;
+$font_18_semibold: $semibold 18px $font;
+$font_16_regular: $regular 16px $font;
+$font_16_semibold: $semibold 16px $font;
+$font_16_medium: $medium 16px $font;
+$font_14_regular: $regular 14px $font;
+$font_14_semibold: $semibold 14px $font;
+$font_14_medium: $medium 14px $font;
+$font_12_medium: $medium 12px $font;
+$font_12_semibold: $semibold 12px $font;
+$font_12_bold: $bold 12px $font;
+$font_12_regular: $regular 12px $font;
+$font_10_regular: $regular 10px $font;
+$font_10_semibold: $semibold 10px $font;
+$font_8_regular: $regular 8px $font;
+$font_8_semibold: $semibold 8px $font;
+
+$font_cell_title: $font_24_semibold;
+$font_hero_title: $bold 40px $font;

src/styles/_inputs.scss

@@ -0,0 +1,11 @@
+@import "fonts";
+
+$input_height: 40px;
+$input_text_color: #bbbbbb;
+$input_shadow: inset transparentize(white, 0.9) 0 0 0 1px;
+$input_shadow_error: inset $red 0 0 0 1px;
+$input_shadow_filled: $input_shadow;
+$input_font: $font_16_semibold;
+$input_placeholder_font: $font_16_medium;
+$input_bg_color: darken($content_bg, 2%);
+$input_grey_color: #444444;

src/styles/_mixins.scss

@@ -0,0 +1,246 @@
+
+@mixin outer_shadow() {
+  box-shadow:
+          inset transparentize(white, 0.95) 1px 1px,
+          transparentize(black, 0.8) 1px 1px,
+          transparentize(black, 0.6) 0 1px 5px;
+}
+
+// same as outer shadow, but higher
+@mixin dropdown_shadow {
+  box-shadow:
+          inset transparentize(white, 0.95) 1px 1px,
+          transparentize(black, 0.8) 1px 1px,
+          transparentize(black, 0.6) 5px 5px 10px;
+}
+
+@mixin row_shadow() {
+  &:not(:last-child) {
+    box-shadow: transparentize(white, 0.95) 0 1px,
+    inset transparentize(black, 0.8) 0 -1px;
+  }
+
+  &:only-child {
+    box-shadow: none;
+  }
+}
+
+@mixin inner_shadow() {
+  box-shadow:
+          inset transparentize(white, 0.95) -1px -1px,
+          inset transparentize(black, 0.9) 1px 1px,
+          inset transparentize(black, 0.9) 0 0 10px;
+}
+
+@mixin inner_shadow_active() {
+  @include inner_shadow;
+  transition: background-color 250ms;
+
+  &:hover {
+    background: transparentize(white, 0.95);
+  }
+}
+
+@mixin input_shadow() {
+  box-shadow: inset transparentize(white, 0.92) 0 -1px, inset transparentize(black, 0.8) 0 1px;
+}
+
+@mixin modal_mixin() {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@mixin after_shade($color, $position: relative) {
+  position: $position;
+
+  &::after {
+    content: ' ';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: 120px;
+    width: 100%;
+    background: linear-gradient(transparentize($color, 1), $color);
+    border-radius: $radius;
+    pointer-events: none;
+    touch-action: none;
+  }
+}
+
+@mixin phone {
+  @media (max-width: 320px) {
+    @content;
+  }
+}
+
+@mixin tablet {
+  @media (max-width: 599px) {
+    @content;
+  }
+}
+
+@mixin desktop {
+  @media (max-width: $content_width) {
+    @content;
+  }
+}
+
+@mixin vertical_at_tablet {
+  @media (max-width: 599px) {
+    flex-direction: column !important;
+
+    @content;
+
+    & > * {
+      margin: $gap/2 0 !important;
+
+      &:first-child {
+        margin-top: 0 !important;
+      }
+      &:last-child {
+        margin-bottom: 0 !important;
+      }
+    }
+  }
+}
+
+@mixin can_backdrop {
+  @supports ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))) {
+    @content;
+  }
+}
+
+@mixin blur($color: $content_bg, $radius: 15px, $opacity: 0.5) {
+  background: transparentize($color, $opacity / 2);
+
+  @include can_backdrop {
+    backdrop-filter: blur($radius);
+    -webkit-backdrop-filter: blur($radius);
+    background: transparentize($color, $opacity);
+  }
+}
+
+@mixin title_with_line {
+  font: $font_14_semibold;
+  text-transform: uppercase;
+  color: transparentize(white, 0.3);
+  flex-direction: row;
+  display: flex;
+  align-items: center;
+
+  & > * {
+    padding-right: $gap;
+  }
+
+  & > :global(.line) {
+    flex: 1;
+    height: 2px;
+    background: transparentize(white, 0.95);
+  }
+}
+
+@mixin clamp($lines, $line: 1em) {
+  display: -webkit-box;
+  line-clamp: $lines;
+  -webkit-line-clamp: $lines;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+@mixin sidebar {
+  @include blur();
+}
+
+@mixin sidebar_content(
+  $width: 400px,
+) {
+  height: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex: 0 1 $width;
+  max-width: 100vw;
+  position: relative;
+  background: transparentize($content_bg, 0.4);
+  box-shadow: transparentize(white, 0.95) -1px 0;
+}
+
+@mixin editor_round_button {
+  width: $upload_button_height;
+  height: $upload_button_height;
+  border-radius: ($upload_button_height / 2) !important;
+  flex: 0 0 $upload_button_height;
+  position: relative;
+  border-radius: $radius;
+  cursor: pointer;
+}
+
+@mixin lab_gradient {
+  background: linear-gradient(darken($dark_blue, 0%), darken($blue, 30%));
+}
+
+@mixin hero_gradient {
+  $color: mix($wisegreen, $content_bg, 30%);
+  background: linear-gradient(170deg, lighten($color, 10%), $color);
+}
+
+@mixin flow_grid {
+  width: 100%;
+  box-sizing: border-box;
+  display: grid;
+
+  grid-template-columns: repeat(auto-fit, minmax($cell - 5, 1fr));
+  grid-auto-rows: $cell;
+
+  grid-auto-flow: row dense;
+  grid-column-gap: $gap;
+  grid-row-gap: $gap;
+
+  @media (max-width: ($cell + 10) * 3) {
+    grid-template-columns: repeat(auto-fill, minmax($fluid_cell - 20, 1fr));
+    grid-auto-rows: $fluid_cell;
+    grid-template-rows: calc(50vw - 10px) $fluid_cell;
+  }
+
+  @media (max-width: $cell_tablet) {
+    grid-template-rows: calc(66vw - 10px) auto $fluid_cell;
+  }
+
+  @media (max-width: $cell_mobile) {
+    // rework stamp, so it will be shown as smaller one on mobiles
+    grid-template-columns: repeat(auto-fill, minmax(calc(50vw - 20px), 1fr));
+    grid-template-rows: calc(80vw - 10px) auto 50vw;
+    grid-auto-rows: 50vw;
+  }
+
+  @media (max-width: ($fluid_cell + 5) * 1.5 + 20) {
+    grid-template-columns: repeat(auto-fill, minmax(calc(50vw - 20px), 1fr));
+    grid-template-rows: calc(80vw - 10px) auto 50vw;
+    grid-auto-rows: 50vw;
+  }
+}
+
+@mixin appear {
+  @keyframes __appear {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+
+  animation: __appear 0.25s forwards;
+}
+
+@mixin container {
+  max-width: $content_width + $gap * 8;
+  width: 100%;
+
+  padding-left: $gap * 4;
+  padding-right: $gap * 4;
+
+  @include tablet {
+    padding-left: 0;
+    padding-right: 0;
+  }
+}

src/styles/common/inputs.module.scss

@@ -1,390 +0,0 @@
-@import "src/styles/variables";
-
-.input_text_wrapper {
-  position: relative;
-  min-height: 40px;
-  border-radius: $input_radius;
-  flex: 1;
-  display: flex;
-  opacity: 1;
-  transition: opacity 0.25s;
-  z-index: 1;
-
-  @include inner_shadow();
-  background: $input_bg_color;
-
-  :global(.react-datepicker-wrapper) {
-    flex: 1;
-    padding: 0 18px;
-  }
-
-  &.seamless {
-    background: none;
-    box-shadow: none;
-  }
-
-  &.textarea_wrapper {
-    &::before {
-      display: none;
-    }
-
-    .input {
-      padding: 0;
-
-      textarea {
-        padding: $gap / 2 $gap;
-      }
-    }
-  }
-
-  &:hover {
-    opacity: 1;
-  }
-
-  &.focused {
-    opacity: 1;
-    // z-index: 999;
-
-    &.has_status .status {
-      flex-basis: 0;
-
-      div {
-        opacity: 0;
-      }
-    }
-
-    &.select {
-      .title {
-        opacity: 0;
-      }
-    }
-
-    .title {
-      color: transparentize(white, 0.3);
-    }
-  }
-
-  input {
-    width: 100%;
-  }
-
-  .input {
-    display: flex;
-    align-items: center;
-    justify-content: stretch;
-    padding: 0 18px;
-    flex: 1 0 0;
-    outline: none;
-    color: white;
-    position: relative;
-
-    //&::before {
-    //  content: ' ';
-    //  background: linear-gradient(270deg, $input_bg_color $gap, transparentize($input_bg_color, 1));
-    //  position: absolute;
-    //  width: $gap * 2;
-    //  height: $input_height;
-    //  top: 1px;
-    //  right: 1px;
-    //  transform: translateX(0);
-    //  transition: transform 0.25s;
-    //  border-radius: 0 $input_radius $input_radius 0;
-    //  pointer-events: none;
-    //  touch-action: none;
-    //}
-  }
-
-  &.required {
-    &::after {
-      content: ' ';
-      width: 5px;
-      height: 5px;
-      border-radius: 3px;
-      top: 8px;
-      left: 8px;
-      position: absolute;
-
-      background: $red_gradient;
-    }
-  }
-
-  &.has_loader {
-    &::before {
-      transform: translateX(-40px);
-    }
-
-    .loader {
-      flex-basis: 40px;
-    }
-  }
-
-  &.has_status {
-    &::before {
-      transform: translateX(-40px);
-    }
-    &.focused::before {
-      transform: translateX(0);
-    }
-
-    .status {
-      flex-basis: 40px;
-    }
-
-    .title {
-      // padding-right: 40px;
-    }
-
-    &.focused {
-      .title {
-        padding-right: 16px;
-        color: transparentize(white, 0.3);
-      }
-    }
-  }
-
-  &.focused.has_status.has_loader {
-    &::before {
-      transform: translateX(-80px);
-    }
-    &.focused::before {
-      transform: translateX(-40px);
-    }
-  }
-
-  &.has_error {
-    box-shadow: $input_shadow_error;
-
-    .title {
-      color: transparentize(red, 0.4) !important;
-    }
-
-    input,
-    textarea {
-      color: $red;
-    }
-  }
-
-  &.numeric {
-    flex: 0 0 120px;
-
-    .input {
-      padding: 0 10px;
-    }
-
-    .plus {
-      cursor: pointer;
-    }
-
-    input {
-      margin: 0 10px;
-      flex: 0 0 40px;
-      text-align: center;
-    }
-  }
-
-  &.select {
-    .input {
-      padding: 0 10px;
-    }
-
-    .value {
-      padding: 0 8px;
-    }
-  }
-
-  .password_revealer {
-    width: 40px;
-    height: 40px;
-    position: absolute;
-    top: 0;
-    right: 0;
-    cursor: pointer;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-size: 24px;
-    user-select: none;
-    color: white;
-    opacity: 0.5;
-    transition: opacity 0.25s;
-
-    &:hover {
-      opacity: 1;
-    }
-  }
-
-  .input_text,
-  .textarea {
-    outline: none;
-    border: none;
-    font: $font_16_medium;
-    box-sizing: border-box;
-    background: transparent;
-    color: white;
-    flex: 1;
-    resize: none;
-  }
-
-  .textarea {
-    padding: 12px 0;
-    box-sizing: border-box;
-    width: 100%;
-    max-height: 60vh;
-  }
-
-  .status,
-  .loader {
-    flex: 0 0 0;
-    transition: flex-basis 500ms;
-    position: relative;
-    overflow: hidden;
-    pointer-events: none;
-    touch-action: none;
-
-    & > div {
-      position: absolute;
-      left: 0;
-      top: 0;
-      width: $input_height;
-      height: $input_height;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      transition: opacity 0.25s;
-      opacity: 0;
-
-      &:global(.active) {
-        opacity: 1;
-      }
-    }
-  }
-
-  .title {
-    font: $font_16_semibold;
-    position: absolute;
-    left: 6px;
-    top: 10px;
-    bottom: auto;
-    padding: 0 4px;
-    box-sizing: border-box;
-    display: inline-flex;
-    align-items: center;
-    justify-content: flex-start;
-    transition: top 0.25s, bottom 0.25s, font 0.25s, color 0.25s;
-    pointer-events: none;
-    touch-action: none;
-    color: lighten($content_bg, 10%);
-    text-transform: capitalize;
-    background: $input_bg_color;
-
-    span {
-      font: $font;
-      //background: $input_bg_color;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      padding: 0 2px;
-      text-transform: uppercase;
-    }
-  }
-
-  &.focused .title,
-  &.has_value .title {
-    // font: $font_10_semibold;
-    font-size: 10px;
-    top: -6px;
-    bottom: auto;
-  }
-
-  &.has_value {
-    //box-shadow: $input_shadow_filled;
-
-    .title {
-      color: transparentize(white, 0.3);
-    }
-
-    &.focused {
-      .title {
-        color: transparentize(white, 0.3);
-      }
-    }
-  }
-
-  .error {
-    font: $font_12_regular;
-    bottom: -6px;
-    left: 15px;
-    position: absolute;
-    color: $red;
-
-    span {
-      background: $content_bg;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      padding: 0 2px;
-      border-radius: $radius;
-    }
-  }
-
-  .error_icon {
-    fill: $red;
-    stroke: $red;
-  }
-
-  .success_icon {
-    fill: $green;
-    stroke: $green;
-  }
-}
-
-.options {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  border-radius: $input_radius;
-  box-shadow: $input_shadow;
-  background: white;
-  z-index: 10;
-}
-
-.option:hover {
-  background: transparentize($red, 0.8);
-}
-
-.option_title {
-  text-transform: capitalize;
-  color: transparentize(black, 0.5);
-  pointer-events: none;
-}
-
-.options {
-  .option,
-  .option_title {
-    height: $input_height;
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    padding: 0 10px;
-    cursor: pointer;
-    transition: background-color 0.1s;
-    border-radius: $input_radius;
-  }
-
-  .option_title {
-    box-shadow: $input_shadow;
-    border-radius: $input_radius;
-  }
-}
-
-.after {
-  width: 24px;
-  position: relative;
-  z-index: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 5px;
-  top: -1px;
-}

src/styles/variables.scss

@@ -1,4 +1,7 @@
 @import 'colors';
+@import 'inputs';
+@import 'fonts';
+@import 'mixins';
 
 $header_height: 64px;
 $cell: 280px;
@@ -19,59 +22,16 @@ $bar_height: 64px;
 $radius: 8px;
 $cell_radius: $radius;
 $panel_radius: $radius;
-$input_radius: $radius;
 $dialog_radius: $radius * 2;
 $placeholder_bg: transparentize(white, 0.96);
 
-$input_height: 36px;
 $info_height: 24px;
 $limited_width: 940px;
 
 $panel_size: 64px;
 $node_title_height: $panel_size;
-
-$bold: 700;
-$semibold: 600;
-$regular: 400;
-$medium: 500;
-$light: 300;
-$extra_light: 200;
-
 $upload_button_height: 52px;
 
-$font: Montserrat, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
-  'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
-  'Noto Color Emoji';
-
-$font_48_semibold: $semibold 48px $font;
-$font_48_bold: $bold 48px $font;
-$font_32_bold: $bold 32px $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_20_semibold: $bold 24px $font;
-$font_18_regular: $regular 18px $font;
-$font_18_extra_light: $extra_light 18px $font;
-$font_18_semibold: $semibold 18px $font;
-$font_16_regular: $regular 16px $font;
-$font_16_semibold: $semibold 16px $font;
-$font_16_medium: $medium 16px $font;
-$font_14_regular: $regular 14px $font;
-$font_14_semibold: $semibold 14px $font;
-$font_14_medium: $medium 14px $font;
-$font_12_medium: $medium 12px $font;
-$font_12_semibold: $semibold 12px $font;
-$font_12_bold: $bold 12px $font;
-$font_12_regular: $regular 12px $font;
-$font_10_regular: $regular 10px $font;
-$font_10_semibold: $semibold 10px $font;
-$font_8_regular: $regular 8px $font;
-$font_8_semibold: $semibold 8px $font;
-
-$font_cell_title: $font_24_semibold;
-$font_hero_title: $bold 40px $font;
-
 $shadow_depth_1: transparentize(black, 0.8) 0 1px, inset transparentize(white, 0.98) 0 1px;
 $shadow_depth_2: transparentize(black, 0.8) 0 2px, inset transparentize(white, 0.98) 0 1px;
 
@@ -80,255 +40,5 @@ $node_shadow: transparentize(black, 0.8) 0 2px, transparentize(black, 0.8) 0 2px
 
 $tag_height: 26px;
 
-$input_shadow: inset transparentize(white, 0.9) 0 0 0 1px;
-$input_shadow_error: inset $red 0 0 0 1px;
-$input_shadow_filled: $input_shadow;
-
 $login_dialog_padding: $gap $gap 30px $gap;
 $sidebar_border: transparentize(white, 0.95);
-
-@mixin outer_shadow() {
-  box-shadow:
-    inset transparentize(white, 0.95) 1px 1px,
-    transparentize(black, 0.8) 1px 1px,
-    transparentize(black, 0.6) 0 1px 5px;
-}
-
-// same as outer shadow, but higher
-@mixin dropdown_shadow {
-  box-shadow:
-          inset transparentize(white, 0.95) 1px 1px,
-          transparentize(black, 0.8) 1px 1px,
-          transparentize(black, 0.6) 5px 5px 10px;
-}
-
-@mixin row_shadow() {
-  &:not(:last-child) {
-    box-shadow: transparentize(white, 0.95) 0 1px,
-            inset transparentize(black, 0.8) 0 -1px;
-  }
-
-  &:only-child {
-    box-shadow: none;
-  }
-}
-
-@mixin inner_shadow() {
-  box-shadow:
-    inset transparentize(white, 0.92) -1px -1px,
-    inset transparentize(black, 0.5) 1px 1px,
-    inset transparentize(black, 0.7) 0 0 10px;
-}
-
-@mixin inner_shadow_active() {
-  @include inner_shadow;
-  transition: background-color 250ms;
-
-  &:hover {
-    background: transparentize(white, 0.95);
-  }
-}
-
-@mixin input_shadow() {
-  box-shadow: inset transparentize(white, 0.92) 0 -1px, inset transparentize(black, 0.8) 0 1px;
-}
-
-@mixin modal_mixin() {
-  position: fixed;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-@mixin after_shade($color, $position: relative) {
-  position: $position;
-
-  &::after {
-    content: ' ';
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    height: 120px;
-    width: 100%;
-    background: linear-gradient(transparentize($color, 1), $color);
-    border-radius: $radius;
-    pointer-events: none;
-    touch-action: none;
-  }
-}
-
-@mixin phone {
-  @media (max-width: 320px) {
-    @content;
-  }
-}
-
-@mixin tablet {
-  @media (max-width: 599px) {
-    @content;
-  }
-}
-
-@mixin desktop {
-  @media (max-width: $content_width) {
-    @content;
-  }
-}
-
-@mixin vertical_at_tablet {
-  @media (max-width: 599px) {
-    flex-direction: column !important;
-
-    @content;
-
-    & > * {
-      margin: $gap/2 0 !important;
-
-      &:first-child {
-        margin-top: 0 !important;
-      }
-      &:last-child {
-        margin-bottom: 0 !important;
-      }
-    }
-  }
-}
-
-@mixin can_backdrop {
-  @supports ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))) {
-    @content;
-  }
-}
-
-@mixin blur($color: $content_bg, $radius: 15px, $opacity: 0.5) {
-  background: transparentize($color, $opacity / 2);
-
-  @include can_backdrop {
-    backdrop-filter: blur($radius);
-    -webkit-backdrop-filter: blur($radius);
-    background: transparentize($color, $opacity);
-  }
-}
-
-@mixin title_with_line {
-  font: $font_14_semibold;
-  text-transform: uppercase;
-  color: transparentize(white, 0.3);
-  flex-direction: row;
-  display: flex;
-  align-items: center;
-
-  & > * {
-    padding-right: $gap;
-  }
-
-  & > :global(.line) {
-    flex: 1;
-    height: 2px;
-    background: transparentize(white, 0.95);
-  }
-}
-
-@mixin clamp($lines, $line: 1em) {
-  display: -webkit-box;
-  line-clamp: $lines;
-  -webkit-line-clamp: $lines;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-@mixin sidebar {
-  @include blur();
-}
-
-@mixin sidebar_content(
-  $width: 400px,
-) {
-  height: 100%;
-  box-sizing: border-box;
-  display: flex;
-  flex: 0 1 $width;
-  max-width: 100vw;
-  position: relative;
-  background: transparentize($content_bg, 0.4);
-  box-shadow: transparentize(white, 0.95) -1px 0;
-}
-
-@mixin editor_round_button {
-  width: $upload_button_height;
-  height: $upload_button_height;
-  border-radius: ($upload_button_height / 2) !important;
-  flex: 0 0 $upload_button_height;
-  position: relative;
-  border-radius: $radius;
-  cursor: pointer;
-}
-
-@mixin lab_gradient {
-  background: linear-gradient(darken($dark_blue, 0%), darken($blue, 30%));
-}
-
-@mixin hero_gradient {
-  $color: mix($wisegreen, $content_bg, 30%);
-  background: linear-gradient(170deg, lighten($color, 10%), $color);
-}
-
-@mixin flow_grid {
-  width: 100%;
-  box-sizing: border-box;
-  display: grid;
-
-  grid-template-columns: repeat(auto-fit, minmax($cell - 5, 1fr));
-  grid-auto-rows: $cell;
-
-  grid-auto-flow: row dense;
-  grid-column-gap: $gap;
-  grid-row-gap: $gap;
-
-  @media (max-width: ($cell + 10) * 3) {
-    grid-template-columns: repeat(auto-fill, minmax($fluid_cell - 20, 1fr));
-    grid-auto-rows: $fluid_cell;
-    grid-template-rows: calc(50vw - 10px) $fluid_cell;
-  }
-
-  @media (max-width: $cell_tablet) {
-    grid-template-rows: calc(66vw - 10px) auto $fluid_cell;
-  }
-
-  @media (max-width: $cell_mobile) {
-    // rework stamp, so it will be shown as smaller one on mobiles
-    grid-template-columns: repeat(auto-fill, minmax(calc(50vw - 20px), 1fr));
-    grid-template-rows: calc(80vw - 10px) auto 50vw;
-    grid-auto-rows: 50vw;
-  }
-
-  @media (max-width: ($fluid_cell + 5) * 1.5 + 20) {
-    grid-template-columns: repeat(auto-fill, minmax(calc(50vw - 20px), 1fr));
-    grid-template-rows: calc(80vw - 10px) auto 50vw;
-    grid-auto-rows: 50vw;
-  }
-}
-
-@mixin appear {
-  @keyframes __appear {
-    from { opacity: 0; }
-    to { opacity: 1; }
-  }
-
-  animation: __appear 0.25s forwards;
-}
-
-@mixin container {
-  max-width: $content_width + $gap * 8;
-  width: 100%;
-
-  padding-left: $gap * 4;
-  padding-right: $gap * 4;
-
-  @include tablet {
-    padding-left: 0;
-    padding-right: 0;
-  }
-}