Merge pull request #19 from rarimo/feat/update-design

feat update logo and bg

src/pages/SignInPage/SignInPage.tsx

@@ -74,6 +74,7 @@ const SignInPage = () => {
 
   return (
     <div className='sign-in-page'>
+      <div className='sign-in-page__backdrop' />
       <div className='sign-in-page__logo-wrapper'>
         <img
           className='sign-in-page__logo'

src/pages/SignInPage/styles.scss

@@ -4,11 +4,6 @@
   justify-content: center;
   height: 100vh;
   width: 100%;
-  background-image: url("/imgs/app-bg.png");
-  background-repeat: no-repeat;
-  background-position: right;
-  background-size: 50% / cover;
-  backdrop-filter: opacity(0.1);
 
   &:before {
     content: "";
@@ -19,13 +14,13 @@
     width: 100%;
     height: 100%;
     background: var(--background-secondary-main);
-    opacity: 0.25;
     filter: blur(#{toRem(2)});
+    opacity: 0.8;
     z-index: var(--z-index-hidden);
   }
 
   &:after {
-    background: url("/imgs/cells-bg.png") repeat top center / contain;
+    background: url("/imgs/cells-bg.png") repeat top center;
     content: "";
     pointer-events: none;
     position: fixed;
@@ -34,6 +29,7 @@
     width: 100%;
     height: 100%;
     z-index: var(--z-index-hidden);
+    opacity: 0.7;
   }
 
   @include respond-to(small) {
@@ -42,6 +38,32 @@
   }
 }
 
+.sign-in-page__backdrop {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  background-image: url("/imgs/app-bg.png");
+  background-repeat: no-repeat;
+  background-position: right;
+  background-size: contain;
+  backdrop-filter: blur(toRem(118));
+  z-index: var(--z-index-hidden);
+  opacity: 0.5;
+
+  &:before {
+    content: "";
+    pointer-events: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: var(--white);
+    opacity: 0.6;
+    z-index: var(--z-index-hidden);
+  }
+}
+
 .sign-in-page__content {
   display: flex;
   flex-direction: column;
@@ -76,6 +98,6 @@
 
 .sign-in-page__logo-wrapper {
   position: absolute;
-  top: toRem(25);
+  top: toRem(38);
   left: toRem(65);
 }