(WIP) Splash screen: move it into React

src/README.md

@@ -412,7 +412,6 @@
 │   │       │   │   ├── _colors.scss
 │   │       │   │   ├── index.scss
 │   │       │   │   ├── _media.scss
-│   │       │   │   └── _sizes.scss
 │   │       │   └── widget.scss
 │   │       └── fonts
 │   │           ├── index.scss

src/front/client/scss/config/mixins/_common.scss

@@ -6,30 +6,12 @@
   @return (0.3125vw * $value);
 }
 
-@mixin male {
-  :global(.body-male) & {
-    @content;
-  }
-}
-
-@mixin female {
-  :global(.body-female) & {
-    @content;
-  }
-}
-
 @mixin auth {
   :global(.body-auth) & {
     @content;
   }
 }
 
-@mixin no-auth {
-  :global(.body-no-auth) & {
-    @content;
-  }
-}
-
 @mixin after {
   &::after {
     content: '';
@@ -56,22 +38,6 @@
   #{$property}: $color-brand $important;
 }
 
-@mixin brand-f-color {
-  @include brand-color(color)
-}
-
-@mixin brand-border-color {
-  @include brand-color(border-color)
-}
-
-
-@mixin any-link {
-  &,
-  &:visited {
-    @content;
-  }
-}
-
 @mixin absolute-centring {
   position: absolute;
   top: 0;
@@ -81,29 +47,13 @@
   margin: auto;
 }
 
-@mixin absolute-v-centring {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  margin: auto 0;
-}
-
-
 @mixin placeholder {
   &::-webkit-input-placeholder { @content; }
   &:-moz-placeholder { @content; }
   &::-moz-placeholder { @content; }
   &:-ms-input-placeholder { @content; }
 }
 
-@mixin clearfix {
-  &::after {
-    content: '';
-    display: table;
-    clear: both;
-  }
-}
-
 @mixin no-user-select {
   -webkit-touch-callout: none;
   -webkit-user-select: none;
@@ -126,53 +76,6 @@
   }
 }
 
-@mixin triangle($dir, $size, $color) {
-  content: '';
-  width: 0;
-  height: 0;
-  display: block;
-  line-height: 0;
-  border: $size transparent solid;
-  font-size: 0;
-
-  @if ($color == 'brand') {
-    @if ($dir == 'up') {
-      @include brand-color(border-bottom-color);
-      border-top-width: 0;
-    }
-    @else if ($dir == 'right') {
-      @include brand-color(border-left-color);
-      border-right-width: 0;
-    }
-    @else if ($dir == 'down') {
-      @include brand-color(border-top-color);
-      border-bottom-width: 0;
-    }
-    @else if ($dir == 'left') {
-      @include brand-color(border-right-color);
-      border-left-width: 0;
-    }
-  }
-  @else {
-    @if ($dir == 'up') {
-      border-bottom-color: $color;
-      border-top-width: 0;
-    }
-    @else if ($dir == 'right') {
-      border-left-color: $color;
-      border-right-width: 0;
-    }
-    @else if ($dir == 'down') {
-      border-top-color: $color;
-      border-bottom-width: 0;
-    }
-    @else if ($dir == 'left') {
-      border-right-color: $color;
-      border-left-width: 0;
-    }
-  }
-}
-
 @mixin arrow($dir, $size, $width, $color) {
   content: '';
   width: $size;
@@ -227,14 +130,3 @@
     }
   }
 }
-
-@mixin grayScaleActive {
-  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
-  filter: gray; /* IE6-9 */
-  filter: grayscale(100%);
-}
-
-@mixin grayScaleDisable {
-  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
-  filter: grayscale(0);
-}

src/front/client/scss/config/vars/_animations.scss

@@ -1,2 +1 @@
 $ease-out-quadratic:    cubic-bezier(0.25,  0.46, 0.45,  0.94);
-$ease-in-out-quadratic: cubic-bezier(0.455, 0.03, 0.515, 0.955);

src/front/client/scss/config/vars/_colors.scss

@@ -1,5 +1,13 @@
-$primary: var(--primary);
-$primary-hover: var(--primary-hover);
+// TODO: delete css variables and replace with scss
+
+:root {
+  --primary:#6144e5; // it's used by MnemonicInput.css
+  --primary-hover: #7371ff;
+  --primary-background: rgba(97, 68, 229, 0.1);
+  --alternate: #e91db4;
+  --alternate-hover:  #ff1fc5;
+}
+
 $alternate: var(--alternate);
 $alternate-hover: var(--alternate-hover);
 
@@ -9,9 +17,6 @@ $alternate-hover: var(--alternate-hover);
 $l-background-color: #f7f7f7;
 $l-color: #000;
 
-$l-brand-color: var(--primary);
-$l-brand-color-hover: var(--primary-hover);
-
 $l-background-elements: #fff;
 $l-box-shadow: 0px 4px 16px rgba(0,0,0,0.08), 0px 1px 4px rgba(0,0,0,0.08);
 
@@ -36,6 +41,7 @@ $pale-color: #8882;
 $indicating-color: #808080;
 $notice-color: #8e9aa3;
 $color-brand: #6144e5;
+$color-brand-hover: #7371ff;
 $color-f-brightest: #fff;
 $color-f-error: #e32950;
 $color-good: #4dd3ab;

src/front/client/scss/config/vars/index.scss

@@ -1,4 +1,3 @@
-@import "sizes";
 @import "media";
 @import "colors";
 @import "animations";

src/front/shared/components/FaqExpandableItem/FaqExpandableItem.scss

