"Dev connecting" icon update + text color fix for the purple login buttons (#1835)

* Updates the large login buttons to the new purple style

* Updates the dev checking connection icon to include 3 dots on the screen

* Fixes svg property names

Author: samejr

apps/webapp/app/assets/icons/ConnectionIcons.tsx

@@ -65,6 +65,9 @@ export function CheckingConnectionIcon({ className }: { className?: string }) {
         d="M18 6.5L6.00001 6.5C5.72387 6.5 5.50001 6.72386 5.50001 7L5.50001 15C5.50001 15.2761 5.72387 15.5 6.00001 15.5L18 15.5C18.2762 15.5 18.5 15.2761 18.5 15V7C18.5 6.72386 18.2762 6.5 18 6.5ZM6.00001 5C4.89545 5 4.00001 5.89543 4.00001 7L4.00001 15C4.00001 16.1046 4.89545 17 6.00001 17L18 17C19.1046 17 20 16.1046 20 15V7C20 5.89543 19.1046 5 18 5L6.00001 5Z"
         fill="#878C99"
       />
+      <circle cx="9" cy="11" r="1" fill="#878C99" />
+      <circle cx="12" cy="11" r="1" fill="#878C99" />
+      <circle cx="15" cy="11" r="1" fill="#878C99" />
     </svg>
   );
 }

apps/webapp/app/routes/login._index/route.tsx

@@ -1,7 +1,7 @@
 import { EnvelopeIcon } from "@heroicons/react/20/solid";
 import type { LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
 import { Form } from "@remix-run/react";
-import { GitHubDarkIcon } from "@trigger.dev/companyicons";
+import { GitHubLightIcon } from "@trigger.dev/companyicons";
 import { redirect, typedjson, useTypedLoaderData } from "remix-typedjson";
 import { LoginPageLayout } from "~/components/LoginPageLayout";
 import { Button, LinkButton } from "~/components/primitives/Buttons";
@@ -89,13 +89,13 @@ export default function LoginPage() {
                   fullWidth
                   data-action="continue with github"
                 >
-                  <GitHubDarkIcon className={"mr-2 size-5"} />
-                  <span className="text-charcoal-900">Continue with GitHub</span>
+                  <GitHubLightIcon className={"mr-2 size-5"} />
+                  <span className="text-text-bright">Continue with GitHub</span>
                 </Button>
               )}
               <LinkButton
                 to="/login/magic"
-                variant="tertiary/extra-large"
+                variant="secondary/extra-large"
                 fullWidth
                 data-action="continue with email"
                 className="text-text-bright"

apps/webapp/app/routes/login.magic/route.tsx

@@ -175,14 +175,14 @@ export default function LoginMagicLinkPage() {
                   data-action="send a magic link"
                 >
                   {isLoading ? (
-                    <Spinner className="mr-2 size-5 text-background-dimmed" color="dark" />
+                    <Spinner className="mr-2 size-5" color="white" />
                   ) : (
-                    <EnvelopeIcon className="mr-2 size-5 text-background-dimmed" />
+                    <EnvelopeIcon className="mr-2 size-5 text-text-bright" />
                   )}
                   {isLoading ? (
-                    <span className="text-background-dimmed">Sending…</span>
+                    <span className="text-text-bright">Sending…</span>
                   ) : (
-                    <span className="text-background-dimmed">Send a magic link</span>
+                    <span className="text-text-bright">Send a magic link</span>
                   )}
                 </Button>
                 {magicLinkError && <FormError>{magicLinkError}</FormError>}