Merge pull request #18 from stacks-degens/organize-css-files

Organize css files

src/components/ConnectWallet.tsx

@@ -7,7 +7,6 @@ import { selectCurrentTheme, selectCurrentUserRole, selectUserSessionState } fro
 import { useLocation } from 'react-router-dom';
 import { useEffect, useState } from 'react';
 import { readOnlyAddressStatus } from '../consts/readOnly';
-import './styles.css';
 
 interface ConnectWalletProps {
   currentTheme: string;
@@ -66,15 +65,15 @@ const ConnectWallet = ({ currentTheme }: ConnectWalletProps) => {
     return (
       <div>
         <button className="Connect" style={{ backgroundColor: colors[appCurrentTheme].primary }} onClick={disconnect}>
-          <LogoutIcon style={{ color: colors[appCurrentTheme].buttons }} fontSize="medium" />
+          <LogoutIcon style={{ color: colors[appCurrentTheme].headerIcon }} fontSize="medium" />
         </button>
       </div>
     );
   }
 
   return (
     <button className="Connect" style={{ backgroundColor: colors[appCurrentTheme].primary }} onClick={authenticate}>
-      <LoginIcon style={{ color: colors[appCurrentTheme].buttons }} fontSize="medium" />
+      <LoginIcon style={{ color: colors[appCurrentTheme].headerIcon }} fontSize="medium" />
     </button>
   );
 };

src/components/HeaderBar.tsx

@@ -3,7 +3,6 @@ import DarkModeButton from '../consts/lightModeButton';
 import ConnectWallet from './ConnectWallet';
 import LeftPanel from './LeftPanel';
 import colors from '../consts/colorPallete';
-import './styles.css';
 import { useAppDispatch, useAppSelector } from '../redux/store';
 import { selectCurrentTheme } from '../redux/reducers/user-state';
 import { updateAppThemeAction } from '../redux/actions';

src/components/LeftPanel.tsx

@@ -13,16 +13,16 @@ 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 } from 'react-router-dom';
+import { Link, useLocation, useParams } 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 } from 'react';
+import { useState, useEffect } from 'react';
 import { ExpandLess, ExpandMore, StarBorder } from '@mui/icons-material';
 import { Collapse } from '@mui/material';
-import './styles.css';
+import '../css/navbars/styles.css';
 
 type Anchor = 'top' | 'left' | 'bottom' | 'right';
 
@@ -39,8 +39,8 @@ const LeftPanel = ({ currentTheme }: ConnectWalletProps) => {
   });
 
   const appCurrentTheme = useAppSelector(selectCurrentTheme);
-  const [openMiningPoolMenu, setOpenMiningPoolMenu] = useState<boolean>(true);
-  const [openVotingMenu, setOpenVotingMenu] = useState<boolean>(true);
+  const [openMiningPoolMenu, setOpenMiningPoolMenu] = useState<boolean>(false);
+  const [openVotingMenu, setOpenVotingMenu] = useState<boolean>(false);
 
   const location = useLocation();
 
@@ -186,7 +186,11 @@ const LeftPanel = ({ currentTheme }: ConnectWalletProps) => {
                     </ListItemButton>
                   </List>
                   <List
-                    className={location.pathname === '/miningPool/miners' ? 'active-custom' : ''}
+                    className={
+                      location.pathname === '/miningPool/miners' || location.pathname.slice(0, 8) === '/profile'
+                        ? 'active-custom'
+                        : ''
+                    }
                     component="div"
                     disablePadding
                   >

src/components/TableCreation.tsx

@@ -76,7 +76,6 @@ const TableCreation = ({ rows, rowContent, columns, tableId, customTableWidth }:
               backgroundColor: colors[appCurrentTheme].primary,
               color: colors[appCurrentTheme].colorWriting,
             }}
