reya/lume
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: polish some components

Browse Source
This commit is contained in:
reya
2023-12-30 09:02:39 +07:00
parent 55d6318614
commit ddbbcf41b5
11 changed files with 44 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
packages/ui/src/navigation.tsx
View File

@@ -10,8 +10,8 @@ import {
RelayIcon,
SearchIcon,
} from "@lume/icons";
import { cn } from "@lume/utils";
import { Link, NavLink } from "react-router-dom";
import { twMerge } from "tailwind-merge";
import { ActiveAccount } from "./account/active";
export function Navigation() {
@@ -26,7 +26,7 @@ export function Navigation() {
{({ isActive }) => (
<>
<div
className={twMerge(
className={cn(
"inline-flex aspect-square h-auto w-full items-center justify-center rounded-xl",
isActive
? "bg-black/10 text-black dark:bg-white/10 dark:text-white"
@@ -40,7 +40,7 @@ export function Navigation() {
)}
</div>
<div
className={twMerge(
className={cn(
"text-sm",
isActive
? "font-semibold text-black dark:text-white"
@@ -60,7 +60,7 @@ export function Navigation() {
{({ isActive }) => (
<>
<div
className={twMerge(
className={cn(
"inline-flex aspect-square h-auto w-full items-center justify-center rounded-xl",
isActive
? "bg-black/10 text-black dark:bg-white/10 dark:text-white"
@@ -74,7 +74,7 @@ export function Navigation() {
)}
</div>
<div
className={twMerge(
className={cn(
"text-sm",
isActive
? "font-semibold text-black dark:text-white"
@@ -94,7 +94,7 @@ export function Navigation() {
{({ isActive }) => (
<>
<div
className={twMerge(
className={cn(
"inline-flex aspect-square h-auto w-full items-center justify-center rounded-xl",
isActive
? "bg-black/10 text-black dark:bg-white/10 dark:text-white"
@@ -108,7 +108,7 @@ export function Navigation() {
)}
</div>
<div
className={twMerge(
className={cn(
"text-sm",
isActive
? "font-semibold text-black dark:text-white"
@@ -128,7 +128,7 @@ export function Navigation() {
{({ isActive }) => (
<>
<div
className={twMerge(
className={cn(
"inline-flex aspect-square h-auto w-full items-center justify-center rounded-xl",
isActive
? "bg-black/10 text-black dark:bg-white/10 dark:text-white"
@@ -142,7 +142,7 @@ export function Navigation() {
)}
</div>
<div
className={twMerge(
className={cn(
"text-sm",
isActive
? "font-semibold text-black dark:text-white"

4
packages/ui/src/titlebar/components/button.tsx
View File

@@ -1,5 +1,5 @@
import { cn } from "@lume/utils";
import type { ButtonHTMLAttributes } from "react";
import { twMerge } from "tailwind-merge";
export function WindowButton({
className,
@@ -9,7 +9,7 @@ export function WindowButton({
return (
<button
type="button"
className={twMerge(
className={cn(
"inline-flex cursor-default items-center justify-center",
className,
)}

7
packages/ui/src/titlebar/controls/gnome.tsx
View File

@@ -1,5 +1,5 @@
import { cn } from "@lume/utils";
import { HTMLProps, useContext } from "react";
import { twMerge } from "tailwind-merge";
import { WindowButton } from "../components/button";
import { WindowIcons } from "../components/icons";
import { AppWindowContext } from "../context";
@@ -10,10 +10,7 @@ export function Gnome({ className, ...props }: HTMLProps<HTMLDivElement>) {
return (
<div
className={twMerge(
"mr-[10px] h-auto items-center space-x-[13px]",
className,
)}
className={cn("mr-[10px] h-auto items-center space-x-[13px]", className)}
{...props}
>
<WindowButton

4
packages/ui/src/titlebar/controls/macos.tsx
View File

@@ -1,5 +1,5 @@
import { cn } from "@lume/utils";
import { HTMLProps, useContext, useEffect, useState } from "react";
import { twMerge } from "tailwind-merge";
import { WindowButton } from "../components/button";
import { WindowIcons } from "../components/icons";
import { AppWindowContext } from "../context";
@@ -46,7 +46,7 @@ export function MacOS({ className, ...props }: HTMLProps<HTMLDivElement>) {
return (
<div
className={twMerge(
className={cn(
"space-x-2 px-3 text-black active:text-black dark:text-black",
className,
)}

6
packages/ui/src/titlebar/controls/windows.tsx
View File

@@ -1,5 +1,5 @@
import { cn } from "@lume/utils";
import { HTMLProps, useContext } from "react";
import { twMerge } from "tailwind-merge";
import { WindowButton } from "../components/button";
import { WindowIcons } from "../components/icons";
import { AppWindowContext } from "../context";
@@ -9,7 +9,7 @@ export function Windows({ className, ...props }: HTMLProps<HTMLDivElement>) {
useContext(AppWindowContext);
return (
<div className={twMerge("h-8", className)} {...props}>
<div className={cn("h-8", className)} {...props}>
<WindowButton
onClick={minimizeWindow}
className="max-h-8 w-[46px] cursor-default rounded-none bg-transparent text-black/90 hover:bg-black/[.05] active:bg-black/[.03] dark:text-white dark:hover:bg-white/[.06] dark:active:bg-white/[.04]"
@@ -18,7 +18,7 @@ export function Windows({ className, ...props }: HTMLProps<HTMLDivElement>) {
</WindowButton>
<WindowButton
onClick={maximizeWindow}
className={twMerge(
className={cn(
"max-h-8 w-[46px] cursor-default rounded-none bg-transparent",
"text-black/90 hover:bg-black/[.05] active:bg-black/[.03] dark:text-white dark:hover:bg-white/[.06] dark:active:bg-white/[.04]",
// !isMaximizable && "text-white/[.36]",