small screens view on profile page improved

degen-lab · Jun 1, 2023 · 07f9d2a · 07f9d2a
1 parent 8efd235
commit 07f9d2a
Show file tree

Hide file tree

Showing 14 changed files with 35 additions and 92 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 {

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 {

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;
   }
@@ -368,7 +357,7 @@
   }
 
   .profile-page-main-container .intro-container-profile-page {
-    width: 75%;
+    width: 90%;
   }
 
   .single-miner-page-main-container .principal-content-profile-page {
@@ -392,18 +381,17 @@
   }
 
   .profile-page-main-container .main-info-container {
-    width: 80%;
-    flex-direction: column;
-    margin-inline: auto;
+    width: 85%;
+    flex-direction: row;
     justify-content: space-between;
-    align-items: center;
-    margin-top: 60px;
+    margin-top: 50px;
   }
 
   .profile-page-main-container .info-container-profile-page {
-    width: 70%;
-    margin-bottom: 60px;
+    width: 47%;
+    margin-bottom: 50px;
     height: auto !important;
+    height: 510px !important;
   }
 
   .single-miner-page-main-container .info-container-profile-page {
@@ -422,28 +410,25 @@
     font-size: 20px;
   }
 
-  .profile-page-main-container .content-sections-title-info-container .result-of-content-section,
+  .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: 85%;
-    margin-inline: auto;
-    margin-top: 10px;
-  }
-
-  .leave-pool-button-action-container {
-    margin-top: 20px;
+    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: 20px;
-    width: 180px;
+    font-size: 18px;
+    width: 170px;
     height: 45px;
   }
 
@@ -460,11 +445,11 @@
   .input-line-actions-container {
     align-items: end !important;
   }
-  .alert-container-actions-container {
-    margin-top: 20px !important;
+
+  .profile-page-main-container .content-info-container {
+    height: 100%;
   }
 
-  .profile-page-main-container .content-info-container,
   .single-miner-page-main-container .principal-content-profile-page {
     height: auto;
   }

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;
diff --git a/src/components/appMenuSections/voting/styles.css b/src/components/appMenuSections/voting/styles.css
@@ -2,7 +2,6 @@
 .voting-notifier-page-main-container,
 .voting-joiners-page-main-container,
 .voting-removals-page-main-container {
-  /* background-color: red !important; */
   height: calc(100vh - 60px);
   display: flex;
   flex-direction: column;
@@ -13,13 +12,11 @@
 .voting-notifier-page-main-container .page-heading-title,
 .voting-joiners-page-main-container .page-heading-title,
 .voting-removals-page-main-container .page-heading-title {
-  /* background-color: green !important; */
   height: 100px;
 }
 
 .voting-joiners-page-main-container .principal-content-profile-page,
 .voting-removals-page-main-container .principal-content-profile-page {
-  /* background-color: yellow !important; */
   height: calc(100vh - 160px);
   margin: 0;
   width: 100%;
@@ -30,7 +27,6 @@
 /* the main page where I am displaying the table */
 .voting-status-page-main-container .principal-content-profile-page,
 .voting-notifier-page-main-container .principal-content-profile-page {
-  /* background-color: yellow !important; */
   height: calc(100vh - 160px);
   margin: 0 !important;
   width: 100%;

diff --git a/src/components/reusableComponents/profile/MoreInfoAboutContainerMiner.tsx b/src/components/reusableComponents/profile/MoreInfoAboutContainerMiner.tsx
@@ -47,17 +47,19 @@ const MoreInfoAboutContainerMiner = ({
           {totalWithdrawals !== null ? totalWithdrawals / 1000000 + ' STX' : '0 STX'}
         </span>
       </div>
-      <div className="content-sections-title-info-container">
-        <span className="bold-font">Autoexchange stx to btc: </span>
-        <span className="result-of-content-section">{exchange === null || exchange === false ? 'No' : 'Yes'}</span>
-      </div>
-      <div className="content-sections-title-info-container autoexchange-button-container">
-        <button
-          className={appCurrentTheme === 'light' ? 'customButton width-100' : 'customDarkButton width-100'}
-          onClick={setAutoExchange}
-        >
-          {exchange === null || exchange === false ? 'Change to Yes' : 'Change to No'}
-        </button>
+      <div>
+        <div className="content-sections-title-info-container">
+          <span className="bold-font">Autoexchange stx to btc: </span>
+          <span className="result-of-content-section">{exchange === null || exchange === false ? 'No' : 'Yes'}</span>
+        </div>
+        <div className="content-sections-title-info-container autoexchange-button-container">
+          <button
+            className={appCurrentTheme === 'light' ? 'customButton width-100' : 'customDarkButton width-100'}
+            onClick={setAutoExchange}
+          >
+            {exchange === null || exchange === false ? 'Change to Yes' : 'Change to No'}
+          </button>
+        </div>
       </div>
     </>
   );

diff --git a/src/components/reusableComponents/profile/styles.css b/src/components/reusableComponents/profile/styles.css
@@ -121,9 +121,3 @@
   justify-content: center;
   align-items: center;
 }
-
-/* @media screen and (max-width: 575px) {
-  .profile-page-main-container .actions-container-profile-page {
-    background-color: blue !important;
-  }
-} */
diff --git a/src/css/helpers/styles.css b/src/css/helpers/styles.css
@@ -13,7 +13,6 @@
 .flex-container {
   display: flex;
   flex-direction: row;
-  /* flex-direction: co; */
   justify-content: space-between;
 }
 

diff --git a/src/css/navbars/styles.css b/src/css/navbars/styles.css
@@ -37,12 +37,8 @@
 
 .default-page-container {
   height: 100vh;
-  /* height: auto; */
   /* width: 100vw; - Do not add this, because if there's vertical scroll, the page will also have horizontal scroll. without it,
                      the page width will be automatically adjusted for the contents. You only need the height. */
-  /* background-color: #eeeeee; */
-  /* color: #2f2f2f; */
-  /* color: #121212; */
 }
 
 .liMenuMiningPool {