-            className="test"
           >
             <TableSortLabel
               sx={{

src/components/appMenuSections/dashboard/Dashboard.tsx

@@ -12,13 +12,10 @@ import {
   readOnlyGetNotifier,
   readOnlyGetStacksRewards,
 } from '../../../consts/readOnly';
-import useCurrentTheme from '../../../consts/theme';
 import DashboardInfoContainer from '../../reusableComponents/dashboard/DashboardInfoContainer';
 import colors from '../../../consts/colorPallete';
-import './styles.css';
 
 const Dashboard = () => {
-  const { currentTheme } = useCurrentTheme();
   const [currentNotifier, setCurrentNotifier] = useState<string | null>(null);
   const [minersList, setMinersList] = useState<Array<string>>([]);
   const currentRole: UserRole = useAppSelector(selectCurrentUserRole);

src/components/appMenuSections/home/Home.tsx

@@ -1,6 +1,7 @@
 import { selectCurrentTheme } from '../../../redux/reducers/user-state';
 import { useAppSelector } from '../../../redux/store';
 import colors from '../../../consts/colorPallete';
+import './styles.css';
 
 const Home = () => {
   const appCurrentTheme = useAppSelector(selectCurrentTheme);
@@ -35,9 +36,10 @@ const Home = () => {
             - Open your browser. You can either do this on a new browser profile, or on your main one.<br></br>
             <div style={{ marginTop: 10 }}></div>- Navigate to{' '}
             <a
+              className="homePageLink"
               href="https://wallet.hiro.so/wallet/install-web"
               target="_blank"
-              style={{ color: colors[appCurrentTheme].defaultOrange, textDecoration: 'none' }}
+              style={{ color: colors[appCurrentTheme].defaultOrange }}
             >
               https://wallet.hiro.so/wallet/install-web
             </a>
@@ -47,9 +49,10 @@ const Home = () => {
             <div style={{ marginTop: 10 }}></div>- Copy the secret key (mnemonic) that corresponds to the account
             address you want to sign in with, from{' '}
             <a
+              className="homePageLink"
               href="https://github.com/stacks-degens/starters-front-end/tree/profile-pages-design#accounts-in-mining-pool"
               target="_blank"
-              style={{ color: colors[appCurrentTheme].defaultOrange, textDecoration: 'none' }}
+              style={{ color: colors[appCurrentTheme].defaultOrange }}
             >
               here
             </a>
@@ -73,9 +76,10 @@ const Home = () => {
           <div style={{ marginTop: -30, textAlign: 'match-parent' }}>
             - Navigate to{' '}
             <a
+              className="homePageLink"
               href="https://explorer.hiro.so/?chain=testnet"
               target="_blank"
-              style={{ color: colors[appCurrentTheme].defaultOrange, textDecoration: 'none' }}
+              style={{ color: colors[appCurrentTheme].defaultOrange }}
             >
               https://explorer.hiro.so/?chain=testnet
             </a>
@@ -100,9 +104,10 @@ const Home = () => {
             <div style={{ marginTop: 10 }}></div>- Run 'npm install -g @stacks/cli' command in order to install the
             'stx' command to your terminal.<br></br>For more info, visit{' '}
             <a
+              className="homePageLink"
               href="https://docs.hiro.so/get-started/command-line-interface"
               target="_blank"
-              style={{ color: colors[appCurrentTheme].defaultOrange, textDecoration: 'none' }}
+              style={{ color: colors[appCurrentTheme].defaultOrange }}
             >
               https://docs.hiro.so/get-started/command-line-interface
             </a>

src/components/appMenuSections/home/styles.css

@@ -0,0 +1,10 @@
+.homePageLink {
+  text-decoration: none;
+  border-bottom: 1px solid transparent;
+}
+
+.homePageLink:hover {
+  border-bottom: 1px solid #ab4c2b;
+  color: #ab4c2b !important;
+  transition: color 0.3s ease-in, border 0.3s ease-in;
+}

src/components/appMenuSections/miningPool/styles.css

@@ -1,35 +1,11 @@
-.table-row {
-  /* background-color: red; */
-}
-
-.test {
-  /* border-bottom: 1px solid green; */
-  /* border-left: 1px solid green; */
-}
-
 table {
   border-top: 1px solid #f9b11c;
   border-left: 2px solid #f9b11c;
   border-right: 2px solid #f9b11c;
-  /* border: 2px solid #f9b11c; */
-  /* box-shadow: 1px 3px 4px #ed693c, -1px 0px 4px #fdc60b !important; */
-  /* box-shadow: 1px 1px 4px #ed693c, -1px -1px 4px #fdc60b !important; */
-  /* box-shadow: 0px 3px 5px -1px #ed693c, 0px 6px 10px 0px #ed693c, 0px 1px 18px 0px #ed693c !important; */
-  /* border: 3px solid green !important; */
 }
 
 .css-11xur9t-MuiPaper-root-MuiTableContainer-root {
   border: 1px solid #f9b11c;
   box-shadow: 1px 3px 4px #ed693c, -1px 0px 4px #fdc60b !important;
   background-color: #fef9f7 !important;
 }
-
-/* propese removal icon for table */
-.css-nmy1ir-MuiSvgIcon-root {
-  /* color: #ed693c !important; */
-}
-
-/* info icon for table */
-.css-b13xs8-MuiSvgIcon-root {
-  /* color: #fdc60b !important; */
-}

src/components/appMenuSections/profile/MinerProfile.tsx

@@ -1,12 +1,11 @@
 import { useEffect, useState } from 'react';
 import {
-  readOnlyExchangeToggle,
   readOnlyGetAllTotalWithdrawals,
   ReadOnlyAllDataWaitingMiners,
   readOnlyGetRemainingBlocksJoin,
 } from '../../../consts/readOnly';
 import { selectCurrentUserRole, selectUserSessionState } from '../../../redux/reducers/user-state';
-import '../style.css';
+// import '../style.css';
 import { useAppSelector } from '../../../redux/store';
 import AboutContainer from '../../reusableComponents/profile/AboutContainer';
 import ActionsContainer from '../../reusableComponents/profile/ActionsContainer';

src/components/appMenuSections/profile/Profile.tsx

@@ -1,15 +1,16 @@
-import './styles.css';
+import '../../../css/buttons/styles.css';
+import '../../../css/helpers/styles.css';
+import '../../../css/inputs/styles.css';
+import '../../../css/links/styles.css';
+import '../../../css/common-page-alignments/styles.css';
 import {
   selectCurrentTheme,
   selectCurrentUserRole,
   selectUserSessionState,
   UserRole,
 } from '../../../redux/reducers/user-state';
 import { useAppSelector } from '../../../redux/store';
-// import CommonInfoProfile from './CommonInfoProfile';
 import MinerProfile from './MinerProfile';
-// import PendingMinerProfile from './PendingMinerProfile';
-// import WaitingMinerProfile from './WaitingMinerProfile';
 import colors from '../../../consts/colorPallete';
 import { useEffect, useState } from 'react';
 import { network, getExplorerUrl } from '../../../consts/network';
@@ -27,10 +28,6 @@ const Profile = () => {
   const appCurrentTheme = useAppSelector(selectCurrentTheme);
 
   const profileMapping: Record<UserRole, React.ReactElement> = {
-    // Viewer: <CommonInfoProfile />,
-    // NormalUser: <CommonInfoProfile />,
-    // Waiting: <WaitingMinerProfile />,
-    // Pending: <PendingMinerProfile />,
     Viewer: <div></div>,
     NormalUser: (
       <MinerProfile

src/components/appMenuSections/voting/Voting.tsx

@@ -1,13 +1,11 @@
 import { readOnlyGetNotifier, readOnlyGetNotifierElectionProcessData } from '../../../consts/readOnly';
-import useCurrentTheme from '../../../consts/theme';
 import { useState, useEffect } from 'react';
 import VotingStatusContainer from '../../reusableComponents/voting/VotingStatusContainer';
 import colors from '../../../consts/colorPallete';
 import { useAppSelector } from '../../../redux/store';
 import { selectCurrentTheme } from '../../../redux/reducers/user-state';
 
 const Voting = () => {
-  const { currentTheme } = useCurrentTheme();
   const [notifierVoteStatus, setNotifierVoteStatus] = useState<string | null>(null);
   const [currentNotifier, setCurrentNotifier] = useState<string | null>(null);
 

src/components/appMenuSections/voting/VotingJoiners.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import TableCell from '@mui/material/TableCell';
 import Box from '@mui/material/Box';
-import useCurrentTheme from '../../../consts/theme';
 import colors from '../../../consts/colorPallete';
 import { ContractVotePositiveJoin, ContractVoteNegativeJoin } from '../../../consts/smartContractFunctions';
 import ThumbUpAltIcon from '@mui/icons-material/ThumbUpAlt';
@@ -15,7 +14,6 @@ import { useAppSelector } from '../../../redux/store';
 import { selectCurrentTheme } from '../../../redux/reducers/user-state';
 
 const VotingJoiners = () => {
-  const { currentTheme } = useCurrentTheme();
   const waitingRows = GetWaitingRows();
   const navigate = useNavigate();
 

src/components/appMenuSections/voting/VotingNotifier.tsx

@@ -1,5 +1,4 @@
 import colors from '../../../consts/colorPallete';
-import useCurrentTheme from '../../../consts/theme';
 import { Box, Button, TableCell } from '@mui/material';
 import { useEffect, useState } from 'react';
 import {
@@ -22,7 +21,6 @@ import { useNavigate } from 'react-router-dom';
 import VotingNotifierInfoContainer from '../../reusableComponents/voting/VotingNotifierInfoContainer';
 
 const VotingNotifier = () => {
-  const { currentTheme } = useCurrentTheme();
   const [userAddress, setUserAddress] = useState<string | null>(null);
   const [electionBlocksRemaining, setElectionBlocksRemaining] = useState<number | null>(null);
   const [currentNotifier, setCurrentNotifier] = useState<string | null>(null);

src/components/appMenuSections/voting/VotingRemovals.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import TableCell from '@mui/material/TableCell';
 import Box from '@mui/material/Box';
-import useCurrentTheme from '../../../consts/theme';
 import colors from '../../../consts/colorPallete';
 import { ContractVotePositiveRemove, ContractVoteNegativeRemove } from '../../../consts/smartContractFunctions';
 import ThumbUpAltIcon from '@mui/icons-material/ThumbUpAlt';
@@ -15,7 +14,6 @@ import { useAppSelector } from '../../../redux/store';
 import { selectCurrentTheme } from '../../../redux/reducers/user-state';
 
 const VotingRemovals = () => {
-  const { currentTheme } = useCurrentTheme();
   const removalsRows = GetRemovalsRows();
   const navigate = useNavigate();
 

src/components/reusableComponents/dashboard/DashboardInfoContainer.tsx

@@ -1,7 +1,8 @@
 import './styles.css';
+import '../../../css/buttons/styles.css';
+import '../../../css/common-page-alignments/styles.css';
 import AccountCircleIcon from '@mui/icons-material/AccountCircle';
 import colors from '../../../consts/colorPallete';
-import useCurrentTheme from '../../../consts/theme';
 import { ContractAskToJoin } from '../../../consts/smartContractFunctions';
 import { selectCurrentTheme, UserRole } from '../../../redux/reducers/user-state';
 import { useAppSelector } from '../../../redux/store';
@@ -22,8 +23,6 @@ const DashboardInfoContainer = ({
   userAddress,
   currentRole,
 }: DashboardInfoContainerProps) => {
-  const { currentTheme } = useCurrentTheme();
-
   const appCurrentTheme = useAppSelector(selectCurrentTheme);
 
   return (