Merge pull request #339 from watermelontools/enhancement/beautify-das…

…hboard Enhancement/beautify dashboard
watermelontools · Oct 27, 2023 · 9c07826 · 9c07826
2 parents 72b539f + 4ad49a4
commit 9c07826
Show file tree

Hide file tree

Showing 17 changed files with 308 additions and 221 deletions.
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/app/(loggedIn)/settings/form.tsx b/app/(loggedIn)/settings/form.tsx
@@ -67,10 +67,11 @@ export default function form({ userEmail }) {
 
   function SettingsSelector({ label, valueLabel }) {
     return (
-      <div className="">
-        <span>{label}</span>
+      <div style={{ display: "flex", alignItems: "center" }}>
+        {" "}
+        <span style={{ width: "100px" }}>{label}</span>{" "}
         <select
-          className="form-select"
+          className="form-select mt-2"
           aria-label={label}
           defaultValue={formState[valueLabel]}
           onChange={(e) =>
@@ -81,12 +82,14 @@ export default function form({ userEmail }) {
           }
           value={formState[valueLabel]}
         >
+          {" "}
           {Array.from({ length: 5 }, (_, index) => (
             <option key={index} value={index + 1}>
-              {index + 1}
+              {" "}
+              {index + 1}{" "}
             </option>
-          ))}
-        </select>
+          ))}{" "}
+        </select>{" "}
       </div>
     );
   }
@@ -99,10 +102,10 @@ export default function form({ userEmail }) {
           label={service.label}
         />
       ))}
-      <div className="">
+      <div style={{ display: "flex", alignItems: "center" }}>
         <span>AI Summary: </span>
         <select
-          className="form-select"
+          className="form-select ml-3 mt-2"
           aria-label="AI Summary"
           value={formState.AISummary}
           onChange={(e) =>

diff --git a/app/(loggedIn)/team/page.tsx b/app/(loggedIn)/team/page.tsx
@@ -16,36 +16,34 @@ async function Team({}) {
   ]);
 
   return (
-    <div>
-      <div className="p-3">
-        <h1>Team</h1>
-        <div className="">
-          <div className="Subhead">
-            <h2 className="Subhead-heading">My Account</h2>
-            <div className="Subhead-description">Control your own account</div>
-          </div>
-          <div>
-            <p>{userEmail}</p>
-          </div>
+    <div className="Box">
+      <div className="Subhead px-3 py-2">
+        <h2 className="Subhead-heading">Team</h2>
+      </div>
+
+      <div className="p-3" style={{ flex: 1 }}>
+        <div className="mb-4">
+          <h3 className="Subhead-heading">My Account</h3>
+
+          <div className="text-gray">{userEmail}</div>
         </div>
-        <div className="">
-          <div className="Subhead">
-            <h2 className="Subhead-heading">My Team</h2>
-          </div>
-          <h3 className="Subhead-heading">Invite</h3>
+
+        <div>
+          <h3 className="Subhead-heading">My Team</h3>
 
           <AddTeammateButton teamName={teamName.name} />
+
           <SendInviteForm teamName={teamName.name} userEmail={userEmail} />
-          <h3 className="Subhead-heading">Teammates</h3>
+
+          <h4 className="mt-4 mb-2">Teammates</h4>
+
           {teammates?.length && (
             <div>
-              {teammates.map((teammate) => {
-                return (
-                  <div key={teammate.email}>
-                    <p>{teammate.email}</p>
-                  </div>
-                );
-              })}
+              {teammates?.map((teammate) => (
+                <div key={teammate.email} className="text-gray">
+                  {teammate.email}
+                </div>
+              ))}
             </div>
           )}
         </div>

diff --git a/app/api/actions/github/route.ts b/app/api/actions/github/route.ts
@@ -327,12 +327,7 @@ export async function POST(request: Request) {
           });
         return NextResponse.json("User not registered");
       }
-      const team = await createTeamAndMatchUser({
-        name: organization.login,
-        id: organization.id,
-        watermelon_user,
-      });
-
+
       const team = await createTeamAndMatchUser({
         name: organization.login,
         id: organization.id,

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;