App theme updates (nebari-dev#382)

* made updates to theme; adding themcolors, updated logo * updated index.js file * removed unused useEffect * enforced styles to overrid Mui's enforced styles * udpated style.css * updated styles * updating colors to match desgin, added back in commented jinja file * added index, css build files * removed comments: e2e tests failing checking if comments was cause * added new nebari logo, set as defualt * removed Mui style from jinja file that was overwriting react style * updated logo at pulic/img/logo.svg * returned styles, added custom style sheet, updated styles * build files, index css * updated theme styles * made changes to configs and added new styles in styles.css * simplified a shared class style * removed unused logo * udpated styles on nebari template page --------- Co-authored-by: Kilian Berres <kberres@ITLP01061.local>
jbouder · Jul 12, 2024 · 8035cfe · 8035cfe
1 parent 734d7f0
commit 8035cfe
Show file tree

Hide file tree

Showing 13 changed files with 160 additions and 51 deletions.
diff --git a/jhub_apps/static/css/index.css b/jhub_apps/static/css/index.css
diff --git a/jhub_apps/static/img/Nebari-Logo-Horizontal-Lockup-Black-text.svg b/jhub_apps/static/img/Nebari-Logo-Horizontal-Lockup-Black-text.svg
diff --git a/jhub_apps/static/js/index.js b/jhub_apps/static/js/index.js
diff --git a/jhub_apps/templates/style.css b/jhub_apps/templates/style.css
@@ -22,12 +22,13 @@
     --link-text-color: {{ text_color | default("#1c1d26") }};
     --primary-color: {{ primary_color | default("#ba18da") }};
     --primary-color-dark: {{ primary_color_dark | default("#9b00ce") }};
+    --primary-color-light: {{ primary_color_light | default("#ba18da10") }};
     --secondary-color: {{ secondary_color | default("#18817a") }};
     --secondary-color-dark: {{ secondary_color_dark | default("#12635e") }};
     --accent-color: {{ accent_color | default("#eda61d") }};
     --accent-color-dark: {{ accent_color_dark | default("#a16d14") }};
-    --navbar-background-color: {{ navbar_color | default("#1c1d26") }};
-    --navbar-text-color: {{ navbar_text_color | default("#ffffff") }};
+    --navbar-background-color: {{ navbar_color | default("#ffffff") }};
+    --navbar-text-color: {{ navbar_text_color | default("#2E2F33") }};
     --navbar-hover-color: {{ navbar_hover_color | default("#20b1a8") }};
     --link-hover-color: {{ accent_color | default("#20b1a8") }};
     --light-text-color: #f1f1f6;
@@ -37,6 +38,7 @@
     --gray-color-dark: #E0E0E0;
     --blue-link-color: #276BE9;
 
+
     /* Miscellaneous */
     --button-hover-shadow: 0 3px 0 var(--text-color);
     --focus-width: 2px;
@@ -274,6 +276,53 @@ a:focus {
     background-color: {{ navbar_hover_color | default("#00a3b0") }};
 }
 
+/* NAVBAR/APP BAR Header */
+
+.MuiAppBar-root {
+    background-color: var(--navbar-background-color) !important;
+}
+
+.MuiAppBar-root .MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary, .MuiAppBar-root .MuiChip-root.MuiChip-filled {
+    color: var(--navbar-text-color) !important;
+    font-weight: 700;
+}
+
+.MuiButton-textPrimary#profile-menu-btn:hover {
+    background-color: var(--navbar-hover-color) !important;
+}
+
+
+/* Sidebar Home Button */
+
+.MuiButtonBase-root.MuiListItemButton-root { 
+    position: relative;
+    z-index: 1; 
+}
+
+.MuiButtonBase-root.MuiListItemButton-root::before { 
+    content: '';
+    position: absolute;
+    background: var(--primary-color);
+    opacity: 0.1;
+    z-index: -1; 
+}
+
+.MuiButtonBase-root.MuiListItemButton-root:hover::before {
+    background: rgba(0, 0, 0, .08) !important;
+  }
+  .MuiButtonBase-root.MuiListItemButton-root::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 8px;
+    background-color: var(--primary-color);
+    border-top-left-radius: 8px;
+    border-bottom-left-radius: 8px;
+    z-index: 0;
+  }
+
 .progress-bar {
     background-color: var(--primary-color) !important;
 }
