fixed features at editor

src/components/input/Button/index.tsx

@@ -1,25 +1,29 @@
-import classnames from 'classnames';
-import * as styles from './styles.scss';
-import React, { ButtonHTMLAttributes, DetailedHTMLProps, FC } from 'react';
-import { Icon } from '~/components/input/Icon';
+import classnames from "classnames";
+import * as styles from "./styles.scss";
+import React, { ButtonHTMLAttributes, DetailedHTMLProps, FC } from "react";
+import { Icon } from "~/components/input/Icon";
 import { IIcon } from "~/redux/types";
 
-type IButtonProps = DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> & {
-  size?: 'mini' | 'normal' | 'big' | 'giant' | 'micro';
+type IButtonProps = DetailedHTMLProps<
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  HTMLButtonElement
+> & {
+  size?: "mini" | "normal" | "big" | "giant" | "micro";
   iconLeft?: IIcon;
   iconRight?: IIcon;
   seamless?: boolean;
   transparent?: boolean;
   title?: string;
-  red?: boolean,
-  grey?: boolean,
+  red?: boolean;
+  grey?: boolean;
   non_submitting?: boolean;
   is_loading?: boolean;
+  stretchy?: boolean;
 };
 
 export const Button: FC<IButtonProps> = ({
-  className = '',
-  size = 'normal',
+  className = "",
+  size = "normal",
   iconLeft,
   iconRight,
   children,
@@ -30,34 +34,28 @@ export const Button: FC<IButtonProps> = ({
   grey = false,
   is_loading,
   title,
+  stretchy,
   ...props
-}) => (
-  React.createElement(
-    (seamless || non_submitting) ? 'div' : 'button',
-    {
-      className: classnames(
-        styles.button,
-        className,
-        styles[size],
-        {
-          red,
-          grey,
-          seamless,
-          transparent,
-          disabled: props.disabled,
-          icon: (iconLeft || iconRight) && !title && !children,
-          is_loading,
-        }),
-      children: [
-        iconLeft && <Icon icon={iconLeft} size={20} key={0} />,
-        (
-          title
-            ? <span key={1}>{title}</span>
-            : (children && <span key={1}>{children}</span>) || null
-        ),
-        iconRight && <Icon icon={iconRight} size={20} key={2} />,
-      ],
-      ...props,
-    },
-  )
-);
+}) =>
+  React.createElement(seamless || non_submitting ? "div" : "button", {
+    className: classnames(styles.button, className, styles[size], {
+      red,
+      grey,
+      seamless,
+      transparent,
+      disabled: props.disabled,
+      icon: (iconLeft || iconRight) && !title && !children,
+      is_loading,
+      stretchy
+    }),
+    children: [
+      iconLeft && <Icon icon={iconLeft} size={20} key={0} />,
+      title ? (
+        <span key={1}>{title}</span>
+      ) : (
+        (children && <span key={1}>{children}</span>) || null
+      ),
+      iconRight && <Icon icon={iconRight} size={20} key={2} />
+    ],
+    ...props
+  });

src/components/input/Button/styles.scss

@@ -1,6 +1,10 @@
 @keyframes pulse {
-  0% { opacity: 1; }
-  100% { opacity: 0.3; }
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.3;
+  }
 }
 
 .button {
@@ -28,23 +32,27 @@
   justify-content: center;
 
   // box-shadow: transparentize(#E933A5, 0.6) 0 2px 8px;
-  box-shadow: transparentize(#E933A5, 0.6) 0 0 0;
+  box-shadow: transparentize(#e933a5, 0.6) 0 0 0;
   filter: grayscale(0);
 
   transition: opacity 0.25s, filter 0.25s, box-shadow 0.25s;
   opacity: 0.8;
 
+  span {
+    flex: 1;
+  }
+
   &:hover {
     opacity: 1;
-    box-shadow: transparentize(#E933A5, 0.4) 0 2px 8px;
+    box-shadow: transparentize(#e933a5, 0.4) 0 2px 8px;
 
     &:global(.disabled) {
-      box-shadow: transparentize(#E933A5, 0.6) 0 0 0;
+      box-shadow: transparentize(#e933a5, 0.6) 0 0 0;
       cursor: auto;
     }
 
     &:active {
-      box-shadow: transparentize(#E933A5, 0.6) 0 0 0;
+      box-shadow: transparentize(#e933a5, 0.6) 0 0 0;
     }
   }
 
@@ -72,7 +80,12 @@
     color: $red;
   }
 
-  &:global(.disabled), &:global(.grey) {
+  &:global(.stretchy) {
+    flex: 1;
+  }
+
+  &:global(.disabled),
+  &:global(.grey) {
     opacity: 0.3;
     //background: black;
     filter: grayscale(100%);
@@ -84,7 +97,8 @@
   }
 
   &:global(.is_loading) {
-    span, svg {
+    span,
+    svg {
       animation: pulse 0.25s infinite alternate;
     }
   }
@@ -92,16 +106,34 @@
   > * {
     margin: 0 5px;
 
-    &:first-child { margin-left: 0; }
-    &:last-child { margin-right: 0; }
+    &:first-child {
+      margin-left: 0;
+    }
+    &:last-child {
+      margin-right: 0;
+    }
   }
 }
 
-.micro { height: 20px; font: $font_12_semibold; padding: 0 15px;}
-.mini { height: 28px; }
-.normal { height: 38px; }
-.big { height: 40px; }
-.giant { height: 50px; padding: 0 15px; min-width: 50px; }
+.micro {
+  height: 20px;
+  font: $font_12_semibold;
+  padding: 0 15px;
+}
+.mini {
+  height: 28px;
+}
+.normal {
+  height: 38px;
+}
+.big {
+  height: 40px;
+}
+.giant {
+  height: 50px;
+  padding: 0 15px;
+  min-width: 50px;
+}
 .disabled {
   opacity: 0.5;
 }

src/components/input/Icon/index.tsx

@@ -1,23 +1,19 @@
-import React, { FC } from 'react';
-import { IIcon } from '~/redux/types';
+import React, { FC } from "react";
+import { IIcon } from "~/redux/types";
 
 type IProps = React.SVGAttributes<SVGElement> & {
   size?: number;
   icon: IIcon;
 };
 
-export const Icon: FC<IProps> = ({
-  size = 20,
-  icon,
-  ...props
-}) => (
+export const Icon: FC<IProps> = ({ size = 20, icon, style, ...props }) => (
   <svg
     width={size}
     height={size}
     viewBox={`0 0 24 24`}
     preserveAspectRatio="xMidYMid slice"
+    style={{ ...style, outline: "none" }}
     {...props}
-    style={{ ...props.style, outline: 'none' }}
   >
     <use xlinkHref={`#${icon}`} />
   </svg>