front end tweaks

RodrigoLuglio · Sep 20, 2024 · beb5b3b · beb5b3b
1 parent 2a44bc4
commit beb5b3b
Show file tree

Hide file tree

Showing 10 changed files with 624 additions and 395 deletions.
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,81 +1,81 @@
-"use client";
+'use client'
 
-import React, { ErrorInfo } from "react";
-import { ThemeProvider } from "@/contexts/ThemeContext";
+import React, { ErrorInfo } from 'react'
+import { ThemeProvider } from '@/contexts/ThemeContext'
 // import ThemeControls from "@/components/ThemeControls";
 // import ColorList from "@/components/ColorList";
-import ActiveColorPicker from "@/components/ActiveColorPicker";
-import ThemePreview from "@/components/ThemePreview";
-import ExportButton from "@/components/ExportButton";
+import ActiveColorPicker from '@/components/ActiveColorPicker'
+import ThemePreview from '@/components/ThemePreview'
+import ExportButton from '@/components/ExportButton'
 // import AnsiColorList from "@/components/AnsiColorList";
 
-import dynamic from "next/dynamic";
-const ThemeControls = dynamic(() => import("@/components/ThemeControls"), {
+import dynamic from 'next/dynamic'
+import SyntaxColorList from '@/components/SyntaxColorList'
+const ThemeControls = dynamic(() => import('@/components/ThemeControls'), {
   ssr: false,
-});
-const ColorList = dynamic(() => import("@/components/ColorList"), {
+})
+const ColorList = dynamic(() => import('@/components/ColorList'), {
   ssr: false,
-});
-const AnsiColorList = dynamic(() => import("@/components/AnsiColorList"), {
+})
+const AnsiColorList = dynamic(() => import('@/components/AnsiColorList'), {
   ssr: false,
-});
+})
 
 class ErrorBoundary extends React.Component<
   { children: React.ReactNode },
   { hasError: boolean }
 > {
   constructor(props: { children: React.ReactNode }) {
-    super(props);
-    this.state = { hasError: false };
+    super(props)
+    this.state = { hasError: false }
   }
 
   static getDerivedStateFromError(_: Error) {
-    return { hasError: true };
+    return { hasError: true }
   }
 
   componentDidCatch(error: Error, errorInfo: ErrorInfo) {
-    console.error("Uncaught error:", error, errorInfo);
+    console.error('Uncaught error:', error, errorInfo)
   }
 
   render() {
     if (this.state.hasError) {
-      return <h1>Something went wrong.</h1>;
+      return <h1>Something went wrong.</h1>
     }
 
-    return this.props.children;
+    return this.props.children
   }
 }
 
 const ThemeGenerator = () => {
   return (
     <div className="container mx-auto p-4">
       <h1 className="text-2xl font-bold mb-4">VS Code Theme Generator</h1>
-      <div className="flex flex-wrap justify-between items-start mb-4">
-        <div className="w-full lg:w-1/4">
-          <div className="flex lg:flex-col items-start justify-between ">
+      <div className="flex gap-10">
+        <div className="flex flex-col gap-4 w-full lg:w-7/12">
+          <div className="flex gap-10 items-end">
             <ThemeControls />
             <ActiveColorPicker />
           </div>
+          <SyntaxColorList title="Syntax Colors" isThemeColors={false} />
         </div>
-        <div className="w-full md:w-3/4">
-          <ThemePreview />
-        </div>
-      </div>
 
-      <div className="flex flex-col gap-2">
-        <ColorList title="Theme Colors" isThemeColors={true} />
-        <ColorList title="Syntax Colors" isThemeColors={false} />
-        <div className="">
-          <AnsiColorList />
+        <div className="flex flex-col gap-2 w-full lg:w-5/12">
+          <div className="">
+            <ThemePreview />
+          </div>
+          <ColorList title="Theme Colors" isThemeColors={true} />
+
+          <div className=""></div>
         </div>
       </div>
-
+      <AnsiColorList />
       <div className="mt-4 flex justify-end">
         <ExportButton />
       </div>
     </div>
-  );
-};
+  )
+}
 
 export default function Home() {
   return (
@@ -84,5 +84,5 @@ export default function Home() {
         <ThemeGenerator />
       </ThemeProvider>
     </ErrorBoundary>
-  );
+  )
 }
