Skip to content

Commit

Permalink
Merge pull request #19 from posaune0423/fix/update-config
Browse files Browse the repository at this point in the history
fix: ui issue
  • Loading branch information
posaune0423 authored Dec 2, 2024
2 parents b376bbc + 28cfa12 commit 32be154
Show file tree
Hide file tree
Showing 10 changed files with 89 additions and 65 deletions.
3 changes: 2 additions & 1 deletion biome.json
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@
"recommended": true,
"correctness": {
"noUnusedVariables": "error",
"useExhaustiveDependencies": "warn"
"useExhaustiveDependencies": "warn",
"noUnknownFunction": "warn"
},
"a11y": {
"useKeyWithClickEvents": "warn",
Expand Down
Binary file modified bun.lockb
Binary file not shown.
14 changes: 2 additions & 12 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,6 @@
"immer": "^10.1.1",
"lucide-react": "^0.428.0",
"next-themes": "^0.3.0",
"prettier": "^3.4.1",
"react": "^19.0.0-rc-fb9a90fa48-20240614",
"react-dom": "^19.0.0-rc-fb9a90fa48-20240614",
"react-ga4": "^2.1.0",
Expand All @@ -44,6 +43,7 @@
"starknet": "^6.11.0",
"starknetkit": "^2.3.3",
"tailwind-merge": "^2.5.5",
"tailwindcss": "^4.0.0-beta.4",
"tailwindcss-animate": "^1.0.7",
"twgl.js": "^5.5.4",
"use-debounce": "^10.0.4",
Expand All @@ -54,7 +54,6 @@
"devDependencies": {
"@anthropic-ai/sdk": "^0.32.1",
"@biomejs/biome": "1.9.4",
"@eslint/js": "^9.16.0",
"@types/bun": "^1.1.14",
"@types/node": "^22.10.1",
"@types/react": "npm:types-react@rc",
Expand All @@ -63,17 +62,8 @@
"@vitejs/plugin-react-swc": "^3.7.2",
"autoprefixer": "^10.4.20",
"bun": "^1.1.38",
"eslint": "^9.16.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-react": "^7.37.2",
"eslint-plugin-react-hooks": "^5.1.0-rc-fb9a90fa48-20240614",
"eslint-plugin-react-refresh": "^0.4.14",
"globals": "^15.12.0",
"postcss": "^8.4.49",
"slint": "^0.1.0",
"tailwindcss": "^4.0.0-beta.4",
"globals": "^15.13.0",
"typescript": "^5.7.2",
"typescript-eslint": "^8.16.0",
"vite": "^5.4.11",
"vite-plugin-glsl": "^1.3.1",
"vite-plugin-pwa": "^0.20.5",
Expand Down
3 changes: 1 addition & 2 deletions src/components/AppList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,9 @@ const AppList = () => {
<div className="flex items-center space-x-2">
{apps.map((app, index) => (
<div
key={app.action}
key={app.name}
className={`${selectedAppIndex === index ? 'bg-white/10' : ''} py-2 px-3 rounded-md cursor-pointer`}
onClick={() => onSelect(index)}
onKeyDown={(e) => e.key === 'Enter' && onSelect(index)}
>
{app.icon}
</div>
Expand Down
6 changes: 3 additions & 3 deletions src/components/ColorPallette.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ export const ColorPalette = ({
className={cn(
'bg-slate-900 fixed mx-auto bottom-1 left-0 right-0 flex items-center justify-center shadow-md transition-all duration-300 ease-in-out rounded-full',
isOpen
? 'max-w-[340px] px-4 h-[50px]'
? 'max-w-[360px] px-4 h-[50px]'
: 'w-12 h-12 rounded-full cursor-pointer hover:bg-slate-800'
)}
onClick={isOpen ? undefined : () => setIsOpen(true)}
Expand All @@ -68,11 +68,11 @@ export const ColorPalette = ({
isOpen ? 'flex opacity-100 w-[calc(100%-40px)]' : 'hidden opacity-0'
)}
>
<div className="flex items-center space-x-2 h-full flex-grow">
<div className="flex items-center space-x-2 h-full grow">
{[...customColors, ...COLOR_PALETTE].map((color, index) => (
<button
key={index}
className={`flex-shrink-0 w-8 h-8 rounded-full ${
className={`shrink-0 w-8 h-8 rounded-full ${
selectedColor === color ? 'ring-2 ring-black ring-offset-2' : ''
}`}
style={{
Expand Down
6 changes: 3 additions & 3 deletions src/components/CoordinateFinder.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -24,15 +24,15 @@ const CoordinateFinder = ({
};

return (
<div className="fixed top-[60px] right-4 p-2 lg:p-3 rounded-lg bg-gradient-to-br from-white/50 to-white/30 backdrop-blur-sm shadow-lg">
<div className="fixed top-[60px] right-4 p-2 lg:p-3 rounded-lg bg-linear-to-br from-white/50 to-white/30 backdrop-blur-xs shadow-lg">
<div className="flex items-center space-x-2">
<label htmlFor="x" className="flex items-center text-white lg:font-semibold text-xs lg:text-base h-full">
X:
<input
type="number"
id="x"
value={localPos.x}
className="text-xs rounded-md focus:outline-none focus:border-slate-900 p-1 ml-1 bg-transparent w-fit max-w-[6ch] appearance-none border border-white [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
className="text-xs rounded-md focus:outline-hidden focus:border-slate-900 p-1 ml-1 bg-transparent w-fit max-w-[6ch] appearance-none border border-white [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
onChange={(e) => handleInputChange("x", Number(e.target.value) || 0)}
/>
</label>
Expand All @@ -42,7 +42,7 @@ const CoordinateFinder = ({
type="number"
id="y"
value={localPos.y}
className="text-xs rounded-md focus:outline-none focus:border-slate-900 p-1 ml-1 bg-transparent w-fit max-w-[6ch] appearance-none border border-white [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
className="text-xs rounded-md focus:outline-hidden focus:border-slate-900 p-1 ml-1 bg-transparent w-fit max-w-[6ch] appearance-none border border-white [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
onChange={(e) => handleInputChange("y", Number(e.target.value) || 0)}
/>
</label>
Expand Down
61 changes: 35 additions & 26 deletions src/components/ui/Button.tsx
Original file line number Diff line number Diff line change
@@ -1,47 +1,56 @@
import * as React from "react";
import { Slot } from "@radix-ui/react-slot";
import { cva, type VariantProps } from "class-variance-authority";
import * as React from 'react'
import { Slot } from '@radix-ui/react-slot'
import { cva, type VariantProps } from 'class-variance-authority'

import { cn } from "@/utils/index";
import { cn } from '@/utils/index'

const buttonVariants = cva(
"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
{
variants: {
variant: {
default: "bg-primary text-primary-foreground hover:bg-primary/90",
destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
ghost: "hover:bg-accent hover:text-accent-foreground",
link: "text-primary underline-offset-4 hover:underline",
default: 'bg-primary text-primary-foreground hover:bg-primary/90',
destructive:
'bg-destructive text-destructive-foreground hover:bg-destructive/90',
outline:
'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
secondary:
'bg-secondary text-secondary-foreground hover:bg-secondary/80',
ghost: 'hover:bg-accent hover:text-accent-foreground',
link: 'text-primary underline-offset-4 hover:underline',
},
size: {
default: "h-10 px-4 py-2",
sm: "h-9 rounded-md px-3",
lg: "h-11 rounded-md px-8",
icon: "h-10 w-10",
default: 'h-10 px-4 py-2',
sm: 'h-9 rounded-md px-3',
lg: 'h-11 rounded-md px-8',
icon: 'h-10 w-10',
},
},
defaultVariants: {
variant: "default",
size: "default",
variant: 'default',
size: 'default',
},
},
);
}
)

export interface ButtonProps
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
VariantProps<typeof buttonVariants> {
asChild?: boolean;
asChild?: boolean
}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
({ className, variant, size, asChild = false, ...props }, ref) => {
const Comp = asChild ? Slot : "button";
return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />;
},
);
Button.displayName = "Button";
const Comp = asChild ? Slot : 'button'
return (
<Comp
className={cn(buttonVariants({ variant, size, className }))}
ref={ref}
{...props}
/>
)
}
)
Button.displayName = 'Button'

export { Button, buttonVariants };
export { Button, buttonVariants }
4 changes: 2 additions & 2 deletions src/components/ui/Dialog.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -36,13 +36,13 @@ const DialogContent = React.forwardRef<
<DialogPrimitive.Content
ref={ref}
className={cn(
'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 sm:rounded-lg',
className
)}
{...props}
>
{children}
<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
<X className="h-4 w-4" />
<span className="sr-only">Close</span>
</DialogPrimitive.Close>
Expand Down
8 changes: 4 additions & 4 deletions src/components/ui/DropDownMenu.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
<DropdownMenuPrimitive.SubTrigger
ref={ref}
className={cn(
"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden focus:bg-accent data-[state=open]:bg-accent",
inset && "pl-8",
className,
)}
Expand Down Expand Up @@ -79,7 +79,7 @@ const DropdownMenuItem = React.forwardRef<
<DropdownMenuPrimitive.Item
ref={ref}
className={cn(
"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
inset && "pl-8",
className,
)}
Expand All @@ -95,7 +95,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
<DropdownMenuPrimitive.CheckboxItem
ref={ref}
className={cn(
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
className,
)}
checked={checked}
Expand All @@ -118,7 +118,7 @@ const DropdownMenuRadioItem = React.forwardRef<
<DropdownMenuPrimitive.RadioItem
ref={ref}
className={cn(
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
className,
)}
{...props}
Expand Down
49 changes: 37 additions & 12 deletions src/index.css
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
@import url("https://fonts.googleapis.com/css2?family=Silkscreen:wght@400;700&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Silkscreen:wght@400;700&display=swap');

@import "tailwindcss";
@import 'tailwindcss';
@plugin 'tailwindcss-animate';

@variant dark (&:is(.dark *));

@layer base {
:root {
--background: 0 0% 100%;
Expand Down Expand Up @@ -88,12 +90,9 @@
--color-card: hsl(var(--card));
--color-card-foreground: hsl(var(--card-foreground));

--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);

--font-family-poppins: var(--font-poppins);
--font-family-inter: var(--font-inter);
--radius-md: calc(var(--radius) - 2px);
--radius-sm: calc(var(--radius) - 4px);

--animate-accordion-down: accordion-down 0.2s ease-out;
--animate-accordion-up: accordion-up 0.2s ease-out;
Expand All @@ -102,26 +101,52 @@
from {
height: 0;
}

to {
height: var(--radix-accordion-content-height);
}
}

@keyframes accordion-up {
from {
height: var(--radix-accordion-content-height);
}

to {
height: "0";
height: 0;
}
}
}

@utility container {
margin-inline: auto;
padding-inline: 2rem;
@media (width >= theme(--breakpoint-sm)) {
max-width: none;
}
@media (width >= 1400px) {
max-width: 1400px;
}
}

/*
The default border color has changed to `currentColor` in Tailwind CSS v4,
so we've added these compatibility styles to make sure everything still
looks the same as it did with Tailwind CSS v3.
If we ever want to remove these styles, we need to add an explicit border
color utility to any element that depends on these defaults.
*/
@layer base {
*,
::after,
::before,
::backdrop,
::file-selector-button {
border-color: var(--color-gray-200, currentColor);
}
}

@layer base {
* {
font-family: "Silkscreen", sans-serif;
font-family: 'Silkscreen', sans-serif;
touch-action: pan-x pan-y;
user-select: none;
-webkit-user-select: none;
Expand Down

0 comments on commit 32be154

Please sign in to comment.