Skip to content

Commit 908bdda

Browse files
christiansamaniego-oktachristiansamaniego-okta
committed
add navbar hover states
1 parent ede47e6 commit 908bdda

File tree

9 files changed

+100
-67
lines changed

9 files changed

+100
-67
lines changed

‎src/features/common/assets/jwt-logo.component.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,15 +11,15 @@ export const JwtLogoComponent: React.FC = () => {
1111
fillRule="evenodd"
1212
clipRule="evenodd"
1313
d="M18.3683 8.60806V0H13.5682V8.60806L15.9683 11.9041L18.3683 8.60806Z"
14-
fill="#191919"
15-
style={{ fill: '#191919', fillOpacity: 1 }}
14+
fill="currentColor"
15+
style={{ fillOpacity: 1 }}
1616
/>
1717
<path
1818
fillRule="evenodd"
1919
clipRule="evenodd"
2020
d="M13.5682 23.3919V32H18.3683V23.3919L15.9683 20.0959L13.5682 23.3919Z"
21-
fill="#191919"
22-
style={{ fill: '#191919', fillOpacity: 1 }}
21+
fill="currentColor"
22+
style={{ fillOpacity: 1 }}
2323
/>
2424
<path
2525
fillRule="evenodd"

‎src/features/common/assets/jwt-wordmark.component.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,20 +9,20 @@ export const JwtWordmarkComponent: React.FC = () => {
99
>
1010
<path
1111
d="M7 0V12C7 15.3137 4.31371 18 1 18V18"
12-
stroke="black"
13-
style={{ stroke: 'black', strokeOpacity: 1 }}
12+
stroke="currentColor"
13+
style={{ strokeOpacity: 1 }}
1414
strokeWidth="4"
1515
/>
1616
<path
1717
d="M13.8932 0V14.5C13.8932 16.433 15.4602 18 17.3932 18V18C19.3262 18 20.8932 16.433 20.8932 14.5V5C20.8932 3.34315 22.2363 2 23.8932 2V2C25.55 2 26.8932 3.34315 26.8932 5V14.5C26.8932 16.433 28.4602 18 30.3932 18V18C32.3262 18 33.8932 16.433 33.8932 14.5V0"
18-
stroke="black"
19-
style={{ stroke: 'black', strokeOpacity: 1 }}
18+
stroke="currentColor"
19+
style={{ strokeOpacity: 1 }}
2020
strokeWidth="4"
2121
/>
2222
<path
2323
d="M38.8932 2H44.8932M44.8932 2V20M44.8932 2H50.8932"
24-
stroke="black"
25-
style={{ stroke: 'black', strokeOpacity: 1 }}
24+
stroke="currentColor"
25+
style={{ strokeOpacity: 1 }}
2626
strokeWidth="4"
2727
/>
2828
</svg>

‎src/features/common/components/bars/ribbon/assets/dark-icon.component.tsx‎

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,18 @@ import React from "react";
33
export const DarkIconComponent: React.FC = () => {
44
return (
55
<svg
6-
role="img"
7-
aria-label="Crescent moon"
8-
xmlns="http://www.w3.org/2000/svg"
9-
width="1em"
10-
height="1em"
11-
viewBox="0 0 24 24"
6+
width="16"
7+
height="16"
8+
viewBox="0 0 16 16"
129
fill="none"
13-
stroke="currentColor"
14-
strokeWidth="2"
15-
strokeLinecap="round"
16-
strokeLinejoin="round"
17-
className="css-light-0"
10+
xmlns="http://www.w3.org/2000/svg"
1811
>
19-
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
12+
<path
13+
d="M14.2252 10.0845C14.54 9.95039 14.8559 10.244 14.7134 10.555C14.3379 11.3742 13.8066 12.1157 13.1463 12.7369C12.2739 13.5575 11.2056 14.1406 10.0435 14.4303C8.88133 14.7201 7.6643 14.7068 6.50878 14.3918C5.35325 14.0767 4.29789 13.4705 3.44363 12.631C2.58937 11.7915 1.9648 10.7469 1.62965 9.59707C1.2945 8.44722 1.25998 7.23061 1.52941 6.06361C1.79883 4.89661 2.36318 3.81825 3.16847 2.9317C3.76901 2.27056 4.48855 1.73258 5.28668 1.34413C5.59577 1.1937 5.88975 1.51373 5.74469 1.82539V1.82539C3.32126 7.032 8.59731 12.4835 13.8804 10.2315L14.2252 10.0845Z"
14+
stroke="currentColor"
15+
stroke-width="1.5"
16+
stroke-linejoin="round"
17+
></path>
2018
</svg>
2119
);
2220
};

‎src/features/common/components/bars/ribbon/assets/light-icon.component.tsx‎

Lines changed: 23 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -3,28 +3,31 @@ import React from "react";
33
export const LightIconComponent: React.FC = () => {
44
return (
55
<svg
6-
role="img"
7-
aria-label="Sun"
8-
xmlns="http://www.w3.org/2000/svg"
9-
width="1em"
10-
height="1em"
11-
viewBox="0 0 24 24"
6+
width="16"
7+
height="16"
8+
viewBox="0 0 16 16"
129
fill="none"
13-
stroke="currentColor"
14-
strokeWidth="2"
15-
strokeLinecap="round"
16-
strokeLinejoin="round"
17-
className="css-light-0"
10+
xmlns="http://www.w3.org/2000/svg"
1811
>
19-
<circle cx="12" cy="12" r="5"></circle>
20-
<line x1="12" y1="1" x2="12" y2="3"></line>
21-
<line x1="12" y1="21" x2="12" y2="23"></line>
22-
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
23-
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
24-
<line x1="1" y1="12" x2="3" y2="12"></line>
25-
<line x1="21" y1="12" x2="23" y2="12"></line>
26-
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
27-
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
12+
<rect
13+
x="5"
14+
y="5"
15+
width="6"
16+
height="6"
17+
rx="3"
18+
stroke="currentColor"
19+
stroke-width="1.5"
20+
></rect>
21+
<path
22+
fill-rule="evenodd"
23+
clip-rule="evenodd"
24+
d="M8 0.25C7.58579 0.25 7.25 0.585786 7.25 1L7.25391 1.07715C7.29248 1.45517 7.6118 1.75 8 1.75C8.41421 1.75 8.75 1.41421 8.75 1C8.75 0.585786 8.41421 0.25 8 0.25ZM8 14.25C7.58579 14.25 7.25 14.5858 7.25 15L7.25391 15.0771C7.29248 15.4552 7.6118 15.75 8 15.75C8.41421 15.75 8.75 15.4142 8.75 15C8.75 14.5858 8.41421 14.25 8 14.25ZM15.0771 7.25391C15.4552 7.29248 15.75 7.6118 15.75 8C15.75 8.3882 15.4552 8.70752 15.0771 8.74609L15 8.75C14.5858 8.75 14.25 8.41421 14.25 8C14.25 7.58579 14.5858 7.25 15 7.25L15.0771 7.25391ZM1.75 8C1.75 7.6118 1.45517 7.29248 1.07715 7.25391L1 7.25C0.585786 7.25 0.25 7.58579 0.25 8C0.25 8.41421 0.585786 8.75 1 8.75L1.07715 8.74609C1.45517 8.70752 1.75 8.3882 1.75 8Z"
25+
fill="currentColor"
26+
></path>
27+
<path
28+
d="M3.64135 12.3586C3.93421 12.6515 3.93414 13.1264 3.64135 13.4193C3.34846 13.7122 2.87358 13.7122 2.58069 13.4193C2.30619 13.1448 2.28888 12.7105 2.5289 12.416L2.58069 12.3586C2.87359 12.0659 3.34849 12.0658 3.64135 12.3586ZM3.63237 2.57723C3.87239 2.87181 3.85508 3.30608 3.58058 3.58058C3.30608 3.85508 2.87181 3.87239 2.57724 3.63237L2.51992 3.58058C2.22703 3.28769 2.22703 2.81281 2.51992 2.51992C2.81282 2.22702 3.28769 2.22702 3.58058 2.51992L3.63237 2.57723ZM13.4711 12.416C13.7111 12.7105 13.6938 13.1448 13.4193 13.4193C13.1448 13.6938 12.7105 13.7111 12.416 13.4711L12.3587 13.4193C12.0659 13.1264 12.0658 12.6515 12.3587 12.3586C12.6515 12.0658 13.1264 12.0659 13.4193 12.3586L13.4711 12.416ZM13.4801 2.51992C13.773 2.81281 13.773 3.28769 13.4801 3.58058C13.1872 3.87347 12.7123 3.87347 12.4194 3.58058C12.1449 3.30608 12.1276 2.87181 12.3676 2.57723L12.4194 2.51992C12.7123 2.22702 13.1872 2.22702 13.4801 2.51992Z"
29+
fill="currentColor"
30+
></path>
2831
</svg>
2932
);
3033
};

‎src/features/common/components/bars/ribbon/assets/system-icon.component.tsx‎

Lines changed: 33 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,22 +3,41 @@ import React from "react";
33
export const SystemIconComponent: React.FC = () => {
44
return (
55
<svg
6-
role="img"
7-
aria-label="computer monitor"
8-
xmlns="http://www.w3.org/2000/svg"
9-
width="24"
10-
height="24"
11-
viewBox="0 0 24 24"
6+
width="16"
7+
height="16"
8+
viewBox="0 0 16 16"
129
fill="none"
13-
stroke="currentColor"
14-
strokeWidth="2"
15-
strokeLinecap="round"
16-
strokeLinejoin="round"
17-
className="feather feather-monitor"
10+
xmlns="http://www.w3.org/2000/svg"
1811
>
19-
<rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
20-
<line x1="8" y1="21" x2="16" y2="21"></line>
21-
<line x1="12" y1="17" x2="12" y2="21"></line>
12+
<path
13+
d="M1 4V12C1 13.6569 2.34315 15 4 15H12C13.6569 15 15 13.6569 15 12V4C15 2.34315 13.6569 1 12 1H4C2.34315 1 1 2.34315 1 4Z"
14+
stroke="currentColor"
15+
stroke-width="1.5"
16+
></path>
17+
<rect
18+
x="4"
19+
y="4"
20+
width="8"
21+
height="5"
22+
stroke="currentColor"
23+
stroke-width="1.5"
24+
stroke-linejoin="round"
25+
></rect>
26+
<rect
27+
x="11.25"
28+
y="11.25"
29+
width="1.5"
30+
height="1.5"
31+
rx="0.75"
32+
fill="currentColor"
33+
></rect>
34+
<path
35+
d="M4 12H10"
36+
stroke="currentColor"
37+
stroke-width="1.5"
38+
stroke-linecap="round"
39+
stroke-linejoin="round"
40+
></path>
2241
</svg>
2342
);
2443
};

‎src/features/common/components/headers/header/header.module.scss‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
box-sizing: border-box;
1515
background: var(--color_bg_app_bar);
1616
border: 1px solid var(--color_bg_app_bar);
17-
box-shadow: 0 12px 24px -12px rgba(0, 0, 0, .04);
17+
box-shadow: 0 12px 24px -12px rgba(0, 0, 0, 0.04);
1818
backdrop-filter: blur(3rem);
1919
z-index: 100;
2020

@@ -62,7 +62,7 @@
6262
align-items: center;
6363
justify-content: center;
6464
border-radius: 9999px;
65-
padding: .25rem;
65+
padding: 0.25rem;
6666
}
6767

6868
.navList {
@@ -89,28 +89,34 @@
8989
.navList__item > a {
9090
display: flex;
9191
align-items: center;
92-
padding: .5rem 1rem;
92+
padding: 0.5rem 1rem;
9393
color: var(--color_fg_default);
94-
font-size: .875rem;
94+
font-size: 0.875rem;
9595
font-style: normal;
9696
font-weight: 600;
9797
line-height: 1.5;
98-
letter-spacing: -.1px;
98+
letter-spacing: -0.1px;
9999
border-radius: 9999px;
100100

101101
&:focus-visible {
102102
outline: solid 1px var(--color_border_focus);
103103
outline-offset: 0.125rem;
104104
border-radius: 0.125rem;
105105
}
106+
107+
&:hover {
108+
background-color: var(--color_bg_app_bar_border);
109+
color: var(--color_fg_bold);
110+
transition: all 0.1s ease-out;
111+
}
106112
}
107113

108114
.actions {
109115
display: flex;
110-
gap: .5rem;
116+
gap: 0.5rem;
111117

112118
@media #{$breakpoint-dimension-md} {
113119
gap: 1rem;
114120
margin-right: 1.5rem;
115121
}
116-
}
122+
}

