From 9965471c56b44ec4b2bd8038730c8457de2687d2 Mon Sep 17 00:00:00 2001
From: Kenneth Jannette <sj@sjdev.co>
Date: Fri, 12 Jan 2024 18:57:05 -0600
Subject: [PATCH] more

---
 src/Components/MobileContent.js | 10 +++++++---
 src/styles/app.scss             | 15 +++++++++++++++
 src/styles/dashboard.scss       | 31 ++++++++++++++++++++++++++++++-
 3 files changed, 52 insertions(+), 4 deletions(-)

diff --git a/src/Components/MobileContent.js b/src/Components/MobileContent.js
index 6cf20d9..4a1fe7d 100644
--- a/src/Components/MobileContent.js
+++ b/src/Components/MobileContent.js
@@ -2,12 +2,12 @@ import legalTechFlip from "../Assets/Images/legalTechFlip.jpg";
 const MobileContent = ({ isDashboard }) => {
   const copy = isDashboard ? (
     <div>
-      <p>
+      <p className="mobile-text-dashboard">
         Novodraft is a desktop application. The functionailty of your Dashboard
         in mobile mode is limited to displaying stats and important
         notifications.
       </p>
-      <p>
+      <p className="mobile-text-dashboard">
         Please login on your desktop device to use all of the functions your
         Dashboard.
       </p>
@@ -31,7 +31,11 @@ const MobileContent = ({ isDashboard }) => {
             <div className="mobile-divider"></div>
           </>
         )}
-        <div className="mobile-info-heading">{copy}</div>
+        {isDashboard ? (
+          <div className="mobile-info-heading-dashboard">{copy}</div>
+        ) : (
+          <div className="mobile-info-heading">{copy}</div>
+        )}
         <div className="mobile-divider"></div>
       </div>
     </>
diff --git a/src/styles/app.scss b/src/styles/app.scss
index 2200686..44cbae3 100644
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -99,4 +99,19 @@ p {
     font-size: 15px;
     line-height: 21px;
   }
+  .mobile-info-heading-dashboard {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin: 2px 6px 2px 6px;
+    text-align: justify;
+    font-size: 15px;
+    line-height: 21px;
+  }
+
+  .mobile-text-dashboard {
+    margin-bottom: 6px;
+    padding: 0px 6px;
+  }
 }
diff --git a/src/styles/dashboard.scss b/src/styles/dashboard.scss
index ab568f3..9dcbef9 100644
--- a/src/styles/dashboard.scss
+++ b/src/styles/dashboard.scss
@@ -80,8 +80,37 @@
   flex-direction: column;
 }
 
-@media only screen and (min-width: map.get($grid-breakpoints, "md")) {
+@media only screen and (max-width: 430px) {
+  .dashboard-header {
+    display: flex;
+    gap: 1rem;
+    justify-content: center;
+    margin: 30px 0px 0px 0px;
+    align-items: center;
+    margin-left: auto;
+    margin-right: auto;
+    padding: 12px 0px;
+    width: 280px;
+    background-color: var(--background-blue);
+    border-radius: 15px;
+  }
+
   .dashboard-filter {
     flex-direction: row;
   }
+
+  .stats-container {
+    height: 100%;
+  }
+
+  .stats-row-box {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 12px 0px;
+    padding: 0px 6px;
+    background-color: #fff;
+    height: 100%;
+    border-radius: 6px;
+  }
 }