readable

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 (

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>

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>