diff --git a/src/components/ActiveColorPicker.tsx b/src/components/ActiveColorPicker.tsx
@@ -1,32 +1,34 @@
-import React from "react";
-import { useTheme } from "../contexts/ThemeContext";
-import ColorPicker from "./ColorPicker";
+import React from 'react'
+import { useTheme } from '../contexts/ThemeContext'
+import ColorPicker from './ColorPicker'
 
 const ActiveColorPicker: React.FC = () => {
   const { activeColor, colors, syntaxColors, ansiColors, handleColorChange } =
-    useTheme();
+    useTheme()
 
-  if (!activeColor) return null;
+  if (!activeColor) return null
 
-  let currentColor: string;
-  if (activeColor.startsWith("ansi")) {
-    const ansiKey = activeColor.slice(4) as keyof typeof ansiColors;
-    currentColor = ansiColors[ansiKey];
+  let currentColor: string
+  if (activeColor.startsWith('ansi')) {
+    const ansiKey = activeColor.slice(4) as keyof typeof ansiColors
+    currentColor = ansiColors[ansiKey]
   } else if (activeColor in colors) {
-    currentColor = colors[activeColor as keyof typeof colors];
+    currentColor = colors[activeColor as keyof typeof colors]
   } else {
-    currentColor = syntaxColors[activeColor as keyof typeof syntaxColors];
+    currentColor = syntaxColors[activeColor as keyof typeof syntaxColors]
   }
 
   return (
     <div className="mb-4">
-      <h3 className="text-lg font-semibold mb-2">Edit Color: {activeColor}</h3>
       <ColorPicker
         color={currentColor}
         onChange={(newColor) => handleColorChange(activeColor, newColor)}
       />
+      <h3 className="text-lg font-semibold mt-2 text-center first-letter:uppercase">
+        {activeColor}
+      </h3>
     </div>
-  );
-};
+  )
+}
 
-export default ActiveColorPicker;
+export default ActiveColorPicker
diff --git a/src/components/ColorList.tsx b/src/components/ColorList.tsx
@@ -1,17 +1,19 @@
-import React from "react";
-import { useTheme } from "@/contexts/ThemeContext";
-import { SyntaxColors } from "@/lib/utils/syntaxColors";
-import Color from "color";
-import { ColorAliases } from "@/lib/utils/themeColors";
-import { Lock, Unlock, Copy } from "lucide-react";
+import React from 'react'
+import { useTheme } from '@/contexts/ThemeContext'
+import { SyntaxColors } from '@/lib/utils/syntaxColors'
+import Color from 'color'
+import { ColorAliases } from '@/lib/utils/themeColors'
+import { Lock, Unlock, Copy } from 'lucide-react'
+
+import { Button } from './ui/button'
 
 interface ColorListProps {
-  title: string;
-  isThemeColors: boolean;
+  title: string
+  isThemeColors: boolean
 }
 
 interface DisplayColors {
-  [key: string]: string;
+  [key: string]: string
 }
 
 const ColorList: React.FC<ColorListProps> = ({ title, isThemeColors }) => {
@@ -21,46 +23,49 @@ const ColorList: React.FC<ColorListProps> = ({ title, isThemeColors }) => {
     lockedColors,
     toggleColorLock,
     setActiveColor,
-  } = useTheme();
+  } = useTheme()
 
-  const colorList = isThemeColors ? colors : syntaxColors;
+  const colorList = isThemeColors ? colors : syntaxColors
 
   const displayColors: ColorAliases | SyntaxColors = isThemeColors
     ? colorList
