diff --git a/src/components/Dashboard.tsx b/src/components/Dashboard.tsx index 96f041f..30825e1 100644 --- a/src/components/Dashboard.tsx +++ b/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 ( <> - + {loadingErr && } {activeEnvironments && } diff --git a/src/components/EnvTabsContainer.tsx b/src/components/EnvTabsSwitcher.tsx similarity index 64% rename from src/components/EnvTabsContainer.tsx rename to src/components/EnvTabsSwitcher.tsx index d1385f7..c1a292e 100644 --- a/src/components/EnvTabsContainer.tsx +++ b/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 ( - - - - {tabs} - - + + + {tabs} + ); } diff --git a/src/components/dashboard/EnvironmentList.tsx b/src/components/dashboard/EnvironmentList.tsx index 25dcb59..0a82865 100644 --- a/src/components/dashboard/EnvironmentList.tsx +++ b/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 ( - - - environment: + + + {/* + environment: + */} + {env.name} - {env.name} - - + + ); }); diff --git a/src/components/dashboard/ServiceList.tsx b/src/components/dashboard/ServiceList.tsx index a45ecf6..b46e268 100644 --- a/src/components/dashboard/ServiceList.tsx +++ b/src/components/dashboard/ServiceList.tsx @@ -25,7 +25,7 @@ export default function ServiceList({ services }: ServiceListProps) { }); return ( - + {serviceItems} ); diff --git a/src/routes/Home.tsx b/src/routes/Home.tsx index ac829b1..dd02c8e 100644 --- a/src/routes/Home.tsx +++ b/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 ( - - - - ); + return ; } diff --git a/src/scss/_app-header.scss b/src/scss/_app-header.scss index 1aa23c4..be35102 100644 --- a/src/scss/_app-header.scss +++ b/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); diff --git a/src/scss/_env-tabs-switcher.scss b/src/scss/_env-tabs-switcher.scss new file mode 100644 index 0000000..f6010e7 --- /dev/null +++ b/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%); +} diff --git a/src/scss/_environment-list.scss b/src/scss/_environment-list.scss new file mode 100644 index 0000000..8b22634 --- /dev/null +++ b/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%); + } + } +} diff --git a/src/scss/_service-card.scss b/src/scss/_service-card.scss index 1f2c1c6..6d99dce 100644 --- a/src/scss/_service-card.scss +++ b/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; diff --git a/src/scss/_service-list.scss b/src/scss/_service-list.scss new file mode 100644 index 0000000..a70d6da --- /dev/null +++ b/src/scss/_service-list.scss @@ -0,0 +1,2 @@ +.service-list { +} diff --git a/src/scss/_tenant-list.scss b/src/scss/_tenant-list.scss new file mode 100644 index 0000000..e830d27 --- /dev/null +++ b/src/scss/_tenant-list.scss @@ -0,0 +1,11 @@ +.tenant-list { + .tenant { + margin-bottom: 2rem !important; + &:last-child { + margin-bottom: 0 !important; + } + + .tenant-name { + } + } +} diff --git a/src/scss/_vars.scss b/src/scss/_vars.scss new file mode 100644 index 0000000..10bac70 --- /dev/null +++ b/src/scss/_vars.scss @@ -0,0 +1,5 @@ +$header-background: #15232d; + +$color-ok: #1dad24; +$color-warning: #ed6c02; +$color-danger: #d32f2f; diff --git a/src/scss/styles.scss b/src/scss/styles.scss index cc9bcc0..bccf64e 100644 --- a/src/scss/styles.scss +++ b/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";