From f39cba8e3035aac23db55dbb68301e0596fafec6 Mon Sep 17 00:00:00 2001
From: celine <celine@hyperlink.academy>
Date: Mon, 13 Apr 2026 00:31:46 -0400
Subject: [PATCH] bunch of styling things to make it look nice

---
 components/LoginButton.tsx               | 140 +++++++++++++----------
 components/Subscribe/EmailSubscribe.tsx  |   2 +-
 components/Subscribe/HandleSubscribe.tsx |   4 +-
 components/ToggleGroup.tsx               |   5 +-
 4 files changed, 87 insertions(+), 64 deletions(-)

diff --git a/components/LoginButton.tsx b/components/LoginButton.tsx
index 5d576061..8e3213f2 100644
--- a/components/LoginButton.tsx
+++ b/components/LoginButton.tsx
@@ -19,6 +19,7 @@ import { useToaster } from "./Toast";
 import { InfoSmall } from "./Icons/InfoSmall";
 import { HelpSmall } from "./Icons/HelpSmall";
 import { HelpTiny } from "./Icons/HelpTiny";
+import { BlueskyTiny } from "./Icons/BlueskyTiny";
 
 export function LoginButton() {
   let identityData = useIdentityData();
@@ -63,69 +64,90 @@ export function LoginActionButton() {
           { value: "log in", label: "Log In" },
           { value: "sign up", label: "Sign Up" },
         ]}
+        fullWidth
       />
-      {state === "log in" ? (
-        <>
-          <div className="flex justify-between">
-            <h4>Log into the Atmosphere</h4>
-            <AtmosphericHandleInfo trigger={<HelpTiny />} />
-          </div>
-          <HandleInput
-            large
-            action={<GoToArrow className="text-accent-contrast" />}
-          />
-          <hr className="border-border-light" />
-          <button
-            className="text-sm text-accent-contrast"
-            onClick={() => {
-              setState("email log in");
-            }}
-          >
-            or log in with email
-          </button>
-        </>
-      ) : state === "email log in" ? (
-        <>
-          <h4>Log in with Email</h4>
-
-          <EmailInput
-            large
-            value={loginEmail}
-            onChange={setLoginEmail}
-            action={
-              <Modal
+      <div className="accent-container flex flex-col gap-1 p-3 pt-4">
+        {state === "log in" ? (
+          <>
+            <div className="flex flex-col  mx-auto leading-snug pb-0.5">
+              <h3>Log into the Atmosphere</h3>
+              <AtmosphericHandleInfo
                 trigger={
-                  <GoToArrow
-                    className="h-fit
+                  <div className="text-sm text-accent-contrast">
+                    What's that?
+                  </div>
+                }
+              />
+            </div>
+            <HandleInput
+              large
+              action={<GoToArrow className="text-accent-contrast" />}
+            />
+            <hr className="border-border-light mt-2 mb-1" />
+            <button
+              className="text-sm text-accent-contrast"
+              onClick={() => {
+                setState("email log in");
+              }}
+            >
+              or log in with email
+            </button>
+          </>
+        ) : state === "email log in" ? (
+          <>
+            <h3 className="text-center">Log in with Email</h3>
+
+            <EmailInput
+              large
+              value={loginEmail}
+              onChange={setLoginEmail}
+              action={
+                <Modal
+                  trigger={
+                    <GoToArrow
+                      className="h-fit
                 "
+                    />
+                  }
+                >
+                  <EmailConfirm
+                    emailValue={loginEmail}
+                    onSubmit={() => {
+                      toaster({
+                        content: <div className="font-bold">Welcome back!</div>,
+                        type: "success",
+                      });
+                    }}
                   />
-                }
-              >
-                <EmailConfirm
-                  emailValue={loginEmail}
-                  onSubmit={() => {
-                    toaster({
-                      content: <div className="font-bold">Welcome back!</div>,
-                      type: "success",
-                    });
-                  }}
-                />
-              </Modal>
-            }
-          />
-          <hr className="border-border-light" />
-          <button
-            className="text-accent-contrast text-sm"
-            onClick={() => {
-              setState("log in");
-            }}
-          >
-            or log in with the Atmosphere
-          </button>
-        </>
-      ) : (
-        <>heckin make a bluesky account yo</>
-      )}
+                </Modal>
+              }
+            />
+            <hr className="border-border-light my-2" />
+            <button
+              className="text-accent-contrast text-sm"
+              onClick={() => {
+                setState("log in");
+              }}
+            >
+              or log in with the Atmosphere
+            </button>
+          </>
+        ) : (
+          <div className="text-center text-sm">
+            <h3 className="pb-1">
+              Leaflet is part of <br />
+              the Atmosphere.
+            </h3>
+            <div className="text-secondary pb-2">
+              Create an Atmosphere account on Bluesky to get started!
+            </div>
+            <ButtonPrimary className="mx-auto mb-1">
+              <BlueskyTiny /> Sign up via Bluesky
+            </ButtonPrimary>
+            <AtmosphericHandleInfo />
+          </div>
+        )}
+      </div>
       {/*<LoginForm text="Save your Leaflets and access them on multiple devices!" />*/}
     </Popover>
   );
