a tool for shared writing and social publishing
bunch of styling things to make it look nice
+87
-64
+81
-59
components/LoginButton.tsx
+81
-59
components/LoginButton.tsx
···
19
19
import { InfoSmall } from "./Icons/InfoSmall";
20
20
import { HelpSmall } from "./Icons/HelpSmall";
21
21
import { HelpTiny } from "./Icons/HelpTiny";
22
+
import { BlueskyTiny } from "./Icons/BlueskyTiny";
22
23
23
24
export function LoginButton() {
24
25
let identityData = useIdentityData();
···
63
64
{ value: "log in", label: "Log In" },
64
65
{ value: "sign up", label: "Sign Up" },
65
66
]}
67
+
fullWidth
66
68
/>
67
-
{state === "log in" ? (
68
-
<>
69
-
<div className="flex justify-between">
70
-
<h4>Log into the Atmosphere</h4>
71
-
<AtmosphericHandleInfo trigger={<HelpTiny />} />
72
-
</div>
73
-
<HandleInput
74
-
large
75
-
action={<GoToArrow className="text-accent-contrast" />}
76
-
/>
77
-
<hr className="border-border-light" />
78
-
<button
79
-
className="text-sm text-accent-contrast"
80
-
onClick={() => {
81
-
setState("email log in");
82
-
}}
83
-
>
84
-
or log in with email
85
-
</button>
86
-
</>
87
-
) : state === "email log in" ? (
88
-
<>
89
-
<h4>Log in with Email</h4>
69
+
<div className="accent-container flex flex-col gap-1 p-3 pt-4">
70
+
{state === "log in" ? (
71
+
<>
72
+
<div className="flex flex-col mx-auto leading-snug pb-0.5">
73
+
<h3>Log into the Atmosphere</h3>
74
+
<AtmosphericHandleInfo
75
+
trigger={
76
+
<div className="text-sm text-accent-contrast">
77
+
What's that?
78
+
</div>
79
+
}
80
+
/>
81
+
</div>
82
+
<HandleInput
83
+
large
84
+
action={<GoToArrow className="text-accent-contrast" />}
85
+
/>
86
+
<hr className="border-border-light mt-2 mb-1" />
87
+
<button
88
+
className="text-sm text-accent-contrast"
89
+
onClick={() => {
90
+
setState("email log in");
91
+
}}
92
+
>
93
+
or log in with email
94
+
</button>
95
+
</>
96
+
) : state === "email log in" ? (
97
+
<>
98
+
<h3 className="text-center">Log in with Email</h3>
90
99
91
-
<EmailInput
92
-
large
93
-
value={loginEmail}
94
-
onChange={setLoginEmail}
95
-
action={
96
-
<Modal
97
-
trigger={
98
-
<GoToArrow
99
-
className="h-fit
100
+
<EmailInput
101
+
large
102
+
value={loginEmail}
103
+
onChange={setLoginEmail}
104
+
action={
105
+
<Modal
106
+
trigger={
107
+
<GoToArrow
108
+
className="h-fit
100
109
"
110
+
/>
111
+
}
112
+
>
113
+
<EmailConfirm
114
+
emailValue={loginEmail}
115
+
onSubmit={() => {
116
+
toaster({
117
+
content: <div className="font-bold">Welcome back!</div>,
118
+
type: "success",
119
+
});
120
+
}}
101
121
/>
102
-
}
103
-
>
104
-
<EmailConfirm
105
-
emailValue={loginEmail}
106
-
onSubmit={() => {
107
-
toaster({
108
-
content: <div className="font-bold">Welcome back!</div>,
109
-
type: "success",
110
-
});
111
-
}}
112
-
/>
113
-
</Modal>
114
-
}
115
-
/>
116
-
<hr className="border-border-light" />
117
-
<button
118
-
className="text-accent-contrast text-sm"
119
-
onClick={() => {
120
-
setState("log in");
121
-
}}
122
-
>
123
-
or log in with the Atmosphere
124
-
</button>
125
-
</>
126
-
) : (
127
-
<>heckin make a bluesky account yo</>
128
-
)}
122
+
</Modal>
123
+
}
124
+
/>
125
+
<hr className="border-border-light my-2" />
126
+
<button
127
+
className="text-accent-contrast text-sm"
128
+
onClick={() => {
129
+
setState("log in");
130
+
}}
131
+
>
132
+
or log in with the Atmosphere
133
+
</button>
134
+
</>
135
+
) : (
136
+
<div className="text-center text-sm">
137
+
<h3 className="pb-1">
138
+
Leaflet is part of <br />
139
+
the Atmosphere.
140
+
</h3>
141
+
<div className="text-secondary pb-2">
142
+
Create an Atmosphere account on Bluesky to get started!
143
+
</div>
144
+
<ButtonPrimary className="mx-auto mb-1">
145
+
<BlueskyTiny /> Sign up via Bluesky
146
+
</ButtonPrimary>
147
+
<AtmosphericHandleInfo />
148
+
</div>
149
+
)}
150
+
</div>
129
151
{/*<LoginForm text="Save your Leaflets and access them on multiple devices!" />*/}
130
152
</Popover>
131
153
);
+1
-1
components/Subscribe/EmailSubscribe.tsx
+1
-1
components/Subscribe/EmailSubscribe.tsx
···
17
17
>
18
18
<Input
19
19
autoFocus={props.autoFocus}
20
-
className={`appearance-none! outline-none! grow ${props.large ? "py-2!" : "py-0.5 "}`}
20
+
className={`appearance-none! outline-none! grow ${props.large ? "py-1!" : "py-0.5 "}`}
21
21
disabled={props.disabled}
22
22
placeholder="email@example.com"
23
23
size={0}
+2
-2
components/Subscribe/HandleSubscribe.tsx
+2
-2
components/Subscribe/HandleSubscribe.tsx
···
84
84
</div>
85
85
<Input
86
86
autoFocus={props.autoFocus}
87
-
className={`appearance-none! grow outline-none! ${props.large ? "py-2!" : "py-0.5 "} `}
87
+
className={`appearance-none! grow outline-none! ${props.large ? "py-1!" : "py-0.5 "} `}
88
88
placeholder="atmosphere.handle"
89
89
size={0}
90
90
value={handleValue}
···
172
172
</div>
173
173
174
174
<ButtonPrimary fullWidth className="mx-auto mb-3 mt-1">
175
-
Sign up through Bluesky!
175
+
Sign up via Bluesky!
176
176
</ButtonPrimary>
177
177
</Popover>
178
178
);
+3
-2
components/ToggleGroup.tsx
+3
-2
components/ToggleGroup.tsx
···
6
6
options: { value: T; label: ReactNode }[];
7
7
className?: string;
8
8
optionClassName?: string;
9
+
fullWidth?: boolean;
9
10
}) {
10
11
return (
11
12
<div
12
-
className={`flex gap-1 p-1 bg-accent-1 rounded-lg text-sm w-fit ${props.className || ""}`}
13
+
className={`flex gap-1 p-1 bg-accent-1 rounded-lg text-sm ${props.fullWidth ? "w-full" : "w-fit"} ${props.className || ""}`}
13
14
>
14
15
{props.options.map((option) => (
15
16
<button
16
17
key={option.value}
17
18
type="button"
18
-
className={`px-1 rounded-md font-bold ${
19
+
className={`px-1 rounded-md font-bold ${props.fullWidth ? "flex-1" : ""} ${
19
20
props.value === option.value
20
21
? "bg-accent-2 text-accent-1"
21
22
: "bg-transparent text-accent-2"