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

Commit 57c5e86

Browse files
t3chguysandhose
t3chguy
and
sandhose
authored
Update session details styles to closer match latest Figma (#2439)
Co-authored-by: Quentin Gliech <[email protected]>
1 parent 6eb6209 commit 57c5e86

21 files changed

+891
-909
lines changed

‎frontend/locales/en.json

+18-12
Original file line numberDiff line numberDiff line change
@@ -50,8 +50,7 @@
5050
}
5151
},
5252
"browser_session_details": {
53-
"current_badge": "Current",
54-
"session_details_title": "Session"
53+
"current_badge": "Current"
5554
},
5655
"browser_sessions_overview": {
5756
"body:one": "{{count}} active session",
@@ -60,7 +59,7 @@
6059
"view_all_button": "View all"
6160
},
6261
"compat_session_detail": {
63-
"client_details_title": "Client",
62+
"client_details_title": "Client info",
6463
"name": "Name",
6564
"session_details_title": "Session"
6665
},
@@ -92,16 +91,14 @@
9291
"not_found_alert_title": "Not found.",
9392
"not_logged_in_alert": "You're not logged in.",
9493
"oauth2_client_detail": {
95-
"details_title": "Client",
96-
"id": "Client ID",
94+
"details_title": "Client info",
9795
"name": "Name",
9896
"policy": "Policy",
9997
"terms": "Terms of service"
10098
},
10199
"oauth2_session_detail": {
102100
"client_details_name": "Name",
103-
"client_title": "Client",
104-
"session_details_title": "Session"
101+
"client_title": "Client info"
105102
},
106103
"pagination_controls": {
107104
"total": "Total: {{totalCount}}"
@@ -120,21 +117,19 @@
120117
}
121118
},
122119
"session": {
120+
"client_id_label": "Client ID",
123121
"current": "Current",
124122
"device_id_label": "Device ID",
125123
"finished_label": "Finished",
126-
"id_label": "ID",
127124
"ip_label": "IP Address",
128125
"last_active_label": "Last Active",
129-
"last_auth_label": "Last Authentication",
130126
"name_for_platform": "{{name}} for {{platform}}",
131127
"scopes_label": "Scopes",
132128
"signed_in_label": "Signed in",
129+
"title": "Device details",
133130
"unknown_browser": "Unknown browser",
134131
"unknown_device": "Unknown device",
135-
"uri_label": "Uri",
136-
"user_id_label": "User ID",
137-
"username_label": "User name"
132+
"uri_label": "Uri"
138133
},
139134
"session_detail": {
140135
"alert": {
@@ -186,5 +181,16 @@
186181
},
187182
"resend_code": "Resend code"
188183
}
184+
},
185+
"mas": {
186+
"scope": {
187+
"edit_profile": "Edit your profile and contact details",
188+
"manage_sessions": "Manage your devices and sessions",
189+
"mas_admin": "Administer any user on the matrix-authentication-service",
190+
"send_messages": "Send new messages on your behalf",
191+
"synapse_admin": "Administer the Synapse homeserver",
192+
"view_messages": "View your existing messages and data",
193+
"view_profile": "See your profile info and contact details"
194+
}
189195
}
190196
}

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

+10-2
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,17 @@
1717
width: 100%;
1818
color: var(--cpd-color-text-primary);
1919
padding-bottom: var(--cpd-space-5x);
20-
border-bottom: 1px solid var(--cpd-color-border-interactive-secondary);
2120

2221
&:last-child {
2322
border-bottom: none;
2423
}
25-
}
24+
}
25+
26+
.title {
27+
padding-bottom: var(--cpd-space-2x);
28+
border-bottom: var(--cpd-border-width-2) solid var(--cpd-color-gray-400);
29+
30+
/* Workaround compound design tokens heading style being broken */
31+
font-weight: var(--cpd-font-weight-semibold) !important;
32+
font-size: var(--cpd-font-size-heading-sm) !important;
33+
}

