refactor: account page tweaks (denoland#601)

This change adds a "Go to my profile" link and changes the styling and positions of links on the account page.
dreamcatcher-tech · Sep 22, 2023 · 069a09a · 069a09a
1 parent 4dadb5b
commit 069a09a
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 17 deletions.
diff --git a/routes/account/index.tsx b/routes/account/index.tsx
@@ -1,7 +1,7 @@
 // Copyright 2023 the Deno authors. All rights reserved. MIT license.
 import { defineRoute } from "$fresh/server.ts";
 import type { SignedInState } from "@/plugins/session.ts";
-import { BUTTON_STYLES } from "@/utils/constants.ts";
+import { BUTTON_STYLES, LINK_STYLES } from "@/utils/constants.ts";
 import { isStripeEnabled } from "@/utils/stripe.ts";
 import Head from "@/components/Head.tsx";
 import GitHubAvatarImg from "@/components/GitHubAvatarImg.tsx";
@@ -21,32 +21,31 @@ export default defineRoute<SignedInState>((_req, ctx) => {
         />
         <ul class="space-y-4">
           <li>
-            <p>
-              <strong>Username</strong>
-            </p>
-            <p>
-              {sessionUser.login}
+            <strong>Username</strong>
+            <p class="flex flex-wrap justify-between">
+              <span>
+                {sessionUser.login}
+              </span>
+              <a href={`/users/${sessionUser.login}`} class={LINK_STYLES}>
+                Go to my profile &#8250;
+              </a>
             </p>
           </li>
           <li>
+            <strong>Subscription</strong>
             <p class="flex flex-wrap justify-between">
-              <span>
-                <strong>Subscription</strong>
-              </span>
+              <span>{sessionUser.isSubscribed ? "Premium 🦕" : "Free"}</span>
               {isStripeEnabled() && (
                 <span>
                   <a
-                    class="underline"
+                    class={LINK_STYLES}
                     href={`/account/${action.toLowerCase()}`}
                   >
-                    {action}
+                    {action} &#8250;
                   </a>
                 </span>
               )}
             </p>
-            <p>
-              {sessionUser.isSubscribed ? "Premium 🦕" : "Free"}
-            </p>
           </li>
         </ul>
         <a

diff --git a/utils/constants.ts b/utils/constants.ts
@@ -8,14 +8,14 @@ export const SITE_DESCRIPTION = "Discover new Deno projects. Share your own.";
  * 2. Writing custom components which offer no additional functionality beyond styling
  */
 export const BUTTON_STYLES =
-  "px-4 py-2 bg-primary text-white rounded-lg border-1 border-primary transition duration-300 disabled:(opacity-50 cursor-not-allowed) hover:enabled:(bg-transparent text-primary)";
+  "px-4 py-2 bg-primary text-white rounded-lg border-1 border-primary transition duration-100 disabled:(opacity-50 cursor-not-allowed) hover:(bg-transparent text-primary)";
 export const INPUT_STYLES =
-  "px-4 py-2 bg-transparent rounded rounded-lg outline-none border-1 border-gray-300 hover:border-black transition duration-300 disabled:(opacity-50 cursor-not-allowed) dark:(hover:border-white)";
+  "px-4 py-2 bg-transparent rounded rounded-lg outline-none border-1 border-gray-300 hover:border-black transition duration-100 disabled:(opacity-50 cursor-not-allowed) dark:(hover:border-white)";
 export const SITE_BAR_STYLES = "flex justify-between p-4 gap-4";
 export const NAV_STYLES =
   "flex flex-wrap justify-start gap-x-8 gap-y-4 items-center justify-between h-full";
 export const LINK_STYLES =
-  "text-gray-500 transition duration-300 hover:(text-black dark:text-white)";
+  "text-gray-500 transition duration-100 hover:(text-black dark:text-white)";
 export const ACTIVE_LINK_STYLES = LINK_STYLES + " !text-black !dark:text-white";
 export const HEADING_STYLES = "text-3xl font-bold";
 export const HEADING_WITH_MARGIN_STYLES = HEADING_STYLES + " mb-8";