Skip to content
This repository was archived by the owner on Sep 10, 2024. It is now read-only.

Commit 627ea2c

Browse files
sandhosesandhose
committed
frontend: upgrade compound & use the Badge component to mark the current session
1 parent bf13e58 commit 627ea2c

File tree

11 files changed

+65
-100
lines changed

11 files changed

+65
-100
lines changed

‎frontend/package-lock.json‎

Lines changed: 9 additions & 9 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frontend/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,8 @@
2323
"@urql/exchange-graphcache": "^6.3.3",
2424
"@urql/exchange-refocus": "^1.0.2",
2525
"@urql/exchange-request-policy": "^1.0.2",
26-
"@vector-im/compound-design-tokens": "^0.0.3",
27-
"@vector-im/compound-web": "^0.2.18",
26+
"@vector-im/compound-design-tokens": "^0.0.5",
27+
"@vector-im/compound-web": "^0.3.1",
2828
"classnames": "^2.3.2",
2929
"date-fns": "^2.30.0",
3030
"graphql": "^16.8.0",

‎frontend/src/components/Session/Session.module.css‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -37,11 +37,4 @@
3737
display: flex;
3838
flex-direction: row;
3939
justify-content: flex-end;
40-
}
41-
42-
.current-session-badge {
43-
display: inline-block;
44-
padding: 0 var(--cpd-space-2x);
45-
border-radius: var(--cpd-space-2x);
46-
background-color: var(--cpd-color-text-action-accent);
4740
}

‎frontend/src/components/Session/Session.tsx‎

Lines changed: 2 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
// See the License for the specific language governing permissions and
1313
// limitations under the License.
1414

15-
import { H6, Body } from "@vector-im/compound-web";
15+
import { H6, Body, Badge } from "@vector-im/compound-web";
1616
import { ReactNode } from "react";
1717

