styles(www): improve color scheme

rortan134 · Mar 19, 2023 · 114b9e2 · 114b9e2
1 parent 26d340f
commit 114b9e2
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 34 deletions.
diff --git a/www/src/app/figma/page.tsx b/www/src/app/figma/page.tsx
@@ -166,7 +166,7 @@ export default function FigmaDemo() {
           </div>
           <SelectBoxOutlet className="border border-[#0d99ff] bg-[#0d99ff]/20" />
         </div>
-        <aside className="z-10 hidden h-full w-64 border-l border-[#444444] bg-[#2c2c2c] sm:block" />
+        <aside className="z-10 hidden h-full w-72 border-l border-[#444444] bg-[#2c2c2c] md:block" />
       </div>
     </section>
   );

diff --git a/www/src/app/table/page.tsx b/www/src/app/table/page.tsx
@@ -6,14 +6,13 @@ import { Button } from "../../components/Button";
 import { Checkbox } from "../../components/Checkbox";
 
 import { cn } from "../../utils/cn";
-import { useSelectify } from "use-selectify";
+import { useSelectify } from "../../../../src";
 
-import { Search, ChevronDown, ChevronUp } from "lucide-react";
+import { Search, ChevronDown, ChevronUp, Plus } from "lucide-react";
 
 export default function TablePage() {
   const [expanded, setExpanded] = React.useState(false);
   const selectionContainerRef = React.useRef(null);
-  const exclusionZoneRef = React.useRef(null);
 
   const {
     SelectBoxOutlet,
@@ -25,11 +24,10 @@ export default function TablePage() {
     mutateSelections,
   } = useSelectify(selectionContainerRef, {
     selectCriteria: "[data-item]",
-    exclusionZone: exclusionZoneRef.current,
+    exclusionZone: "[data-exclude]",
     onDragStart: () => {
-      document.body.style.userSelect = "none";
-
       window.getSelection()?.empty();
+      document.body.style.userSelect = "none";
     },
     onDragEnd: () => {
       document.body.style.userSelect = "";
@@ -61,16 +59,13 @@ export default function TablePage() {
   };
 
   return (
-    <div
-      ref={selectionContainerRef}
-      className="relative h-full w-full"
-    >
+    <div ref={selectionContainerRef} className="relative h-full w-full">
       <div className="container mx-auto py-16 px-2 md:px-8">
-        <div className="mb-16 space-y-3 md:px-12">
-          <h1 className="text-4xl font-semibold text-slate-900 dark:text-white">
+        <div data-exclude className="mb-14 space-y-3 md:px-16">
+          <h1 className="text-4xl font-semibold text-slate-900 dark:text-slate-50">
             Datatable
           </h1>
-          <p className="text-lg text-slate-900 dark:text-slate-300">
+          <p className="text-lg text-slate-900 dark:text-neutral-400">
             A table with drag-selection integrated for easier bulk actions.
             <br />
             Built using{" "}
@@ -96,17 +91,21 @@ export default function TablePage() {
           <div className="flex-1 pr-4">
             <div className="relative md:w-1/3">
               <Input type="search" placeholder="Search..." className="pl-10" />
-              <div className="absolute top-0 left-0 inline-flex items-center p-2">
-                <Search className="h-6 w-6 text-slate-400" />
-              </div>
+              <Search className="absolute left-0 top-1/2 ml-3 h-5 w-5 -translate-y-1/2 text-neutral-400" />
             </div>
           </div>
-          <Button variant="destructive" disabled={!hasSelected}>
-            Delete
-          </Button>
+          <div className="flex items-center space-x-2">
+            <Button>
+              <Plus className="mr-2 h-4 w-4" />
+              New entry
+            </Button>
+            <Button variant="destructive" disabled={!hasSelected}>
+              Delete
+            </Button>
+          </div>
         </div>
         <div
-          ref={exclusionZoneRef}
+          data-exclude
           className={cn(
             "relative overflow-x-auto overflow-y-auto rounded-lg bg-neutral-900 shadow",
             {
@@ -163,21 +162,21 @@ export default function TablePage() {
               ))}
             </tbody>
           </table>
-          <div className="sticky bottom-0 w-full bg-gradient-to-t from-neutral-900 py-1">
+          <div className="sticky bottom-0 w-full bg-gradient-to-t from-neutral-900 pt-1 pb-4">
             <div className="flex w-full justify-center">
               <Button
-                variant="ghost"
+                variant="subtle"
                 size="sm"
                 onClick={() => setExpanded((prevState) => !prevState)}
               >
                 {!expanded ? (
                   <>
-                    <ChevronDown className="mr-2 h-4 w-4" />
+                    <ChevronDown className="mr-1 h-4 w-4" />
                     Expand
                   </>
                 ) : (
                   <>
-                    <ChevronUp className="mr-2 h-4 w-4" />
+                    <ChevronUp className="mr-1 h-4 w-4" />
                     Collapse
                   </>
                 )}

diff --git a/www/src/components/Button.tsx b/www/src/components/Button.tsx
@@ -6,17 +6,17 @@ import { type VariantProps, cva } from "class-variance-authority";
 import { cn } from "../utils/cn";
 
 const buttonVariants = cva(
-  "inline-flex items-center rounded-md text-sm hover:bg-slate-800 hover:text-slate-100 focus:ring-offset-slate-900 font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none data-[state=open]:text-slate-100 data-[state=open]:bg-slate-800",
+  "inline-flex items-center rounded-md text-sm focus:ring-offset-slate-900 font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none data-[state=open]:text-slate-50 data-[state=open]:bg-slate-800",
   {
     variants: {
       variant: {
-        default: "text-white bg-slate-50 text-slate-900 dark:text-black",
-        destructive: "bg-red-500 text-white hover:bg-red-600",
-        outline: "bg-transparent border border-slate-200 hover:bg-slate-100",
-        subtle: "bg-slate-100 text-slate-900 hover:bg-slate-200",
+        default: "bg-neutral-900 text-slate-50 dark:bg-slate-50 dark:text-slate-900 hover:bg-neutral-800 hover:text-slate-50 dark:hover:bg-neutral-800 dark:hover:text-slate-50",
+        destructive: "bg-red-500 text-slate-50 hover:bg-red-600",
+        outline: "bg-transparent border border-slate-200 hover:bg-slate-50",
+        subtle: "bg-neutral-800 text-slate-50 hover:bg-neutral-700",
         ghost:
-          "bg-transparent hover:bg-slate-100 dark:hover:bg-neutral-800 dark:text-slate-100 dark:hover:text-slate-100 dark:data-[state=open]:text-slate-900 data-[state=open]:bg-neutral-900 dark:data-[state=open]:bg-white",
-        link: "bg-transparent dark:bg-transparent underline-offset-4 hover:underline text-slate-900 dark:text-slate-100 hover:bg-transparent dark:hover:bg-transparent",
+          "bg-transparent hover:bg-neutral-200 dark:hover:bg-neutral-800 dark:text-slate-50 dark:hover:text-slate-50 dark:data-[state=open]:text-slate-900 data-[state=open]:bg-neutral-900 dark:data-[state=open]:bg-white",
+        link: "bg-transparent dark:bg-transparent underline-offset-4 hover:underline text-slate-900 dark:text-slate-50 hover:bg-transparent dark:hover:bg-transparent",
       },
       size: {
         default: "h-10 py-2 px-4",

diff --git a/www/src/components/FloatingButton.tsx b/www/src/components/FloatingButton.tsx
@@ -15,7 +15,7 @@ export default function FloatingButton() {
       className="hidden md:inline-flex z-50 fixed top-0 right-0 m-1 hover:text-blue-500"
       variant="link"
     >
-      View Code <ExternalLink className="ml-2 h-4 w-4" />
+      View source <ExternalLink className="ml-2 h-4 w-4" />
     </Button>
   ) : null;
 }
diff --git a/www/src/components/Input.tsx b/www/src/components/Input.tsx
@@ -9,7 +9,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
     return (
       <input
         className={cn(
-          "flex h-10 w-full rounded-md border border-slate-300 bg-transparent py-2 px-3 text-sm placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:text-slate-50 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900",
+          "flex h-10 w-full rounded-md border border-neutral-400 bg-transparent py-2 px-3 text-sm placeholder:text-neutral-400 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:text-slate-50 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900",
           className
         )}
         ref={ref}