‎src/features/common/components/site-brand/site-brand.module.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
gap: 0.5rem;
77
position: relative;
88
cursor: pointer;
9+
color: var(--color_fg_bold);
910

1011
svg {
1112
height: inherit;

‎src/features/common/components/theme-picker/theme-picker.module.scss‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,11 @@
3232
&[data-active="true"] {
3333
background-color: var(--color_bg_layer);
3434
color: var(--color_fg_bold);
35-
box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
35+
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
36+
}
37+
38+
&:hover {
39+
background-color: var(--color_bg_layer_alternate-bold);
3640
}
3741
}
3842

‎src/libs/theme/styles/globals.scss‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -48,8 +48,8 @@
4848
--color_fg_default: var(--functional-gray-200);
4949
--color_fg_link_primary: var(--cloud);
5050

51-
--color_bg_app_bar: hsla(0,0%,7%,.04);
52-
--color_bg_app_bar_border: hsla(0, 0%, 7%, .12);
51+
--color_bg_app_bar: hsla(0, 0%, 95%, 0.04);
52+
--color_bg_app_bar_border: hsla(0, 0%, 95%, 0.12);
5353
--color_bg_app_bar_plain: rgba(17, 17, 17);
5454

5555
--color_fg_link: var(--functional-gray-50);
@@ -66,7 +66,7 @@
6666
--color_bg_layer_bold: var(--functional-gray-700);
6767
--color_bg_layer_boldest: var(--functional-gray-50);
6868
--color_bg_layer_alternate: var(--functional-gray-850);
69-
--color_bg_layer_alternate-bold: var(--functional-gray-800);
69+
--color_bg_layer_alternate-bold: var(--functional-gray-850);
7070
--color_bg_layer_elevated: var(--functional-gray-900);
7171

7272
--color_bg_layer_highlight1: var(--ocean);
@@ -198,7 +198,9 @@ html[data-theme="system-light"] {
198198
--color_fg_bold: var(--charcoal2);
199199
--color_fg_link_primary: var(--sky);
200200

201+
--color_bg_app_bar: hsla(0, 0%, 7%, 0.04);
201202
--color_bg_app_bar_plain: rgba(241, 241, 241);
203+
--color_bg_app_bar_border: hsla(0, 0%, 7%, 0.12);
202204

203205
--color_fg_link: var(--charcoal2);
204206
--color_fg_link_hover: var(--charcoal2);

0 commit comments

Comments
 (0)