-    : { ...colorList, selector: (colorList as SyntaxColors).selector };
+    : { ...colorList, selector: (colorList as SyntaxColors).selector }
 
   const handleUnlockAll = () => {
     Object.keys(displayColors).forEach((key) => {
       if (lockedColors.has(key)) {
-        toggleColorLock(key);
+        toggleColorLock(key)
       }
-    });
-  };
+    })
+  }
 
   const copyToClipboard = (color: string) => {
     navigator.clipboard.writeText(color).then(
       () => {
-        console.log("Color copied to clipboard");
+        console.log('Color copied to clipboard')
       },
       (err) => {
-        console.error("Could not copy text: ", err);
+        console.error('Could not copy text: ', err)
       }
-    );
-  };
+    )
+  }
 
   const getDisplayColor = (key: string, value: string) => {
     try {
-      return Color(value).string();
+      return Color(value).string()
     } catch (error) {
-      console.error(`Error processing color for ${key}:`, error);
-      return value;
+      console.error(`Error processing color for ${key}:`, error)
+      return value
     }
-  };
+  }
 
   return (
     <div className="mb-4">
       <h2 className="text-xl font-semibold mb-2">{title}</h2>
-      <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-2">
+      <div
+        className="grid grid-cols-3 gap-2 p-4"
+        style={{ background: colors.BG1 }}
+      >
         {Object.entries(displayColors).map(([key, value]) => (
           <div key={key} className="relative">
             <div
@@ -70,41 +75,46 @@ const ColorList: React.FC<ColorListProps> = ({ title, isThemeColors }) => {
             >
               <span
                 className="text-xs font-semibold truncate"
-                style={{ color: Color(value).isLight() ? "#000" : "#fff" }}
+                style={{ color: Color(value).isLight() ? '#000' : '#fff' }}
               >
                 {key}
               </span>
               <div className="flex space-x-1">
-                <button
-                  className="text-xs p-1 rounded"
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className=""
                   onClick={(e) => {
-                    e.stopPropagation();
-                    copyToClipboard(value);
+                    e.stopPropagation()
+                    copyToClipboard(value)
                   }}
                   style={{
                     backgroundColor: Color(value).isLight()
-                      ? "rgba(0,0,0,0.1)"
-                      : "rgba(255,255,255,0.1)",
+                      ? 'rgba(0,0,0,0.1)'
+                      : 'rgba(255,255,255,0.1)',
                   }}
                 >
-                  <Copy color={Color(value).isLight() ? "#000" : "#fff"} />
-                </button>
+                  <Copy
+                    size={16}
+                    color={Color(value).isLight() ? '#000' : '#fff'}
+                  />
+                </Button>
                 <button
                   className="text-xs p-1 rounded"
                   onClick={(e) => {
-                    e.stopPropagation();
-                    toggleColorLock(key);
+                    e.stopPropagation()
+                    toggleColorLock(key)
                   }}
                   style={{
                     backgroundColor: Color(value).isLight()
-                      ? "rgba(0,0,0,0.1)"
-                      : "rgba(255,255,255,0.1)",
+                      ? 'rgba(0,0,0,0.1)'
+                      : 'rgba(255,255,255,0.1)',
                   }}
                 >
                   {lockedColors.has(key) ? (
-                    <Lock color={Color(value).isLight() ? "#000" : "#fff"} />
+                    <Lock color={Color(value).isLight() ? '#000' : '#fff'} />
                   ) : (
-                    <Unlock color={Color(value).isLight() ? "#000" : "#fff"} />
+                    <Unlock color={Color(value).isLight() ? '#000' : '#fff'} />
                   )}
                 </button>
               </div>
@@ -121,7 +131,7 @@ const ColorList: React.FC<ColorListProps> = ({ title, isThemeColors }) => {
         </div>
       </div>
     </div>
-  );
-};
+  )
+}
 
-export default ColorList;
+export default ColorList