more

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>
           </>
         )}
+        {isDashboard ? (
+          <div className="mobile-info-heading-dashboard">{copy}</div>
+        ) : (
           <div className="mobile-info-heading">{copy}</div>
+        )}
         <div className="mobile-divider"></div>
       </div>
     </>

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;
+  }
 }

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;
+  }
 }