chore: update icon button styles

pull/127/head
boojack 3 years ago
parent a73ee7aefc
commit 5da4c98f05

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

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

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

@ -17,7 +17,7 @@
@apply flex flex-row justify-start items-center; @apply flex flex-row justify-start items-center;
> .btn-text { > .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 { > .icon-img {
@apply w-full h-auto; @apply w-full h-auto;

@ -27,7 +27,7 @@
> .btn { > .btn {
.flex(row, center, center); .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;
} }
} }
} }

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

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

Loading…
Cancel
Save