From c25499f53ef3db3649b2d14bd55f62dc455c073f Mon Sep 17 00:00:00 2001
From: Junhao Liao <junhao@junhao.ca>
Date: Thu, 26 Sep 2024 03:55:54 -0400
Subject: [PATCH] Add "Log Level" label as a Chip to LogLevelSelect component.

---
 .../src/components/StatusBar/LogLevelSelect/index.css      | 4 ++++
 .../src/components/StatusBar/LogLevelSelect/index.tsx      | 7 +++++++
 2 files changed, 11 insertions(+)

diff --git a/new-log-viewer/src/components/StatusBar/LogLevelSelect/index.css b/new-log-viewer/src/components/StatusBar/LogLevelSelect/index.css
index 55103c44..bf4e98a0 100644
--- 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
index a58bdb53..6d3f241c 100644
--- 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}