Remove YScopeLogo component and update icon styles.

y-scope · Sep 18, 2024 · bd3c94c · bd3c94c
1 parent f535eeb
commit bd3c94c
Show file tree

Hide file tree

Showing 7 changed files with 49 additions and 63 deletions.
diff --git a/new-log-viewer/public/favicon.svg b/new-log-viewer/public/favicon.svg
diff --git a/new-log-viewer/src/components/MenuBar/index.css b/new-log-viewer/src/components/MenuBar/index.css
@@ -11,14 +11,18 @@
     box-shadow: 0 1px 0 0 var(--joy-palette-neutral-outlinedBorder);
 }
 
-.menu-bar-logo {
-    user-select: none;
-    width: 64px;
-    font-size: 1.1rem;
-    text-align: center;
+.menu-bar-logo-container {
+    display: flex;
+    justify-content: center;
+    width: 48px;
+    height: var(--ylv-status-bar-height);
+}
+
+.menu-bar-open-file-icon {
+    font-size: 24px !important;
 }
 
 .menu-bar-filename {
     flex-grow: 1;
-    align-items: center;
+    padding-left: 10px;
 }
diff --git a/new-log-viewer/src/components/MenuBar/index.tsx b/new-log-viewer/src/components/MenuBar/index.tsx
@@ -1,10 +1,10 @@
 import {useContext} from "react";
 
 import {
-    Button,
     Divider,
+    IconButton,
     Sheet,
-    Stack,
+    Tooltip,
     Typography,
 } from "@mui/joy";
 
@@ -13,7 +13,6 @@ import FolderOpenIcon from "@mui/icons-material/FolderOpen";
 import {StateContext} from "../../contexts/StateContextProvider";
 import {CURSOR_CODE} from "../../typings/worker";
 import {openFile} from "../../utils/file";
-import YScopeLogo from "../YScopeLogo";
 import NavigationBar from "./NavigationBar";
 
 import "./index.css";
@@ -36,23 +35,34 @@ const MenuBar = () => {
     return (
         <>
             <Sheet className={"menu-bar"}>
-                <YScopeLogo className={"menu-bar-logo"}/>
-                <Stack
-                    className={"menu-bar-filename"}
-                    direction={"row"}
-                    gap={1}
+                <div className={"menu-bar-logo-container"}>
+                    <img
+                        alt={"yscope-small-logo"}
+                        src={"./favicon.svg"}
+                        width={20}/>
+                </div>
+
+                <Divider orientation={"vertical"}/>
+                <Tooltip
+                    placement={"right"}
+                    title={"Open file"}
+                    variant={"outlined"}
                 >
-                    <Button
+                    <IconButton
                         size={"sm"}
-                        startDecorator={<FolderOpenIcon/>}
                         onClick={handleOpenFile}
                     >
-                        Open
-                    </Button>
-                    <Typography level={"body-md"}>
-                        {fileName}
-                    </Typography>
-                </Stack>
+                        <FolderOpenIcon className={"menu-bar-open-file-icon"}/>
+                    </IconButton>
+                </Tooltip>
+                <Divider orientation={"vertical"}/>
+
+                <Typography
+                    className={"menu-bar-filename"}
+                    level={"body-md"}
+                >
+                    {fileName}
+                </Typography>
 
                 <Divider orientation={"vertical"}/>
                 <NavigationBar/>

diff --git a/new-log-viewer/src/components/SidebarContainer/PanelTabs/index.css b/new-log-viewer/src/components/SidebarContainer/PanelTabs/index.css
@@ -6,11 +6,15 @@
 
 .sidebar-tab-button {
     justify-content: center !important;
-    width: 64px;
-    height: 64px;
+    width: 48px;
+    height: 48px;
     padding: 0 !important;
 }
 
+.sidebar-tab-button-icon {
+    font-size: 32px !important;
+}
+
 .sidebar-tab-list-spacing {
     flex-grow: 1;
 }
diff --git a/new-log-viewer/src/components/SidebarContainer/PanelTabs/index.tsx b/new-log-viewer/src/components/SidebarContainer/PanelTabs/index.tsx
@@ -9,8 +9,8 @@ import {
     Tabs,
 } from "@mui/joy";
 
-import InfoIcon from "@mui/icons-material/Info";
-import SettingsIcon from "@mui/icons-material/Settings";
+import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
+import SettingsOutlinedIcon from "@mui/icons-material/SettingsOutlined";
 
 import {
     TAB_DISPLAY_NAMES,
@@ -71,16 +71,16 @@ const PanelTabs = forwardRef<HTMLDivElement, PanelTabsProps>((
                     size={"lg"}
                 >
                     {[
-                        {tabName: TAB_NAME.FILE_INFO, icon: <InfoIcon/>},
-                    ].map(({tabName, icon}) => (
+                        {tabName: TAB_NAME.FILE_INFO, Icon: InfoOutlinedIcon},
+                    ].map(({tabName, Icon}) => (
                         <Tab
                             className={"sidebar-tab-button"}
                             color={"neutral"}
                             key={tabName}
                             title={TAB_DISPLAY_NAMES[TAB_NAME.FILE_INFO]}
                             value={tabName}
                         >
-                            {icon}
+                            <Icon className={"sidebar-tab-button-icon"}/>
                         </Tab>
                     ))}
                     <div className={"sidebar-tab-list-spacing"}/>
@@ -90,7 +90,7 @@ const PanelTabs = forwardRef<HTMLDivElement, PanelTabsProps>((
                         title={TAB_DISPLAY_NAMES[TAB_NAME.SETTINGS]}
                         value={TAB_NAME.SETTINGS}
                     >
-                        <SettingsIcon/>
+                        <SettingsOutlinedIcon className={"sidebar-tab-button-icon"}/>
                     </Tab>
                 </TabList>
                 <FileInfoTab/>

diff --git a/new-log-viewer/src/components/YScopeLogo/index.css b/new-log-viewer/src/components/YScopeLogo/index.css
diff --git a/new-log-viewer/src/components/YScopeLogo/index.tsx b/new-log-viewer/src/components/YScopeLogo/index.tsx