From dc3320c244f178938f8480b5440d899c096b5630 Mon Sep 17 00:00:00 2001
From: Sara Vieira <hey@iamsaravieira.com>
Date: Sat, 2 Jul 2022 19:49:48 +0200
Subject: [PATCH 1/5] add google login

---
 app/auth/login.tsx          | 4 ++--
 app/routes/login/index.tsx  | 8 +++++++-
 app/services/auth.server.ts | 9 +++++----
 3 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/app/auth/login.tsx b/app/auth/login.tsx
index f03e922a89..74375f714b 100644
--- a/app/auth/login.tsx
+++ b/app/auth/login.tsx
@@ -52,7 +52,7 @@ export const Login = ({ errorMessage }: { errorMessage: string }) => {
           ) : null}
           <Flex gap="2" direction="column" align="center">
             <Form action="/auth/github" method="post">
-              <Button type="submit">
+              <Button type="submit" disabled={!loaderData.githubEnabled}>
                 <Flex gap="1">
                   <GithubIcon width="16" />
                   Login with GitHub
@@ -60,7 +60,7 @@ export const Login = ({ errorMessage }: { errorMessage: string }) => {
               </Button>
             </Form>
             <Form action="/auth/google" method="post">
-              <Button type="submit" disabled>
+              <Button type="submit" disabled={!loaderData.googleEnabled}>
                 <Flex gap="1">
                   <GoogleIcon width="16" />
                   Login with Google
diff --git a/app/routes/login/index.tsx b/app/routes/login/index.tsx
index 0b6a9b438e..101d8f860d 100644
--- a/app/routes/login/index.tsx
+++ b/app/routes/login/index.tsx
@@ -15,7 +15,13 @@ export const loader: LoaderFunction = async ({ request }) => {
     return redirect(config.dashboardPath);
   }
 
-  return { devLogin: process.env.DEV_LOGIN === "true", env };
+  return {
+    devLogin: process.env.DEV_LOGIN === "true",
+    env,
+    githubEnabled: process.env.GH_CLIENT_ID && process.env.GH_CLIENT_SECRET,
+    googleEnabled:
+      process.env.GOOGLE_CLIENT_ID && process.env.GOOGLE_CLIENT_SECRET,
+  };
 };
 
 const LoginRoute = () => {
diff --git a/app/services/auth.server.ts b/app/services/auth.server.ts
index fcad2e1beb..f9f541a2aa 100644
--- a/app/services/auth.server.ts
+++ b/app/services/auth.server.ts
@@ -34,8 +34,8 @@ const github = new GitHubStrategy(
 
 const google = new GoogleStrategy(
   {
-    clientID: "YOUR_CLIENT_ID",
-    clientSecret: "YOUR_CLIENT_SECRET",
+    clientID: process.env.GOOGLE_CLIENT_ID as string,
+    clientSecret: process.env.GOOGLE_CLIENT_SECRET as string,
     callbackURL: `${url}${config.googleCallbackPath}`,
   },
   async ({ profile, context }) => {
@@ -51,8 +51,9 @@ export const authenticator = new Authenticator<User>(sessionStorage);
 if (process.env.GH_CLIENT_ID && process.env.GH_CLIENT_SECRET) {
   authenticator.use(github, "github");
 }
-authenticator.use(google, "google");
-
+if (process.env.GOOGLE_CLIENT_ID && process.env.GOOGLE_CLIENT_SECRET) {
+  authenticator.use(google, "google");
+}
 if (process.env.DEV_LOGIN === "true") {
   authenticator.use(
     new FormStrategy(async ({ form }) => {

From 3db4dbdf538f8fa742350ad7ad94ed68f9627688 Mon Sep 17 00:00:00 2001
From: Sara Vieira <hey@iamsaravieira.com>
Date: Sat, 2 Jul 2022 19:53:35 +0200
Subject: [PATCH 2/5] remove `ENABLE_FILE_SYSTEM_API` environment variable, it
 is no longer required for Remix applications.

---
 vercel.json | 7 -------
 1 file changed, 7 deletions(-)
 delete mode 100644 vercel.json

diff --git a/vercel.json b/vercel.json
deleted file mode 100644
index dcfba92eda..0000000000
--- a/vercel.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "build": {
-    "env": {
-      "ENABLE_FILE_SYSTEM_API": "1"
-    }
-  }
-}

From 4ba56934a9101cac1c6443d28b944232d53f63cc Mon Sep 17 00:00:00 2001
From: Sara Vieira <hey@iamsaravieira.com>
Date: Sat, 2 Jul 2022 20:00:12 +0200
Subject: [PATCH 3/5] fix cookie

---
 app/services/session.server.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/services/session.server.ts b/app/services/session.server.ts
index 3d9e473d35..79e30d84f7 100644
--- a/app/services/session.server.ts
+++ b/app/services/session.server.ts
@@ -3,6 +3,7 @@ import { createCookieSessionStorage } from "@remix-run/node";
 // export the whole sessionStorage object
 export const sessionStorage = createCookieSessionStorage({
   cookie: {
+    maxAge: 60 * 60 * 24 * 30,
     name: "_session", // use any name you want here
     sameSite: "lax", // this helps with CSRF
     path: "/", // remember to add this so the cookie will work in all routes

From 75611aa4366dc4201a48f3de19104d66b8439bbd Mon Sep 17 00:00:00 2001
From: Sara Vieira <hey@iamsaravieira.com>
Date: Tue, 5 Jul 2022 18:24:12 +0200
Subject: [PATCH 4/5] fix PR comments

---
 app/auth/login.tsx         | 12 +++++++++---
 app/routes/login/index.tsx |  6 +++---
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/app/auth/login.tsx b/app/auth/login.tsx
index 0a8b4bb862..b4174e5b76 100644
--- a/app/auth/login.tsx
+++ b/app/auth/login.tsx
@@ -52,7 +52,10 @@ export const Login = ({ errorMessage }: { errorMessage: string }) => {
           ) : null}
           <Flex gap="2" direction="column" align="center">
             <Form action="/auth/github" method="post">
-              <Button type="submit" disabled={!loaderData.githubEnabled}>
+              <Button
+                type="submit"
+                disabled={loaderData.isGithubEnabled === false}
+              >
                 <Flex gap="1">
                   <GithubIcon width="16" />
                   Login with GitHub
@@ -60,14 +63,17 @@ export const Login = ({ errorMessage }: { errorMessage: string }) => {
               </Button>
             </Form>
             <Form action="/auth/google" method="post">
-              <Button type="submit" disabled={!loaderData.googleEnabled}>
+              <Button
+                type="submit"
+                disabled={loaderData.isGoogleEnabled === false}
+              >
                 <Flex gap="1">
                   <GoogleIcon width="16" />
                   Login with Google
                 </Flex>
               </Button>
             </Form>
-            {loaderData.devLogin && (
+            {loaderData.isDevLogin && (
               <>
                 {isDevLogin ? (
                   <Form action="/auth/dev" method="post">
diff --git a/app/routes/login/index.tsx b/app/routes/login/index.tsx
index 101d8f860d..592b9a3691 100644
--- a/app/routes/login/index.tsx
+++ b/app/routes/login/index.tsx
@@ -16,10 +16,10 @@ export const loader: LoaderFunction = async ({ request }) => {
   }
 
   return {
-    devLogin: process.env.DEV_LOGIN === "true",
+    isDevLogin: process.env.DEV_LOGIN === "true",
     env,
-    githubEnabled: process.env.GH_CLIENT_ID && process.env.GH_CLIENT_SECRET,
-    googleEnabled:
+    isGithubEnabled: process.env.GH_CLIENT_ID && process.env.GH_CLIENT_SECRET,
+    isGoogleEnabled:
       process.env.GOOGLE_CLIENT_ID && process.env.GOOGLE_CLIENT_SECRET,
   };
 };

From 7c83daae055d7e49767ac25b820ba71092655cf1 Mon Sep 17 00:00:00 2001
From: Sara Vieira <hey@iamsaravieira.com>
Date: Tue, 5 Jul 2022 18:42:04 +0200
Subject: [PATCH 5/5] make size of cards readable

---
 app/auth/login.tsx                            | 24 +++++++++++--------
 app/dashboard/components/card.tsx             | 15 ++++++++----
 app/shared/design-system/components/card.tsx  | 16 ++++++++++---
 .../design-system/components/select.tsx       | 10 +++++---
 4 files changed, 45 insertions(+), 20 deletions(-)

diff --git a/app/auth/login.tsx b/app/auth/login.tsx
index b4174e5b76..d37bde959a 100644
--- a/app/auth/login.tsx
+++ b/app/auth/login.tsx
@@ -33,7 +33,7 @@ export const meta: MetaFunction = () => {
 
 export const Login = ({ errorMessage }: { errorMessage: string }) => {
   const [isDevLogin, setIsDevLogin] = useState(false);
-  const loaderData = useLoaderData();
+  const data = useLoaderData();
 
   return (
     <Flex
@@ -42,9 +42,9 @@ export const Login = ({ errorMessage }: { errorMessage: string }) => {
       align="center"
       justify="center"
     >
-      <Card>
-        <Flex direction="column" gap="2" align="center">
-          <Heading>Login</Heading>
+      <Card size={2}>
+        <Flex direction="column" gap="4" align="center">
+          <Heading size="2">Login</Heading>
           {errorMessage.length ? (
             <Text css={{ textAlign: "center" }} variant="red">
               {errorMessage}
@@ -53,31 +53,34 @@ export const Login = ({ errorMessage }: { errorMessage: string }) => {
           <Flex gap="2" direction="column" align="center">
             <Form action="/auth/github" method="post">
               <Button
+                size={3}
                 type="submit"
-                disabled={loaderData.isGithubEnabled === false}
+                disabled={data.isGithubEnabled === false}
               >
                 <Flex gap="1">
-                  <GithubIcon width="16" />
+                  <GithubIcon width="20" />
                   Login with GitHub
                 </Flex>
               </Button>
             </Form>
             <Form action="/auth/google" method="post">
               <Button
+                size={3}
                 type="submit"
-                disabled={loaderData.isGoogleEnabled === false}
+                disabled={data.isGoogleEnabled === false}
               >
                 <Flex gap="1">
-                  <GoogleIcon width="16" />
+                  <GoogleIcon width="20" />
                   Login with Google
                 </Flex>
               </Button>
             </Form>
-            {loaderData.isDevLogin && (
+            {data.isDevLogin && (
               <>
                 {isDevLogin ? (
                   <Form action="/auth/dev" method="post">
                     <TextField
+                      size={2}
                       css={{ width: "100%", flexGrow: 1 }}
                       name="secret"
                       type="text"
@@ -90,10 +93,11 @@ export const Login = ({ errorMessage }: { errorMessage: string }) => {
                 ) : (
                   <Button
                     onClick={() => setIsDevLogin(true)}
+                    size={3}
                     css={{ width: "100%" }}
                   >
                     <Flex gap="1" align="center">
-                      <CommitIcon></CommitIcon>
+                      <CommitIcon width="20" />
                       Dev Login
                     </Flex>
                   </Button>
diff --git a/app/dashboard/components/card.tsx b/app/dashboard/components/card.tsx
index 4289f5f67b..2e42769fcf 100644
--- a/app/dashboard/components/card.tsx
+++ b/app/dashboard/components/card.tsx
@@ -35,10 +35,13 @@ export const SelectProjectCard = ({
   const options = ["", ...projects.map((project) => project.id)];
 
   return (
-    <Card>
-      <Flex direction="column" gap="2">
-        <Heading>Select a project</Heading>
+    <Card size={2}>
+      <Flex direction="column" gap="4">
+        <Heading size="2" css={{ textAlign: "center" }}>
+          Select a project
+        </Heading>
         <Select
+          size={2}
           name="project"
           options={options}
           onChange={setSelectedProject}
@@ -53,6 +56,7 @@ export const SelectProjectCard = ({
           <Form method="post">
             <Flex gap="1">
               <TextField
+                size={2}
                 state={errors ? "invalid" : undefined}
                 name="project"
                 defaultValue={newProject}
@@ -64,6 +68,7 @@ export const SelectProjectCard = ({
                 }}
               />
               <Button
+                size={2}
                 disabled={
                   newProject.length === 0 || transition.state === "submitting"
                 }
@@ -79,7 +84,9 @@ export const SelectProjectCard = ({
             ) : null}
           </Form>
         ) : (
-          <Button onClick={handleOpen}>Open</Button>
+          <Button onClick={handleOpen} size={2}>
+            Open
+          </Button>
         )}
       </Flex>
     </Card>
diff --git a/app/shared/design-system/components/card.tsx b/app/shared/design-system/components/card.tsx
index f971138949..317e7b8517 100644
--- a/app/shared/design-system/components/card.tsx
+++ b/app/shared/design-system/components/card.tsx
@@ -7,12 +7,9 @@ export const Card = styled("div", {
   font: "inherit",
   lineHeight: "1",
   outline: "none",
-  width: "$10",
-  padding: "$5",
   textAlign: "inherit",
   verticalAlign: "middle",
   WebkitTapHighlightColor: "rgba(0, 0, 0, 0)",
-
   backgroundColor: "$panel",
   display: "block",
   textDecoration: "none",
@@ -35,6 +32,16 @@ export const Card = styled("div", {
   },
 
   variants: {
+    size: {
+      1: {
+        width: "$10",
+        padding: "$5",
+      },
+      2: {
+        width: "$12",
+        padding: "$7",
+      },
+    },
     variant: {
       interactive: {
         "@hover": {
@@ -97,4 +104,7 @@ export const Card = styled("div", {
       },
     },
   },
+  defaultVariants: {
+    size: "1",
+  },
 });
diff --git a/app/shared/design-system/components/select.tsx b/app/shared/design-system/components/select.tsx
index 12f09ef3b8..02ab07ba04 100644
--- a/app/shared/design-system/components/select.tsx
+++ b/app/shared/design-system/components/select.tsx
@@ -14,10 +14,7 @@ const StyledTrigger = styled(SelectPrimitive.SelectTrigger, {
   display: "inline-flex",
   alignItems: "center",
   justifyContent: "space-between",
-  padding: "0 $1 0 $2",
-  fontSize: "$1",
   fontVariantNumeric: "tabular-nums",
-  height: "$5",
   gap: "$2",
   flexShrink: 0,
   borderRadius: "$1",
@@ -33,6 +30,10 @@ const StyledTrigger = styled(SelectPrimitive.SelectTrigger, {
   },
 
   variants: {
+    size: {
+      1: { padding: "0 $1 0 $2", fontSize: "$1", height: "$5" },
+      2: { padding: "0 $2 0 $3", height: "$6", fontSize: "$3" },
+    },
     ghost: {
       true: {
         backgroundColor: "transparent",
@@ -45,6 +46,9 @@ const StyledTrigger = styled(SelectPrimitive.SelectTrigger, {
       },
     },
   },
+  defaultVariants: {
+    size: 1,
+  },
 });
 
 const StyledIcon = styled(SelectPrimitive.Icon, {