style group label on hover

antoniobiasotti · May 14, 2024 · d6a2bc2 · d6a2bc2
1 parent 28ed670
commit d6a2bc2
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 2 deletions.
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,4 +1,4 @@
-import { Mail, User } from 'lucide-react'
+import { Mail, UploadCloud, User } from 'lucide-react'
 import * as Input from './components/Input'
 import { SettingsTabs } from './components/SettingsTabs/index'
 
@@ -90,9 +90,23 @@ export default function Home() {
               </div>
               <label
                 htmlFor="photo"
-                className="flex-1 cursor-pointer flex flex-col items-center gap-3 rounded-lg border border-zinc-300 px-6 py-4 text-center text-zinc-500 shadow-md"
+                className="group flex-1 cursor-pointer flex flex-col items-center gap-3 rounded-lg border border-zinc-300 px-6 py-4 text-center text-zinc-500 shadow-lg hover:border-violet-200 hover:bg-violet-25 hover:text-violet-500"
               >
                 Selecionar arquivo
+                <div className="rounded-full border-6 border-zinc-50 bg-zinc-100 p-2 group-hover:border-violet-50 group-hover:bg-violet-100">
+                  <UploadCloud className="size-5 text-zinc-600 group-hover:text-violet-600" />
+                </div>
+                <div className="flex flex-col items-center gap-1">
+                  <span className="text-sm">
+                    <span className="font-semibold text-violet-700">
+                      Click to upload
+                    </span>{' '}
+                    or drag and drop
+                  </span>
+                  <span className="text-xs">
+                    SVG, PNG, JPG or GIF (max, 800x400px)
+                  </span>
+                </div>
               </label>
 
               <input type="file" className="sr-only" id="photo"></input>

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -9,8 +9,16 @@ const config: Config = {
         profile: 'max-content 1fr min-content',
         form: 'minmax(7.5rem, 17.5rem) minmax(25rem, 1fr) minmax(0, 15rem)',
       },
+
+      borderWidth: {
+        6: '6px',
+      },
+
       colors: {
         antoniobia: '#A8EB12',
+        violet: {
+          25: '#fcfaff',
+        },
       },
     },
   },