Skip to content

Commit 7730a4d

Browse files
author
Zaydek Michels-Gualtieri
committed
(Many) tweaks to forms
1 parent 36967f3 commit 7730a4d

File tree

4 files changed

+93
-65
lines changed

4 files changed

+93
-65
lines changed

‎src/components/Forms/SignIn.js‎

Lines changed: 22 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import * as Meta from "components/Meta"
22
import * as SVG from "svgs"
33
import CodexLogo from "components/CodexLogo"
4+
import E from "lib/Emoji"
45
import React from "react"
56
import { SplitViewLHSBlock } from "./SplitView"
67

@@ -26,23 +27,27 @@ const SignInForm = () => (
2627
</p>
2728
</Meta.Label>
2829
</div>
29-
30-
<div className="mt-1 grid grid-cols-2 gap-3">
30+
<div className="mt-1 grid grid-cols-3 gap-3">
3131
<div className="rounded-md shadow-sm">
32-
<Meta.Focusable>
33-
{/* Added bg-gh-gray, removed border
34-
border-gray-300 */}
35-
<button className="form-input flex flex-row justify-center w-full h-12 bg-gh-gray border-none hover:opacity-90 active:opacity-100" aria-label="Sign in with GitHub">
36-
<SVG.GitHubLogo className="w-6 h-6 text-white" />
32+
<Meta.SocialButton>
33+
<button aria-label="Sign in with GitHub">
34+
<SVG.GitHubLogo className="w-5 h-5 text-gh-gray" />
3735
</button>
38-
</Meta.Focusable>
36+
</Meta.SocialButton>
3937
</div>
4038
<div className="rounded-md shadow-sm">
41-
<Meta.Focusable>
42-
<button className="form-input flex flex-row justify-center w-full h-12 border border-gray-300 hover:opacity-90 active:opacity-100" type="button" aria-label="Sign in with Google">
43-
<SVG.GoogleLogo className="w-6 h-6" />
39+
<Meta.SocialButton>
40+
<button aria-label="Sign in with Twitter">
41+
<SVG.TwitterLogo className="w-5 h-5 text-tw-blue" />
4442
</button>
45-
</Meta.Focusable>
43+
</Meta.SocialButton>
44+
</div>
45+
<div className="rounded-md shadow-sm">
46+
<Meta.SocialButton>
47+
<button aria-label="Sign in with Google">
48+
<SVG.GoogleLogo className="w-5 h-5" />
49+
</button>
50+
</Meta.SocialButton>
4651
</div>
4752
</div>
4853

@@ -85,22 +90,19 @@ const SignInForm = () => (
8590
/>
8691
</Meta.InputBlock>
8792

93+
{/* Uses mt-8 not mt-6 */}
8894
<div className="mt-8">
8995
<div className="rounded-md shadow-sm">
9096
<Meta.Focusable>
91-
<button className="flex flex-row justify-center w-full h-12 bg-md-blue-a400 rounded-md hover:opacity-90 active:opacity-100" type="submit">
92-
<Meta.SelectNone>
93-
<p className="flex flex-row items-center font-semibold text-white">
94-
Sign In{" "}
95-
<span className="ml-2" style={{ transform: "scaleX(-1)" }} aria-label="waving hand" role="img">👋</span>
96-
</p>
97-
</Meta.SelectNone>
97+
{/* Uses py-3 not py-2 */}
98+
<button className="px-4 py-3 w-full font-bold text-sm tracking-wider leading-5 text-white bg-md-blue-a400 border border-transparent rounded-md">
99+
SIGN IN
98100
</button>
99101
</Meta.Focusable>
100102
</div>
101103
</div>
102104

103-
<div className="mt-6">
105+
<div className="mt-4">
104106
<p className="text-sm text-gray-600">
105107
We’ll keep you signed in until you click <span className="underline">Sign Out</span>.
106108
</p>

‎src/components/Forms/SignUp.js‎

Lines changed: 28 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import * as Meta from "components/Meta"
22
import * as SVG from "svgs"
33
import CodexLogo from "components/CodexLogo"
4+
import E from "lib/Emoji"
45
import React from "react"
6+
import trimSpaces from "lib/trimSpaces"
57
import { SplitViewRHSBlock } from "./SplitView"
68

79
const SignUpForm = () => (
@@ -26,23 +28,27 @@ const SignUpForm = () => (
2628
</p>
2729
</Meta.Label>
2830
</div>
29-
30-
<div className="mt-1 grid grid-cols-2 gap-3">
31+
<div className="mt-1 grid grid-cols-3 gap-3">
3132
<div className="rounded-md shadow-sm">
32-
<Meta.Focusable>
33-
{/* Added bg-gh-gray, removed border
34-
border-gray-300 */}
35-
<button className="form-input flex flex-row justify-center w-full h-12 bg-gh-gray border-none hover:opacity-90 active:opacity-100" aria-label="Sign in with GitHub">
36-
<SVG.GitHubLogo className="w-6 h-6 text-white" />
33+
<Meta.SocialButton>
34+
<button aria-label="Sign in with GitHub">
35+
<SVG.GitHubLogo className="w-5 h-5 text-gh-gray" />
3736
</button>
38-
</Meta.Focusable>
37+
</Meta.SocialButton>
3938
</div>
4039
<div className="rounded-md shadow-sm">
41-
<Meta.Focusable>
42-
<button className="form-input flex flex-row justify-center w-full h-12 border border-gray-300 hover:opacity-90 active:opacity-100" type="button" aria-label="Sign in with Google">
43-
<SVG.GoogleLogo className="w-6 h-6" />
40+
<Meta.SocialButton>
41+
<button aria-label="Sign in with Twitter">
42+
<SVG.TwitterLogo className="w-5 h-5 text-tw-blue" />
4443
</button>
45-
</Meta.Focusable>
44+
</Meta.SocialButton>
45+
</div>
46+
<div className="rounded-md shadow-sm">
47+
<Meta.SocialButton>
48+
<button aria-label="Sign in with Google">
49+
<SVG.GoogleLogo className="w-5 h-5" />
50+
</button>
51+
</Meta.SocialButton>
4652
</div>
4753
</div>
4854

@@ -69,7 +75,7 @@ const SignUpForm = () => (
6975
spellCheck={false}
7076
type="text"
7177
/>
72-
{"You can always change your email address."}
78+
{/* {"You can always change your email address."} */}
7379
</Meta.InputBlock>
7480

7581
<Meta.InputBlock className="mt-6">
@@ -84,35 +90,27 @@ const SignUpForm = () => (
8490
spellCheck={false}
8591
type="password"
8692
/>
87-
{"You can always change your password."}
93+
{/* {"You can always change your password."} */}
8894
</Meta.InputBlock>
8995

96+
{/* Uses mt-8 not mt-6 */}
9097
<div className="mt-8">
9198
<div className="rounded-md shadow-sm">
9299
<Meta.Focusable>
93-
<button className="flex flex-row justify-center w-full h-12 bg-md-blue-a400 rounded-md hover:opacity-90 active:opacity-100" type="submit">
94-
<Meta.SelectNone>
95-
<p className="flex flex-row items-center font-semibold text-white">
96-
Create Your Codex{" "}
97-
<span className="ml-2" aria-label="partying face" role="img">🥳</span>
98-
</p>
99-
</Meta.SelectNone>
100+
{/* Uses py-3 not py-2 */}
101+
<button className="px-4 py-3 w-full flex flex-row justify-center items-center font-bold text-sm tracking-wider leading-5 text-white bg-md-blue-a400 border border-transparent rounded-md">
102+
CREATE YOUR CODEX{" "}
103+
<span className="ml-2"><E>🥳</E></span>{" "}
104+
<span><E>🎉</E></span>
100105
</button>
101106
</Meta.Focusable>
102107
</div>
103108
</div>
104109

105-
{/* <div className="mt-6"> */}
106-
{/* <p className="text-sm text-gray-600"> */}
107-
{/* By clicking ‘Create Your Codex’,{" "} */}
108-
{/* you agree to our <a href="TODO" className="underline">Terms of Service</a> and <a href="TODO" className="underline">Privacy Policy</a>.{" "} */}
109-
{/* We’ll occasionally send you account related emails. */}
110-
{/* </p> */}
111-
{/* </div> */}
112-
113110
<div className="mt-6">
114111
<p className="text-sm text-gray-600">
115-
We’ll keep you signed in until you click <span className="underline">Sign Out</span>.
112+
By clicking ‘Create Your Codex,’ you agree to our <a href="TODO" className="underline">Terms of Service</a> and <a href="TODO" className="underline">Privacy Policy</a>.{" "}
113+
We’ll occasionally send you account related emails.
116114
</p>
117115
</div>
118116

‎src/components/Meta/index.js‎

Lines changed: 32 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,33 @@ export const Focusable = ({ className, children }) => (
4747
</Transition>
4848
)
4949

50+
// https://tailwindui.com/components/application-ui/forms/sign-in-forms
51+
export const SocialButton = ({ className, children }) => (
52+
<Focusable>
53+
<Transition>
54+
{React.cloneElement(children, {
55+
className: trimSpaces(`${children.props.className}
56+
px-4 py-2 w-full inline-flex flex-row justify-center leading-5 bg-white border border-gray-300 focus:border-blue-300 rounded-md hover:opacity-90 active:opacity-100
57+
${className}`),
58+
})}
59+
</Transition>
60+
</Focusable>
61+
)
62+
63+
// // https://tailwindui.com/components/application-ui/forms/sign-in-forms
64+
// export const SolidSocialButton = ({ className, children }) => (
65+
// <Focusable>
66+
// <Transition>
67+
// {React.cloneElement(children, {
68+
// className: trimSpaces(`${children.props.className}
69+
// px-4 py-2 w-full inline-flex flex-row justify-center leading-5 border border-transparent rounded-md hover:opacity-90 active:opacity-100
70+
// ${className}`),
71+
// },
72+
// )}
73+
// </Transition>
74+
// </Focusable>
75+
// )
76+
5077
export const Label = ({ className, children }) => (
5178
React.cloneElement(children, {
5279
className: trimSpaces(`${children.props.className}
@@ -68,10 +95,10 @@ export const InputBlock = ({ className, children }) => (
6895
})}
6996
</Transition>
7097
</div>
71-
{children[2] && (
72-
<p className="mt-2 text-sm text-gray-500">
73-
{children[2]}
74-
</p>
75-
)}
98+
{/* {children[2] && ( */}
99+
{/* <p className="mt-2 text-sm text-gray-500"> */}
100+
{/* {children[2]} */}
101+
{/* </p> */}
102+
{/* )} */}
76103
</div>
77104
)

‎src/components/Nav/index.js‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,9 @@ import { Link } from "react-router-dom"
1212

1313
const MetaDropDownItem = ({ className, children }) => (
1414
React.cloneElement(children, {
15+
// NOTE: bg-md-blue-a400 is too dark
1516
className: trimSpaces(`${children.props.className}
16-
px-4 py-2 flex flex-row items-center font-medium text-sm leading-5 text-gray-700 hover:text-gray-900 hover:bg-gray-100
17+
px-4 py-2 flex flex-row items-center font-medium text-sm leading-5 text-gray-700 hover:text-white hover:bg-md-blue-a200
1718
${className}`),
1819
})
1920
)
@@ -64,8 +65,8 @@ const DropDown = () => {
6465
leaveTo="transform opacity-0 scale-95"
6566
>
6667
{/* NOTE: Use origin-top-right for <Transition> */}
67-
<div ref={ref} className="mt-2 absolute right-0 w-56 rounded-lg shadow-lg origin-top-right ">
68-
<div className="bg-white rounded-lg shadow-xs">
68+
<div ref={ref} className="mt-2 absolute right-0 w-56 rounded-lg shadow-lg origin-top-right">
69+
<div className="bg-white rounded-lg shadow-xs overflow-hidden">
6970
<div className="py-1">
7071
<MetaDropDownItem>
7172
<Link
@@ -131,13 +132,13 @@ const DropDown = () => {
131132
}
132133

133134
const MetaNavItem = ({ className, children }) => (
134-
// <Meta.Transition duration={75}>
135-
React.cloneElement(children, {
136-
className: trimSpaces(`${children.props.className}
137-
px-3 flex flex-row items-center text-gray-900 hover:text-gray-500 active:text-gray-900
138-
${className}`),
139-
})
140-
// </Meta.Transition>
135+
<Meta.Transition duration={75}>
136+
{React.cloneElement(children, {
137+
className: trimSpaces(`${children.props.className}
138+
px-3 flex flex-row items-center hover:text-md-blue-a400
139+
${className}`),
140+
})}
141+
</Meta.Transition>
141142
)
142143

143144
const Nav = () => (

0 commit comments

Comments
 (0)