@@ -9,7 +9,7 @@
   &.active {
 
     .header {
-      background-color: $primary-hover;
+      background-color: $color-brand-hover;
       color: #fff !important;
     }
 

src/front/shared/components/FilterForm/styles.scss

@@ -46,7 +46,7 @@
   }
 
   .active {
-    color: $primary; 
+    color: $color-brand; 
   }
 
   .show {

src/front/shared/components/Footer/Footer.scss

@@ -56,7 +56,7 @@ $information-footer-height: 44px;
   }
 
   a {
-    color: $primary-hover;
+    color: $color-brand-hover;
 
     &:hover {
       color: $alternate;

src/front/shared/components/Footer/Footer.tsx

@@ -35,7 +35,6 @@ const Footer = (props) => {
       data-version-url={version.link}
     >
       {!isFooterDisabled && (
-        //@ts-ignore
         <WidthContainer styleName="container">
           <SwitchLang {...props} />
           {!config.isWidget && <SocialMenu />}

src/front/shared/components/Footer/SocialMenu/SocialMenu.scss

@@ -12,7 +12,7 @@
 }
 
 .icon {
-  color: $primary-hover;
+  color: $color-brand-hover;
   font-size: 24px;
   text-align: center;
   transition: color 300ms ease;

src/front/shared/components/Footer/SwitchLang/SwitchLang.scss

@@ -7,7 +7,7 @@
 .language {
   font-size: 20px;
   cursor: pointer;
-  color: $primary-hover;
+  color: $color-brand-hover;
   font-weight: bolder;
   padding: 0 3px 0 3px;
 

src/front/shared/components/Header/NavMobile/NavMobile.scss

@@ -7,7 +7,7 @@
   z-index: 1001111;
   display: flex;
   flex-direction: row;
-  background-color: $l-brand-color;
+  background-color: $color-brand;
   overflow: hidden;
   @include ff-bold;
   box-shadow: $l-box-shadow;
@@ -52,7 +52,7 @@
     background-color: #29293b;
 
     a.active {
-      background: $l-brand-color;
+      background: $color-brand;
       color: $d-color;
 
       &:not(:last-of-type) {

src/front/shared/components/Header/User/User.scss

@@ -53,7 +53,7 @@
     padding-right: 4px;
     background: rgba(white, 0.85);
     border-radius: 50%;
-    color: $primary-hover;
+    color: $color-brand-hover;
     font-size: 24px;
     text-align: center;
     cursor: pointer;

src/front/shared/components/PreventMultiTabs/PreventMultiTabs.tsx

@@ -40,8 +40,6 @@ export default class PreventMultiTabs extends Component<any, any> {
 
   render() {
     return (
-      /*
-      //@ts-ignore */
       <WidthContainer>
         <h1>
           <FormattedMessage

src/front/shared/components/TourWindow/index.tsx

@@ -29,19 +29,19 @@ const Tooltip = (props) => {
       <div styleName="TooltipFooter">
         {!isLastStep && (
           <button {...skipProps} onClick={click}>
-            <FormattedMessage id="skip" defaultMessage="Пропустить" />
+            <FormattedMessage id="skip" defaultMessage="Skip" />
           </button>
         )}
         {index > 0 && (
           <button {...backProps}>
-            <FormattedMessage id="back" defaultMessage="Назад" />
+            <FormattedMessage id="back" defaultMessage="Back" />
           </button>
         )}
         <button {...primaryProps} onClick={clickPrimary}>
           {continuous && !isLastStep ?
-            <FormattedMessage id="nextTourWindow" defaultMessage="Далее" />
+            <FormattedMessage id="nextTourWindow" defaultMessage="Next" />
             :
-            <FormattedMessage id="closeTourWindow" defaultMessage="Закрыть" />}
+            <FormattedMessage id="closeTourWindow" defaultMessage="Close" />}
         </button>
       </div>
     </div>

src/front/shared/components/controls/Button/Button.scss

@@ -68,7 +68,7 @@
 }
 
 .blue {
-  background-color: $primary;
+  background-color: $color-brand;
   color: #fff;
   font-size: 15px;
 }
@@ -125,7 +125,7 @@
 .transparent.blue {
   background: rgba(97, 68, 229, 0.1);
   font-weight: bold;
-  color: $primary;
+  color: $color-brand;
 }
 
 .disabled {

src/front/shared/components/controls/ShareLink/ShareLink.scss

@@ -40,7 +40,7 @@
 }
 
 .shareLinkTextarea:focus {
-  border: 2px solid $primary;
+  border: 2px solid $color-brand;
   outline: none;
   padding: 9px;
 }

src/front/shared/components/controls/Toggle/Toggle.scss

@@ -33,7 +33,7 @@ label.Switch {
   }
 
   & > span:after {
-    background-color: $primary;
+    background-color: $color-brand;
     border-radius: 50%;
     content: '';
     width: 15px;
@@ -50,7 +50,7 @@ label.Switch {
   }
 
   & > input:checked + span:before {
-    background-color: $primary;
+    background-color: $color-brand;
   }
 
   & > input:checked + span:after {

src/front/shared/components/forms/Input/Input.scss

@@ -21,7 +21,7 @@ textarea {
   outline: none;
 
   &:focus {
-    border: 2px solid $primary;
+    border: 2px solid $color-brand;
     outline: none;
     padding: 0 14px;
   }

src/front/shared/components/forms/PhoneInput/styles.scss

@@ -157,7 +157,7 @@
   margin: 1em 0;
   padding: 0.5em 1em;
   font-size: 1em;
-  border: 2px solid $primary;
+  border: 2px solid $color-brand;
 
   input {
     height: 80%;

src/front/shared/components/layout/DashboardLayout/styles.scss

@@ -40,7 +40,7 @@
   button {
     float: right;
     border: 3px solid #fff;
-    color: $primary;
+    color: $color-brand;
     background: #fff;
   }
 }