Skip to content

Commit 0a3b5c6

Browse files
author
Zaydek Michels-Gualtieri
committed
Removed focus states (only use for things like forms and CTA buttons)
1 parent b79a41b commit 0a3b5c6

File tree

5 files changed

+16
-18
lines changed

5 files changed

+16
-18
lines changed

‎src/components/Footer/index.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,13 +19,13 @@ const Footer = () => (
1919
<div className="flex flex-row items-center">
2020

2121
<Meta.Transition>
22-
<ExternalLink className="p-4 pr-2 text-gray-400 hover:text-github-gray focus:text-github-gray focus:outline-none" href="https://github.com/codex-src">
22+
<ExternalLink className="p-4 pr-2 text-gray-400 hover:text-gh-gray" href="https://github.com/codex-src">
2323
<SVG.GitHubLogo className="w-6 h-6" />
2424
</ExternalLink>
2525
</Meta.Transition>
2626

2727
<Meta.Transition>
28-
<ExternalLink className="p-4 pl-2 text-gray-400 hover:text-twitter-blue focus:text-twitter-blue focus:outline-none" href="https://twitter.com/username_ZAYDEK">
28+
<ExternalLink className="p-4 pl-2 text-gray-400 hover:text-tw-blue" href="https://twitter.com/username_ZAYDEK">
2929
<SVG.TwitterLogo className="w-6 h-6" />
3030
</ExternalLink>
3131
</Meta.Transition>

‎src/components/Forms/SignIn.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,9 +30,9 @@ const SignInForm = () => (
3030
<div className="mt-1 grid grid-cols-2 gap-3">
3131
<div className="rounded-md shadow-sm">
3232
<Meta.Focusable>
33-
{/* Added bg-github-gray, removed border
33+
{/* Added bg-gh-gray, removed border
3434
border-gray-300 */}
35-
<button className="form-input flex flex-row justify-center w-full h-12 bg-github-gray border-none hover:opacity-90 active:opacity-100" aria-label="Sign in with GitHub">
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">
3636
<SVG.GitHubLogo className="w-6 h-6 text-white" />
3737
</button>
3838
</Meta.Focusable>

‎src/components/Forms/SignUp.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,9 +30,9 @@ const SignUpForm = () => (
3030
<div className="mt-1 grid grid-cols-2 gap-3">
3131
<div className="rounded-md shadow-sm">
3232
<Meta.Focusable>
33-
{/* Added bg-github-gray, removed border
33+
{/* Added bg-gh-gray, removed border
3434
border-gray-300 */}
35-
<button className="form-input flex flex-row justify-center w-full h-12 bg-github-gray border-none hover:opacity-90 active:opacity-100" aria-label="Sign in with GitHub">
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">
3636
<SVG.GitHubLogo className="w-6 h-6 text-white" />
3737
</button>
3838
</Meta.Focusable>

‎src/components/Nav/index.js‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import { Link } from "react-router-dom"
1313
const MetaDropDownItem = ({ className, children }) => (
1414
React.cloneElement(children, {
1515
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 focus:text-gray-900 hover:bg-gray-100 focus:bg-gray-100 focus:outline-none
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
1717
${className}`),
1818
})
1919
)
@@ -36,7 +36,8 @@ const DropDown = () => {
3636

3737
<Meta.Transition>
3838
<button
39-
className="p-2 flex flex-row justify-center items-center text-gray-400 hover:text-gray-500 focus:text-gray-500 hover:bg-gray-100 focus:bg-gray-100 rounded-md focus:outline-none"
39+
className="p-2 flex flex-row justify-center items-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 rounded-md"
40+
onPointerDown={e => e.preventDefault()}
4041
onClick={() => setOpen(!open)}
4142
>
4243
<svg
@@ -64,7 +65,7 @@ const DropDown = () => {
6465
>
6566
{/* NOTE: Use origin-top-right for <Transition> */}
6667
<div ref={ref} className="mt-2 absolute right-0 w-56 rounded-lg shadow-lg origin-top-right ">
67-
<div className="bg-white rounded-lg shadow-xs overflow-hidden">
68+
<div className="bg-white rounded-lg shadow-xs">
6869
<div className="py-1">
6970
<MetaDropDownItem>
7071
<Link
@@ -133,7 +134,7 @@ const MetaNavItem = ({ className, children }) => (
133134
<Meta.Transition duration={75}>
134135
{React.cloneElement(children, {
135136
className: trimSpaces(`${children.props.className}
136-
px-3 flex flex-row items-center focus:underline text-gray-900 hover:text-gray-500 focus:text-gray-500 focus:outline-none
137+
px-3 flex flex-row items-center text-gray-900 hover:text-gray-500
137138
${className}`),
138139
})}
139140
</Meta.Transition>
@@ -145,12 +146,9 @@ const Nav = () => (
145146

146147
{/* LHS */}
147148
<div className="-mx-3 flex flex-row h-full">
148-
<MetaNavItem>
149-
{/* NOTE: Use color: #000 because of <MetaNavItem> */}
150-
<Link style={{ fontSize: "50%", color: "#000" }} to={routes.HOME}>
151-
<CodexLogo />
152-
</Link>
153-
</MetaNavItem>
149+
<Link className="px-3 flex flex-row items-center" style={{ fontSize: "50%" }} to={routes.HOME}>
150+
<CodexLogo />
151+
</Link>
154152
</div>
155153

156154
{/* RHS */}

‎tailwind.config.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,8 +33,8 @@ module.exports = {
3333
"md-blue-a400": "#2979ff",
3434
"md-blue-a700": "#2962ff",
3535

36-
"github-gray": "#24292e",
37-
"twitter-blue": "#1da1f2",
36+
"gh-gray": "#24292e",
37+
"tw-blue": "#1da1f2",
3838
},
3939
fontFamily: {
4040
sans: [

0 commit comments

Comments
 (0)