give the sidebar some love

web/src/components/site/Navigation/Anchors/Login.tsx

@@ -1,10 +1,19 @@
-import { LoginIcon } from "src/components/graphics/LoginIcon";
 import { Link } from "src/theme/components/Link";
 
-export function LoginAction() {
+import { StyleProps } from "@/styled-system/types";
+
+export function LoginAction(props: StyleProps) {
+  return (
+    <Link href="/login" kind="secondary" size="sm" {...props}>
+      Login
+    </Link>
+  );
+}
+
+export function RegisterAction(props: StyleProps) {
   return (
-    <Link href="/register" kind="ghost" size="sm" p="0">
-      <LoginIcon width="1.5em" />
+    <Link href="/register" kind="primary" size="sm" {...props}>
+      Register
     </Link>
   );
 }

web/src/components/site/Navigation/Sidebar/components/Title.tsx

@@ -1,11 +1,12 @@
+import Link from "next/link";
 import { PropsWithChildren } from "react";
 
-import { Heading } from "src/theme/components";
+import { styled } from "@/styled-system/jsx";
 
 export function Title({ children }: PropsWithChildren) {
   return (
-    <Heading size="sm" role="navigation" wordBreak="keep-all">
-      {children}
-    </Heading>
+    <styled.h1 fontSize="lg" fontWeight="bold" wordBreak="keep-all">
+      <Link href="/">{children}</Link>
+    </styled.h1>
   );
 }

web/src/components/site/Navigation/Sidebar/components/Toolbar.tsx

@@ -1,15 +1,18 @@
 import { useSession } from "src/auth";
 import { ComposeAction } from "src/components/site/Navigation/Anchors/Compose";
 import { HomeAction } from "src/components/site/Navigation/Anchors/Home";
-import { LoginAction } from "src/components/site/Navigation/Anchors/Login";
+import {
+  LoginAction,
+  RegisterAction,
+} from "src/components/site/Navigation/Anchors/Login";
 import { NotificationsAction } from "src/components/site/Navigation/Anchors/Notifications";
 
 import { HStack } from "@/styled-system/jsx";
 
 export function Toolbar() {
   const account = useSession();
   return (
-    <HStack gap="2" pb="2">
+    <HStack gap="2" pb="2" w="full">
       {account ? (
         <>
           <HomeAction />
@@ -18,8 +21,10 @@ export function Toolbar() {
         </>
       ) : (
         <>
-          <HomeAction />
-          <LoginAction />
+          <HStack w="full">
+            <RegisterAction w="full" />
+            <LoginAction flexShrink={0} />
+          </HStack>
         </>
       )}
     </HStack>