added custom focus states #784
Conversation
|
[diff-counting] Significant lines: 82. |
| @@ -59,7 +59,7 @@ const Navbar: React.FC = () => { | |||
| <div className="hidden !justify-self-end w-fit lg:inline-flex flex-row"> | |||
| {navbarItems.map((item) => ( | |||
| <a | |||
| className={`hover:underline cursor-pointer text-white p-4 underline-offset-8 decoration-2 decoration-white ${ | |||
| className={`hover:underline cursor-pointer text-white p-4 underline-offset-8 decoration-2 decoration-white h-[48px] flex items-center ${ | |||
There was a problem hiding this comment.
to make links same height as logo and vertically center the labels within the link wrapper
| @@ -240,3 +265,32 @@ summary::after { | |||
| details[open] > summary::after { | |||
| rotate: 180deg; | |||
| } | |||
|
|
|||
|
|
|||
| .custom-focus-state:focus-visible { | |||
There was a problem hiding this comment.
the custom-focus-state class basically removes the default focus state outline on the element and instead places it on an absolutely positioned ::after pseudo-element so that it looks visually better
| @@ -314,7 +314,7 @@ const MemberGroup: React.FC<MemberGroupProps> = ({ | |||
| <> | |||
| <button | |||
| onClick={() => onMemberCardClick(member)} | |||
| className="memberCard" | |||
| className="memberCard custom-focus-state" | |||
There was a problem hiding this comment.
see what custom-focus-state does here
|
why failing 😭 |
It's just failing to find Inter. That's known to be flaky sometimes. You can ignore it |
|
|
|
on apply page i think the focus state doesn't show up for the "Don't know who to chat with?" button, is it because it's black? do we want a different color? |
ya it should have secondary styling with red border once it gets the new styling, the proper focus state (red outline) should appear |
oops ok i'll fix that |
fixes this