190422 markup changes

package.json

@@ -43,6 +43,7 @@
     "jest-resolve": "23.6.0",
     "jest-watch-typeahead": "^0.2.1",
     "lint-staged": "^8.1.5",
+    "material-icons-react": "^1.0.4",
     "mini-css-extract-plugin": "0.5.0",
     "mobx": "^5.9.4",
     "mobx-react": "^5.4.3",

src/modules/Home/index.tsx

@@ -0,0 +1,13 @@
+import * as React from "react";
+import { Header } from 'widgets/Header';
+import { Column, Row } from 'ui/Layout';
+
+function Home() {
+    return (
+        <Column>
+            <Header authorized={true} />
+        </Column>
+    )
+}
+
+export { Home };

src/routes.tsx

@@ -1,4 +1,4 @@
-import { Home } from "./modules/Home";
+import { Home } from "./modules/Home/index";
 import { AuthPage } from "./modules/AuthPage";
 
 export default [

src/theme/global.scss

@@ -15,6 +15,12 @@ $brown: #484848;
 
 @mixin base-sizes() {
   &__size {
+    &_xxl {
+      width: 220px;
+    }
+    &_xl {
+      width: 180px;
+    }
     &_l {
       width: 130px;
     }
@@ -25,6 +31,38 @@ $brown: #484848;
       width: 100%;
       height: 42px;
     }
+    &_auto {
+      width: auto;
+      height: auto;
+    }
+  }
+}
+
+@mixin base-colors() {
+  &__color {
+    &_white {
+      color: $white;
+    }
+    &_orange {
+      color: $orange;
+    }
+    &_black {
+      color: $black;
+    }
+  }
+}
+
+@mixin base-font-sizes() {
+  &__size {
+    &_l {
+      font-size: 48px;
+    }
+    &_m {
+      font-size: 36px;
+    }
+    &_s {
+      font-size:  16px;
+    }
   }
 }
 
@@ -75,6 +113,23 @@ $brown: #484848;
   }
 }
 