‎frontend/src/components/Block/Block.test.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@
1212
// See the License for the specific language governing permissions and
1313
// limitations under the License.
1414

15+
// @vitest-environment happy-dom
16+
1517
import { create } from "react-test-renderer";
1618
import { describe, expect, it } from "vitest";
1719

‎frontend/src/components/Block/Block.tsx

+10-1
Original file line numberDiff line numberDiff line change
@@ -12,18 +12,27 @@
1212
// See the License for the specific language governing permissions and
1313
// limitations under the License.
1414

15+
import { Heading } from "@vector-im/compound-web";
1516
import cx from "classnames";
17+
import { ReactNode } from "react";
1618

1719
import styles from "./Block.module.css";
1820

1921
type Props = React.PropsWithChildren<{
22+
title?: ReactNode;
2023
className?: string;
2124
highlight?: boolean;
2225
}>;
2326

24-
const Block: React.FC<Props> = ({ children, className, highlight }) => {
27+
const Block: React.FC<Props> = ({ children, className, highlight, title }) => {
2528
return (
2629
<div className={cx(styles.block, className)} data-active={highlight}>
30+
{title && (
31+
<Heading as="h4" size="sm" weight="semibold" className={styles.title}>
32+
{title}
33+
</Heading>
34+
)}
35+
2736
{children}
2837
</div>
2938
);

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -17,5 +17,5 @@
1717
display: flex;
1818
flex-direction: column;
1919
align-content: flex-start;
20-
gap: var(--cpd-space-5x);
21-
}
20+
gap: var(--cpd-space-8x);
21+
}

‎frontend/src/components/BlockList/BlockList.test.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@
1212
// See the License for the specific language governing permissions and
1313
// limitations under the License.
1414

15+
// @vitest-environment happy-dom
16+
1517
import { create } from "react-test-renderer";
1618
import { describe, expect, it } from "vitest";
1719

‎frontend/src/components/Client/OAuth2ClientDetail.tsx

