Updated theme

zuplo · Feb 7, 2025 · 99863c7 · 99863c7
1 parent 52e16fe
commit 99863c7
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 21 deletions.
diff --git a/src/App.css b/src/App.css
@@ -5,8 +5,10 @@
 @custom-variant dark (&:is(.dark *));
 
 :root {
-  --background: hsl(0 0% 100%);
-  --foreground: hsl(0 0% 3.9%);
+  --background: 215 28% 17%;
+  --foreground: 0 0% 100%;
+  --primary: 324 100% 50%;
+
   --card: hsl(0 0% 100%);
   --card-foreground: hsl(0 0% 3.9%);
   --popover: hsl(0 0% 100%);
@@ -33,8 +35,9 @@
 }
 
 .dark {
-  --background: hsl(0 0% 3.9%);
-  --foreground: hsl(0 0% 98%);
+  --background: 215 28% 17%;
+  --foreground: 0 0% 100%;
+  --primary: 324 100% 50%;
   --card: hsl(0 0% 3.9%);
   --card-foreground: hsl(0 0% 98%);
   --popover: hsl(0 0% 3.9%);

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,5 +1,5 @@
 import { Button } from "@/components/ui/button";
-import { Check, Copy } from "lucide-react";
+import { Braces, Check, Copy } from "lucide-react";
 import { useCallback, useState } from "react";
 
 import "./App.css";
@@ -21,20 +21,23 @@ export default function UUIDGenerator() {
   }, [uuid]);
 
   return (
-    <div className="min-h-screen flex flex-col items-center justify-center bg-gray-100">
-      <div className="fixed top-0 left-0 right-0 z-50 bg-white px-14">
-        <zuplo-banner mode="light"></zuplo-banner>
+    <div className="min-h-screen flex flex-col items-center justify-center bg-gray-900 text-white">
+      <div className="fixed top-0 left-0 right-0 z-50 bg-gray-900/50 backdrop-blur-sm ">
+        <zuplo-banner mode="dark"></zuplo-banner>
       </div>
 
-      <div className="bg-white rounded-2xl shadow-lg w-fit">
-        <div className="px-8 pt-8 pb-6">
-          <h1 className="text-[2rem] font-bold text-center mb-6">uuid.new</h1>
-          <div className="flex items-center bg-gray-100 rounded-lg mb-4">
-            <code className="font-mono text-base px-3 py-2">{uuid}</code>
+      <div className="w-full max-w-md px-4">
+        <div className="flex items-center justify-between mb-8">
+          <h1 className="text-2xl font-bold">uuid.new</h1>
+          <Braces className="h-6 w-6 text-pink-500" />
+        </div>
+        <div className="bg-gray-800 rounded-lg p-4 mb-4">
+          <div className="flex items-center justify-between">
+            <code className="font-mono text-sm text-gray-300">{uuid}</code>
             <Button
               variant="ghost"
               size="icon"
-              className="h-9 w-9 mr-1"
+              className="h-8 w-8 text-gray-400 hover:text-pink-500"
               onClick={copyUuid}
             >
               {copied ? (
@@ -45,14 +48,14 @@ export default function UUIDGenerator() {
               <span className="sr-only">Copy UUID</span>
             </Button>
           </div>
-          <Button
-            onClick={generateNewUuid}
-            className="w-full bg-black text-white hover:bg-black/90"
-            size="lg"
-          >
-            New
-          </Button>
         </div>
+        <Button
+          onClick={generateNewUuid}
+          className="w-full bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-600 hover:to-purple-700 text-white"
+          size="lg"
+        >
+          Generate New UUID
+        </Button>
       </div>
     </div>
   );