Merge pull request #21 from stacks-degens/tablet-view

Tablet view
degen-lab · Jun 16, 2023 · 25e4a09 · 25e4a09
2 parents 8da4aa1 + c4276f4
commit 25e4a09
Show file tree

Hide file tree

Showing 13 changed files with 523 additions and 4 deletions.
diff --git a/src/components/MainPage.tsx b/src/components/MainPage.tsx
@@ -14,7 +14,11 @@ import MinerProfileDetails from './appMenuSections/profile/MinerProfileDetails';
 
 const MainPage = () => {
   return (
-    <div>
+    <div
+      style={{
+        backgroundColor: 'inherit',
+      }}
+    >
       <div>
         <HeaderBar />
       </div>

diff --git a/src/components/appMenuSections/dashboard/styles.css b/src/components/appMenuSections/dashboard/styles.css
@@ -39,3 +39,55 @@
     font-size: 10.6px;
   }
 }
+
+@media screen and (min-width: 576px) and (max-width: 991px) {
+  .dashboard-page-main-container .page-heading-title {
+    height: 120px;
+  }
+
+  .dashboard-page-main-container .page-heading-title h2 {
+    font-size: 30px;
+  }
+
+  .dashboard-page-main-container .main-info-container-normal-user {
+    /* width: 90%; */
+    margin-top: 80px;
+    /* background-color: red !important; */
+  }
+
+  .dashboard-page-main-container .info-container-dashboard-page {
+    width: 500px;
+  }
+
+  .dashboard-page-main-container .title-info-container {
+    font-size: 20px;
+  }
+
+  .dashboard-page-main-container .content-sections-title-info-container span {
+    font-size: 22px;
+  }
+
+  .result-of-content-section {
+    font-size: 17.5px;
+  }
+}
+
+@media screen and (min-width: 992px) and (max-width: 1180px) {
+  .dashboard-page-main-container .main-info-container-normal-user {
+    margin-top: 90px;
+  }
+
+  .dashboard-page-main-container .page-heading-title h2 {
+    font-size: 28px;
+  }
+
+  .dashboard-page-main-container .content-sections-title-info-container span,
+  .dashboard-page-main-container .title-info-container,
+  .result-of-content-section {
+    font-size: 20px;
+  }
+
+  .dashboard-page-main-container .info-container-dashboard-page {
+    width: 560px;
+  }
+}
diff --git a/src/components/appMenuSections/home/styles.css b/src/components/appMenuSections/home/styles.css
@@ -24,3 +24,24 @@
     height: 100px;
   }
 }
+
+@media screen and (min-width: 576px) and (max-width: 991px) {
+  .home-page-main-container .page-heading-title {
+    margin-bottom: 60px;
+    height: 120px;
+  }
+
+  .home-page-main-container .page-heading-title h2 {
+    font-size: 30px;
+  }
+}
+
+@media screen and (min-width: 992px) and (max-width: 1180px) {
+  .home-page-main-container .page-heading-title {
+    margin-bottom: 60px;
+  }
+
+  .home-page-main-container .page-heading-title h2 {
+    font-size: 28px;
+  }
+}
diff --git a/src/components/appMenuSections/miningPool/styles.css b/src/components/appMenuSections/miningPool/styles.css
@@ -86,3 +86,93 @@ table th {
     width: auto !important;
   } */
 }
+
+@media screen and (min-width: 576px) and (max-width: 991px) {
+  .single-miner-page-main-container .info-container-profile-page {
+    margin-bottom: 0 !important;
+  }
+  .miningpool-status-page-main-container .main-info-container-normal-user {
+    margin-bottom: 0 !important;
+    /* padding-bottom: 30px; */
+  }
+
+  .miningpool-status-page-main-container .page-heading-title,
+  .miningpool-miners-page-main-container .page-heading-title {
+    height: 120px;
+  }
+
+  .miningpool-status-page-main-container .page-heading-title h2,
+  .miningpool-miners-page-main-container .page-heading-title h2 {
+    font-size: 30px;
+  }
+
+  .miningpool-status-page-main-container .main-info-container-normal-user,
+  .miningpool-miners-page-main-container .principal-content-profile-page {
+    /* width: 90%; */
+    margin-top: 80px;
+    /* background-color: red !important; */
+  }
+
+  .miningpool-status-page-main-container .info-container-mining-pool-status-page {
+    width: 500px;
+  }
+
+  .miningpool-status-page-main-container .title-info-container {
+    font-size: 20px;
+  }
+
+  .miningpool-status-page-main-container .content-sections-title-info-container span {
+    font-size: 22px;
+  }
+
+  .result-of-content-section {
+    font-size: 17.5px;
+  }
+
+  table th {
+    font-size: 14px !important;
+    font-weight: bold !important;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+
+  table td {
+    font-size: 15px !important;
+  }
+}
+
+@media screen and (min-width: 992px) and (max-width: 1180px) {
+  .miningpool-status-page-main-container .main-info-container-normal-user {
+    margin-top: 90px;
+  }
+
+  .miningpool-miners-page-main-container .page-heading-title {
+    margin-bottom: 40px;
+  }
+
+  .miningpool-status-page-main-container .page-heading-title h2,
+  .miningpool-miners-page-main-container .page-heading-title h2 {
+    font-size: 28px;
+  }
+
+  .miningpool-status-page-main-container .title-info-container,
+  .miningpool-status-page-main-container .content-sections-title-info-container span,
+  .result-of-content-section {
+    font-size: 20px;
+  }
+
+  .miningpool-status-page-main-container .info-container-mining-pool-status-page {
+    width: 560px;
+  }
+
+  table th {
+    font-size: 14px !important;
+    font-weight: bold !important;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+
+  table td {
+    font-size: 15px !important;
+  }
+}
diff --git a/src/components/appMenuSections/profile/MinerProfileDetails.tsx b/src/components/appMenuSections/profile/MinerProfileDetails.tsx
@@ -100,14 +100,21 @@ const Voting = () => {
 
   return (
     <div
-      style={{ backgroundColor: colors[appCurrentTheme].infoContainers }}
+      style={{
+        backgroundColor: 'inherit',
+      }}
       className="single-miner-page-main-container"
     >
       <div className="page-heading-title">
         <h2>Decentralized Mining Pool</h2>
         <h2>Miner Details</h2>
       </div>
-      <div className="principal-content-profile-page">
+      <div
+        style={{
+          backgroundColor: colors[appCurrentTheme].accent2,
+        }}
+        className="principal-content-profile-page"
+      >
         <RoleIntroMinerDetails currentRole={status} />
         <div className={'main-info-container-normal-user'}>
           <MinerDetailsContainer