From be3e9a9e0b876421090d4968d16e797fcc0020d1 Mon Sep 17 00:00:00 2001
From: Michael Freno <michaelt.freno@gmail.com>
Date: Tue, 23 Dec 2025 08:39:56 -0500
Subject: [PATCH] readable

---
 src/components/Bars.tsx                  | 16 ++++--
 src/components/blog/DeletePostButton.tsx |  9 ++--
 src/components/icons/TrashIcon.tsx       |  8 +--
 src/routes/account.tsx                   | 69 +++++++++++++-----------
 src/routes/blog/[title]/index.tsx        |  4 +-
 5 files changed, 63 insertions(+), 43 deletions(-)

diff --git a/src/components/Bars.tsx b/src/components/Bars.tsx
index 24ec16e..7981594 100644
--- a/src/components/Bars.tsx
+++ b/src/components/Bars.tsx
@@ -17,6 +17,7 @@ import { ActivityHeatmap } from "./ActivityHeatmap";
 import { DarkModeToggle } from "./DarkModeToggle";
 import { SkeletonBox, SkeletonText } from "./SkeletonLoader";
 import { env } from "~/env/client";
+import { A, useNavigate } from "@solidjs/router";
 
 function formatDomainName(url: string): string {
   const domain = url.split("://")[1]?.split(":")[0] ?? url;
@@ -284,6 +285,7 @@ export function LeftBar() {
       fetchData();
     }, 0);
   });
