Refactor button styles and spacing in contact and home pages

components/Button.jsx

@@ -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 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-neutral-700 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 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-neutral-700  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 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 px-4 py-2 font-medium text-neutral-700  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 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 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}>

components/Icons.jsx

@@ -7,7 +7,7 @@ export const Icons = {
  ...LucideIcons,
  Github: ({ ...props }) => (
   <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-   <path fill-rule="evenodd" clip-rule="evenodd" d="M12.5103 0C5.59245 0 0 5.72914 0 12.8169C0 18.4825 3.58327 23.2783 8.55422 24.9757C9.17572 25.1033 9.40337 24.6999 9.40337 24.3606C9.40337 24.0634 9.38289 23.045 9.38289 21.9838C5.90281 22.7478 5.17812 20.4559 5.17812 20.4559C4.61885 18.9705 3.79018 18.5887 3.79018 18.5887C2.65116 17.8036 3.87315 17.8036 3.87315 17.8036C5.13663 17.8885 5.79961 19.1192 5.79961 19.1192C6.9179 21.0713 8.7199 20.5197 9.44486 20.1801C9.54831 19.3525 9.87993 18.7796 10.232 18.4614C7.45642 18.1642 4.53613 17.0609 4.53613 12.1377C4.53613 10.7372 5.03292 9.59137 5.8201 8.70022C5.6959 8.382 5.26083 7.06612 5.94455 5.30493C5.94455 5.30493 7.00087 4.96534 9.38263 6.62055C10.4023 6.33999 11.454 6.19727 12.5103 6.19607C13.5667 6.19607 14.6435 6.34477 15.6378 6.62055C18.0198 4.96534 19.0761 5.30493 19.0761 5.30493C19.7599 7.06612 19.3245 8.382 19.2003 8.70022C20.0083 9.59137 20.4846 10.7372 20.4846 12.1377C20.4846 17.0609 17.5643 18.1429 14.7679 18.4614C15.2237 18.8645 15.6171 19.6283 15.6171 20.8379C15.6171 22.5567 15.5966 23.9361 15.5966 24.3603C15.5966 24.6999 15.8245 25.1033 16.4457 24.9759C21.4167 23.278 24.9999 18.4825 24.9999 12.8169C25.0204 5.72914 19.4075 0 12.5103 0Z" fill="white" />
+   <path fill-rule="evenodd" clip-rule="evenodd" d="M12.5103 0C5.59245 0 0 5.72914 0 12.8169C0 18.4825 3.58327 23.2783 8.55422 24.9757C9.17572 25.1033 9.40337 24.6999 9.40337 24.3606C9.40337 24.0634 9.38289 23.045 9.38289 21.9838C5.90281 22.7478 5.17812 20.4559 5.17812 20.4559C4.61885 18.9705 3.79018 18.5887 3.79018 18.5887C2.65116 17.8036 3.87315 17.8036 3.87315 17.8036C5.13663 17.8885 5.79961 19.1192 5.79961 19.1192C6.9179 21.0713 8.7199 20.5197 9.44486 20.1801C9.54831 19.3525 9.87993 18.7796 10.232 18.4614C7.45642 18.1642 4.53613 17.0609 4.53613 12.1377C4.53613 10.7372 5.03292 9.59137 5.8201 8.70022C5.6959 8.382 5.26083 7.06612 5.94455 5.30493C5.94455 5.30493 7.00087 4.96534 9.38263 6.62055C10.4023 6.33999 11.454 6.19727 12.5103 6.19607C13.5667 6.19607 14.6435 6.34477 15.6378 6.62055C18.0198 4.96534 19.0761 5.30493 19.0761 5.30493C19.7599 7.06612 19.3245 8.382 19.2003 8.70022C20.0083 9.59137 20.4846 10.7372 20.4846 12.1377C20.4846 17.0609 17.5643 18.1429 14.7679 18.4614C15.2237 18.8645 15.6171 19.6283 15.6171 20.8379C15.6171 22.5567 15.5966 23.9361 15.5966 24.3603C15.5966 24.6999 15.8245 25.1033 16.4457 24.9759C21.4167 23.278 24.9999 18.4825 24.9999 12.8169C25.0204 5.72914 19.4075 0 12.5103 0Z" />
   </svg>
  ),
 };

