From 6f03f944c34f78b38a68128413b55186e0676949 Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Tue, 14 Jun 2022 13:54:54 +0200
Subject: Redesign register steps

---
 .../+register/custom-stepper.component.scss        | 139 +++++++++++++--------
 1 file changed, 88 insertions(+), 51 deletions(-)

(limited to 'client/src/app/+signup/+register/custom-stepper.component.scss')

diff --git a/client/src/app/+signup/+register/custom-stepper.component.scss b/client/src/app/+signup/+register/custom-stepper.component.scss
index 6a8815c77..4dda93489 100644
--- a/client/src/app/+signup/+register/custom-stepper.component.scss
+++ b/client/src/app/+signup/+register/custom-stepper.component.scss
@@ -2,76 +2,113 @@
 @use '_variables' as *;
 @use '_mixins' as *;
 
-$grey-color: #9CA3AB;
-$index-block-height: 32px;
+$index-block-height: 40px;
 
-.container {
-  @include padding-left(0);
-  @include padding-right(0);
-  max-width: unset !important;
+header {
+  margin-bottom: 40px;
+  padding-bottom: 60px;
+  width: 100%;
+  background-color: pvar(--mainColorVeryLight);
 }
 
-header {
+.header-steps {
+  max-width: 800px;
   display: flex;
   justify-content: space-between;
-  font-size: 15px;
-  margin-bottom: 30px;
+  margin: auto;
+
+  // Useful on small screens
+  padding: 0 20px;
+}
 
-  .step-info {
-    color: $grey-color;
+.step-index {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: $index-block-height;
+  height: $index-block-height;
+  border-radius: $index-block-height;
+  border: 1px solid pvar(--mainColor);
+  margin-bottom: 10px;
+  font-size: 24px;
+  position: relative;
+
+  .completed-icon {
+    width: 16px;
+    height: 16px;
+    border-radius: 16px;
+    background-color: pvar(--mainBackgroundColor);
+    position: absolute;
+    bottom: 0;
+    right: 0;
     display: flex;
-    flex-direction: column;
+    justify-content: center;
     align-items: center;
-    width: $index-block-height;
+    border: 1px solid pvar(--mainColor);
+
+    my-global-icon {
+      @include apply-svg-color(pvar(--mainColor));
 
-    &:not(.c-hand) {
-      cursor: default;
+      display: flex;
+      width: 12px;
+      height: 12px;
     }
+  }
+}
 
+.step-label {
+  width: max-content;
+  font-size: 18px;
+}
+
+.step-info {
+  color: pvar(--mainColor);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: $index-block-height;
+  opacity: 0.5;
+  cursor: default;
+
+  &.c-hand {
+    cursor: pointer;
+  }
+
+  &.active,
+  &.completed {
     .step-index {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      width: $index-block-height;
-      height: $index-block-height;
-      border-radius: 100px;
-      border: 2px solid $grey-color;
-      margin-bottom: 10px;
-
-      my-global-icon {
-        @include apply-svg-color(pvar(--mainBackgroundColor));
-
-        width: 22px;
-        height: 22px;
-      }
+      background-color: pvar(--mainColor);
+      color: pvar(--mainBackgroundColor);
     }
 
     .step-label {
-      width: max-content;
+      color: pvar(--mainColor);
     }
+  }
 
-    &.active,
-    &.completed {
-      .step-index {
-        border-color: pvar(--mainColor);
-        background-color: pvar(--mainColor);
-        color: pvar(--mainBackgroundColor);
-      }
-
-      .step-label {
-        color: pvar(--mainColor);
-      }
-    }
+  &.active {
+    opacity: 1;
+  }
+}
 
-    &.completed {
-      cursor: pointer;
-    }
+.connector {
+  flex: auto;
+  margin: math.div($index-block-height, 2) 10px 0 10px;
+  height: 2px;
+  background-color: pvar(--mainColor);
+  opacity: 0.3;
+}
+
+@media screen and (min-width: $small-view) {
+  .margin-content {
+    max-width: 1000px;
+    margin:auto;
   }
+}
 
-  .connector {
-    flex: auto;
-    margin: math.div($index-block-height, 2) 10px 0 10px;
-    height: 2px;
-    background-color: $grey-color;
+@media screen and (max-width: $small-view) {
+  .step-label {
+    width: auto;
+    text-align: center;
   }
 }
-- 
cgit v1.2.3