updated ui elements

packages/frontend/src/components/auth/ConnectWallet.tsx

@@ -12,7 +12,6 @@ import braavosIcon from "../../assets/uiIcons/braavos.png";
 const StyledBox = styled(Box)({
   fontWeight: 600,
   fontSize: 20,
-  color: "#E7ECEE", // This is a good neutral light color. Keeping it.
   position: "absolute",
   top: "50%",
   left: "50%",
@@ -87,7 +86,7 @@ const StyledButton = styled(Button)({
   backgroundColor: "#2A2D3A", // Slightly lighter background for the button
   border: "1px solid #0F111A", // Darker border for definition
   display: "flex",
-  color: "white",
+  color: "#F4F3EE",
   justifyContent: "center",
   "&:hover": {
     background: "#212530", // Slightly lighter than #1B1E2A for a subtle hover effect

packages/frontend/src/components/buttons/ButtonCollectDebris.tsx

@@ -26,7 +26,6 @@ import { convertSecondsToTime } from "../../shared/utils";
 export const StyledBox = styled(Box)({
   fontWeight: 400,
   fontSize: 20,
-  color: "#E7ECEE",
   position: "absolute",
   top: "50%",
   left: "50%",

packages/frontend/src/components/buttons/GeneratePlanet.tsx

@@ -56,13 +56,13 @@ export const GeneratePlanet = ({ price }: Props) => {
         // variant="outlined"
         size="large"
         sx={{
-          color: "white",
+          color: "#E7ECEE",
           width: "345px",
           height: "75px",
           backgroundColor: "#4A63AA",
           border: "1px solid #0F111A",
           borderRadius: "8px",
-          marginBottom: "16px",
+          marginTop: "32px",
           fontWeight: "700",
           "&:hover": {
             background: "#212530", // Slightly lighter than #1B1E2A for a subtle hover effect

packages/frontend/src/components/leaderboards/LeaderBoardFleet.tsx

@@ -12,7 +12,6 @@ const Table = styled.table`
 
 const Header = styled.th`
   background-color: #1a2025;
-  color: white;
   padding: 10px;
   opacity: 0.5;
 `;

packages/frontend/src/components/leaderboards/LeaderBoardMain.tsx

@@ -11,7 +11,6 @@ const Table = styled.table`
 
 const Header = styled.th`
   background-color: #1a2025;
-  color: white;
   padding: 10px;
   opacity: 0.5;
 `;

packages/frontend/src/components/leaderboards/LeaderBoardTech.tsx

@@ -12,7 +12,6 @@ const Table = styled.table`
 
 const Header = styled.th`
   background-color: #1a2025;
-  color: white;
   padding: 10px;
   opacity: 0.5;
 `;

packages/frontend/src/components/ui/Button.tsx

@@ -86,8 +86,6 @@ export function ButtonBuild({
           fullWidth={true}
           sx={{
             background: "#4A63AA",
-            // color: "white",
-            // size: "large",
           }}
         >
           Build

packages/frontend/src/components/ui/Header.tsx

@@ -11,7 +11,6 @@ import IconButton from "@mui/material/IconButton";
 
 const HeaderWrapper = styled(AppBar)({
   backgroundColor: "#1a2025", // Dark background for space theme
-  color: "white",
   margin: 0,
   padding: 0,
   boxShadow: "none",
@@ -28,17 +27,6 @@ const StyledToolbar = styled(Toolbar)({
   background: "rgba(0, 0, 0, 0.2)",
 });
 
-// const HeaderButton = styled(Button)({
-//   margin: "16px",
-//   marginLeft: "0px",
-//   color: "white",
-//   fontWeight: "bold", // More pronounced buttons
-//   letterSpacing: "1px", // Space-themed typography style
-//   '&:hover': {
-//     backgroundColor: "rgba(255, 255, 255, 0.1)", // Hover effect
-//   },
-// });
-
 const Spacer = styled("div")({
   flex: "1",
 });

packages/frontend/src/components/ui/HostileMissions.tsx

@@ -11,7 +11,6 @@ import { HostileMission } from "../../shared/types";
 // Styled components
 const Container = styled(Box)(({ theme }) => ({
   backgroundColor: "#1a2025", // Assuming a dark theme from the image
-  color: "white",
   borderRadius: "8px",
   boxshadow: "0 4px 8px rgba(0, 0, 0, 0.1)",
   padding: theme.spacing(2),
@@ -131,7 +130,7 @@ export const HostileMissions = ({ planetId }: HostileMissionsProps) => {
   return (
     <>
       {hostileMissions === undefined ? (
-          <CircularProgress />
+        <CircularProgress />
       ) : hostileMissions.length === 0 ? null : (
         <Container>
           <TitleContainer>

packages/frontend/src/components/ui/PlanetSection.tsx

@@ -64,7 +64,6 @@ const MainContainer = styled(Box)({
 
 const PlanetInfoContainer = styled(Box)({
   gap: 6,
-  color: "white",
   width: 252,
 });
 

packages/frontend/src/panels/styleds.ts

@@ -23,7 +23,6 @@ export const ResourceTab = styled(Tab)({
   fontSize: "16px",
   lineHeight: "21px",
   letterSpacing: "0.02em",
-  color: "white",
   border: "none",
   padding: "16px",
   cursor: "pointer",

packages/frontend/src/shared/styled/Button.ts

@@ -6,8 +6,8 @@ export const StyledButton = styled(Button)(() => ({
   fontWeight: 500,
   fontSize: 14,
   textTransform: "capitalize",
-  color: "white", // Changing the text color to white for better readability against cosmic colors
   size: "large",
+  color: "#F4F3EE",
   letterSpacing: "0.1em",
   border: "1px solid #2E3A45",
   boxShadow: "0 2px 4px rgba(0, 0, 0, 0.1)",
@@ -19,10 +19,10 @@ export const StyledButton = styled(Button)(() => ({
 export const HeaderButton = styled(Button)({
   margin: "16px",
   marginLeft: "0px",
-  color: "white",
+  color: "#F4F3EE",
   fontWeight: "bold", // More pronounced buttons
   letterSpacing: "1px", // Space-themed typography style
-  '&:hover': {
+  "&:hover": {
     backgroundColor: "rgba(255, 255, 255, 0.1)", // Hover effect
   },
-});
+});

packages/frontend/src/shared/styled/Tabs.ts

@@ -33,7 +33,6 @@ export const ResourceTab = styled(Tab)<ResourceTabProps>`
   font-size: 16px;
   line-height: 21px;
   letter-spacing: 0.02em;
-  color: white;
   border: none;
   padding: 16px;
   cursor: pointer;

packages/frontend/src/shared/styled/Theme.ts

@@ -13,7 +13,7 @@ export const GlobalStyle = createGlobalStyle`
   html, body, input, textarea, button {
     font-family: 'Roboto', sans-serif;
     font-display: fallback;
-    color: #F8F8FF;
+    color: #F4F3EE;
     background-color: #151a1e;
   }
 

packages/frontend/src/views/LoginOrGenerate.tsx

@@ -13,12 +13,11 @@ import WarningIcon from "@mui/icons-material/Warning";
 
 const MainWrapper = styled(ColumnCenter)`
   height: 100vh;
-  justify-content: space-evenly; // Evenly distribute the child elements
+  justify-content: center; // Evenly distribute the child elements
   gap: 16px;
 `;
 
 const SubTextBefore = styled("div")`
-  color: #ffffff;
   margin-top: 24px;
   // margin-bottom: 24px;
   font-weight: 400;
@@ -28,7 +27,7 @@ const SubTextBefore = styled("div")`
   letter-spacing: 0.02em;
   padding: 0 15px 16px;
   width: 70%;
-  opacity: 0.5;
+  opacity: 0.8;
   margin-y: 80px;
 `;
 
@@ -49,22 +48,15 @@ const PriceText = styled("div")`
   font-size: 20px;
   text-align: center;
   letter-spacing: 0.02em;
-  background-color: rgba(0, 0, 0, 0.85); // Dark background for contrast
+  background-color: rgba(34, 36, 45, 0.8); // Dark background for contrast
   margin-bottom: 12px;
   border-radius: 8px;
   font-family: "Courier New", Courier, monospace; // Monospaced font for the ticker effect
   white-space: nowrap;
   overflow: hidden;
   opacity: 0.9;
   padding: 8px 16px; // Adjust padding for better appearance
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); // Add a subtle shadow for depth
-`;
-
-const CenteredProgress = styled("div")`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100vh; // This makes the container take the full viewport height
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); // Add a subtle shadow for depth
 `;
 
 const StyledAddress = styled("div")`
@@ -73,8 +65,8 @@ const StyledAddress = styled("div")`
   position: absolute;
   top: 20px;
   right: 20px;
-  color: #ffffff;
   font-size: 16px;
+  opacity: 0.8
   background-color: rgba(34, 36, 45, 0.8); // Optional: Add background color
   padding: 8px; // Optional: Add padding
   border-radius: 8px; // Optional: Round corners
@@ -89,28 +81,27 @@ const RotatedLogoutIcon = styled(LogoutIcon)`
 
 const InfoBox = styled("div")(() => ({
   display: "flex",
-  alignItems: "flex-start", // Align items to the top of the flex container
+  alignItems: "center", // Align items to the top of the flex container
   position: "absolute",
-  bottom: "20px",
-  right: "20px",
+  top: "20px", // Set top position
+  left: "20px", // Set left position
   width: "400px",
   height: "120px",
-  backgroundColor: "rgba(0, 0, 0, 0.85)",
-  color: "#ffffff",
-  opacity: "0.5",
+  backgroundColor: "rgba(34, 36, 45, 0.8)",
+  opacity: "0.8",
   letterSpacing: "inherit",
   padding: "10px",
   borderRadius: "8px",
-  boxShadow: "0 2px 4px rgba(0, 0, 0, 0.5)",
+  boxShadow: "0 2px 4px rgba(0, 0, 0, 0.3)",
   fontSize: "14px",
   overflow: "auto",
   textAlign: "left",
 }));
 
 const StyledInfoIcon = styled(WarningIcon)`
-  color: #ffd700; // A golden color for the ticker text
-  margin-right: 10px; // Space between icon and text
-  align-self: flex-start; // Align to the top of the flex container
+  color: #ffd700;
+  margin: 10px;
+  align-self: center;
 `;
 
 interface AuthScreenProps {
@@ -149,7 +140,9 @@ const ConnectWalletLogo = styled(StyledLogo)`
 `;
 
 const ConnectWalletText = styled(SubTextBefore)`
-  margin-top: 0px;
+  margin-top: 16px;
+  font-size: 22px;
+  max-width: 60%;
 `;
 
 const ConnectWalletView: FC<ConnectWalletViewProps> = ({
@@ -159,9 +152,7 @@ const ConnectWalletView: FC<ConnectWalletViewProps> = ({
   const renderButton = () => {
     if (!address) {
       return walletConnectLoading ? (
-        <CenteredProgress>
-          <CircularProgress sx={{ color: "#ffffff", opacity: "0.5" }} />
-        </CenteredProgress>
+        <CircularProgress sx={{ opacity: "0.5" }} />
       ) : (
         <ConnectWalletButton />
       );
@@ -230,9 +221,7 @@ const GeneratePlanetView = ({ address }: PlanetViewProp) => {
         {price !== undefined ? (
           (Number(price) / 10 ** 18).toFixed(6)
         ) : (
-          <CenteredProgress>
-            <CircularProgress size={24} />
-          </CenteredProgress>
+          <CircularProgress size={24} />
         )}{" "}
         ETH
       </PriceText>