Refactor button styles and spacing in contact and home pages

IgorKowalczyk · Sep 25, 2024 · 9b0e9c6 · 9b0e9c6
1 parent 6318daf
commit 9b0e9c6
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 18 deletions.
diff --git a/app/contact/page.jsx b/app/contact/page.jsx
@@ -20,7 +20,7 @@ export default function Page() {
     <Description>Or contact me with...</Description>
     <div className="mt-4 flex flex-wrap gap-4">
      {contact.links.map((element) => (
-      <ButtonTertiary href={element.href} key={`contact-link-${element.href}`} target="_blank" className="mt-0 gap-2">
+      <ButtonTertiary href={element.href} key={`contact-link-${element.href}`} target="_blank" className="gap-2">
        {element.icon} {element.title}
       </ButtonTertiary>
      ))}

diff --git a/app/page.jsx b/app/page.jsx
@@ -23,11 +23,11 @@ export default async function HomePage() {
    <section className="mb-16 mt-20">
     <h1 className="dark:color-black relative m-0 text-4xl font-black tracking-[-0.03em] text-gray-800 duration-300 dark:text-white md:text-left">Hey, I’m {header.title}</h1>
     <p className="mt-2 text-lg text-gray-700 dark:text-neutral-400">{header.description}</p>
-    <div className="mt-4 flex flex-row gap-5">
-     <ButtonPrimary href="/#contact" className="mt-4 md:mt-6">
+    <div className="mt-9 flex flex-row flex-wrap gap-5">
+     <ButtonPrimary href="/#contact">
       Contact me
      </ButtonPrimary>
-     <ButtonSecondary href="/#about" className="mt-4 md:mt-6">
+     <ButtonSecondary href="/#about">
       More about me
      </ButtonSecondary>
     </div>
@@ -105,7 +105,7 @@ export default async function HomePage() {
     <Description>Or contact me with...</Description>
     <div className="mt-4 flex flex-wrap gap-4">
      {contact.links.map((element) => (
-      <ButtonTertiary href={element.href} key={`contact-link-${element.href}`} target="_blank" className="mt-0 gap-2">
+      <ButtonTertiary href={element.href} key={`contact-link-${element.href}`} target="_blank" className="gap-2">
        {element.icon} {element.title}
       </ButtonTertiary>
      ))}

diff --git a/components/Button.jsx b/components/Button.jsx
@@ -4,7 +4,7 @@ import { cn } from "@/lib/utils";
 export function ButtonPrimary({ href, children, icon = true, ...props }) {
  if (href) {
   return (
-   <Link href={href} {...props} className={cn("group mt-2 flex w-fit items-center rounded-md bg-blue-500 px-4 py-2 font-medium text-white duration-200 hover:bg-blue-600 disabled:cursor-not-allowed disabled:opacity-50 motion-reduce:transition-none", props.className)}>
+   <Link href={href} {...props} className={cn("group flex w-fit items-center rounded-md bg-blue-500 px-4 py-2 font-medium text-white duration-200 hover:bg-blue-600 disabled:cursor-not-allowed disabled:opacity-50 motion-reduce:transition-none", props.className)}>
     {children}
     {icon && (
      <svg className="ml-2 size-4 duration-200 group-hover:translate-x-1 motion-reduce:transition-none motion-reduce:group-hover:translate-x-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
@@ -15,7 +15,7 @@ export function ButtonPrimary({ href, children, icon = true, ...props }) {
   );
  }
  return (
-  <button {...props} className={cn("group mt-2 flex w-fit items-center rounded-md bg-blue-500 px-4 py-2 font-medium text-white duration-200 hover:bg-blue-600 disabled:cursor-not-allowed disabled:opacity-50 motion-reduce:transition-none", props.className)} type="button">
+  <button {...props} className={cn("group flex w-fit items-center rounded-md bg-blue-500 px-4 py-2 font-medium text-white duration-200 hover:bg-blue-600 disabled:cursor-not-allowed disabled:opacity-50 motion-reduce:transition-none", props.className)} type="button">
    {children}
    {icon && (
     <svg className="ml-2 size-4 duration-200 group-hover:translate-x-1 motion-reduce:transition-none motion-reduce:group-hover:translate-x-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
@@ -29,7 +29,7 @@ export function ButtonPrimary({ href, children, icon = true, ...props }) {
 export function ButtonSecondary({ href, children, icon = true, ...props }) {
  if (href) {
   return (
-   <Link href={href} {...props} className={cn("group mt-2 flex w-fit items-center rounded-md bg-gray-200 px-4 py-2 font-medium text-blue-900 duration-200 hover:bg-gray-300 motion-reduce:transition-none dark:bg-white/10 dark:text-white dark:hover:bg-white/15", props.className)}>
+   <Link href={href} {...props} className={cn("group flex w-fit items-center rounded-md bg-gray-200 px-4 py-2 font-medium text-blue-900 duration-200 hover:bg-gray-300 motion-reduce:transition-none dark:bg-white/10 dark:text-white dark:hover:bg-white/15", props.className)}>
     {children}
     {icon && (
      <svg className="ml-2 size-4 duration-200 group-hover:translate-x-1 motion-reduce:transition-none motion-reduce:group-hover:translate-x-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
@@ -40,7 +40,7 @@ export function ButtonSecondary({ href, children, icon = true, ...props }) {
   );
  } else {
   return (
-   <button {...props} className={cn("group mt-2 flex w-fit items-center rounded-md bg-gray-200 px-4 py-2 font-medium text-blue-900 duration-200 hover:bg-gray-300 disabled:cursor-not-allowed disabled:opacity-50 motion-reduce:transition-none dark:bg-white/10 dark:text-white dark:hover:bg-white/15", props.className)} type="button">
+   <button {...props} className={cn("group flex w-fit items-center rounded-md bg-gray-200 px-4 py-2 font-medium text-blue-900 duration-200 hover:bg-gray-300 disabled:cursor-not-allowed disabled:opacity-50 motion-reduce:transition-none dark:bg-white/10 dark:text-white dark:hover:bg-white/15", props.className)} type="button">
     {children}
     {icon && (
      <svg className="ml-2 size-4 duration-200 group-hover:translate-x-1 motion-reduce:transition-none motion-reduce:group-hover:translate-x-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
@@ -55,7 +55,7 @@ export function ButtonSecondary({ href, children, icon = true, ...props }) {
 export function ButtonTertiary({ href, children, icon = true, ...props }) {
  if (href) {
   return (
-   <Link href={href} {...props} className={cn("group mt-2 flex w-fit items-center rounded-md border bg-[#f8f9fa] px-4 py-2 font-medium text-blue-900 duration-200 hover:bg-[#f2f3f5] motion-reduce:transition-none dark:border-neutral-800 dark:bg-[#161617] dark:text-white dark:hover:border-neutral-700 dark:hover:bg-[#202021]", props.className)}>
+   <Link href={href} {...props} className={cn("group flex w-fit items-center rounded-md border bg-[#f8f9fa] px-4 py-2 font-medium text-blue-900 duration-200 hover:bg-[#f2f3f5] motion-reduce:transition-none dark:border-neutral-800 dark:bg-[#161617] dark:text-white dark:hover:border-neutral-700 dark:hover:bg-[#202021]", props.className)}>
     {children}
     {icon && (
      <svg className="ml-2 size-4 duration-200 group-hover:translate-x-1 motion-reduce:transition-none motion-reduce:group-hover:translate-x-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
@@ -66,7 +66,7 @@ export function ButtonTertiary({ href, children, icon = true, ...props }) {
   );
  }
  return (
-  <button {...props} className={cn("group mt-2 flex w-fit items-center rounded-md border bg-[#f8f9fa] px-4 py-2 font-medium text-blue-900 duration-200 hover:bg-[#f2f3f5] disabled:cursor-not-allowed disabled:opacity-50 motion-reduce:transition-none dark:border-neutral-800 dark:bg-[#161617] dark:text-white dark:hover:border-neutral-700 dark:hover:bg-[#202021]", props.className)} type="button">
+  <button {...props} className={cn("group flex w-fit items-center rounded-md border bg-[#f8f9fa] px-4 py-2 font-medium text-blue-900 duration-200 hover:bg-[#f2f3f5] disabled:cursor-not-allowed disabled:opacity-50 motion-reduce:transition-none dark:border-neutral-800 dark:bg-[#161617] dark:text-white dark:hover:border-neutral-700 dark:hover:bg-[#202021]", props.className)} type="button">
    {children}
    {icon && (
     <svg className="ml-2 size-4 duration-200 group-hover:translate-x-1 motion-reduce:transition-none motion-reduce:group-hover:translate-x-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>

diff --git a/components/ProjectCard.jsx b/components/ProjectCard.jsx
@@ -27,14 +27,14 @@ export function ProjectCard({ project }) {
      </div>
     ))}
    </div>
-   <div className="mt-4 flex flex-wrap gap-5">
+   <div className="mt-6 flex flex-wrap gap-5">
     {project.website && (
-     <ButtonPrimary href={project.website} className="mt-4" target="_blank" rel="noopener noreferrer">
+     <ButtonPrimary href={project.website} target="_blank" rel="noopener noreferrer">
       Visit website
      </ButtonPrimary>
     )}
     {project.github && (
-     <ButtonSecondary href={project.github} className="mt-4" target="_blank" rel="noopener noreferrer">
+     <ButtonSecondary href={project.github} target="_blank" rel="noopener noreferrer">
       View on Github
      </ButtonSecondary>
     )}

diff --git a/components/client/MobileNav.jsx b/components/client/MobileNav.jsx
@@ -25,7 +25,7 @@ export default function MobileNav() {
 
  return (
   <>
-   <ButtonSecondary className="!mt-0 size-10 justify-center border-0 lg:hidden" icon={false} onClick={() => setIsMenuOpen(true)}>
+   <ButtonSecondary className="size-10 justify-center border-0 lg:hidden" icon={false} onClick={() => setIsMenuOpen(true)}>
     <Icons.AlignLeft className="size-5 shrink-0 text-gray-900 dark:text-gray-100" />
    </ButtonSecondary>
 
@@ -49,7 +49,7 @@ export default function MobileNav() {
      "dark:shadow-2x fixed left-0 top-0 z-50 flex h-screen w-full max-w-96 flex-col border-r border-black/10 bg-white/70 p-6 backdrop-blur-xl duration-200 motion-reduce:transition-none dark:border-neutral-800 dark:bg-[#161617]/70 lg:hidden"
     )}
    >
-    <ButtonSecondary className="ml-auto mr-0 mt-0 size-10 justify-center border-0" icon={false} onClick={() => setIsMenuOpen(false)}>
+    <ButtonSecondary className="ml-auto mr-0 size-10 justify-center border-0" icon={false} onClick={() => setIsMenuOpen(false)}>
      <Icons.X className="size-5 shrink-0 text-gray-900 dark:text-gray-100" />
     </ButtonSecondary>
 

diff --git a/components/client/Settings.jsx b/components/client/Settings.jsx
@@ -47,7 +47,7 @@ export default function Settings() {
       "bg-blue-200 dark:bg-white/15": isOpen,
       "bg-gray-200 dark:bg-white/10": !isOpen,
      },
-     "group !mt-0 ml-auto flex h-10 w-10 items-center justify-center px-2"
+     "group ml-auto flex h-10 w-10 items-center justify-center px-2"
     )}
    >
     <Cog8ToothIcon
@@ -153,7 +153,7 @@ export default function Settings() {
            Source code <ArrowTopRightOnSquareIcon className="ml-2 size-4 opacity-50 duration-100 group-hover:opacity-90 motion-reduce:transition-none" />
           </Link>
 
-          <ButtonSecondary className="ml-auto mt-0" onClick={() => setIsOpen(false)}>
+          <ButtonSecondary className="ml-auto" onClick={() => setIsOpen(false)}>
            Close
           </ButtonSecondary>
          </div>