+  const navigate = useNavigate();
 
   return (
     <nav
@@ -412,7 +414,13 @@ export function LeftBar() {
                     Blog
                   </a>
                 </li>
-                <li class="hover:text-subtext0 w-fit transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-110 hover:font-bold">
+                <li
+                  class="hover:text-subtext0 w-fit cursor-pointer transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-110 hover:font-bold"
+                  onClick={() => {
+                    navigate("/account");
+                    handleLinkClick();
+                  }}
+                >
                   <Show
                     when={isMounted() && userInfo()?.isAuthenticated}
                     fallback={
@@ -421,7 +429,7 @@ export function LeftBar() {
                       </a>
                     }
                   >
-                    <a href="/account" onClick={handleLinkClick}>
+                    <A href="/account" onClick={handleLinkClick}>
                       Account
                       <Show when={userInfo()?.email}>
                         <span class="text-subtext0 text-sm font-normal">
@@ -429,7 +437,7 @@ export function LeftBar() {
                           ({userInfo()!.email})
                         </span>
                       </Show>
-                    </a>
+                    </A>
                   </Show>
                 </li>
                 <Show when={isMounted() && userInfo()?.isAuthenticated}>
@@ -462,7 +470,7 @@ export function LeftBar() {
 }
 
 export function RightBar() {
-  const { rightBarSize, rightBarVisible } = useBars();
+  const { rightBarVisible } = useBars();
   let ref: HTMLDivElement | undefined;
 
   return (
diff --git a/src/components/blog/DeletePostButton.tsx b/src/components/blog/DeletePostButton.tsx
index c392ad3..39c7d14 100644
--- a/src/components/blog/DeletePostButton.tsx
+++ b/src/components/blog/DeletePostButton.tsx
@@ -29,9 +29,12 @@ export default function DeletePostButton(props: DeletePostButtonProps) {
 
   return (
     <form onSubmit={deletePostTrigger} class="flex w-full justify-end">
-      <button type="submit">
-        <Show when={loading()} fallback={<TrashIcon height={24} width={24} strokeWidth={1.5} />}>
-          <LoadingSpinner height={24} width={24} />
+      <button type="submit" class="hover:cursor-pointer">
+        <Show
+          when={!loading()}
+          fallback={<LoadingSpinner height={24} width={24} />}
+        >
+          <TrashIcon height={24} width={24} strokeWidth={1.5} />
         </Show>
       </button>
     </form>
diff --git a/src/components/icons/TrashIcon.tsx b/src/components/icons/TrashIcon.tsx
index 6ae430b..892236a 100644
--- a/src/components/icons/TrashIcon.tsx
+++ b/src/components/icons/TrashIcon.tsx
@@ -10,15 +10,15 @@ const TrashIcon = (props: {
       xmlns="http://www.w3.org/2000/svg"
       fill="none"
       viewBox="0 0 24 24"
-      strokeWidth={props.strokeWidth}
+      stroke-width={props.strokeWidth}
       stroke={props.stroke ? props.stroke : undefined}
       height={props.height}
       width={props.width}
-      class={props.stroke ? undefined : "stroke-zinc-900 dark:stroke-white"}
+      class={props.stroke ? undefined : "stroke-base"}
     >
       <path
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        stroke-linecap="round"
+        stroke-linejoin="round"
         d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
       />
     </svg>
diff --git a/src/routes/account.tsx b/src/routes/account.tsx
index d02406a..3a2759e 100644
--- a/src/routes/account.tsx
+++ b/src/routes/account.tsx
@@ -468,33 +468,31 @@ export default function AccountPage() {
     setPasswordBlurred(true);
   };
 
-  // Helper to get provider display info
-  const getProviderInfo = (provider: UserProfile["provider"]) => {
+  // Helper to get provider display name
+  const getProviderName = (provider: UserProfile["provider"]) => {
     switch (provider) {
       case "google":
-        return {
-          name: "Google",
-          icon: <GoogleLogo height={24} width={24} />,
-          color: "text-blue-500"
-        };
+        return "Google";
       case "github":
-        return {
-          name: "GitHub",
-          icon: <GitHub height={24} width={24} fill="currentColor" />,
-          color: "text-gray-700 dark:text-gray-300"
-        };
+        return "GitHub";
       case "email":
-        return {
-          name: "Email",
-          icon: <EmailIcon height={24} width={24} />,
-          color: "text-green-500"
-        };
+        return "Email";
       default:
-        return {
-          name: "Unknown",
-          icon: <EmailIcon height={24} width={24} />,
-          color: "text-gray-500"
-        };
+        return "Unknown";
+    }
+  };
+
+  // Helper to get provider icon color
+  const getProviderColor = (provider: UserProfile["provider"]) => {
+    switch (provider) {
+      case "google":
+        return "text-blue-500";
+      case "github":
+        return "text-gray-700 dark:text-gray-300";
+      case "email":
+        return "text-green-500";
+      default:
+        return "text-gray-500";
     }
   };
 
@@ -533,13 +531,24 @@ export default function AccountPage() {
                       Account Type
                     </div>
                     <div class="flex items-center justify-center gap-3">
-                      <span
-                        class={getProviderInfo(userProfile().provider).color}
-                      >
-                        {getProviderInfo(userProfile().provider).icon}
+                      <span class={getProviderColor(userProfile().provider)}>
+                        <Show when={userProfile().provider === "google"}>
+                          <GoogleLogo height={24} width={24} />
+                        </Show>
+                        <Show when={userProfile().provider === "github"}>
+                          <GitHub height={24} width={24} fill="currentColor" />
+                        </Show>
+                        <Show
+                          when={
+                            userProfile().provider === "email" ||
+                            !userProfile().provider
+                          }
+                        >
+                          <EmailIcon height={24} width={24} />
+                        </Show>
                       </span>
                       <span class="text-lg font-semibold">
-                        {getProviderInfo(userProfile().provider).name} Account
+                        {getProviderName(userProfile().provider)} Account
                       </span>
                     </div>
                     <Show
@@ -800,7 +809,7 @@ export default function AccountPage() {
                         {userProfile().provider === "email"
                           ? "Set a password to enable password login"
                           : "Add a password to enable email/password login alongside your " +
-                            getProviderInfo(userProfile().provider).name +
+                            getProviderName(userProfile().provider) +
                             " login"}
                       </div>
                     </Show>
@@ -979,7 +988,7 @@ export default function AccountPage() {
                       fallback={
                         <div class="flex flex-col items-center">
                           <div class="text-crust mb-4 text-center text-sm">
-                            Your {getProviderInfo(userProfile().provider).name}{" "}
+                            Your {getProviderName(userProfile().provider)}{" "}
                             account doesn't have a password. To delete your
                             account, please set a password first, then return
                             here to proceed with deletion.
@@ -1022,7 +1031,7 @@ export default function AccountPage() {
                             deleteAccountButtonLoading()
                               ? "bg-red cursor-not-allowed brightness-75"
                               : "bg-red hover:brightness-125 active:scale-90"
-                          } mx-auto mt-4 flex justify-center rounded px-4 py-2 text-base transition-all duration-300 ease-out`}
+                          } border-text mx-auto mt-4 flex justify-center rounded border px-4 py-2 text-base transition-all duration-300 ease-out`}
                         >
                           {deleteAccountButtonLoading()
                             ? "Deleting..."
diff --git a/src/routes/blog/[title]/index.tsx b/src/routes/blog/[title]/index.tsx
index 0f1b560..a8f3492 100644
--- a/src/routes/blog/[title]/index.tsx
+++ b/src/routes/blog/[title]/index.tsx
@@ -293,8 +293,8 @@ export default function PostPage() {
                           "pointer-events": "none"
                         }}
                       />
-                      <div class="text-text fixed top-1/3 z-50 m-auto w-full px-4 text-center tracking-widest backdrop-blur-xs select-text md:w-[calc(100vw-500px)]">
-                        <div class="text-3xl font-light tracking-widest">
+                      <div class="fixed top-1/3 z-50 m-auto w-full px-4 text-center tracking-widest text-white backdrop-blur-md select-text text-shadow-lg backdrop:brightness-50 md:w-[calc(100vw-500px)]">
+                        <div class="text-3xl font-semibold tracking-widest">
                           {p().title.replaceAll("_", " ")}
                           <div class="py-8 text-xl font-light tracking-widest">
                             {p().subtitle}