Add "Log Level" label as a Chip to LogLevelSelect component.

y-scope · Sep 26, 2024 · c25499f · c25499f
1 parent 0e36cd9
commit c25499f
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 0 deletions.
diff --git a/new-log-viewer/src/components/StatusBar/LogLevelSelect/index.css b/new-log-viewer/src/components/StatusBar/LogLevelSelect/index.css
@@ -2,3 +2,7 @@
     display: flex;
     gap: 2px;
 }
+
+.log-level-select-render-value-box-label {
+    background-color: initial !important;
+}
diff --git a/new-log-viewer/src/components/StatusBar/LogLevelSelect/index.tsx b/new-log-viewer/src/components/StatusBar/LogLevelSelect/index.tsx
@@ -6,6 +6,7 @@ import React, {
 import {SelectValue} from "@mui/base/useSelect";
 import {
     Box,
+    Chip,
     IconButton,
     MenuItem,
     Option,
@@ -37,6 +38,12 @@ const LogLevelSelect = () => {
 
     const handleRenderValue = (selected: SelectValue<SelectOption<LOG_LEVEL>, true>) => (
         <Box className={"log-level-select-render-value-box"}>
+            <Chip
+                className={"log-level-select-render-value-box-label"}
+                variant={"soft"}
+            >
+                Log Level
+            </Chip>
             {selected.map((selectedOption) => (
                 <LogLevelChip
                     key={selectedOption.value}