readable

2025-12-23 08:39:56 -05:00
parent 95b5549352
commit be3e9a9e0b
5 changed files with 63 additions and 43 deletions
--- 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 (
--- 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>
--- 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>
--- 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}
+                      <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
+                          }
                        >
-                        {getProviderInfo(userProfile().provider).icon}
+                          <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..."
--- 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}