Added account progress status

css/main.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 * {
   padding: 0;
   margin: 0;
@@ -43,7 +42,7 @@ body[data-theme=dark] * {
   --background-color: 10, 10, 10;
   --foreground-color: rgb(20, 20, 20);
   --danger-color: rgb(255, 106, 106);
-  --green: #00E676;
+  --green: #00e676;
   --yellow: #ffd13a;
 }
 
@@ -483,7 +482,7 @@ details[open] > summary .icon {
 
 #sign_up sm-copy {
   font-size: 0.9rem;
-  --button-border-radius: 0.5rem ;
+  --button-border-radius: 0.5rem;
 }
 #sign_up .h2 {
   margin-bottom: 0.5rem;
@@ -934,17 +933,8 @@ details[open] > summary .icon {
   font-size: 1.8rem;
   font-weight: 700;
 }
-#transaction_detail__amount::before,
-#account_detail__amount::before {
-  font-weight: 500;
-  font-size: 1rem;
-  -ms-flex-item-align: start;
-      align-self: flex-start;
-  content: "₹";
-}
 
-#transaction_detail__time,
-#account_detail__time {
+#transaction_detail__time {
   font-size: 0.8rem;
   color: rgba(var(--text-color), 0.8);
   margin-right: 1rem;
@@ -957,21 +947,25 @@ details[open] > summary .icon {
   gap: 2rem;
 }
 
-#account_process__type {
-  margin-top: 1.5rem;
-  font-size: 0.9rem;
-  font-weight: 500;
-  color: rgba(var(--text-color), 0.8);
-}
-
-#account_process__amount {
-  font-size: 1.5rem;
-}
-
 .account-step {
+  opacity: 0;
   grid-template-columns: auto minmax(0, 1fr);
-  grid-template-areas: "step-icon step-title" "step-icon step-description";
+  grid-template-areas: "step-icon step-title" ". step-description";
   gap: 0.3rem 0.8rem;
+  -webkit-animation: slide-down 0.3s forwards;
+          animation: slide-down 0.3s forwards;
+}
+.account-step:nth-of-type(2) {
+  -webkit-animation-delay: 0.1s;
+          animation-delay: 0.1s;
+}
+.account-step:nth-of-type(3) {
+  -webkit-animation-delay: 0.2s;
+          animation-delay: 0.2s;
+}
+.account-step:nth-of-type(4) {
+  -webkit-animation-delay: 0.3s;
+          animation-delay: 0.3s;
 }
 .account-step sm-spinner {
   --height: 1rem;
@@ -994,6 +988,7 @@ details[open] > summary .icon {
   width: 1.5rem;
 }
 .account-step:not(.loading) .step__title {
+  text-transform: capitalize;
   grid-area: step-title;
   font-weight: 500;
   font-size: 0.9rem;
@@ -1066,6 +1061,10 @@ details[open] > summary .icon {
 #account_action_button {
     margin-top: auto;
   }
+
+  #account_process {
+    margin-top: 3rem;
+  }
 }
 @media screen and (min-width: 640px) {
   #confirmation_popup,
@@ -1120,7 +1119,8 @@ details[open] > summary .icon {
   }
 
   #transaction_top,
-#account_top {
+#account_top,
+#account_process {
     overflow: hidden;
     padding: 1.8rem;
     border-radius: 0.5rem;
@@ -1170,6 +1170,7 @@ details[open] > summary .icon {
   #transaction section,
 #account_details {
     display: grid;
+    gap: 1.5rem;
     grid-template-columns: 18rem minmax(0, 1fr);
   }
 }