@@ -306,6 +355,7 @@ a:focus {
 }
 
 /* Style for the profile menu */
+
 .profile-menu {
     display: inline-block;
     position: relative;
@@ -316,9 +366,17 @@ a:focus {
     display: flex;
     align-items: center;
     cursor: pointer;
-    margin: 10px 0;
+    padding: 10px;
   }
-
+ .profile:hover {
+    background-color: var(--navbar-hover-color)!important;
+  }
+  .profile img {
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    margin-right: 10px;
+ }
   .username {
     font-weight: bold;
   }
@@ -454,6 +512,10 @@ a:focus {
     color: var(--navbar-text-color) !important;
 }
 
+.MuiButton-textPrimary#profile-menu-btn:hover {
+    background-color: var(--navbar-hover-color) !important;
+}
+
 .MuiListItemButton-root::before  {
     background-color: var(--primary-color) !important;
 }   

diff --git a/jhub_apps/themes/__init__.py b/jhub_apps/themes/__init__.py
@@ -1,12 +1,13 @@
 from jhub_apps.version import get_version
 
-LOGO = "/services/japps/static/img/Nebari-Logo-Horizontal-Lockup-White-text.svg"
+LOGO = "/services/japps/static/img/Nebari-Logo-Horizontal-Lockup-Black-text.svg"
 FAVICON = "/services/japps/static/favicon.ico"
 
 DEFAULT_THEME = {
     "logo": LOGO,
     "favicon": FAVICON,
     "primary_color": "#ba18da",
+    "primary_color_light": "#BA18DA10",
     "primary_color_dark": "#9b00ce",
     "secondary_color": "#18817a",
     "secondary_color_dark": "#12635e",
@@ -15,8 +16,8 @@
     "text_color": "#1c1d26",
     "h1_color": "#0f1015",
     "h2_color": "#0f1015",
-    "navbar_text_color": "#ffffff",
-    "navbar_hover_color": "#20b1a8",
-    "navbar_color": "#1c1d26",
+    "navbar_text_color": "#2E2F33",
+    "navbar_hover_color": "#00000008",
+    "navbar_color": "#ffffff",
     "version": get_version(),
 }
diff --git a/ui/public/img/logo.svg b/ui/public/img/logo.svg
diff --git a/ui/src/App.tsx b/ui/src/App.tsx
@@ -95,7 +95,7 @@ export const App = (): React.ReactElement => {
           pt: 9,
           pl: { xs: 1, sm: 33 },
           pr: 1,
-          backgroundColor: '#FAFAFA',
+          backgroundColor: '#fafbfc',
         }}
       >
         {notification ? (

diff --git a/ui/src/components/app-form/app-form.tsx b/ui/src/components/app-form/app-form.tsx
@@ -535,6 +535,7 @@ export const AppForm = ({ id }: AppFormProps): React.ReactElement => {
                   paddingBottom: '8px',
                   borderColor: isFocused ? '#ba18da' : '#ccc',
                   letterSpacing: '.15px',
+                  backgroundColor: '#FAFAFA',
                 }}
               />
               <div ref={overlayRef} className="overlay-text">

diff --git a/ui/src/components/navigation/navigation.css b/ui/src/components/navigation/navigation.css
@@ -0,0 +1,9 @@
+#app-bar #toolbar .button-menu {
+    color: #0F1015 !important;
+    font-weight: 700;
+}
+
+#app-bar #toolbar .chip {
+  background-color: #E0E0E0 !important;
+  color: #0F1015 !important;
+}