From f2e2a4cd079743ad07b43fc190827b0fbc9bde38 Mon Sep 17 00:00:00 2001
From: Dorian Niemiec <dorian.niemiec@svrjs.org>
Date: Mon, 18 Nov 2024 17:16:02 +0100
Subject: [PATCH] fix: decrease the size of social icons

---
 app/(root)/contact/page.tsx     |  2 +-
 components/shared/HeroCards.tsx |  2 +-
 components/ui/button.tsx        |  3 ++-
 components/ui/icons.tsx         | 36 ++++++++++++++++-----------------
 4 files changed, 22 insertions(+), 21 deletions(-)

diff --git a/app/(root)/contact/page.tsx b/app/(root)/contact/page.tsx
index 3fd7c04..c86e264 100644
--- a/app/(root)/contact/page.tsx
+++ b/app/(root)/contact/page.tsx
@@ -186,7 +186,7 @@ const ContactUs = () => {
               ))}
             </ul>
             <Separator />
-            <ul className="flex justify-center my-6">
+            <ul className="flex justify-center space-x-1 my-6">
               <Iconss />
             </ul>
             <Separator />
diff --git a/components/shared/HeroCards.tsx b/components/shared/HeroCards.tsx
index 04aee8a..3cd4937 100644
--- a/components/shared/HeroCards.tsx
+++ b/components/shared/HeroCards.tsx
@@ -88,7 +88,7 @@ const HeroCards = () => {
       </Card>
 
       {/* Socials Second top right */}
-      <Card className="absolute right-[20px] top-4 w-80 flex flex-col justify-center items-center drop-shadow-xl shadow-black/10 dark:shadow-white/10">
+      <Card className="absolute right-[20px] top-5 w-80 flex flex-col justify-center items-center drop-shadow-xl shadow-black/10 dark:shadow-white/10">
         <CardHeader className="flex justify-center items-center pb-2">
           <CardTitle className="text-center">Socials</CardTitle>
           <CardDescription className="font-medium text-primary"></CardDescription>
diff --git a/components/ui/button.tsx b/components/ui/button.tsx
index 6ecff44..7e9af4d 100644
--- a/components/ui/button.tsx
+++ b/components/ui/button.tsx
@@ -23,7 +23,8 @@ const buttonVariants = cva(
         default: "h-10 px-4 py-2",
         sm: "h-9 rounded-md px-3",
         lg: "h-11 rounded-md px-8",
-        icon: "h-10 w-10"
+        icon: "h-10 w-10",
+        smicon: "h-8 w-8"
       }
     },
     defaultVariants: {
diff --git a/components/ui/icons.tsx b/components/ui/icons.tsx
index 7c298e7..afc0713 100644
--- a/components/ui/icons.tsx
+++ b/components/ui/icons.tsx
@@ -25,13 +25,13 @@ const Iconss = () => {
         rel="me"
         className={buttonVariants({
           variant: "ghost",
-          size: "icon"
+          size: "smicon"
         })}
       >
         <span className="sr-only">X icon</span>
         <svg
-          width="25"
-          height="25"
+          width="22"
+          height="22"
           viewBox="0 0 25 25"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
@@ -48,14 +48,14 @@ const Iconss = () => {
         rel="me"
         className={buttonVariants({
           variant: "ghost",
-          size: "icon"
+          size: "smicon"
         })}
       >
         <span className="sr-only">Mastodon icon</span>
 
         <svg
-          width="25"
-          height="25"
+          width="22"
+          height="22"
           viewBox="0 0 25 25"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
@@ -73,14 +73,14 @@ const Iconss = () => {
         rel="me"
         className={buttonVariants({
           variant: "ghost",
-          size: "icon"
+          size: "smicon"
         })}
       >
         <span className="sr-only">Bluesky icon</span>
 
         <svg
-          width="25"
-          height="25"
+          width="22"
+          height="22"
           viewBox="0 0 576 512"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
@@ -98,14 +98,14 @@ const Iconss = () => {
         rel="me"
         className={buttonVariants({
           variant: "ghost",
-          size: "icon"
+          size: "smicon"
         })}
       >
         <span className="sr-only">Odysee icon</span>
 
         <svg
-          width="25"
-          height="25"
+          width="22"
+          height="22"
           viewBox="0 0 25 25"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
@@ -123,14 +123,14 @@ const Iconss = () => {
         rel="me"
         className={buttonVariants({
           variant: "ghost",
-          size: "icon"
+          size: "smicon"
         })}
       >
         <span className="sr-only">Instagram icon</span>
 
         <svg
-          width="25"
-          height="25"
+          width="22"
+          height="22"
           viewBox="0 0 1000 1000"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
@@ -148,14 +148,14 @@ const Iconss = () => {
         rel="me"
         className={buttonVariants({
           variant: "ghost",
-          size: "icon"
+          size: "smicon"
         })}
       >
         <span className="sr-only">Threads icon</span>
 
         <svg
-          width="25"
-          height="25"
+          width="22"
+          height="22"
           viewBox="0 0 878 1000"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"