watermelontools · baristaGeek · Oct 27, 2023 · Oct 25, 2023 · Oct 25, 2023 · Oct 25, 2023
diff --git a/app/(loggedIn)/page.tsx b/app/(loggedIn)/page.tsx
@@ -38,41 +38,38 @@ async function HomePage({}) {
     <div>
       {data && <LoginGrid userEmail={userEmail} data={data} />}
       {userEmail && (
-        <div>
-          <div
-            className="Subhead p-3"
-            style={{
-              position: "sticky",
-              top: 0,
-              zIndex: 2,
-              backgroundColor: "var(--color-canvas-default)",
-            }}
-          >
-            <h2 className="Subhead-heading">IDEs</h2>
+        <div className="Box" style={{ height: "100%" }}>
+          <div className="Subhead px-3 pt-2">
+            <h2 className="Subhead-heading d-flex flex-items-center flex-justify-start">
+              <img className="avatar avatar-4" src="/logos/vscode.svg" />
+              <span>IDEs</span>
+            </h2>
           </div>
+
           <div
             style={{
               display: "grid",
               gridTemplateColumns: "repeat(auto-fit, minmax(350px, 1fr))",
             }}
           >
-            <div className="p-3">
+            <div className="pl-3 pr-3 pt-1 pb-3" style={{ flex: 1 }}>
               <DownloadExtension
                 name="VSCode"
                 email={userEmail}
                 urlStart="vscode"
                 accessToken={userName}
               />
             </div>
-            <div className="p-3">
+
+            <div className="pl-3 pr-3 pt-1 pb-3" style={{ flex: 1 }}>
               <DownloadExtension
                 name="VSCode Insiders"
                 urlStart="vscode-insiders"
                 email={userEmail}
                 accessToken={userName}
               />
             </div>
-            <div className="p-3">
+            <div className="pl-3 pr-3 pt-1 pb-3" style={{ flex: 1 }}>
               <DownloadExtension
                 name="VSCodium"
                 urlStart="vscodium"

diff --git a/components/AsanaLoginLink.tsx b/components/AsanaLoginLink.tsx
@@ -1,19 +1,33 @@
 import Link from "next/link";
 
 const AsanaLoginLink = ({ userEmail }) => (
-  <div className="Box">
-    <Link
-      href={`https://app.asana.com/-/oauth_authorize?client_id=${process.env.ASANA_CLIENT_ID}&redirect_uri=https%3A%2F%2Fapp.watermelontools.com%2Fasana&response_type=code&state=${userEmail}`}
-      className="button block"
-    >
-      <div className="Box d-flex flex-items-center flex-justify-start p-2">
-        <img className="avatar avatar-8" src="/logos/asana.svg" />
-        <div className="p-2">
-          <h2>Login to Asana</h2>
-          <p>View your Tasks and Stories</p>
+  <div className="Box" style={{ height: "100%" }}>
+    <div className="Subhead px-3 pt-2">
+      <h2 className="Subhead-heading d-flex flex-items-center flex-justify-start">
+        <img 
+          className="avatar avatar-4"
+          src="/logos/asana.svg" 
+        />
+        <span>Asana</span>
+      </h2>
+    </div>
+
+    <div className="pl-3 pr-3 pt-1 pb-3" style={{ flex: 1 }}>
+      <Link
+        href={`https://app.asana.com/-/oauth_authorize?client_id=${process.env.ASANA_CLIENT_ID}&redirect_uri=https%3A%2F%2Fapp.watermelontools.com%2Fasana&response_type=code&state=${userEmail}`}
+        className="button block"
+      >
+        <div className="d-flex flex-items-center">
+          <img className="avatar avatar-8 mr-2" src="/logos/asana.svg" />
+          <div style={{ flex: 1 }}>
+            <h3>Login to Asana</h3>
+            <p>View your Tasks and Stories</p>
+          </div>
         </div>
-      </div>
-    </Link>
+      </Link>
+    </div>
   </div>
 );
+
+
 export default AsanaLoginLink;
diff --git a/components/BitbucketLoginLink.tsx b/components/BitbucketLoginLink.tsx
@@ -1,19 +1,32 @@
 import Link from "next/link";
 
 const BitbucketLoginLink = ({ userEmail }) => (
-  <div className="Box">
-    <Link
-      href={`https://bitbucket.org/site/oauth2/authorize?client_id=qvxNH4EGH4sjZysZAu&response_type=code&state=${userEmail}`}
-      className="button block"
-    >
-      <div className="Box d-flex flex-items-center flex-justify-start p-2">
-        <img className="avatar avatar-8" src="/logos/bitbucket.svg" />
-        <div className="p-2">
-          <h2>Login to Bitbucket</h2>
-          <p>View your Assigned Issues and Relevant Pull Requests</p>
+  <div className="Box" style={{ height: "100%" }}>
+    <div className="Subhead px-3 pt-2">
+      <h2 className="Subhead-heading d-flex flex-items-center flex-justify-start">
+        <img 
+          className="avatar avatar-4"
+          src="/logos/bitbucket.svg" 
+        />
+        <span>Bitbucket</span>
+      </h2>
+    </div>
+
+    <div className="pl-3 pr-3 pt-1 pb-3" style={{ flex: 1 }}>
+      <Link
+        href={`https://bitbucket.org/site/oauth2/authorize?client_id=qvxNH4EGH4sjZysZAu&response_type=code&state=${userEmail}`}
+        className="button block"
+      >
+        <div className="d-flex flex-items-center">
+          <img className="avatar avatar-8 mr-2" src="/logos/bitbucket.svg" />
+          <div style={{ flex: 1 }}>
+            <h3>Login to Bitbucket</h3>
+            <p>View your Assigned Issues and Relevant Pull Requests</p>
+          </div>
         </div>
-      </div>
-    </Link>
+      </Link>
+    </div>
   </div>
 );
+
 export default BitbucketLoginLink;
diff --git a/components/ConfluenceLoginLink.tsx b/components/ConfluenceLoginLink.tsx
@@ -1,21 +1,31 @@
 import Link from "next/link";
 
 const ConfluenceLoginLink = ({ userEmail }) => (
-  <div>
-    <Link
-      href={`https://auth.atlassian.com/authorize?audience=api.atlassian.com&client_id=VUngRAClu8ZE56vxXCFBocTxCTLEUQTT&scope=offline_access%20read%3Acontent%3Aconfluence%20read%3Acontent-details%3Aconfluence%20read%3Ablogpost%3Aconfluence%20read%3Acomment%3Aconfluence%20read%3Auser%3Aconfluence%20read%3Auser.property%3Aconfluence%20read%3Ainlinetask%3Aconfluence&redirect_uri=https%3A%2F%2Fapp.watermelontools.com%2Fatlassian&state=${
-        "c" + userEmail
-      }&response_type=code&prompt=consent`}
-      className="button block"
-    >
-      <div className="Box d-flex flex-items-center flex-justify-start p-2">
-        <img className="avatar avatar-8" src="/logos/confluence.svg" />
-        <div className="p-2">
-          <h2>Login to Confluence</h2>
-          <p>View your Most Relevant Docs</p>
+  <div className="Box" style={{ height: "100%" }}>
+    <div className="Subhead px-3 pt-2">
+      <h2 className="Subhead-heading d-flex flex-items-center flex-justify-start">
+        <img className="avatar avatar-4" src="/logos/confluence.svg" />
+        <span>Confluence</span>
+      </h2>
+    </div>
+
+    <div className="pl-3 pr-3 pt-1 pb-3" style={{ flex: 1 }}>
+      <Link
+        href={`https://auth.atlassian.com/authorize?audience=api.atlassian.com&client_id=VUngRAClu8ZE56vxXCFBocTxCTLEUQTT&scope=offline_access%20read%3Acontent%3Aconfluence%20read%3Acontent-details%3Aconfluence%20read%3Ablogpost%3Aconfluence%20read%3Acomment%3Aconfluence%20read%3Auser%3Aconfluence%20read%3Auser.property%3Aconfluence%20read%3Ainlinetask%3Aconfluence&redirect_uri=https%3A%2F%2Fapp.watermelontools.com%2Fatlassian&state=${
+          "c" + userEmail
+        }&response_type=code&prompt=consent`}
+        className="button block"
+      >
+        <div className="d-flex flex-items-center">
+          <img className="avatar avatar-8 mr-2" src="/logos/confluence.svg" />
+          <div style={{ flex: 1 }}>
+            <h3>Login to Confluence</h3>
+            <p>Index Relevant Docs</p>
+          </div>
         </div>
-      </div>
-    </Link>
+      </Link>
+    </div>
   </div>
 );
+
 export default ConfluenceLoginLink;
diff --git a/components/GitHubLoginLink.tsx b/components/GitHubLoginLink.tsx
@@ -1,20 +1,32 @@
 import Link from "next/link";
 
 const GitHubLoginLink = ({ userEmail }) => (
-  <div className="Box">
-    <Link
-      href={`https://github.com/login/oauth/authorize?client_id=8543242e428085df968c&redirect_uri=https://app.watermelontools.com/github&state=${userEmail}&scope=repo%20user%20notifications`}
-      className="button block">
+  <div className="Box" style={{ height: "100%" }}>
+    <div className="Subhead px-3 pt-2">
+      <h2 className="Subhead-heading d-flex flex-items-center flex-justify-start">
+        <img 
+          className="avatar avatar-4"
+          src="/logos/github.svg" 
+        />
+        <span>GitHub</span>
+      </h2>
+    </div>
 
-      <div className="Box d-flex flex-items-center flex-justify-start p-2">
-        <img className="avatar avatar-8" src="/logos/github.svg" />
-        <div className="p-2">
-          <h2>Login to GitHub</h2>
-          <p>View your Assigned Issues and Relevant Pull Requests</p>
+    <div className="pl-3 pr-3 pt-1 pb-3" style={{ flex: 1 }}>
+      <Link
+        href={`https://github.com/login/oauth/authorize?client_id=8543242e428085df968c&redirect_uri=https://app.watermelontools.com/github&state=${userEmail}&scope=repo%20user%20notifications`}
+        className="button block"
+      >
+        <div className="d-flex flex-items-center">
+          <img className="avatar avatar-8 mr-2" src="/logos/github.svg" />
+          <div style={{ flex: 1 }}>
+            <h3>Login to GitHub</h3>
+            <p>Index Relevant Pull Requests</p>
+          </div>
         </div>
-      </div>
-
-    </Link>
+      </Link>
+    </div>
   </div>
 );
+
 export default GitHubLoginLink;
diff --git a/components/GitLabLoginLink.tsx b/components/GitLabLoginLink.tsx
@@ -1,19 +1,33 @@
 import Link from "next/link";
 
 const GitLabLoginLink = ({ userEmail }) => (
-  <div>
-    <Link
-      href={`https://gitlab.com/oauth/authorize?client_id=399843bda5477334e51f2aa88d96dfff694ce2da3130dabc685e34e1aa55b8f3&redirect_uri=https://app.watermelontools.com/gitlab&response_type=code&state=${userEmail}&scope=api%20read_api%20read_user%20read_repository%20write_repository%20read_registry%20openid%20profile%20email`}
-      className="button block"
-    >
-      <div className="Box d-flex flex-items-center flex-justify-start p-2">
-        <img className="avatar avatar-8" src="/logos/gitlab.svg" />
-        <div className="p-2">
-          <h2>Login to GitLab</h2>
-          <p>View your Assigned Issues and Relevant Pull Requests</p>
+  <div className="Box" style={{ height: "100%" }}>
+    <div className="Subhead px-3 pt-2">
+      <h2 className="Subhead-heading d-flex flex-items-center flex-justify-start">
+        <img 
+          className="avatar avatar-4"
+          src="/logos/gitlab.svg" 
+        />
+        <span>GitLab</span>
+      </h2>
+    </div>
+
+    <div className="pl-3 pr-3 pt-1 pb-3" style={{ flex: 1 }}>
+      <Link
+        href={`https://gitlab.com/oauth/authorize?client_id=399843bda5477334e51f2aa88d96dfff694ce2da3130dabc685e34e1aa55b8f3&redirect_uri=https://app.watermelontools.com/gitlab&response_type=code&state=${userEmail}&scope=api%20read_api%20read_user%20read_repository%20write_repository%20read_registry%20openid%20profile%20email`}
+        className="button block"
+      >
+        <div className="d-flex flex-items-center">
+          <img className="avatar avatar-8 mr-2" src="/logos/gitlab.svg" />
+          <div style={{ flex: 1 }}>
+            <h3>Login to GitLab</h3>
+            <p>View your Assigned Issues and Relevant Pull Requests</p>
+          </div>
         </div>
-      </div>
-    </Link>
+      </Link>
+    </div>
   </div>
 );
+
+
 export default GitLabLoginLink;
diff --git a/components/Header.tsx b/components/Header.tsx
@@ -1,6 +1,6 @@
 "use client";
 import Image from "next/image";
-import HeaderSignOut from "./HeaderSignOut";
+
 export default function Header({ userEmail, userToken }) {
   return (
     <div className="Header d-flex flex-items-center flex-justify-between">
@@ -16,29 +16,24 @@ export default function Header({ userEmail, userToken }) {
       </a>
       <div className="Header-item mr-0">
         <div>
-          <details className="dropdown details-reset details-overlay d-inline-block">
-            <summary className="btn" aria-haspopup="true">
-              Account
-              <div className="dropdown-caret"></div>
+          <details className="dropdown relative">
+            <summary className="btn cursor-pointer px-4 py-2 text-white bg-blue-500 rounded-md shadow-md hover:bg-gray-200 transition-colors duration-200">
+              {userEmail}
+              <div className="dropdown-caret ml-2 w-4 h-4"></div>
             </summary>
 
-            <ul className="dropdown-menu dropdown-menu-sw">
-              <li>
-                <a className="dropdown-item" href="#url">
-                  {userEmail}
-                </a>
-              </li>
+            <ul className="dropdown-menu dropdown-menu-sw mt-2 w-96 bg-white rounded-md shadow-lg ring-1 ring-black ring-opacity-5 border border-gray-200">
               <li>
                 <a
-                  className="dropdown-item"
-                  href={"https://github.com/apps/watermelon-context"}
+                  className="dropdown-item block px-4 py-2 text-gray-800 hover:bg-gray-200 transition-colors duration-200"
+                  href="https://github.com/apps/watermelon-context"
                 >
                   GitHub App
                 </a>
               </li>
               <li>
                 <a
-                  className="dropdown-item"
+                  className="dropdown-item block px-4 py-2 text-gray-800 hover:bg-gray-200 transition-colors duration-200"
                   href={`vscode://watermelontools.watermelon-tools?email=${
                     userEmail ?? ""
                   }&token=${userToken ? userToken : ""}`}
@@ -48,22 +43,27 @@ export default function Header({ userEmail, userToken }) {
               </li>
               <li>
                 <a
-                  className="dropdown-item"
+                  className="dropdown-item block px-4 py-2 text-gray-800 hover:bg-gray-200 transition-colors duration-200"
                   href={`https://docs.watermelontools.com/`}
                 >
                   API Docs
                 </a>
               </li>
               <li>
                 <a
-                  className="dropdown-item"
+                  className="dropdown-item block px-4 py-2 text-gray-800 hover:bg-gray-200 transition-colors duration-200"
                   href={`https://app.watermelontools.com/settings`}
                 >
                   Settings
                 </a>
               </li>
-              <li className="d-flex flex-items-center flex-justify-center">
-                <HeaderSignOut />
+              <li>
+                <a
+                  className="dropdown-item block px-4 py-2 text-gray-800 hover:bg-gray-200 transition-colors duration-200"
+                  href={`https://discord.com/invite/H4AE6b9442`}
+                >
+                  Get Help
+                </a>
               </li>
             </ul>
           </details>

diff --git a/components/HeaderSignOut.tsx b/components/HeaderSignOut.tsx