diff --git a/client/src/components/listViewHelpers.tsx b/client/src/components/listViewHelpers.tsx
index 90fb6f1..33a761a 100644
--- a/client/src/components/listViewHelpers.tsx
+++ b/client/src/components/listViewHelpers.tsx
@@ -82,7 +82,7 @@ export function MetadataColumns({item, href, includeNamespace, resourceClass}: {
resource={item.kind}
className={resourceClass}
/>
- {item.kind}
+ {item.kind}
{// If node is a master, display a simple "MASTER" label below the item.kind icon
_.has(item.metadata.labels, ['node-role.kubernetes.io/master'])
diff --git a/client/src/components/menu.scss b/client/src/components/menu.scss
index 3759a3f..70dbd5b 100644
--- a/client/src/components/menu.scss
+++ b/client/src/components/menu.scss
@@ -41,7 +41,7 @@ button.menu_item, a.menu_item, a.menu_item:visited {
color: inherit;
svg {
- fill: $color-icon_inactive;
+ fill: $color-icon-inactive;
width: 35px;
height: 35px;
}
@@ -49,7 +49,7 @@ button.menu_item, a.menu_item, a.menu_item:visited {
a.menu_itemSelected, a.menu_itemSelected:visited {
svg {
- fill: $color-icon_active;
+ fill: $color-icon-active;
}
}
diff --git a/client/src/components/sorter.scss b/client/src/components/sorter.scss
index 58f2ab0..cb713e8 100644
--- a/client/src/components/sorter.scss
+++ b/client/src/components/sorter.scss
@@ -17,7 +17,7 @@
transition-property: opacity;
svg {
- fill: $color-light;
+ fill: $color-disabled;
width: 6px;
height: 6px;
}
@@ -32,5 +32,5 @@
}
svg.sorter_active {
- fill: $color-darkest;
+ fill: $color-light;
}
diff --git a/client/src/scss/elements/contentPanel.scss b/client/src/scss/elements/contentPanel.scss
index 6ea10e0..9ab2730 100644
--- a/client/src/scss/elements/contentPanel.scss
+++ b/client/src/scss/elements/contentPanel.scss
@@ -35,6 +35,6 @@
text-align: right;
text-transform: uppercase;
color: $color-dark;
- background-color: $color-lightest;
+ background-color: $color-border;
}
}
diff --git a/client/src/scss/index.scss b/client/src/scss/index.scss
index c073e7a..86bcf7f 100755
--- a/client/src/scss/index.scss
+++ b/client/src/scss/index.scss
@@ -22,16 +22,16 @@ html, body, #root {
}
html {
+ min-width: 320px;
+ font-weight: 300;
font-family: $font;
font-size: $font-size;
- font-weight: 300;
- color: $color-font;
- min-width: 320px;
}
#root {
display: flex;
flex-direction: column;
+ color: $color-font;
}
#shell {
@@ -62,7 +62,7 @@ html {
}
.titleBar_logo {
- fill: $color-logo;
+ fill: #fff;
width: auto;
height: 45px;
margin-top: 4px
@@ -81,6 +81,10 @@ button.titleBar_hamburger {
font-size: $font-size-small;
}
+.metadata-type {
+ margin-top: 2px;
+}
+
%node-ready-status-shared {
font-size: $font-size-large;
}
diff --git a/client/src/scss/settings.scss b/client/src/scss/settings.scss
index e0affb1..fed103a 100755
--- a/client/src/scss/settings.scss
+++ b/client/src/scss/settings.scss
@@ -1,29 +1,29 @@
-$color-lightest: #F0F0F0;
-$color-light: #AAA;
-$color-dark: #888098;
-$color-darkest: #344055;
-
-$color-accent: #551A8B;
+$color-accent: #6822aa;
$color-ok: #32936F; //#1F570F;
-$color-warn: #EDAE49; // #A38F34;
+$color-warn: #A38F34; // #A38F34;
$color-error: #D1495B; //#8A4441;
-$color-logo: #fff;
-$color-background: #fff;
-$color-font: $color-darkest;
+$color-lightest: var(--color-lightest);
+$color-light: var(--color-light);
+$color-dark: var(--color-dark);
+
+$color-font: var(--color-font);
$color-disabled: $color-lightest;
$color-border: $color-lightest;
$color-menu: $color-lightest;
-$color-link: $color-accent;
-$color-icon: $color-accent;
-$color-icon_active: $color-accent;
-$color-icon_inactive: $color-dark;
-$color-font-alt: $color-background;
+$color-background: var(--color-background);
+$color-link: var(--color-link);
+$color-font-alt: var(--color-font-alt);
+$color-icon: var(--color-icon);
+$color-icon-active: var(--color-icon-active);
+$color-icon-inactive: var(--color-icon-inactive);
+$color-box-shadow: var(--color-box-shadow);
+
+$box-shadow: 0 0 4px 0 $color-box-shadow;
$animation-length: .25s;
-$box-shadow: 0 0 4px 0 $color-light;
$font: sans-serif;
$font-size-small: 7pt;
@@ -36,26 +36,34 @@ $media-xsmall: 700px;
$media-small: 812px;
$media-medium: 1200px;
+#root {
+ --color-lightest: #F0F0F0;
+ --color-light: #AAA;
+ --color-dark: #888098;
-// DARK MODE
-// $color-lightest: #3d3d3d;
-// $color-light: #9c9c9c;
-// $color-dark: #a8a8a8;
-// $color-darkest: #dadada;
+ --color-font: #344055;
+ --color-background: #fff;
+ --color-font-alt: #fff;
+ --color-link: #{$color-accent};
+ --color-box-shadow: #{$color-light};
+ --color-icon: #{$color-accent};
+ --color-icon-active: #{$color-accent};
+ --color-icon-inactive: #{$color-dark};
+}
-// $color-logo: #fff;
-// $color-background: #2e2e2e;
-// $color-font: $color-darkest;
-// $color-disabled: $color-lightest;
-// $color-border: $color-lightest;
-// $color-menu: $color-lightest;
+#root.dark-mode {
+ --color-lightest: #3d3d3d;
+ --color-light: #9c9c9c;
+ --color-dark: #a8a8a8;
-// $color-link: $color-ok;
-// $color-icon: $color-dark;
-// $color-icon_active: $color-accent;
-// $color-icon_inactive: $color-lightest;
-// $color-font-alt: #fff;
+ --color-font: #dadada;
+ --color-background: #2e2e2e;
+ --color-font-alt: #fff;
+ --color-link: #{$color-warn};
+ --color-box-shadow: #{$color-dark};
+ --color-icon: #{$color-dark};
+ --color-icon-active: #{$color-accent};
+ --color-icon-inactive: #{$color-lightest};
+}
-// $box-shadow: 0 0 1px 0 $color-dark;
-
-// // TODO: fix "Apply" button
\ No newline at end of file
+// TODO: fix "Apply" button
diff --git a/logo/PNG/k8dash-Logo-Horizontal-COLOR.png b/logo/PNG/k8dash-Logo-Horizontal-COLOR.png
new file mode 100644
index 0000000..c7e337a
Binary files /dev/null and b/logo/PNG/k8dash-Logo-Horizontal-COLOR.png differ
diff --git a/logo/PNG/k8dash-Logo-Horizontal-WHITE.png b/logo/PNG/k8dash-Logo-Horizontal-WHITE.png
new file mode 100644
index 0000000..867cdfd
Binary files /dev/null and b/logo/PNG/k8dash-Logo-Horizontal-WHITE.png differ
diff --git a/logo/PNG/k8dash-Logo-Stacked-COLOR.png b/logo/PNG/k8dash-Logo-Stacked-COLOR.png
new file mode 100644
index 0000000..514e450
Binary files /dev/null and b/logo/PNG/k8dash-Logo-Stacked-COLOR.png differ
diff --git a/logo/PNG/k8dash-Logo-Stacked-WHITE.png b/logo/PNG/k8dash-Logo-Stacked-WHITE.png
new file mode 100644
index 0000000..3a2ed78
Binary files /dev/null and b/logo/PNG/k8dash-Logo-Stacked-WHITE.png differ
diff --git a/logo/SVG/k8dash-Logo-Horizontal-COLOR.svg b/logo/SVG/k8dash-Logo-Horizontal-COLOR.svg
new file mode 100644
index 0000000..8b3f761
--- /dev/null
+++ b/logo/SVG/k8dash-Logo-Horizontal-COLOR.svg
@@ -0,0 +1,51 @@
+
+
+
diff --git a/logo/SVG/k8dash-Logo-Horizontal-WHITE.svg b/logo/SVG/k8dash-Logo-Horizontal-WHITE.svg
new file mode 100644
index 0000000..fb06dc6
--- /dev/null
+++ b/logo/SVG/k8dash-Logo-Horizontal-WHITE.svg
@@ -0,0 +1,51 @@
+
+
+
diff --git a/logo/SVG/k8dash-Logo-Stacked-COLOR.svg b/logo/SVG/k8dash-Logo-Stacked-COLOR.svg
new file mode 100644
index 0000000..4e58c85
--- /dev/null
+++ b/logo/SVG/k8dash-Logo-Stacked-COLOR.svg
@@ -0,0 +1,48 @@
+
+
+
diff --git a/logo/SVG/k8dash-Logo-Stacked-WHITE.svg b/logo/SVG/k8dash-Logo-Stacked-WHITE.svg
new file mode 100644
index 0000000..94204d6
--- /dev/null
+++ b/logo/SVG/k8dash-Logo-Stacked-WHITE.svg
@@ -0,0 +1,48 @@
+
+
+