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 ? (
-
+
Novodraft is a desktop application. The functionailty of your Dashboard
in mobile mode is limited to displaying stats and important
notifications.
-
+
Please login on your desktop device to use all of the functions your
Dashboard.
@@ -31,7 +31,11 @@ const MobileContent = ({ isDashboard }) => {
>
)}
-
{copy}
+ {isDashboard ? (
+
{copy}
+ ) : (
+
{copy}
+ )}
>
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;
+ }
}