minor graphical changes

src/App.tsx

@@ -4,29 +4,30 @@ import {getmisskeycolors} from "./helpers.ts";
 
 function App() {
     const [count, setCount] = createSignal(2);
-    const [message, setMessage] = createSignal("not valid colors");
+    const [message, setMessage] = createSignal("generate something");
 
 
     return (
         <>
             <div class="App relative flex min-h-screen flex-col justify-center overflow-hidden ">
                 <div class="mb-10">
-                    <div class="flex items-center space-x-2 mb-2">
-                        <span class="text-pink-500">number of colors: </span>
+                    <div class="flex flex-col items-start mb-5">
+                        <span class="text-primaryLight mb-1">number of colors:</span>
                         <input
                             type="number"
-                            class="border border-gray-300 rounded p-2"
+                            class="border border-primaryLight rounded p-2"
                             value={count()}
                             onInput={(e) => setCount(Number(e.target.value))}
                             min="2"
                         />
                     </div>
-                    <div class="flex items-center space-x-2">
-                        <span class="text-pink-500">text: </span>
+                    <div class="w-full h-[1px] bg-gray-300 my-2"></div>
+                    <div class="flex flex-col items-start mb-2">
+                        <span class="text-primaryLight mb-1">text: </span>
                         <input
                             type="text"
-                            class="border border-gray-300 rounded p-2"
-                            id="ubuntucola"
+                            class="border border-primaryLight rounded p-2"
+                            id="textarea"
                             min="2"
                         />
                     </div>
@@ -39,7 +40,7 @@ function App() {
                             class="m-2"
                         >
                             <div class="flex items-center space-x-2">
-                                <span class="text-pink-500">color:</span>
+                                <span class="text-primaryLight">color:</span>
                                 <input
                                     type="color"
                                     id={`color_${i}`}
@@ -51,20 +52,28 @@ function App() {
                     ))}
                 </div>
                 <div>
-                    <button class="border-pink-300" onclick={()=>{
+                    <button class="border-primaryLight m-10" onclick={() => {
                         let colors = []
                         for (let i = 0; i < count(); i++) {
                             // @ts-ignore
                             colors.push(document.getElementById(`color_${i}`).value);
                         }
                         // @ts-ignore
-                        let message = document.getElementById("ubuntucola").value as string
+                        let message = document.getElementById("textarea").value as string
                         setMessage(getmisskeycolors(message, colors).replace(/\$\[fg\.color=[0-9A-Fa-f]{6} \]/g, ''));
                     }}>
                         generate!
                     </button>
                 </div>
-                <code>{message()}</code>
+
+
+                <div
+                    class="w-64 h-12 overflow-x-auto whitespace-nowrap border border-primaryLight text-primaryLight p-2">
+                    {message()}
+                </div>
+                <div class="fixed bottom-0 left-0 m-2 z-50">
+                    <a class="text-primaryLight underline" href="https://ko-fi.com/amyarson">support me ♥</a>
+                </div>
             </div>
         </>
     )

tailwind.config.js

@@ -4,7 +4,12 @@ export default {
     "./src/**/*.{js,jsx,ts,tsx}",
   ],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        primaryDark: "#2F2F3E",
+        primaryLight: "#B5B5EF",
+      }
+    },
   },
   plugins: [],
 }