improve spacing

This commit is contained in:
2023-11-11 16:12:50 +07:00
parent 1c3119577f
commit 5c48ebe103
11 changed files with 666 additions and 744 deletions

View File

@@ -2,14 +2,7 @@ import { Link, NavLink } from 'react-router-dom';
import { twMerge } from 'tailwind-merge';
import { ActiveAccount } from '@shared/accounts/active';
import {
ChatsIcon,
ComposeIcon,
ExploreIcon,
HomeIcon,
NwcIcon,
RelayIcon,
} from '@shared/icons';
import { ChatsIcon, ComposeIcon, HomeIcon, NwcIcon, RelayIcon } from '@shared/icons';
import { compactNumber } from '@utils/number';
@@ -87,29 +80,6 @@ export function Navigation() {
</>
)}
</NavLink>
<NavLink
to="/explore"
preventScrollReset={true}
className="inline-flex flex-col items-center justify-center"
>
{({ isActive }) => (
<>
<div
className={twMerge(
'inline-flex aspect-square h-auto w-full items-center justify-center rounded-lg',
isActive
? 'bg-black/10 text-black dark:bg-white/10 dark:text-white'
: 'text-black/50 dark:text-neutral-400'
)}
>
<ExploreIcon className="h-6 w-6" />
</div>
<div className="text-sm font-medium text-black dark:text-white">
Explore
</div>
</>
)}
</NavLink>
</div>
<div className="flex shrink-0 flex-col gap-3 p-1">
<Link

View File

@@ -15,7 +15,7 @@ export function TextKind({ content, textmode }: { content: string; textmode?: bo
return (
<div className={'min-w-0 px-3'}>
<div className="break-p select-text whitespace-pre-line leading-normal text-neutral-900 dark:text-neutral-100">
<div className="break-p select-text leading-normal text-neutral-900 dark:text-neutral-100">
{parsedContent}
</div>
</div>

View File

@@ -18,7 +18,7 @@ export function ImagePreview({ url }: { url: string }) {
return (
<Zoom key={url} zoomMargin={50} IconUnzoom={() => <CancelIcon className="h-4 w-4" />}>
<div className="group relative mt-2">
<div className="group relative my-2">
<img
src={url}
alt={url}

View File

@@ -43,7 +43,7 @@ export function LinkPreview({ url }: { url: string }) {
to={url}
target="_blank"
rel="noreferrer"
className="flex w-full flex-col rounded-lg bg-neutral-100 dark:bg-neutral-900"
className="my-2 flex w-full flex-col rounded-lg bg-neutral-100 dark:bg-neutral-900"
>
{isImage(data.image) ? (
<img

View File

@@ -12,7 +12,7 @@ export function VideoPreview({ url }: { url: string }) {
return (
<MediaController
key={url}
className="mt-2 aspect-video w-full overflow-hidden rounded-lg"
className="my-2 aspect-video w-full overflow-hidden rounded-lg"
>
<video slot="media" src={url} preload="metadata" muted />
<MediaLoadingIndicator slot="centered-chrome"></MediaLoadingIndicator>

View File

@@ -51,7 +51,7 @@ export function TitleBar({
)}
</div>
<div className="col-span-1 flex justify-end">
{id !== '9999' ? (
{id !== '9999' && id !== '9998' ? (
<button
type="button"
onClick={() => removeWidget.mutate(id)}

View File

@@ -1,4 +1,4 @@
import { ArticleIcon, BellIcon, MediaIcon, PlusIcon } from '@shared/icons';
import { ArticleIcon, MediaIcon, PlusIcon } from '@shared/icons';
import { TitleBar } from '@shared/titleBar';
import { AddGroupFeeds, AddHashtagFeeds, WidgetWrapper } from '@shared/widgets';
@@ -117,38 +117,6 @@ export function WidgetList({ widget }: { widget: Widget }) {
</div>
</div>
</div>
<div className="rounded-xl bg-neutral-100 p-3 dark:bg-neutral-900">
<h3 className="mb-2.5 text-sm font-semibold uppercase text-neutral-700 dark:text-neutral-300">
Other
</h3>
<div className="flex flex-col gap-3">
<div className="inline-flex h-14 w-full items-center justify-between rounded-lg bg-white px-3 hover:shadow-md hover:shadow-neutral-200/50 dark:hover:shadow-neutral-800/50">
<div className="inline-flex items-center gap-2.5">
<div className="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-neutral-100">
<BellIcon className="h-4 w-4" />
</div>
<p className="font-medium">Notification</p>
</div>
<button
type="button"
onClick={() =>
replaceWidget.mutate({
currentId: widget.id,
widget: {
kind: WIDGET_KIND.notification,
title: 'Notification',
content: '',
},
})
}
className="inline-flex h-6 items-center gap-1 rounded-md bg-neutral-100 pl-1.5 pr-2.5 text-sm font-medium hover:bg-blue-500 hover:text-white dark:bg-neutral-900"
>
<PlusIcon className="h-3 w-3" />
Add
</button>
</div>
</div>
</div>
</div>
</div>
</WidgetWrapper>