Added warning in sign up page

css/main.css

@@ -448,6 +448,14 @@ details[open] > summary .icon {
   background-color: var(--accent-color--light);
 }
 
+.warning {
+  background-color: khaki;
+  color: rgba(0, 0, 0, 0.7);
+  padding: 1rem;
+  border-radius: 0.5rem;
+  line-height: 1.5;
+}
+
 .page-layout {
   display: grid;
   grid-template-columns: 1.5rem minmax(0, 1fr) 1.5rem;
@@ -496,6 +504,9 @@ details[open] > summary .icon {
   font-weight: 500;
   color: rgba(var(--text-color), 0.8);
 }
+#sign_up .warning {
+  margin-top: 2rem;
+}
 
 #loading {
   place-content: center;

css/main.scss

@@ -407,6 +407,13 @@ details {
   border-radius: 0.5rem;
   background-color: var(--accent-color--light);
 }
+.warning {
+  background-color: khaki;
+  color: rgba(0, 0, 0, 0.7);
+  padding: 1rem;
+  border-radius: 0.5rem;
+  line-height: 1.5;
+}
 .page-layout {
   display: grid;
   grid-template-columns: 1.5rem minmax(0, 1fr) 1.5rem;
@@ -448,6 +455,9 @@ details {
     font-weight: 500;
     color: rgba(var(--text-color), 0.8);
   }
+  .warning {
+    margin-top: 2rem;
+  }
 }
 #loading {
   place-content: center;

index.html

@@ -99,7 +99,6 @@
         <section class="grid">
             <h1 class="h2">FLO credentials</h1>
             <p>Get your FLO credentials to use RanchiMall Bank and all RanchiMall FLO apps. </p>
-            <strong></strong>
             <div class="grid gap-1-5 card">
                 <div class="grid gap-0-5">
                     <h5>FLO ID</h5>
@@ -111,6 +110,10 @@
                 </div>
             </div>
             <sm-button id="sign_up_button" variant="primary">Sign in with these credentials</sm-button>
+            <strong class="warning">
+                Keep your private key secure and don't share with anyone.
+                Once lost there is no way to recover private key.
+            </strong>
         </section>
     </article>
     <article id="loading" class="page page-layout">
@@ -1872,8 +1875,8 @@
                     const action = rtype === 'openDeposit' ? 'Deposit' : 'Loan'
                     getRef(`${type}_button`).classList.add('hide-completely')
                     getRef(`${type}_button`).after(createElement('strong', {
+                        className: 'warning',
                         textContent: `${action} in process. You can't ${type === 'deposit' ? 'deposit' : 'request loan'} until that's completed.`,
-                        attributes: { 'style': 'background-color: khaki; color: rgba(0,0,0,0.7); padding: 1rem; border-radius: 0.5rem' }
                     }))
                 }
             } else {