diff --git a/components/Subscribe/EmailSubscribe.tsx b/components/Subscribe/EmailSubscribe.tsx
index c4013565..18fc7319 100644
--- a/components/Subscribe/EmailSubscribe.tsx
+++ b/components/Subscribe/EmailSubscribe.tsx
@@ -17,7 +17,7 @@ export const EmailInput = (props: {
     >
       <Input
         autoFocus={props.autoFocus}
-        className={`appearance-none! outline-none! grow ${props.large ? "py-2!" : "py-0.5 "}`}
+        className={`appearance-none! outline-none! grow ${props.large ? "py-1!" : "py-0.5 "}`}
         disabled={props.disabled}
         placeholder="email@example.com"
         size={0}
diff --git a/components/Subscribe/HandleSubscribe.tsx b/components/Subscribe/HandleSubscribe.tsx
index 67448b46..a014a6f7 100644
--- a/components/Subscribe/HandleSubscribe.tsx
+++ b/components/Subscribe/HandleSubscribe.tsx
@@ -84,7 +84,7 @@ export const HandleInput = (props: {
       </div>
       <Input
         autoFocus={props.autoFocus}
-        className={`appearance-none! grow outline-none!  ${props.large ? "py-2!" : "py-0.5 "} `}
+        className={`appearance-none! grow outline-none!  ${props.large ? "py-1!" : "py-0.5 "} `}
         placeholder="atmosphere.handle"
         size={0}
         value={handleValue}
@@ -172,7 +172,7 @@ export const AtmosphericHandleInfo = (props: { trigger?: React.ReactNode }) => {
       </div>
 
       <ButtonPrimary fullWidth className="mx-auto mb-3 mt-1">
-        Sign up through Bluesky!
+        Sign up via Bluesky!
       </ButtonPrimary>
     </Popover>
   );
diff --git a/components/ToggleGroup.tsx b/components/ToggleGroup.tsx
index f671f52c..18b5d8dc 100644
--- a/components/ToggleGroup.tsx
+++ b/components/ToggleGroup.tsx
@@ -6,16 +6,17 @@ export function ToggleGroup<T extends string>(props: {
   options: { value: T; label: ReactNode }[];
   className?: string;
   optionClassName?: string;
+  fullWidth?: boolean;
 }) {
   return (
     <div
-      className={`flex gap-1 p-1 bg-accent-1 rounded-lg text-sm w-fit ${props.className || ""}`}
+      className={`flex gap-1 p-1 bg-accent-1 rounded-lg text-sm ${props.fullWidth ? "w-full" : "w-fit"} ${props.className || ""}`}
     >
       {props.options.map((option) => (
         <button
           key={option.value}
           type="button"
-          className={`px-1 rounded-md font-bold ${
+          className={`px-1 rounded-md font-bold ${props.fullWidth ? "flex-1" : ""} ${
             props.value === option.value
               ? "bg-accent-2  text-accent-1"
               : "bg-transparent text-accent-2"
-- 
2.51.2