enhancements

calvo-jp · Feb 29, 2024 · d36e8c2 · d36e8c2
1 parent daa4f07
commit d36e8c2
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 10 deletions.
diff --git a/website/src/app/(index)/gallery.tsx b/website/src/app/(index)/gallery.tsx
@@ -28,7 +28,7 @@ function GalleryItem({data}: {data: Icon}) {
         dangerouslySetInnerHTML={{
           __html: data.content,
         }}
-        className="flex aspect-square items-center justify-center rounded border p-2 transition duration-200 hover:bg-gray-true-50 dark:hover:bg-gray-true-800/10"
+        className="flex aspect-square items-center justify-center rounded border p-2 transition duration-200 hover:bg-gray-true-50 focus:shadow-outline dark:hover:bg-gray-true-800/10"
         aria-label={data.displayName}
       />
 

diff --git a/website/src/app/(index)/icon-details.tsx b/website/src/app/(index)/icon-details.tsx
@@ -92,7 +92,7 @@ export function IconDetails() {
 
               <Clipboard.Root className="flex">
                 <Clipboard.Label className="sr-only">Copy</Clipboard.Label>
-                <Clipboard.Trigger>
+                <Clipboard.Trigger className="p-1">
                   <Clipboard.Indicator
                     copied={
                       <CheckIcon className="h-4 w-4 text-success-500 dark:text-success-700" />
@@ -126,10 +126,10 @@ export function IconDetails() {
                         <>
                           <Clipboard.Root
                             value={item.content}
-                            className="absolute right-4 top-4 flex items-center justify-center rounded-lg bg-white/50 p-1 backdrop-blur-sm dark:bg-gray-true-950/50"
+                            className="absolute right-4 top-4 flex items-center justify-center rounded-lg bg-white/50 p-0.5 backdrop-blur-sm dark:bg-gray-true-950/50"
                           >
                             <Clipboard.Label className="sr-only">Copy</Clipboard.Label>
-                            <Clipboard.Trigger>
+                            <Clipboard.Trigger className="p-0.5">
                               <Clipboard.Indicator
                                 copied={
                                   <CheckIcon className="h-5 w-5 text-success-500 dark:text-success-700" />
@@ -152,7 +152,7 @@ export function IconDetails() {
             </Tabs.Root>
           </div>
 
-          <Dialog.CloseTrigger className="absolute right-4 top-4 rounded-full bg-gray-true-100 p-2 dark:bg-gray-true-800/25">
+          <Dialog.CloseTrigger className="absolute right-3 top-3 p-1">
             <XCloseIcon />
           </Dialog.CloseTrigger>
         </Dialog.Content>

diff --git a/website/src/app/(index)/page.tsx b/website/src/app/(index)/page.tsx
@@ -9,7 +9,7 @@ export default async function Landing() {
   return (
     <PageProvider items={await getIcons()}>
       <Searchbar />
-      <div className="mt-8 space-y-3">
+      <div className="mt-5 space-y-3 lg:mt-8">
         <Total />
         <Gallery />
       </div>

diff --git a/website/src/app/(index)/searchbar.tsx b/website/src/app/(index)/searchbar.tsx
@@ -20,7 +20,7 @@ export function Searchbar() {
         }}
         placeholder="Search"
         className={twMerge(
-          'h-12 w-full rounded border py-2 pl-12 outline-none',
+          'h-12 w-full rounded border py-2 pl-12 outline-none focus:shadow-outline',
           context.searchKeyword ? 'pr-10' : 'pr-4',
         )}
       />

diff --git a/website/src/app/theme-picker.tsx b/website/src/app/theme-picker.tsx
@@ -24,7 +24,7 @@ export function ThemePicker() {
       unmountOnExit
     >
       <Select.Control>
-        <Select.Trigger className="flex aspect-square items-center gap-2 rounded border px-2 py-1">
+        <Select.Trigger className="focus:shadow-outline flex aspect-square items-center gap-2 rounded border px-2 py-1">
           <Select.ValueText className="flex grow items-center gap-1 text-left">
             <ark.svg className="h-5 w-5" asChild>
               {selected.icon}
@@ -35,7 +35,7 @@ export function ThemePicker() {
       </Select.Control>
 
       <Select.Positioner className="z-dropdown">
-        <Select.Content className="data-open:animate-fade-in data-closed:animate-fade-out rounded border bg-white p-2 dark:bg-gray-true-900">
+        <Select.Content className="rounded border bg-white p-2 data-open:animate-fade-in data-closed:animate-fade-out dark:bg-gray-true-900">
           {themes.map(({icon, label, value}) => (
             <Select.Item
               key={value}

diff --git a/website/tailwind.config.ts b/website/tailwind.config.ts
@@ -1,6 +1,7 @@
 import colors from '@untitled-theme/colors';
 import type {Config} from 'tailwindcss';
 import defaultTheme from 'tailwindcss/defaultTheme';
+import plugin from 'tailwindcss/plugin';
 
 const config: Config = {
   darkMode: ['selector', '[data-theme="dark"]'],
@@ -71,7 +72,22 @@ const config: Config = {
       },
     },
   },
-  plugins: [],
+  plugins: [
+    plugin(({addUtilities, theme}) => {
+      addUtilities({
+        '.shadow-outline': {
+          transitionProperty: 'border-color, box-shadow',
+          transitionDuration: '200ms',
+          transitionTimingFunction: 'cubic-bezier(0.2, 0, 0, 1)',
+
+          '&:focus-visible': {
+            'box-shadow': '0 0 0 1px black',
+            'border-color': 'black',
+          },
+        },
+      });
+    }),
+  ],
 };
 
 export default config;