-4
Original file line numberDiff line numberDiff line change
@@ -57,10 +57,6 @@ const OAuth2ClientDetail: React.FC<Props> = ({ client }) => {
5757

5858
const details = [
5959
{ label: t("frontend.oauth2_client_detail.name"), value: data.clientName },
60-
{
61-
label: t("frontend.oauth2_client_detail.id"),
62-
value: <code>{data.clientId}</code>,
63-
},
6460
{
6561
label: t("frontend.oauth2_client_detail.terms"),
6662
value: data.tosUri && <FriendlyExternalLink uri={data.tosUri} />,

‎frontend/src/components/Client/__snapshots__/OAuth2ClientDetail.test.tsx.snap

+42-66
Original file line numberDiff line numberDiff line change
@@ -17,89 +17,65 @@ exports[`<OAuth2ClientDetail> > renders client details 1`] = `
1717
<div
1818
class="_block_17898c"
1919
>
20-
<h6
21-
class="_typography_yh5dq_162 _font-body-md-semibold_yh5dq_64"
20+
<h4
21+
class="_typography_yh5dq_162 _font-heading-sm-semibold_yh5dq_102 _title_17898c"
2222
>
23-
Client
24-
</h6>
25-
<ul
26-
class="_list_040867"
23+
Client info
24+
</h4>
25+
<div
26+
class="_wrapper_040867"
2727
>
28-
<li
29-
class="_detailRow_040867"
28+
<div
29+
class="_datum_040867"
3030
>
31-
<p
32-
class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45 _detailLabel_040867"
31+
<h5
32+
class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40"
3333
>
3434
Name
35-
</p>
35+
</h5>
3636
<p
37-
class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40 _detailValue_040867"
37+
class="_typography_yh5dq_162 _font-body-md-regular_yh5dq_59 _datumValue_040867"
3838
>
3939
Test Client
4040
</p>
41-
</li>
42-
<li
43-
class="_detailRow_040867"
41+
</div>
42+
<div
43+
class="_datum_040867"
4444
>
45-
<p
46-
class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45 _detailLabel_040867"
47-
>
48-
Client ID
49-
</p>
50-
<p
51-
class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40 _detailValue_040867"
52-
>
53-
<code>
54-
client-id
55-
</code>
56-
</p>
57-
</li>
58-
<li
59-
class="_detailRow_040867"
60-
>
61-
<p
62-
class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45 _detailLabel_040867"
45+
<h5
46+
class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40"
6347
>
6448
Terms of service
65-
</p>
66-
<p
67-
class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40 _detailValue_040867"
49+
</h5>
50+
<a
51+
class="_link_1mzip_17 _externalLink_a97355"
52+
data-kind="primary"
53+
href="https://client.org/tos"
54+
rel="noreferrer noopener"
55+
target="_blank"
6856
>
69-
<a
70-
class="_link_1mzip_17 _externalLink_a97355"
71-
data-kind="primary"
72-
href="https://client.org/tos"
73-
rel="noreferrer noopener"
74-
target="_blank"
75-
>
76-
client.org/tos
77-
</a>
78-
</p>
79-
</li>
80-
<li
81-
class="_detailRow_040867"
57+
client.org/tos
58+
</a>
59+
</div>
60+
<div
61+
class="_datum_040867"
8262
>
83-
<p
84-
class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45 _detailLabel_040867"
63+
<h5
64+
class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40"
8565
>
8666
Policy
87-
</p>
88-
<p
89-
class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40 _detailValue_040867"
67+
</h5>
68+
<a
69+
class="_link_1mzip_17 _externalLink_a97355"
70+
data-kind="primary"
71+
href="https://client.org/policy"
72+
rel="noreferrer noopener"
73+
target="_blank"
9074
>
91-
<a
92-
class="_link_1mzip_17 _externalLink_a97355"
93-
data-kind="primary"
94-
href="https://client.org/policy"
95-
rel="noreferrer noopener"
96-
target="_blank"
97-
>
98-
client.org/policy
99-
</a>
100-
</p>
101-
</li>
102-
</ul>
75+
client.org/policy
76+
</a>
77+
</div>
78+
</div>
10379
</div>
10480
</div>
10581
</div>

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

+6-4
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
// See the License for the specific language governing permissions and
1313
// limitations under the License.
1414

15+
import cx from "classnames";
1516
import { differenceInSeconds, parseISO } from "date-fns";
1617
import { useTranslation } from "react-i18next";
1718

@@ -27,7 +28,8 @@ const INACTIVE_MIN_AGE = 60 * 60 * 24 * 90;
2728
const LastActive: React.FC<{
2829
lastActive: Date | string;
2930
now?: Date | string;
30-
}> = ({ lastActive: lastActiveProps, now: nowProps }) => {
31+
className?: string;
32+
}> = ({ lastActive: lastActiveProps, now: nowProps, className }) => {
3133
const { t } = useTranslation();
3234

3335
const lastActive =
@@ -44,21 +46,21 @@ const LastActive: React.FC<{
4446
const formattedDate = formatDate(lastActive);
4547
if (differenceInSeconds(now, lastActive) <= ACTIVE_NOW_MAX_AGE) {
4648
return (
47-
<span title={formattedDate} className={styles.active}>
49+
<span title={formattedDate} className={cx(styles.active, className)}>
4850
{t("frontend.last_active.active_now")}
4951
</span>
5052
);
5153
}
5254
if (differenceInSeconds(now, lastActive) > INACTIVE_MIN_AGE) {
5355
return (
54-
<span title={formattedDate}>
56+
<span title={formattedDate} className={className}>
5557
{t("frontend.last_active.inactive_90_days")}
5658
</span>
5759
);
5860
}
5961
const relativeDate = formatReadableDate(lastActive, now);
6062
return (
61-
<span title={formattedDate}>
63+
<span title={formattedDate} className={className}>
6264
{t("frontend.last_active.active_date", { relativeDate })}
6365
</span>
6466
);

0 commit comments

Comments
 (0)