frontend: add listify colors in tailwind config

kauefraga · Nov 15, 2024 · 1b61148 · 1b61148
1 parent 8ccff74
commit 1b61148
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 3 deletions.
diff --git a/apps/frontend/src/components/list-item.tsx b/apps/frontend/src/components/list-item.tsx
@@ -8,7 +8,7 @@ interface ListItemProps {
 
 export function ListItem({ list }: ListItemProps) {
   return (
-    <li className="bg-black/5 overflow-scroll space-y-2 h-56 border-2 border-transparent transition-colors hover:border-pink-400 p-4 rounded shadow-sm">
+    <li className="bg-black/5 overflow-scroll space-y-2 h-56 border-2 border-transparent transition-colors hover:border-listify-pink p-4 rounded shadow-sm">
       <p className="font-medium">{list.name}</p>
       <ul className="list-disc list-inside">
         {list.content.split('\n').map(item => (

diff --git a/apps/frontend/src/pages/root.tsx b/apps/frontend/src/pages/root.tsx
@@ -44,7 +44,7 @@ export function Root() {
             <Search className="translate-x-10" />
             <input
               type="text"
-              className="px-14 w-96 py-3 bg-black/5 shadow outline-none rounded border-2 border-transparent transition-colors focus:border-pink-600 hover:border-pink-400"
+              className="px-14 w-96 py-3 bg-black/5 shadow outline-none rounded border-2 border-transparent transition-colors focus:border-listify-dark-pink hover:border-listify-pink"
               id="search-input"
               value={search}
               onChange={e => setSearch(e.target.value)}

diff --git a/apps/frontend/tailwind.config.ts b/apps/frontend/tailwind.config.ts
@@ -2,7 +2,14 @@ import type { Config } from 'tailwindcss';
 
 const config: Config = {
   content: ['./src/pages/**/*.{js,ts,jsx,tsx,mdx}', './src/components/**/*.{js,ts,jsx,tsx,mdx}'],
-  theme: {},
+  theme: {
+    extend: {
+      colors: {
+        'listify-pink': '#F953C6',
+        'listify-dark-pink': '#B91D73',
+      },
+    },
+  },
   plugins: [],
 };