feat: add new styling to button components

moonbamijam · Mar 1, 2024 · d234151 · d234151
1 parent c56ebe2
commit d234151
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 7 deletions.
diff --git a/components/buttons/BackBtn.tsx b/components/buttons/BackBtn.tsx
@@ -1,5 +1,6 @@
 import Link from "next/link";
-import { FaBackwardStep } from "react-icons/fa6";type Props = {
+import { FaBackwardStep } from "react-icons/fa6";
+type Props = {
   href: string;
   extraClass?: string;
 };
@@ -8,7 +9,7 @@ const BackBtn = ({ href, extraClass }: Props) => {
   return (
     <Link
       href={href}
-      className={`${extraClass} flex justify-center items-center gap-1 text-black [&>svg>path]:text-black dark:text-white dark:[&>svg>path]:text-white hover:text-white [&>svg>path]:hover:text-white button-format border-2 border-gray-500 hover:bg-highlight hover:border-highlight capitalize`}
+      className={`${extraClass} opacity-70 hover:opacity-100 flex justify-center items-center gap-1 text-black [&>svg>path]:text-black dark:text-white dark:[&>svg>path]:text-white hover:text-white [&>svg>path]:hover:text-white button-format border-2 border-neutral-500 hover:bg-highlight hover:border-highlight capitalize`}
     >
       <FaBackwardStep /> back
     </Link>

diff --git a/components/buttons/GitHubBtn.tsx b/components/buttons/GitHubBtn.tsx
@@ -10,7 +10,7 @@ const GitHubBtn = ({href, extraClass}: Props) => {
     <Link
       href={href}
       target="_blank"
-      className={`${extraClass} [&>svg>path]:text-black dark:[&>svg>path]:text-white hover:text-white [&>svg>path]:hover:text-white button-format border-2 border-[#24292e] dark:border-highlight dark:hover:border-[#2dba4e] hover:border-[#2dba4e] hover:bg-[#2dba4e] dark:hover:bg-[#2dba4e] gap-1 flex justify-center items-center capitalize`}
+      className={`${extraClass} [&>svg>path]:text-black dark:[&>svg>path]:text-white hover:text-white [&>svg>path]:hover:text-white button-format border-2 border-primary dark:border-highlight dark:hover:border-[#2dba4e] hover:border-[#2dba4e] hover:bg-[#2dba4e] dark:hover:bg-[#2dba4e] gap-1 flex justify-center items-center capitalize`}
     >
       <FaGithub />
       GitHub

diff --git a/components/buttons/WebsiteBtn.tsx b/components/buttons/WebsiteBtn.tsx
@@ -6,16 +6,16 @@ type Props = {
   extraClass?: string;
 };
 
-const WebsiteBtn = ({href, extraClass}: Props) => {
+const WebsiteBtn = ({ href, extraClass }: Props) => {
   return (
     <Link
       href={href}
       target="_blank"
-      className={`${extraClass} button-format border-2 border-highlight bg-transparent hover:bg-highlight [&>svg>path]:text-black [&>svg>polyline]:text-black [&>svg>line]:text-black dark:[&>svg>path]:text-white dark:[&>svg>polyline]:text-white dark:[&>svg>line]:text-white hover:text-white [&>svg>path]:hover:text-white [&>svg>polyline]:hover:text-white [&>svg>line]:hover:text-white flex justify-center items-center gap-1 capitalize`}
+      className={`${extraClass} button-format border-2 border-primary hover:border-highlight dark:border-highlight bg-transparent hover:bg-highlight [&>svg>path]:text-black [&>svg>polyline]:text-black [&>svg>line]:text-black dark:[&>svg>path]:text-white dark:[&>svg>polyline]:text-white dark:[&>svg>line]:text-white hover:text-white [&>svg>path]:hover:text-white [&>svg>polyline]:hover:text-white [&>svg>line]:hover:text-white flex justify-center items-center gap-1 capitalize`}
     >
       <FiExternalLink /> visit
     </Link>
   );
-}
+};
 
-export default WebsiteBtn
+export default WebsiteBtn;