components/ProjectCard.jsx

@@ -2,6 +2,7 @@ import Image from "next/image";
 import Link from "next/link";
 import { ButtonSecondary, ButtonPrimary } from "@/components/Button";
 import { parseISO } from "@/lib/utils";
+import { Icons } from "./Icons";
 
 export function ProjectCard({ project }) {
  return (
@@ -30,11 +31,13 @@ export function ProjectCard({ project }) {
    <div className="mt-6 flex flex-wrap gap-4">
     {project.website && (
      <ButtonPrimary href={project.website} target="_blank" rel="noopener noreferrer">
+      <Icons.Link className="mr-2 size-5 stroke-2" />
       Visit website
      </ButtonPrimary>
     )}
     {project.github && (
      <ButtonSecondary href={project.github} target="_blank" rel="noopener noreferrer">
+      <Icons.Github className="mr-2 size-5 dark:fill-white fill-neutral-700" />
       View on Github
      </ButtonSecondary>
     )}

components/client/ContactForm.jsx

@@ -154,7 +154,7 @@ export function ContactForm() {
 
  return (
   <form onSubmit={handleSubmit} className="relative flex w-full flex-col items-center justify-center">
-   <div className="block w-full items-center justify-center gap-1.5 text-left md:flex">
+   <div className="block w-full items-center justify-center gap-4 text-left md:flex">
     <label htmlFor="name" className="w-full text-left text-sm font-semibold tracking-wide text-gray-700 dark:text-neutral-300">
      Name
      <span aria-hidden={true} className="cursor-help text-red-500" title="Required">
@@ -214,10 +214,10 @@ export function ContactForm() {
         "border-red-400 text-red-400": invalid.message,
         "border-gray-300 text-gray-800 focus:border-blue-700 dark:border-neutral-800 dark:text-white focus:dark:border-neutral-700": !invalid.message,
        },
-       "mt-2 max-h-40 min-h-[80px] w-full rounded-lg border-[1px] p-2 font-normal outline-0 duration-200 dark:bg-transparent"
+       "mt-2 max-h-40 min-h-24 w-full rounded-lg border-[1px] p-2 font-normal outline-0 duration-200 dark:bg-transparent"
       )}
       type="email"
-      placeholder="Hello there!"
+      placeholder="Hello there, I would like to ask you about..."
      />
     </label>
     <span
@@ -235,33 +235,29 @@ export function ContactForm() {
 
    {success && (
     <p className="flex items-center self-start text-green-500">
-     <Icons.MailCheck className="mr-1 size-4" />
+     <Icons.MailCheck className="mr-2 size-5" />
      {success}
     </p>
    )}
    {error && (
     <p className="flex items-center self-start text-red-400">
-     <Icons.X className="mr-1 size-4" />
+     <Icons.CircleAlert className="mr-2 size-5" />
      {error}
     </p>
    )}
-   <div className="w-full py-2">
-    <ButtonSecondary className="group ml-auto" type="submit" icon={false} disabled={loading}>
+    <ButtonSecondary className="mt-4 ml-auto" type="submit" icon={false} disabled={loading} onClick={handleSubmit}>
      {loading ? (
       <>
+      <Icons.RefreshCw className="mr-2 size-4 animate-spin duration-200 motion-reduce:transition-none" />
        Sending
-       <Icons.RefreshCw className="ml-2 mt-[2px] size-4 animate-spin duration-200 motion-reduce:transition-none" />
       </>
      ) : (
       <>
+      <Icons.Send className="mr-2 size-4" />
        Send
-       <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}>
-        <path strokeLinecap="round" strokeLinejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" />
-       </svg>
       </>
      )}
     </ButtonSecondary>
-   </div>
   </form>
  );
 }