From 607081c843cee40f1a9df850fcb372fd8be4c121 Mon Sep 17 00:00:00 2001
From: Yi-Jacob <jacobyideveloper@gmail.com>
Date: Thu, 18 Jan 2024 19:41:17 -0600
Subject: [PATCH] #162 - Update graphics on login page

---
 .../df-side-nav/df-side-nav.component.html    | 40 ++++++++++---------
 .../df-side-nav/df-side-nav.component.scss    | 36 +++++++++--------
 2 files changed, 41 insertions(+), 35 deletions(-)

diff --git a/src/app/shared/components/df-side-nav/df-side-nav.component.html b/src/app/shared/components/df-side-nav/df-side-nav.component.html
index 5019b45b..32dd515d 100644
--- a/src/app/shared/components/df-side-nav/df-side-nav.component.html
+++ b/src/app/shared/components/df-side-nav/df-side-nav.component.html
@@ -61,24 +61,26 @@
       [mode]="(isSmallScreen | async) ? 'over' : 'side'">
       <ng-container *ngIf="(isLoggedIn$ | async) === false">
         <div class="login-side-container">
-          <div class="image-wrapper">
-            <img src="assets/img/Server-Stack.gif" alt="Self Hosted" />
-            <h3>Self Hosted</h3>
-          </div>
-          <div class="image-wrapper">
-            <img src="assets/img/API.gif" alt="API Generation" />
-            <h3>
-              Database & Network<br />
-              API Generation
-            </h3>
-          </div>
-          <div class="image-wrapper">
-            <img src="assets/img/Browser.gif" alt="Api Security" />
-            <h3>API Security</h3>
-          </div>
-          <div class="image-wrapper">
-            <img src="assets/img/Tools.gif" alt="API Scripting" />
-            <h3>API Scripting</h3>
+          <div class="image-container">
+            <div class="image-wrapper">
+              <img src="assets/img/Server-Stack.gif" alt="Self Hosted" />
+              <h3>Self Hosted</h3>
+            </div>
+            <div class="image-wrapper">
+              <img src="assets/img/API.gif" alt="API Generation" />
+              <h3>
+                Database & Network<br />
+                API Generation
+              </h3>
+            </div>
+            <div class="image-wrapper">
+              <img src="assets/img/Browser.gif" alt="Api Security" />
+              <h3>API Security</h3>
+            </div>
+            <div class="image-wrapper">
+              <img src="assets/img/Tools.gif" alt="API Scripting" />
+              <h3>API Scripting</h3>
+            </div>
           </div>
         </div>
       </ng-container>
@@ -160,4 +162,4 @@ <h1 class="page-header">
       </mat-expansion-panel>
     </ng-template>
   </ng-container>
-</ng-template>
+</ng-template>
\ No newline at end of file
diff --git a/src/app/shared/components/df-side-nav/df-side-nav.component.scss b/src/app/shared/components/df-side-nav/df-side-nav.component.scss
index 417fabb2..4cff73a2 100644
--- a/src/app/shared/components/df-side-nav/df-side-nav.component.scss
+++ b/src/app/shared/components/df-side-nav/df-side-nav.component.scss
@@ -52,25 +52,29 @@ $red-palette: mat.define-palette(mat.$red-palette);
 
     .login-side-container {
       display: flex;
+      flex-direction: column;
       justify-content: center;
-      align-items: center; // Vertically centers the content
-      flex-wrap: wrap;
-      text-align: center;
-      height: 40%;
-      gap: 8px;
-      width: 100%;
-      margin-top: 15%;
-      .image-wrapper {
-        width: calc(45% - 8px); // 2 columns, so each takes up 50% of the width
-        padding: 10px; // Optional, for spacing
+      height: 100%;
+      .image-container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-wrap: wrap;
+        text-align: center;
+        gap: 8px;
+        width: 100%;
+        .image-wrapper {
+          width: calc(40% - 8px);
+          padding: 10px;
 
-        img {
-          width: 80%; // Makes the image responsive within its wrapper
-          height: auto;
-        }
+          img {
+            width: 60%;
+            height: auto;
+          }
 
-        h3 {
-          color: #fff;
+          h3 {
+            color: #fff;
+          }
         }
       }
     }