From 5da4c98f05a13d74d78036efacf9c44791261238 Mon Sep 17 00:00:00 2001 From: boojack Date: Tue, 19 Jul 2022 21:46:38 +0800 Subject: [PATCH] chore: update icon button styles --- web/src/components/Memo.tsx | 3 ++- web/src/components/UserBanner.tsx | 2 +- web/src/less/common/selector.less | 15 +++++---------- web/src/less/daily-review-dialog.less | 2 +- web/src/less/memo-card-dialog.less | 2 +- web/src/less/memo.less | 2 +- web/src/pages/Home.tsx | 4 +++- 7 files changed, 14 insertions(+), 16 deletions(-) diff --git a/web/src/components/Memo.tsx b/web/src/components/Memo.tsx index 983ddab3..e6ef48f2 100644 --- a/web/src/components/Memo.tsx +++ b/web/src/components/Memo.tsx @@ -42,6 +42,7 @@ const Memo: React.FC = (props: Props) => { const [createdAtStr, setCreatedAtStr] = useState(getFormatedMemoCreatedAtStr(memo.createdTs)); const memoContainerRef = useRef(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) => { PINNED - + PUBLIC diff --git a/web/src/components/UserBanner.tsx b/web/src/components/UserBanner.tsx index d1833852..c334350b 100644 --- a/web/src/components/UserBanner.tsx +++ b/web/src/components/UserBanner.tsx @@ -27,7 +27,7 @@ const UserBanner: React.FC = () => { setUsername(user.name); setCreatedDays(Math.ceil((Date.now() - utils.getTimeStampByDate(user.createdTs)) / 1000 / 3600 / 24)); } - }, []); + }, [isVisitorMode, user, owner]); const handleUsernameClick = useCallback(() => { locationService.clearQuery(); diff --git a/web/src/less/common/selector.less b/web/src/less/common/selector.less index d2611625..64c49f55 100644 --- a/web/src/less/common/selector.less +++ b/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; diff --git a/web/src/less/daily-review-dialog.less b/web/src/less/daily-review-dialog.less index 120979d2..f0b5b9d7 100644 --- a/web/src/less/daily-review-dialog.less +++ b/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; diff --git a/web/src/less/memo-card-dialog.less b/web/src/less/memo-card-dialog.less index 885f4349..a71e07ce 100644 --- a/web/src/less/memo-card-dialog.less +++ b/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; } } } diff --git a/web/src/less/memo.less b/web/src/less/memo.less index bc5776a3..f8857af3 100644 --- a/web/src/less/memo.less +++ b/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; diff --git a/web/src/pages/Home.tsx b/web/src/pages/Home.tsx index e28e9eae..5b8a1f98 100644 --- a/web/src/pages/Home.tsx +++ b/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 (