Merge branch 'platform-wide-redesign-onboarding' into platform-wide-r…

…edesign-knowledge-library
akvo · Sep 14, 2023 · 0675c52 · 0675c52
2 parents 74df142 + 1d50f33
commit 0675c52
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 10 deletions.
diff --git a/frontend/src/modules/onboarding/styles.module.scss b/frontend/src/modules/onboarding/styles.module.scss
@@ -1,12 +1,10 @@
-@import "../../vars.scss";
-@import "../../styles/vars.scss";
-@import "../../styles/btns.scss";
+@import '../../vars.scss';
+@import '../../styles/vars.scss';
+@import '../../styles/btns.scss';
 
 .onboarding {
   padding: 60px 0px;
-  background: url("/auth/auth-background.png");
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
+  background-color: #e7f3ff6b;
   :global {
     .waveboard {
       background-color: #fff;
@@ -18,6 +16,8 @@
       display: flex;
       position: relative;
       border-radius: 7px;
+      box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1),
+        0 2px 4px -2px rgb(0 0 0 / 0.1);
       .slide {
         width: 100%;
         min-width: 100%;
@@ -141,6 +141,9 @@
       left: 25px;
       bottom: 30px;
       z-index: 3;
+      svg {
+        padding-left: 0 !important;
+      }
     }
     .step-button-next {
       &.abs {
@@ -256,7 +259,7 @@
               background: #3176ae;
               border-radius: 10px;
               box-shadow: inset 0 1px rgb(0 0 0 / 25%);
-              content: "";
+              content: '';
               position: absolute;
               height: 12px;
               width: 12px;

diff --git a/frontend/src/modules/onboarding/view.jsx b/frontend/src/modules/onboarding/view.jsx
@@ -12,6 +12,7 @@ import { setIn } from 'final-form'
 import { useRouter } from 'next/router'
 import { useDeviceSize } from '../landing/landing'
 import Button from '../../components/button'
+import { ArrowLeftOutlined } from '@ant-design/icons'
 
 function Authentication() {
   const formRef = useRef()
@@ -281,10 +282,9 @@ function Authentication() {
                   </div>
                   <div className="button-bottom-panel">
                     <Button
-                      className="step-button-next"
                       size="small"
                       onClick={() => next()}
-                      ghost
+                      withArrow="link"
                     >
                       Next
                     </Button>
@@ -335,7 +335,7 @@ function Authentication() {
                     className="step-button-back"
                     onClick={previous}
                     size="small"
-                    ghost
+                    icon={<ArrowLeftOutlined />}
                   >
                     Back
                   </Button>