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";