🎨style: Modify the transition shadow effect of the headerBar

web/src/components/HeaderBar.js

@@ -224,7 +224,7 @@ const HeaderBar = () => {
             <Avatar
             <Avatar
               size="extra-small"
               size="extra-small"
               color={stringToColor(userState.user.username)}
               color={stringToColor(userState.user.username)}
-              className="shadow-sm mr-1"
+              className="mr-1"
             >
             >
               {userState.user.username[0].toUpperCase()}
               {userState.user.username[0].toUpperCase()}
             </Avatar>
             </Avatar>
@@ -295,7 +295,7 @@ const HeaderBar = () => {
   };
   };
 
 
   return (
   return (
-    <header className="bg-semi-color-bg-0 text-semi-color-text-0 shadow-sm sticky top-0 z-50 transition-colors duration-300">
+    <header className="bg-semi-color-bg-0 text-semi-color-text-0 sticky top-0 z-50 transition-colors duration-300">
       <div className="w-full px-4">
       <div className="w-full px-4">
         <div className="flex items-center justify-between h-16">
         <div className="flex items-center justify-between h-16">
           <div className="flex items-center">
           <div className="flex items-center">

web/src/components/PageLayout.js

@@ -88,7 +88,7 @@ const PageLayout = () => {
           width: '100%',
           width: '100%',
           top: 0,
           top: 0,
           zIndex: 100,
           zIndex: 100,
-          boxShadow: '0 1px 6px rgba(0, 0, 0, 0.08)',
+          borderBottom: '1px solid var(--semi-color-border)',
         }}
         }}
       >
       >
         <HeaderBar />
         <HeaderBar />