UI/UX fine update

hkbus · Oct 18, 2024 · aa877c3 · aa877c3
1 parent 1745d04
commit aa877c3
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 3 deletions.
diff --git a/src/components/home/HomeTabbar.tsx b/src/components/home/HomeTabbar.tsx
@@ -2,7 +2,7 @@ import { useContext } from "react";
 import { Tabs, Tab, SxProps, Theme } from "@mui/material";
 import {
   Star as StarIcon,
-  CompassCalibration as CompassCalibrationIcon,
+  NearMe as NearMeIcon,
   Bookmark as BookmarkIcon,
 } from "@mui/icons-material";
 import { useTranslation } from "react-i18next";
@@ -28,7 +28,7 @@ const HomeTabbar = ({ homeTab, onChangeTab }: HomeTabbarProps) => {
     >
       <Tab
         iconPosition="start"
-        icon={<CompassCalibrationIcon />}
+        icon={<NearMeIcon />}
         label={t("附近")}
         value="nearby"
         disableRipple
@@ -91,5 +91,11 @@ const tabbarSx: SxProps<Theme> = {
   },
   [`& .MuiTabs-flexContainer`]: {
     justifyContent: "flex-start",
+    "& svg": {
+      fontSize: "1rem",
+    },
+    "& .MuiTab-root": {
+      fontSize: "0.8em",
+    },
   },
 };
diff --git a/src/components/home/SuccinctEtas.tsx b/src/components/home/SuccinctEtas.tsx
@@ -196,6 +196,7 @@ const secondarySx: SxProps<Theme> = {
   lineHeight: "1.43",
   whiteSpace: "nowrap",
   textAlign: "right",
+  opacity: 0.8,
 };
 
 const waitTimeSx: SxProps<Theme> = {

diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
@@ -18,6 +18,7 @@ import {
   WbSunny as WbSunnyIcon,
   DarkMode as DarkModeIcon,
   WifiOff as WifiOffIcon,
+  Search as SearchIcon,
 } from "@mui/icons-material";
 import { visuallyHidden } from "@mui/utils";
 import AppContext from "../../context/AppContext";
@@ -124,6 +125,7 @@ const Header = () => {
         type="text"
         value={searchRoute}
         placeholder={t("路線")}
+        startAdornment={<SearchIcon fontSize="small" sx={{ opacity: 0.8 }} />}
         onChange={(e) => {
           if (
             e.target.value.toUpperCase() in routeList ||
@@ -142,7 +144,7 @@ const Header = () => {
           navigate(`/${language}/board`, { replace: true });
         }}
       />
-      <Box sx={funcPanelSx}>
+      <Box sx={weatherPanelSx}>
         {weatherCodes.slice(0, 2).map((code) => (
           <Avatar
             onClick={() =>
@@ -158,6 +160,8 @@ const Header = () => {
             sx={weatherImg}
           />
         ))}
+      </Box>
+      <Box sx={funcPanelSx}>
         {geoPermission === "granted" && (
           <IconButton
             aria-label="relocate"
@@ -237,9 +241,15 @@ const searchRouteInputSx: SxProps<Theme> = {
   },
 };
 
+const weatherPanelSx: SxProps<Theme> = {
+  display: "flex",
+  alignContent: "center",
+};
+
 const funcPanelSx: SxProps<Theme> = {
   display: "flex",
   alignItems: "center",
+  opacity: 0.7,
 };
 
 const languageSx: SxProps<Theme> = {