chore: update icon button styles

web/src/components/Memo.tsx

@@ -42,6 +42,7 @@ const Memo: React.FC<Props> = (props: Props) => {
   const [createdAtStr, setCreatedAtStr] = useState<string>(getFormatedMemoCreatedAtStr(memo.createdTs));
   const memoContainerRef = useRef<HTMLDivElement>(null);
   const imageUrls = Array.from(memo.content.match(IMAGE_URL_REG) ?? []).map((s) => s.replace(IMAGE_URL_REG, "$1"));
+  const isVisitorMode = userService.isVisitorMode();
 
   useEffect(() => {
     if (!memoContainerRef) {
@@ -174,7 +175,7 @@ const Memo: React.FC<Props> = (props: Props) => {
           <Only when={memo.pinned}>
             <span className="status-text">PINNED</span>
           </Only>
-          <Only when={memo.visibility === "PUBLIC"}>
+          <Only when={memo.visibility === "PUBLIC" && !isVisitorMode}>
             <span className="status-text">PUBLIC</span>
           </Only>
         </div>

web/src/components/UserBanner.tsx

@@ -27,7 +27,7 @@ const UserBanner: React.FC<Props> = () => {
       setUsername(user.name);
       setCreatedDays(Math.ceil((Date.now() - utils.getTimeStampByDate(user.createdTs)) / 1000 / 3600 / 24));
     }
-  }, []);
+  }, [isVisitorMode, user, owner]);
 
   const handleUsernameClick = useCallback(() => {
     locationService.clearQuery();

web/src/less/common/selector.less

@@ -1,12 +1,10 @@
 @import "../mixin.less";
 
 .selector-wrapper {
-  .flex(column, flex-start, flex-start);
-  @apply relative h-7;
+  @apply flex flex-col justify-start items-start relative h-7;
 
   > .current-value-container {
-    .flex(row, space-between, center);
-    @apply w-full h-full rounded px-2 pr-1 bg-white border cursor-pointer select-none;
+    @apply flex flex-row justify-between items-center w-full h-full rounded px-2 pr-1 bg-white border cursor-pointer select-none;
 
     &:hover,
     &.active {
@@ -19,8 +17,7 @@
     }
 
     > .arrow-text {
-      .flex(row, center, center);
-      @apply w-4 shrink-0;
+      @apply flex flex-row justify-center items-center w-4 shrink-0;
 
       > .icon-img {
         @apply w-4 h-auto opacity-40;
@@ -29,16 +26,14 @@
   }
 
   > .items-wrapper {
-    .flex(column, flex-start, flex-start);
-    @apply absolute top-full left-0 w-auto p-1 mt-1 -ml-2 bg-white rounded-md overflow-y-auto;
+    @apply flex flex-col justify-start items-start absolute top-full left-0 w-auto p-1 mt-1 -ml-2 bg-white rounded-md overflow-y-auto z-1;
     min-width: calc(100% + 16px);
     max-height: 256px;
     box-shadow: 0 0 8px 0 rgb(0 0 0 / 20%);
     .hide-scroll-bar();
 
     > .item-container {
-      .flex(column, flex-start, flex-start);
-      @apply w-full px-3 text-sm select-none leading-8 cursor-pointer rounded whitespace-nowrap hover:bg-gray-100;
+      @apply flex flex-col justify-start items-start w-full px-3 text-sm select-none leading-8 cursor-pointer rounded whitespace-nowrap hover:bg-gray-100;
 
       &.selected {
         color: @text-green;

web/src/less/daily-review-dialog.less

@@ -17,7 +17,7 @@
         @apply flex flex-row justify-start items-center;
 
         > .btn-text {
-          @apply w-6 h-6 mr-2 rounded cursor-pointer select-none last:mr-0 hover:bg-gray-200;
+          @apply w-6 h-6 mr-2 rounded cursor-pointer select-none text-gray-600 last:mr-0 hover:bg-gray-200;
 
           > .icon-img {
             @apply w-full h-auto;

web/src/less/memo-card-dialog.less

@@ -27,7 +27,7 @@
 
           > .btn {
             .flex(row, center, center);
-            @apply w-6 h-6 ml-2 rounded hover:bg-white;
+            @apply w-6 h-6 ml-2 rounded text-gray-600 hover:bg-white;
           }
         }
       }

web/src/less/memo.less

@@ -46,7 +46,7 @@
             @apply w-full flex flex-row justify-between items-center border-b border-gray-100 p-1 mb-1;
 
             > .btn {
-              @apply relative w-7 h-7 p-1;
+              @apply relative w-7 h-7 p-1 text-gray-600;
 
               &:hover > .tip-text {
                 @apply block;

web/src/pages/Home.tsx

@@ -1,5 +1,6 @@
 import { useEffect } from "react";
 import { locationService, userService } from "../services";
+import { useAppSelector } from "../store";
 import useLoading from "../hooks/useLoading";
 import Only from "../components/common/OnlyWhen";
 import Sidebar from "../components/Sidebar";
@@ -11,6 +12,7 @@ import toastHelper from "../components/Toast";
 import "../less/home.less";
 
 function Home() {
+  const location = useAppSelector((state) => state.location);
   const loadingState = useLoading();
 
   useEffect(() => {
@@ -35,7 +37,7 @@ function Home() {
         }
         loadingState.setFinish();
       });
-  }, []);
+  }, [location]);
 
   return (
     <section className="page-wrapper home">