adjust UI

Cinnamon · Apr 8, 2024 · 636b008 · 636b008
1 parent b146eea
commit 636b008
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 26 deletions.
diff --git a/libs/ktem/ktem/assets/css/main.css b/libs/ktem/ktem/assets/css/main.css
@@ -1,30 +1,27 @@
+/* no footer */
 footer {
   display: none !important;
 }
 
-.gradio-container {
-  max-width: 100% !important;
-
-  ::-webkit-scrollbar {
-    background: var(--background-fill-primary);
-  }
-
-  ::-webkit-scrollbar-thumb {
-    background-color: var(--border-color-primary);
-    border: 3px solid transparent;
-    border-radius: 100px;
-    background-clip: content-box;
-  }
-
-  ::-webkit-scrollbar-corner {
-    background: var(--border-color-primary);
-  }
+/* customize scrollbar */
+::-webkit-scrollbar {
+  background: var(--background-fill-primary);
+}
+::-webkit-scrollbar-thumb {
+  background-color: var(--border-color-primary);
+  border: 4px solid transparent;
+  border-radius: 100px;
+  background-clip: content-box;
+}
+::-webkit-scrollbar-corner {
+  background: var(--border-color-primary);
 }
 
-.gradio-container .light {
-  background-color: #ffffff;
+.gradio-container {
+  max-width: 100% !important;
 }
 
+/* styling for header bar */
 .header-bar {
   background-color: transparent;
   margin: 0px 0px 20px;
@@ -33,15 +30,17 @@ footer {
   text-wrap: nowrap;
   border: none;
 }
-
 .header-bar button.selected {
   border: none;
-  /* background-color: var(--background-fill-primary); */
-  /* border: 4px solid transparent; */
-  /* border-radius: var(--radius-lg);
+
+  /* an alternative header bar style with rounded background */
+  /* background-color: var(--background-fill-primary);
+  border: 4px solid transparent;
+  border-radius: var(--radius-lg);
   background-clip: padding-box; */
 }
 
+/* selected buttons have highlighted text */
 button.selected {
   color: var(--block-label-text-color);
   font-weight: bold;
@@ -50,24 +49,28 @@ button.selected {
 #chat-tab,
 #settings-tab,
 #help-tab,
-#admin-tab,
+#resources-tab,
 #login-tab {
   border: none !important;
 }
 
 #help-tab,
 #settings-tab {
+  /* text-dense view should not be wide for readability */
   max-width: max(56vw, 900px) !important;
   margin: 0 auto !important;
 }
 
-.indices-tab {
+.indices-tab,
+#resources-tab {
+  /* Other view should not be too wide */
   border: none !important;
   max-width: max(70vw, 1200px) !important;
   margin: 0 auto !important;
 }
 
 #main-chat-bot {
+  /* span the chat area to occupy full height minus space for chat input */
   height: calc(100vh - 180px) !important;
 }
 
@@ -95,19 +98,23 @@ button.selected {
   outline: none;
 }
 
+/* for setting transparent background for elements */
 .no-background {
   background-color: transparent;
   border: none;
 }
 
+/* for setting bold text for elements */
 .bold-text {
   font-weight: bold;
 }
 
+/* for setting highlighted text for elements */
 .body-text-color {
   color: var(--body-text-color);
 }
 
+/* for setting right-aligned buttons */
 .right-button {
   min-width: 200px !important;
   width: fit-content;
@@ -116,6 +123,7 @@ button.selected {
   margin: 0px 0px 0px auto;
 }
 
+/* for setting height limit for buttons */
 .cap-height {
   max-height: 42px;
 }
diff --git a/libs/ktem/ktem/llms/ui.py b/libs/ktem/ktem/llms/ui.py
@@ -98,7 +98,7 @@ def on_building_ui(self):
                             "by default across the application."
                         ),
                     )
-                    self.btn_new = gr.Button("Create LLM")
+                    self.btn_new = gr.Button("Add LLM", variant="primary")
 
                 with gr.Column(scale=3):
                     self.spec_desc = gr.Markdown(self.spec_desc_default)