ui fixes

ametel01 · Dec 29, 2023 · f19f3f2 · f19f3f2
1 parent 24010c6
commit f19f3f2
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 4 deletions.
diff --git a/packages/testnet/frontend/src/components/ui/FleetMovements.tsx b/packages/testnet/frontend/src/components/ui/FleetMovements.tsx
@@ -14,6 +14,7 @@ import { calculateFleetLoss } from "../../shared/utils/Formulas";
 import { usePlanetPosition } from "../../hooks/usePlanetPosition";
 import { Mission } from "../../shared/types";
 import fleetIcon from "../../assets/uiIcons/Fleet.svg";
+import RocketLaunchIcon from "@mui/icons-material/RocketLaunch";
 import { HeaderButton } from "../../shared/styled/Button";
 
 export const StyledBox = styled(Box)({
@@ -268,6 +269,10 @@ export const FleetMovements = ({ planetId }: Props) => {
         // size="large"
         onClick={() => toggleModal(true)}
       >
+        <RocketLaunchIcon
+          fontSize="small"
+          sx={{ color: "#708090", marginRight: "4px" }}
+        />
         FLEET MOVEMENTS
       </HeaderButton>
 

diff --git a/packages/testnet/frontend/src/components/ui/Header.tsx b/packages/testnet/frontend/src/components/ui/Header.tsx
@@ -8,6 +8,9 @@ import { Link } from "react-router-dom";
 import LogoutIcon from "@mui/icons-material/Logout";
 import { useAccount, useDisconnect } from "@starknet-react/core";
 import IconButton from "@mui/material/IconButton";
+import LeaderboardIcon from "@mui/icons-material/Leaderboard";
+import SummarizeIcon from "@mui/icons-material/Summarize";
+import DashboardIcon from "@mui/icons-material/Dashboard";
 import WalletHeader from "./WalletHeader";
 
 const HeaderWrapper = styled(AppBar)({
@@ -50,27 +53,33 @@ const Header = ({ planetId }: Props) => {
         <IconButton
           onClick={handleLogoutClick}
           color="inherit"
-          style={{ marginRight: "16px", color: "#23CE6B" }}
+          style={{ marginRight: "16px", color: "#708090", fontWeight: "600" }}
         >
           <LogoutIcon style={{ transform: "rotate(180deg)" }} />
         </IconButton>
         <WalletHeader account={account} />
         <Spacer />
         <HeaderButton variant="text">
+          <DashboardIcon fontSize="small" sx={{ marginRight: "4px" }} />
           <Link to="/" style={{ textDecoration: "none", color: "inherit" }}>
             DashBoard
           </Link>
         </HeaderButton>
         <FleetMovements planetId={planetId ? planetId : 0} />
         <HeaderButton variant="text">
+          <SummarizeIcon fontSize="small" sx={{ marginRight: "4px" }} />
           <Link
             to="/battlereports"
             style={{ textDecoration: "none", color: "inherit" }}
           >
             Battle Reports
           </Link>
         </HeaderButton>
-        <HeaderButton variant="text">
+        <HeaderButton
+          variant="text"
+          sx={{ display: "flex", alignItems: "center" }}
+        >
+          <LeaderboardIcon fontSize="small" sx={{ marginRight: "4px" }} />
           <Link
             to="/leaderboard"
             style={{ textDecoration: "none", color: "inherit" }}

diff --git a/packages/testnet/frontend/src/components/ui/WalletHeader.tsx b/packages/testnet/frontend/src/components/ui/WalletHeader.tsx
@@ -1,7 +1,8 @@
 import styled from "styled-components";
 
 const HeaderWalletContainer = styled.div`
-  color: #23CE6B;
+  color: #708090;
+  font-weight: 600;
   display: flex;
   padding: 12px;
   border-top: 2px solid #151a1e;

diff --git a/packages/testnet/frontend/src/shared/styled/Button.ts b/packages/testnet/frontend/src/shared/styled/Button.ts
@@ -19,7 +19,7 @@ export const StyledButton = styled(Button)(() => ({
 export const HeaderButton = styled(Button)({
   margin: "16px",
   marginLeft: "0px",
-  color: "#23CE6B",
+  color: "#708090",
   fontWeight: "bold", // More pronounced buttons
   letterSpacing: "1px", // Space-themed typography style
   "&:hover": {