Nicer colors

src/components/Dashboard.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import EnvTabsContainer from "./EnvTabsContainer";
+import EnvTabsSwitcher from "./EnvTabsSwitcher";
 import LoadingIndicator from "./LoadingIndicator";
 import { DashboardLoadError, DashboardResponseContent, EnvTab, Environment } from "../types";
 import { ENVIRONMENT_TABS } from "../const";
@@ -52,7 +52,7 @@ export default function Dashboard() {
     return (
         <>
             <LoadingIndicator active={loadingEnv} />
-            <EnvTabsContainer selectedEnv={selectedEnv} onSelect={onSelectEnvTab} />
+            <EnvTabsSwitcher selectedEnv={selectedEnv} onSelect={onSelectEnvTab} />
             {loadingErr && <LoadingError error={loadingErr} />}
             {activeEnvironments && <EnvironmentList environments={activeEnvironments} />}
         </>

src/components/EnvTabsSwitcher.tsx

@@ -9,12 +9,12 @@ interface OnSelectTab {
     (tab: EnvTab): void;
 }
 
-interface EnvTabsContainerProps {
+interface EnvTabsSwitcherProps {
     selectedEnv: EnvTab;
     onSelect: OnSelectTab;
 }
 
-export default function EnvTabsContainer({ selectedEnv, onSelect }: EnvTabsContainerProps) {
+export default function EnvTabsSwitcher({ selectedEnv, onSelect }: EnvTabsSwitcherProps) {
     const [selected, setSelected] = React.useState(selectedEnv);
 
     const handleChange = (event: React.SyntheticEvent, newValue: EnvTab) => {
@@ -27,12 +27,10 @@ export default function EnvTabsContainer({ selectedEnv, onSelect }: EnvTabsConta
     });
 
     return (
-        <Box sx={{ width: "100%", marginBottom: "2rem" }}>
-            <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
+        <Box className="env-tab-switcher">
             <Tabs value={selected} onChange={handleChange}>
                 {tabs}
             </Tabs>
         </Box>
-        </Box>
     );
 }

src/components/dashboard/EnvironmentList.tsx

@@ -3,6 +3,7 @@ import { Environment } from "../../types";
 import TenantList from "./TenantList";
 import Typography from "@mui/material/Typography";
 import Box from "@mui/material/Box";
+import Container from "@mui/material/Container";
 
 interface EnvironmentListProps {
     environments: Environment[];
@@ -12,13 +13,15 @@ export default function EnvironmentList({ environments }: EnvironmentListProps)
     const envItems = environments.map((env) => {
         return (
             <Box className="environment" key={env.name} sx={{ marginBottom: "2rem" }}>
-                <Typography variant={"h2"} key={env.name} className="title">
-                    <Typography component="span" variant={"h5"} key={env.name} sx={{ marginRight: "1rem" }}>
+                <Container maxWidth={false} className="main-container">
+                    <Typography variant={"h2"} key={env.name} className="environment-name">
+                        {/* <Typography component="span" variant={"h5"} key={env.name} sx={{ marginRight: "1rem" }}>
                             environment:
-                    </Typography>
+                        </Typography> */}
                         {env.name}
                     </Typography>
                     <TenantList tenants={env.tenants} />
+                </Container>
             </Box>
         );
     });

src/components/dashboard/ServiceList.tsx

@@ -25,7 +25,7 @@ export default function ServiceList({ services }: ServiceListProps) {
         });
 
     return (
-        <Grid container rowSpacing={2} columnSpacing={2} className="service-list" sx={{ marginBottom: "1rem" }}>
+        <Grid container rowSpacing={2} columnSpacing={2} className="service-list">
             {serviceItems}
         </Grid>
     );

src/routes/Home.tsx

@@ -1,11 +1,6 @@
 import React from "react";
-import Container from "@mui/material/Container";
 import Dashboard from "../components/Dashboard";
 
 export default function Home() {
-    return (
-        <Container maxWidth={false} className="main-container">
-            <Dashboard />
-        </Container>
-    );
+    return <Dashboard />;
 }

src/scss/_app-header.scss

@@ -1,5 +1,7 @@
+@import "vars";
+
 .app-header {
-    background-color: #15232d;
+    background-color: $header-background;
     color: whitesmoke;
     padding: 1rem 0 1rem 0;
     box-shadow: 0px 5px 11px 0px rgba(0, 0, 0, 0.31);

src/scss/_env-tabs-switcher.scss

@@ -0,0 +1,6 @@
+@import "vars";
+
+.env-tab-switcher {
+    width: 100%;
+    border-bottom: 1px solid lighten($header-background, 60%);
+}

src/scss/_environment-list.scss

@@ -0,0 +1,15 @@
+@import "vars";
+
+.environment-list {
+    .environment {
+        background-color: lighten($header-background, 75%);
+        margin-bottom: 3rem;
+        padding-top: 1rem;
+        padding-bottom: 1rem;
+
+        .environment-name {
+            margin-bottom: 1rem;
+            color: lighten($header-background, 30%);
+        }
+    }
+}

src/scss/_service-card.scss

@@ -1,14 +1,11 @@
 @use "sass:color";
-
-$color-ok: #1dad24;
-$color-warning: #ed6c02;
-$color-danger: #d32f2f;
+@import "vars";
 
 .service-card {
     width: 450px;
     .service-title-container {
         color: white;
-        background-color: #15232d;
+        background-color: lighten($header-background, 20%);
         padding: 0.5rem 1rem;
         justify-content: space-between;
         align-items: center;

src/scss/_service-list.scss

@@ -0,0 +1,2 @@
+.service-list {
+}

src/scss/_tenant-list.scss

@@ -0,0 +1,11 @@
+.tenant-list {
+    .tenant {
+        margin-bottom: 2rem !important;
+        &:last-child {
+            margin-bottom: 0 !important;
+        }
+
+        .tenant-name {
+        }
+    }
+}

src/scss/_vars.scss

@@ -0,0 +1,5 @@
+$header-background: #15232d;
+
+$color-ok: #1dad24;
+$color-warning: #ed6c02;
+$color-danger: #d32f2f;

src/scss/styles.scss

@@ -1,4 +1,9 @@
+@import "vars";
 @import "common";
 @import "app-header";
 @import "linear-progress";
+@import "env-tabs-switcher";
+@import "environment-list";
+@import "tenant-list";
+@import "service-list";
 @import "service-card";