VIA-172 AJ/AS Updated styling

Author: ankur-jain-nhs

src/app/session-logout/page.tsx

@@ -17,7 +17,7 @@ const SessionLogout = () => {
       <MainContent>
         <title>You have been logged out</title>
         <div className={styles.logoutScreen}>
-          <div className={styles.logoutHeading}>
+          <div className={styles.logoutBanner}>
             <h4>For your security, you need to login again.</h4>
           </div>
           <div className={styles.logoutContent}>

src/app/session-logout/styles.module.css

@@ -1,44 +1,50 @@
 .logoutScreen {
-  background-color: #005eb8; /* $color_nhsuk-blue */
-  height: 100vh; /* Full screen */
   display: flex;
   flex-direction: column; /* Stack children vertically */
-  justify-content: center; /* Center vertically */
-  align-items: center; /* Center horizontally */
+  min-height: 100vh; /* Full screen */
+  align-items: center;
+  background-color: #005eb8; /* $color_nhsuk-blue */
+  width: 100%;
+  margin: 0 auto;
+  overflow: hidden;
 }
 
-.logoutHeading {
-  color: #212b32; /* $color_nhsuk-black */
+.logoutBanner {
   background-color: #ffeb3b; /* $color_nhsuk-yellow */
-  width: 100%;
+  color: #212b32; /* $color_nhsuk-black */
+  padding: 1rem;
   text-align: center;
-  padding: 10px;
-  font-weight: bold;
-  display: flex;
-  flex-direction: column; /* Stack children vertically */
-  justify-content: center; /* Center vertically */
+  width: 100%;
 }
 
-.logoutHeading h4 {
-  margin: 0;
+.logoutBanner h4 {
+  margin: 0 auto;
 }
 
 .logoutContent {
-  height: 70vh;
+  flex-grow: 1; /* Allow the content to take up the remaining vertical space */
   display: flex;
-  color: #ffffff; /* $color_nhsuk-white */
+  width: 100%;
+  flex-direction: column;
+  justify-content: flex-end; /* pushes content to the bottom */
+  padding: 2rem 1.5rem;
   text-align: left;
-  padding: 10px;
+  color: #ffffff; /* $color_nhsuk-white */
 }
 
 .logBackInButton {
   width: 80%;
-  min-width: 150px;
   display: flex;
-  flex-direction: column; /* Stack children vertically */
-  justify-content: center; /* Center vertically */
+  flex-direction: column;
+  justify-content: flex-start;
+  min-width: 150px;
+  margin-bottom: 1rem;
 }
 
 .continueButton button {
   background-color: #005eb8; /* $color_nhsuk-blue */
 }
+
+.continueButton button:hover {
+  background-color: #2c5796;
+}