update overal typography

This commit is contained in:
Ren Amamiya
2023-05-20 21:00:09 +07:00
parent 4be64f7730
commit caeffe98a7
54 changed files with 157 additions and 165 deletions

View File

@@ -54,7 +54,7 @@ export function AvatarUploader({ valueState }: { valueState: any }) {
<button
onClick={() => openFileDialog()}
type="button"
className="inline-flex h-6 items-center justify-center rounded bg-zinc-900 px-3 text-xs font-medium text-zinc-200 ring-1 ring-zinc-800 hover:bg-zinc-700"
className="inline-flex h-6 items-center justify-center rounded bg-zinc-900 px-3 text-base font-medium text-white ring-1 ring-zinc-800 hover:bg-zinc-700"
>
{loading ? (
<svg

View File

@@ -33,7 +33,7 @@ export function ComposerModal() {
<button
type="button"
onClick={() => openModal()}
className="inline-flex h-7 w-max items-center justify-center gap-1 rounded-md bg-fuchsia-500 px-2.5 text-xs font-medium text-zinc-200 shadow-button hover:bg-fuchsia-600 focus:outline-none"
className="inline-flex h-8 w-max items-center justify-center gap-1 rounded-md bg-fuchsia-500 px-2.5 text-sm font-medium text-white shadow-button hover:bg-fuchsia-600 focus:outline-none"
>
<ComposeIcon width={14} height={14} />
Compose
@@ -76,7 +76,7 @@ export function ComposerModal() {
className="text-zinc-500"
/>
</span>
<div className="inline-flex h-6 w-max items-center justify-center gap-0.5 rounded bg-zinc-800 pl-3 pr-1.5 text-xs font-medium text-zinc-400 shadow-mini-button">
<div className="inline-flex h-6 w-max items-center justify-center gap-0.5 rounded bg-zinc-800 pl-3 pr-1.5 text-base font-medium text-zinc-400 shadow-mini-button">
New Post
<ChevronDownIcon width={14} height={14} />
</div>

View File

@@ -48,9 +48,9 @@ const ImagePreview = ({
<button
type="button"
onClick={() => Transforms.removeNodes(editor, { at: path })}
className="absolute right-2 top-2 inline-flex h-7 w-7 items-center justify-center gap-0.5 rounded bg-zinc-800 text-xs font-medium text-zinc-400 shadow-mini-button hover:bg-zinc-700"
className="absolute right-2 top-2 inline-flex h-7 w-7 items-center justify-center gap-0.5 rounded bg-zinc-800 text-base font-medium text-zinc-400 shadow-mini-button hover:bg-zinc-700"
>
<TrashIcon width={14} height={14} className="text-zinc-100" />
<TrashIcon width={14} height={14} className="text-white" />
</button>
</div>
</figure>
@@ -130,7 +130,7 @@ export function Post({ pubkey, privkey }: { pubkey: string; privkey: string }) {
<button
type="button"
onClick={submit}
className="inline-flex h-7 w-max items-center justify-center gap-1 rounded-md bg-fuchsia-500 px-3.5 text-xs font-medium text-zinc-200 shadow-button hover:bg-fuchsia-600"
className="inline-flex h-7 w-max items-center justify-center gap-1 rounded-md bg-fuchsia-500 px-3.5 text-base font-medium text-white shadow-button hover:bg-fuchsia-600"
>
Post
</button>

View File

@@ -17,7 +17,7 @@ export function User({ data }: { data: any }) {
loading="auto"
/>
</div>
<h5 className="text-sm font-semibold leading-none text-zinc-100">
<h5 className="text-base font-semibold leading-none text-white">
{metadata?.display_name || metadata?.name || (
<div className="h-3 w-20 animate-pulse rounded-sm bg-zinc-700" />
)}

View File

@@ -136,7 +136,7 @@ export default function EventCollector() {
);
return (
<div className="inline-flex h-6 w-6 items-center justify-center rounded text-zinc-400 hover:bg-zinc-900 hover:text-zinc-200">
<div className="inline-flex h-6 w-6 items-center justify-center rounded text-zinc-400 hover:bg-zinc-900 hover:text-white">
<HeartBeatIcon width={14} height={14} />
</div>
);

View File

@@ -8,7 +8,6 @@ export function Image(props) {
return (
<img
{...props}
loading="lazy"
decoding="async"
onError={addImageFallback}
alt="lume default img"

View File

@@ -36,7 +36,7 @@ export default function MultiAccounts() {
<BellIcon
width={16}
height={16}
className="text-zinc-400 group-hover:text-zinc-200"
className="text-zinc-400 group-hover:text-white"
/>
</button>
</div>
@@ -61,16 +61,16 @@ export default function MultiAccounts() {
<PlusIcon
width={16}
height={16}
className="text-zinc-400 group-hover:text-zinc-200"
className="text-zinc-400 group-hover:text-white"
/>
</button>
</div>
</div>
<div className="flex flex-col gap-0.5 text-center">
<span className="text-sm font-black uppercase leading-tight text-zinc-600">
<span className="text-base font-black uppercase leading-tight text-zinc-600">
Lume
</span>
<span className="text-xs font-medium text-zinc-700">
<span className="text-base font-medium text-zinc-700">
v{APP_VERSION}
</span>
</div>

View File

@@ -29,23 +29,23 @@ export default function Navigation() {
<div className="flex flex-col text-zinc-400">
<ActiveLink
href="/app/space"
className="flex h-8 items-center gap-2.5 rounded-md px-2.5 text-[13px] font-semibold hover:text-zinc-200"
className="flex h-8 items-center gap-2.5 rounded-md px-2.5 hover:text-white"
activeClassName="bg-zinc-900/50 hover:bg-zinc-900"
>
<span className="inline-flex h-5 w-5 items-center justify-center rounded bg-zinc-900">
<WorldIcon width={12} height={12} className="text-zinc-200" />
<WorldIcon width={12} height={12} className="text-white" />
</span>
<span>Space</span>
<span className="font-medium">Space</span>
</ActiveLink>
<ActiveLink
href="/app/threads"
className="flex h-8 items-center gap-2.5 rounded-md px-2.5 text-[13px] font-semibold hover:text-zinc-200"
className="flex h-8 items-center gap-2.5 rounded-md px-2.5 hover:text-white"
activeClassName=""
>
<span className="inline-flex h-5 w-5 items-center justify-center rounded bg-zinc-900">
<ThreadsIcon width={12} height={12} className="text-zinc-200" />
<ThreadsIcon width={12} height={12} className="text-white" />
</span>
<span>Threads</span>
<span className="font-medium">Threads</span>
</ActiveLink>
</div>
</div>

View File

@@ -17,7 +17,7 @@ export function NetworkStatusIndicator() {
}`}
/>
</div>
<p className="text-xs font-medium text-zinc-500">
<p className="text-base font-medium text-zinc-500">
{isOnline ? "Online" : "Offline"}
</p>
</div>

View File

@@ -44,10 +44,10 @@ export default function ProfileMetadata({ id }: { id: string }) {
<div className="-mt-4 mb-8 px-4">
<div>
<div className="mb-3 flex flex-col">
<h3 className="text-lg font-semibold leading-tight text-zinc-100">
<h3 className="text-lg font-semibold leading-tight text-white">
{profile?.display_name || profile?.name}
</h3>
<span className="text-sm leading-tight text-zinc-500">
<span className="text-base leading-tight text-zinc-500">
{profile?.username || (id && shortenKey(id))}
</span>
</div>

View File

@@ -42,7 +42,7 @@ export function Tooltip({
{isOpen && (
<div
ref={refs.setFloating}
className="w-max select-none rounded-md bg-zinc-800 px-4 py-2 text-xs font-medium leading-none text-zinc-100"
className="w-max select-none rounded-md bg-zinc-800 px-4 py-2 text-base font-medium leading-none text-white"
style={{
position: strategy,
top: y ?? 0,