Style for form application,confirmations, playment

backend/accounts/templates/accounts/confirmation_expired.html

@@ -1,10 +1,24 @@
 {% extends "base.html" %}
 
-{%block content%}
-<h2>Link has expired! </h2>
-<form method="POST">
-    {% csrf_token %}
-    <button type="submit">Resend link</button>
+{% block content %}
+<div class="confirmed">
+    <div class="confirmation-card">
+        <h2 class="title-org">Link has expired!</h2>
+        <p class="info-p">
+            The confirmation link you used has expired or is no longer valid.<br>
+            Please click the button below to receive a new confirmation link.
+        </p>
+        <form method="POST">
+            {% csrf_token %}
+            <button type="submit" class="btn-primary-orn">Resend link</button>
+        </form>
+    </div>
+</div>
+
+<script>
+    nav = document.querySelector('nav');
+    confirmed = document.querySelector('.confirmed');
+    confirmed.style.height = `calc(100vh - ${nav.offsetHeight}px)`;
+</script>
 
-</form>
 {% endblock %}

backend/accounts/templates/accounts/confirmation_success.html

@@ -1,11 +1,22 @@
 {% extends "base.html" %}
 
-{%block content%}
-<div class="out-risk-management">
-    <div class="risk-management">
-        <h1>Email Confirmed!</h1>
-        <p>Your email {{ email }} has been successfully verified.</p>
+{% block content %}
+<div class="confirmed">
+    <div class="confirmation-card">
+        <h1 class="title-org">Email Confirmed!</h1>
+        <p class="info-p">
+            Your email <strong style="color: #FAA95E;">{{ email }}</strong> has been successfully verified.<br>
+            Thank you for confirming your email. We are currently generating your document. A link to access your document will be sent to you shortly.
+        </p>
+        <a href="{% url 'core:index' %}" class="btn-primary-orn" style="margin-top: 1rem;">
+            Go back to Homepage
+        </a>
     </div>
 </div>
 
-{%endblock%}
+<script>
+    nav = document.querySelector('nav');
+    confirmed = document.querySelector('.confirmed');
+    confirmed.style.height = `calc(100vh - ${nav.offsetHeight}px)`;
+</script>
+{% endblock %}