Merge pull request #22 from stacks-degens/small-screen-view

Small screen view
degen-lab · Jun 16, 2023 · b1abfbb · b1abfbb
2 parents 25e4a09 + e86c8ae
commit b1abfbb
Show file tree

Hide file tree

Showing 15 changed files with 236 additions and 71 deletions.
diff --git a/src/components/ConnectWallet.tsx b/src/components/ConnectWallet.tsx
@@ -57,7 +57,7 @@ const ConnectWallet = ({ currentTheme }: ConnectWalletProps) => {
   if (userSession.isUserSignedIn()) {
     if (currentRole === 'Viewer') {
       dispatch(updateUserRoleAction(finalStatus));
-      return <div>Loading role...</div>;
+      return <div>Loading ...</div>;
     }
     return (
       <div>

diff --git a/src/components/LeftPanel.tsx b/src/components/LeftPanel.tsx
@@ -13,13 +13,13 @@ import MenuOpen from '@mui/icons-material/MenuOpenRounded';
 import HomeIcon from '@mui/icons-material/Home';
 import Hardware from '@mui/icons-material/Hardware';
 import Poll from '@mui/icons-material/Poll';
-import { Link, useLocation, useParams } from 'react-router-dom';
+import { Link, useLocation } from 'react-router-dom';
 import colors from '../consts/colorPallete';
 import Home from '@mui/icons-material/Home';
 import AccountCircleIcon from '@mui/icons-material/AccountCircle';
 import { useAppSelector } from '../redux/store';
 import { selectCurrentTheme, selectCurrentUserRole, UserRole } from '../redux/reducers/user-state';
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 import { ExpandLess, ExpandMore, StarBorder } from '@mui/icons-material';
 import { Collapse } from '@mui/material';
 import '../css/navbars/styles.css';

diff --git a/src/components/appMenuSections/dashboard/styles.css b/src/components/appMenuSections/dashboard/styles.css
@@ -1,18 +1,15 @@
 .dashboard-page-main-container {
-  /* background-color: red !important; */
   height: calc(100vh - 60px);
   display: flex;
   flex-direction: column;
   justify-content: start;
 }
 
 .dashboard-page-main-container .page-heading-title {
-  /* background-color: green !important; */
   height: 100px;
 }
 
 .dashboard-page-main-container .principal-content-profile-page {
-  /* background-color: yellow !important; */
   height: calc(100vh - 160px);
   margin: 0;
   width: 100%;
@@ -50,9 +47,7 @@
   }
 
   .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 {
@@ -91,3 +86,23 @@
     width: 560px;
   }
 }
+
+@media screen and (min-width: 1181px) {
+  .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
@@ -45,3 +45,13 @@
     font-size: 28px;
   }
 }
+
+@media screen and (min-width: 1181px) {
+  .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
@@ -16,7 +16,6 @@ table th {
 
 .miningpool-status-page-main-container,
 .miningpool-miners-page-main-container {
-  /* background-color: red !important; */
   height: calc(100vh - 60px);
   display: flex;
   flex-direction: column;
@@ -25,13 +24,11 @@ table th {
 
 .miningpool-status-page-main-container .page-heading-title,
 .miningpool-miners-page-main-container .page-heading-title {
-  /* background-color: green !important; */
   height: 100px;
 }
 
 /* the main page where I am displaying the table */
 .miningpool-miners-page-main-container .principal-content-profile-page {
-  /* background-color: yellow !important; */
   height: calc(100vh - 160px);
   margin: 0;
   width: 100%;
@@ -40,7 +37,6 @@ table th {
 }
 
 .miningpool-status-page-main-container .principal-content-profile-page {
-  /* background-color: yellow !important; */
   height: calc(100vh - 160px);
   margin: 0;
   width: 100%;
@@ -93,7 +89,6 @@ table th {
   }
   .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,
@@ -108,9 +103,7 @@ table th {
 
   .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 {
@@ -176,3 +169,39 @@ table th {
     font-size: 15px !important;
   }
 }
+
+@media screen and (min-width: 1181px) {
+  .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/MinerProfile.tsx b/src/components/appMenuSections/profile/MinerProfile.tsx
@@ -5,7 +5,6 @@ import {
   readOnlyGetRemainingBlocksJoin,
 } from '../../../consts/readOnly';
 import { selectCurrentUserRole, selectUserSessionState } from '../../../redux/reducers/user-state';
-// import '../style.css';
 import { useAppSelector } from '../../../redux/store';
 import AboutContainer from '../../reusableComponents/profile/AboutContainer';
 import ActionsContainer from '../../reusableComponents/profile/ActionsContainer';

diff --git a/src/components/appMenuSections/profile/MinerProfileDetails.tsx b/src/components/appMenuSections/profile/MinerProfileDetails.tsx
@@ -22,7 +22,7 @@ interface MinerDataProps {
   wasBlacklisted: boolean;
 }
 
-const Voting = () => {
+const MinerProfileDetails = () => {
   const currentLink = window.location.href;
   const addressParts = currentLink.split('/');
   const address = addressParts[addressParts.length - 1];
@@ -136,4 +136,4 @@ const Voting = () => {
   );
 };
 
-export default Voting;
+export default MinerProfileDetails;
diff --git a/src/components/appMenuSections/profile/Profile.tsx b/src/components/appMenuSections/profile/Profile.tsx
@@ -111,7 +111,6 @@ const Profile = () => {
   }, [currentBalance, totalWithdrawals]);
 
   return (
-    // <div>
     <div
       className="profile-page-main-container"
       style={{
@@ -125,7 +124,6 @@ const Profile = () => {
       </div>
       {profileMapping[currentRole]}
     </div>
-    // </div>
   );
 };
 

diff --git a/src/components/appMenuSections/profile/styles.css b/src/components/appMenuSections/profile/styles.css
@@ -1,28 +1,18 @@
-/* .profile-page-main-container {
-  height: auto;
-} */
-
 .profile-page-main-container,
 .single-miner-page-main-container {
-  /* background-color: red !important; */
   height: auto;
-  /* height: calc(100vh - 60px); */
   display: flex;
   flex-direction: column;
   justify-content: start;
 }
 
 .profile-page-main-container .page-heading-title,
 .single-miner-page-main-container .page-heading-title {
-  /* background-color: green !important; */
   height: 100px;
 }
 
 .profile-page-main-container .principal-content-profile-page,
 .single-miner-page-main-container .principal-content-profile-page {
-  /* background-color: yellow !important; */
-  /* height: calc(100vh - 160px);
-  margin: 0; */
   width: 100%;
 }
 
@@ -110,7 +100,6 @@
     .actions-container-profile-page
     .content-info-container
     .input-line-actions-container {
-    /* background-color: blue !important; */
     display: flex;
     flex-direction: column;
   }
@@ -360,3 +349,112 @@
     font-size: 13px !important;
   }
 }
+
+@media screen and (min-width: 1181px) {
+  /* the intro label from single miner page (the orange banner) */
+  .single-miner-page-main-container .intro-container-profile-page {
+    width: 70%;
+  }
+
+  .profile-page-main-container .intro-container-profile-page {
+    width: 90%;
+  }
+
+  .single-miner-page-main-container .principal-content-profile-page {
+    margin-bottom: 40px;
+  }
+
+  .profile-page-main-container .page-heading-title h2,
+  .single-miner-page-main-container .page-heading-title h2 {
+    font-size: 28px;
+  }
+
+  /* profile page intro lateral information */
+  .profile-page-main-container .intro-sides {
+    font-size: 16px;
+  }
+
+  /* profile page intro central information (current role) */
+  .profile-page-main-container .intro-center-side,
+  .single-miner-page-main-container .intro-center-side {
+    font-size: 22px;
+  }
+
+  .profile-page-main-container .main-info-container {
+    width: 85%;
+    flex-direction: row;
+    justify-content: space-between;
+    margin-top: 50px;
+  }
+
+  .profile-page-main-container .info-container-profile-page {
+    width: 47%;
+    margin-bottom: 50px;
+    height: auto !important;
+    height: 510px !important;
+  }
+
+  .single-miner-page-main-container .info-container-profile-page {
+    width: 560px;
+    margin-bottom: 60px;
+    height: auto !important;
+  }
+
+  .profile-page-main-container .title-info-container,
+  .single-miner-page-main-container .title-info-container {
+    font-size: 20px;
+  }
+
+  .profile-page-main-container .content-sections-title-info-container span,
+  .single-miner-page-main-container .content-sections-title-info-container span {
+    font-size: 20px;
+  }
+
+  .profile-page-main-container .content-sections-title-info-container .result-of-content-section {
+    font-size: 17px;
+  }
+
+  .single-miner-page-main-container .content-sections-title-info-container .result-of-content-section {
+    font-size: 20px;
+  }
+
+  /* autoexchange button container */
+  .profile-page-main-container .autoexchange-button-container {
+    width: 170px;
+  }
+
+  /* autoexchange button from about container on profile page */
+  .profile-page-main-container .autoexchange-button-container button,
+  .leave-pool-button-action-container button,
+  .button-container-action-container button {
+    font-size: 18px;
+    width: 170px;
+    height: 45px;
+  }
+
+  .button-container-action-container button {
+    margin-bottom: 5px;
+  }
+
+  /* the input line from actions container on profile page */
+  .custom-input {
+    box-sizing: border-box;
+    height: 45px;
+  }
+
+  .input-line-actions-container {
+    align-items: end !important;
+  }
+
+  .profile-page-main-container .content-info-container {
+    height: 100%;
+  }
+
+  .single-miner-page-main-container .principal-content-profile-page {
+    height: auto;
+  }
+
+  .custom-label {
+    font-size: 13px !important;
+  }
+}
diff --git a/src/components/appMenuSections/voting/VotingRemovals.tsx b/src/components/appMenuSections/voting/VotingRemovals.tsx
@@ -76,19 +76,6 @@ const VotingRemovals = () => {
   };
 
   return (
-    // <Box
-    //   sx={{
-    //     display: 'flex',
-    //     alignItems: 'center',
-    //     flexDirection: 'column',
-    //     width: '100%',
-    //     minHeight: 'calc(100vh - 60px)',
-    //   }}
-    //   style={{
-    //     backgroundColor: colors[currentTheme].accent2,
-    //     color: colors[currentTheme].secondary,
-    //   }}
-    // >
     <div className="voting-removals-page-main-container">
       <div className="page-heading-title">
         <h2>Decentralized Mining Pool</h2>
@@ -105,7 +92,6 @@ const VotingRemovals = () => {
       </div>
     </div>
   );
-  // </Box>
 };
 
 export default VotingRemovals;