+@mixin base-paddings() {
+  &__padding {
+    &_5 {
+      padding: 5px;
+    }
+    &_10 {
+      padding: 10px;
+    }
+    &_15 {
+      padding: 15px;
+    }
+    &_20 {
+      padding: 20px;
+    }
+  }
+}
+
 @mixin base-aligns() {
   &__align {
     &_left {
@@ -173,4 +228,21 @@ $screenSizes: (
   @include screen-lt(mobile-small) {
     background-position: 51% 0;
   }
+}
+
+.lds-ripple {
+  display: inline-block;
+  position: relative;
+  width: 64px;
+  height: 64px;
+  div {
+    position: absolute;
+    border: 4px solid #921515;
+    opacity: 1;
+    border-radius: 50%;
+    animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
+    &:nth-child(2) {
+      animation-delay: -0.5s;
+    }
+  }
 }

src/ui/Button/index.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import cx from "classnames";
-import { ISize, MarginType, FillType, ButtonType } from "../enums";
+import { ISize, MarginType, FillType, ButtonType, PaddingType } from "../enums";
 
 import "./style.scss";
 
@@ -11,12 +11,13 @@ export interface IButton {
     text?: string;
     style?: FillType;
     margin?: MarginType;
+    padding?: PaddingType;
     disabled?: boolean;
     type?: ButtonType;
 }
 
 // tslint:disable-next-line:variable-name
-const Button: React.FC<IButton> = ({ onClick, className, children, size, disabled, style, type, margin }) => {
+const Button: React.FC<IButton> = ({ onClick, className, children, size, disabled, style, type, margin, padding }) => {
     return (
         <button
             onClick={onClick}
@@ -27,6 +28,7 @@ const Button: React.FC<IButton> = ({ onClick, className, children, size, disable
                 `ux-button__size_${size}`,
                 `ux-button__style_${style}`,
                 `ux-button__margin_${margin}`,
+                `ux-button__padding_${padding}`,
                 className
             )}
         >
@@ -40,6 +42,7 @@ Button.defaultProps = {
     style: FillType.void,
     disabled: false,
     margin: MarginType.none,
+    padding: PaddingType.none,
 };
 
 export { Button };

src/ui/Button/style.scss

@@ -34,7 +34,8 @@ $btn-fill: transparent, $white, #ff510047, $white, transparent, $white, $grey, $
 .ux-button {
   @include base-sizes();
   @include base-margins();
-  height: 27px;
+  @include base-paddings();
+  height: 42px;
   cursor: pointer;
   font-size: 12px;
   border-radius: 5px;

src/ui/Description/index.tsx

@@ -1,25 +1,28 @@
 import cx from "classnames";
 import * as React from "react";
-import { AlignType, MarginType } from "../enums";
-
-import "./style.scss";
+import {AlignType, ISize, MarginType} from "../enums";
+import { Color } from "csstype";
 import * as style from "./style.scss";
 
 export interface IDescription {
+    size?: ISize;
     children: string;
-    className: string;
-    align: AlignType;
+    className?: string;
+    color?: Color;
+    align?: AlignType;
     margin: MarginType;
 }
 
 // tslint:disable-next-line:variable-name
-const Description: React.FC<IDescription> = ({ children, align, className, margin }) => {
+const Description: React.FC<IDescription> = ({ children, align, className, margin, size, color }) => {
     return (
         <p
             className={cx(
                 style.description,
                 style[`description__align_${align}`],
                 style[`description__margin_${margin}`],
+                style[`description__size_${size}`],
+                style[`description__color_${color}`],
                 className
             )}
         >
@@ -33,6 +36,8 @@ Description.defaultProps = {
     className: "",
     align: AlignType.left,
     margin: MarginType.none,
+    size:ISize.s,
+    color: "black",
 };
 
 export { Description };

src/ui/Description/style.scss

@@ -4,4 +4,6 @@
   @include main-font(500);
   @include base-aligns();
   @include base-margins();
+  @include base-font-sizes();
+  @include base-colors();
 }

src/ui/Icon/index.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { ISizeIcon } from "../enums";
+import MaterialIcon, {colorPalette} from 'material-icons-react';
+import { Color } from "csstype";
+
+export interface IIcon {
+    icon?: string;
+    color: Color;
+    size: ISizeIcon;
+    disabled?: boolean;
+}
+
+const Icon: React.FC<IIcon> = ({ icon, size, color, disabled }) => {
+    return (
+        <MaterialIcon icon={icon} size={size} color={color} inactive={disabled} />
+    );
+};
+
+Icon.defaultProps = {
+    size: ISizeIcon.s,
+    disabled: false,
+    icon: 'dashboard',
+    color: 'black',
+};
+
+export { Icon };

src/ui/Title/style.scss

@@ -2,30 +2,10 @@
   @include base-aligns();
   @include base-margins();
   @include base-weight();
+  @include base-font-sizes();
+  @include base-colors();
   color: $black;
   &__uppercase {
     text-transform: uppercase;
   }
-  &__size {
-    &_l {
-      font-size: 48px;
-    }
-    &_m {
-      font-size: 36px;
-    }
-    &_s {
-      font-size:  18px;
-    }
-  }
-  &__color {
-    &_white {
-      color: $white;
-    }
-    &_orange {
-      color: $orange;
-    }
-    &_black {
-      color: $black;
-    }
-  }
 }

src/ui/enums.ts

@@ -17,6 +17,14 @@ export enum MarginType {
     bottom_x2 = "bottom_x2"
 }
 
+export enum PaddingType {
+    none = "none",
+    s = "5",
+    m = "10",
+    l = "15",
+    xl = "20",
+}
+
 export enum FillType {
     void = "void",
     fill = "fill"
@@ -26,7 +34,17 @@ export enum ISize {
     s = "s",
     m = "m",
     l = "l",
-    full = "full"
+    xl = "xl",
+    xxl = "xxl",
+    full = "full",
+    auto = "auto",
+}
+
+export enum ISizeIcon {
+    s = 'tiny',
+    m = 'small',
+    l = 'medium',
+    xl = 'large',
 }
 
 export enum WeightEnum {
@@ -39,5 +57,7 @@ export type ButtonType = "submit" | "reset" | "button";
 
 export enum Colors {
     "white",
-    "orange"
+    "orange",
+    "blue",
+    "black",
 }

src/widgets/Auth/index.tsx

@@ -4,7 +4,6 @@ import { Input } from "widgets/fields";
 import { Column } from "ui/Layout";
 import { Button } from "ui/Button";
 import { Title } from "ui/Title";
-import { Description } from "ui/Description";
 import { getValidationForField } from "./validations";
 import {default as config} from "./config.json";
 

src/widgets/Header/config.js

@@ -0,0 +1,18 @@
+export default [
+    {
+        name: 'bookmark',
+        icon: 'star',
+    },
+    {
+        name: 'extension',
+        icon: 'extension',
+    },
+    {
+        name: 'add',
+        icon: 'add_circle',
+    },
+    {
+        name: 'notifications',
+        icon: 'notifications',
+    },
+];