1818
import Block from "../Block";
@@ -46,16 +46,7 @@ const Session: React.FC<React.PropsWithChildren<SessionProps>> = ({
4646
}) => {
4747
return (
4848
<Block>
49-
{isCurrent && (
50-
<Body
51-
as="span"
52-
size="sm"
53-
className={styles.currentSessionBadge}
54-
weight="semibold"
55-
>
56-
Current
57-
</Body>
58-
)}
49+
{isCurrent && <Badge kind="success">Current</Badge>}
5950
<H6 className={styles.sessionName} title={id}>
6051
{name || id}
6152
</H6>

‎frontend/src/components/Session/__snapshots__/Session.test.tsx.snap‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -5,21 +5,21 @@ exports[`<Session /> > renders a finished session 1`] = `
55
className="_block_17898c"
66
>
77
<h6
8-
className="_font-body-md-semibold_1g2sj_69 _sessionName_634806"
8+
className="_font-body-md-semibold_1jx6b_64 _sessionName_634806"
99
title="session-id"
1010
>
1111
session-id
1212
</h6>
1313
<p
14-
className="_font-body-sm-semibold_1g2sj_49 _sessionMetadata_634806"
14+
className="_font-body-sm-semibold_1jx6b_45 _sessionMetadata_634806"
1515
>
1616
Signed in
1717
<code>
1818
2023-06-29T03:35:17.451292+00:00
1919
</code>
2020
</p>
2121
<p
22-
className="_font-body-sm-semibold_1g2sj_49 _sessionMetadata_634806"
22+
className="_font-body-sm-semibold_1jx6b_45 _sessionMetadata_634806"
2323
data-finished={true}
2424
>
2525
Finished
@@ -35,13 +35,13 @@ exports[`<Session /> > renders an active session 1`] = `
3535
className="_block_17898c"
3636
>
3737
<h6
38-
className="_font-body-md-semibold_1g2sj_69 _sessionName_634806"
38+
className="_font-body-md-semibold_1jx6b_64 _sessionName_634806"
3939
title="session-id"
4040
>
4141
session-id
4242
</h6>
4343
<p
44-
className="_font-body-sm-semibold_1g2sj_49 _sessionMetadata_634806"
44+
className="_font-body-sm-semibold_1jx6b_45 _sessionMetadata_634806"
4545
>
4646
Signed in
4747
<code>
@@ -56,21 +56,21 @@ exports[`<Session /> > uses client name when truthy 1`] = `
5656
className="_block_17898c"
5757
>
5858
<h6
59-
className="_font-body-md-semibold_1g2sj_69 _sessionName_634806"
59+
className="_font-body-md-semibold_1jx6b_64 _sessionName_634806"
6060
title="session-id"
6161
>
6262
session-id
6363
</h6>
6464
<p
65-
className="_font-body-sm-semibold_1g2sj_49 _sessionMetadata_634806"
65+
className="_font-body-sm-semibold_1jx6b_45 _sessionMetadata_634806"
6666
>
6767
Signed in
6868
<code>
6969
2023-06-29T03:35:17.451292+00:00
7070
</code>
7171
</p>
7272
<p
73-
className="_font-body-sm-semibold_1g2sj_49 _sessionMetadata_634806"
73+
className="_font-body-sm-semibold_1jx6b_45 _sessionMetadata_634806"
7474
data-finished={true}
7575
>
7676
Finished
@@ -79,11 +79,11 @@ exports[`<Session /> > uses client name when truthy 1`] = `
7979
</code>
8080
</p>
8181
<p
82-
className="_font-body-sm-regular_1g2sj_45 _sessionMetadata_634806"
82+
className="_font-body-sm-regular_1jx6b_40 _sessionMetadata_634806"
8383
>
8484
8585
<span
86-
className="_font-body-sm-semibold_1g2sj_49 _sessionMetadata_634806"
86+
className="_font-body-sm-semibold_1jx6b_45 _sessionMetadata_634806"
8787
>
8888
Element
8989
</span>
@@ -96,21 +96,21 @@ exports[`<Session /> > uses session name when truthy 1`] = `
9696
className="_block_17898c"
9797
>
9898
<h6
99-
className="_font-body-md-semibold_1g2sj_69 _sessionName_634806"
99+
className="_font-body-md-semibold_1jx6b_64 _sessionName_634806"
100100
title="session-id"
101101
>
102102
test session name
103103
</h6>
104104
<p
105-
className="_font-body-sm-semibold_1g2sj_49 _sessionMetadata_634806"
105+
className="_font-body-sm-semibold_1jx6b_45 _sessionMetadata_634806"
106106
>
107107
Signed in
108108
<code>
109109
2023-06-29T03:35:17.451292+00:00
110110
</code>
111111
</p>
112112
<p
113-
className="_font-body-sm-semibold_1g2sj_49 _sessionMetadata_634806"
113+
className="_font-body-sm-semibold_1jx6b_45 _sessionMetadata_634806"
114114
data-finished={true}
115115
>
116116
Finished

‎frontend/src/components/UnverifiedEmailAlert/__snapshots__/UnverifiedEmailAlert.test.tsx.snap‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,14 @@ exports[`<UnverifiedEmailAlert /> > renders a warning when there are unverified
99
<svg
1010
aria-hidden="true"
1111
class="_icon_fxw8y_52"
12-
fill="currentColor"
12+
fill="none"
1313
height="24"
1414
viewBox="0 0 24 24"
1515
width="24"
1616
xmlns="http://www.w3.org/2000/svg"
1717
>
1818
<path
19-
d="M12 17a.97.97 0 0 0 .713-.288A.968.968 0 0 0 13 16a.968.968 0 0 0-.287-.713A.968.968 0 0 0 12 15a.968.968 0 0 0-.713.287A.968.968 0 0 0 11 16c0 .283.096.52.287.712.192.192.43.288.713.288Zm0-4c.283 0 .52-.096.713-.287A.968.968 0 0 0 13 12V8a.967.967 0 0 0-.287-.713A.968.968 0 0 0 12 7a.968.968 0 0 0-.713.287A.967.967 0 0 0 11 8v4c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 9a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Z"
19+
d="M12 17C12.2833 17 12.5208 16.9042 12.7125 16.7125C12.9042 16.5208 13 16.2833 13 16C13 15.7167 12.9042 15.4792 12.7125 15.2875C12.5208 15.0958 12.2833 15 12 15C11.7167 15 11.4792 15.0958 11.2875 15.2875C11.0958 15.4792 11 15.7167 11 16C11 16.2833 11.0958 16.5208 11.2875 16.7125C11.4792 16.9042 11.7167 17 12 17ZM12 13C12.2833 13 12.5208 12.9042 12.7125 12.7125C12.9042 12.5208 13 12.2833 13 12V8C13 7.71667 12.9042 7.47917 12.7125 7.2875C12.5208 7.09583 12.2833 7 12 7C11.7167 7 11.4792 7.09583 11.2875 7.2875C11.0958 7.47917 11 7.71667 11 8V12C11 12.2833 11.0958 12.5208 11.2875 12.7125C11.4792 12.9042 11.7167 13 12 13ZM12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22Z"
2020
fill="currentColor"
2121
/>
2222
</svg>
@@ -44,15 +44,15 @@ exports[`<UnverifiedEmailAlert /> > renders a warning when there are unverified
4444
<svg
4545
aria-label="Close"
4646
class="_close_fxw8y_68"
47-
fill="currentColor"
47+
fill="none"
4848
height="16"
4949
role="button"
5050
viewBox="0 0 24 24"
5151
width="16"
5252
xmlns="http://www.w3.org/2000/svg"
5353
>
5454
<path
55-
d="m12 13.4-4.9 4.9a.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7l4.9-4.9-4.9-4.9a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l4.9 4.9 4.9-4.9a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275.948.948 0 0 1 .275.7.948.948 0 0 1-.275.7L13.4 12l4.9 4.9a.948.948 0 0 1 .275.7.948.948 0 0 1-.275.7.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275L12 13.4Z"
55+
d="M6.29289 6.29289C6.68342 5.90237 7.31658 5.90237 7.70711 6.29289L12 10.5858L16.2929 6.29289C16.6834 5.90237 17.3166 5.90237 17.7071 6.29289C18.0976 6.68342 18.0976 7.31658 17.7071 7.70711L13.4142 12L17.7071 16.2929C18.0976 16.6834 18.0976 17.3166 17.7071 17.7071C17.3166 18.0976 16.6834 18.0976 16.2929 17.7071L12 13.4142L7.70711 17.7071C7.31658 18.0976 6.68342 18.0976 6.29289 17.7071C5.90237 17.3166 5.90237 16.6834 6.29289 16.2929L10.5858 12L6.29289 7.70711C5.90237 7.31658 5.90237 6.68342 6.29289 6.29289Z"
5656
fill="currentColor"
5757
/>
5858
</svg>

‎frontend/src/components/UserSessionsOverview/__snapshots__/UserSessionsOverview.test.tsx.snap‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ exports[`UserSessionsOverview > render a <UserSessionsOverview /> with sessions
55
className="_blockList_f8cc7f"
66
>
77
<h3
8-
className="_font-heading-md-semibold_1g2sj_129"
8+
className="_font-heading-md-semibold_1jx6b_121"
99
>
1010
Where you're signed in
1111
</h3>
@@ -16,12 +16,12 @@ exports[`UserSessionsOverview > render a <UserSessionsOverview /> with sessions
1616
className="_sessionListBlockInfo_1c0f31"
1717
>
1818
<h6
19-
className="_font-body-md-semibold_1g2sj_69"
19+
className="_font-body-md-semibold_1jx6b_64"
2020
>
2121
Browser
2222
</h6>
2323
<p
24-
className="_font-body-md-regular_1g2sj_65"
24+
className="_font-body-md-regular_1jx6b_59"
2525
>
2626
2
2727
active
@@ -44,12 +44,12 @@ exports[`UserSessionsOverview > render a <UserSessionsOverview /> with sessions
4444
className="_sessionListBlockInfo_1c0f31"
4545
>
4646
<h6
47-
className="_font-body-md-semibold_1g2sj_69"
47+
className="_font-body-md-semibold_1jx6b_64"
4848
>
4949
New apps
5050
</h6>
5151
<p
52-
className="_font-body-md-regular_1g2sj_65"
52+
className="_font-body-md-regular_1jx6b_59"
5353
>
5454
3
5555
active
@@ -72,12 +72,12 @@ exports[`UserSessionsOverview > render a <UserSessionsOverview /> with sessions
7272
className="_sessionListBlockInfo_1c0f31"
7373
>
7474
<h6
75-
className="_font-body-md-semibold_1g2sj_69"
75+
className="_font-body-md-semibold_1jx6b_64"
7676
>
7777
Regular apps
7878
</h6>
7979
<p
80-
className="_font-body-md-regular_1g2sj_65"
80+
className="_font-body-md-regular_1jx6b_59"
8181
>
8282
1
8383
active
@@ -101,7 +101,7 @@ exports[`UserSessionsOverview > render an simple <UserSessionsOverview /> 1`] =
101101
className="_blockList_f8cc7f"
102102
>
103103
<h3
104-
className="_font-heading-md-semibold_1g2sj_129"
104+
className="_font-heading-md-semibold_1jx6b_121"
105105
>
106106
Where you're signed in
107107
</h3>
@@ -112,12 +112,12 @@ exports[`UserSessionsOverview > render an simple <UserSessionsOverview /> 1`] =
112112
className="_sessionListBlockInfo_1c0f31"
113113
>
114114
<h6
115-
className="_font-body-md-semibold_1g2sj_69"
115+
className="_font-body-md-semibold_1jx6b_64"
116116
>
117117
Browser
118118
</h6>
119119
<p
120-
className="_font-body-md-regular_1g2sj_65"
120+
className="_font-body-md-regular_1jx6b_59"
121121
>
122122
0
123123
active
@@ -140,12 +140,12 @@ exports[`UserSessionsOverview > render an simple <UserSessionsOverview /> 1`] =
140140
className="_sessionListBlockInfo_1c0f31"
141141
>
142142
<h6
143-
className="_font-body-md-semibold_1g2sj_69"
143+
className="_font-body-md-semibold_1jx6b_64"
144144
>
145145
New apps
146146
</h6>
147147
<p
148-
className="_font-body-md-regular_1g2sj_65"
148+
className="_font-body-md-regular_1jx6b_59"
149149
>
150150
0
151151
active
@@ -168,12 +168,12 @@ exports[`UserSessionsOverview > render an simple <UserSessionsOverview /> 1`] =
168168
className="_sessionListBlockInfo_1c0f31"
169169
>
170170
<h6
171-
className="_font-body-md-semibold_1g2sj_69"
171+
className="_font-body-md-semibold_1jx6b_64"
172172
>
173173
Regular apps
174174
</h6>
175175
<p
176-
className="_font-body-md-regular_1g2sj_65"
176+
className="_font-body-md-regular_1jx6b_59"
177177
>
178178
0
179179
active

0 commit comments

Comments
 (0)