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

Commit 7a9a873

Browse files
sandhosesandhose
committed
Compoundify the templates
1 parent 34874b8 commit 7a9a873

File tree

19 files changed

+242
-74
lines changed

19 files changed

+242
-74
lines changed

‎frontend/src/routing/Router.tsx‎

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,18 @@
1313
// limitations under the License.
1414

1515
import { useAtom, useAtomValue } from "jotai";
16-
import { lazy, useEffect } from "react";
16+
import { useEffect } from "react";
1717

1818
import LoadingSpinner from "../components/LoadingSpinner";
19+
import BrowserSession from "../pages/BrowserSession";
20+
import BrowserSessionList from "../pages/BrowserSessionList";
21+
import CompatSessionList from "../pages/CompatSessionList";
22+
import OAuth2Client from "../pages/OAuth2Client";
23+
import OAuth2SessionList from "../pages/OAuth2SessionList";
24+
import Profile from "../pages/Profile";
25+
import SessionDetail from "../pages/SessionDetail";
26+
import SessionsOverview from "../pages/SessionsOverview";
27+
import VerifyEmail from "../pages/VerifyEmail";
1928

2029
import { getRouteActionRedirection } from "./actions";
2130
import { locationAtom, routeAtom } from "./atoms";
@@ -42,16 +51,6 @@ const useRouteWithRedirect = (): [Route, boolean] => {
4251
return [route, redirecting];
4352
};
4453

45-
const SessionsOverview = lazy(() => import("../pages/SessionsOverview"));
46-
const SessionDetail = lazy(() => import("../pages/SessionDetail"));
47-
const Profile = lazy(() => import("../pages/Profile"));
48-
const OAuth2Client = lazy(() => import("../pages/OAuth2Client"));
49-
const BrowserSession = lazy(() => import("../pages/BrowserSession"));
50-
const BrowserSessionList = lazy(() => import("../pages/BrowserSessionList"));
51-
const CompatSessionList = lazy(() => import("../pages/CompatSessionList"));
52-
const OAuth2SessionList = lazy(() => import("../pages/OAuth2SessionList"));
53-
const VerifyEmail = lazy(() => import("../pages/VerifyEmail"));
54-
5554
const Router: React.FC = () => {
5655
const [route, redirecting] = useRouteWithRedirect();
5756

‎frontend/src/styles/cpd-button.css‎

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
/* Copyright 2023 The Matrix.org Foundation C.I.C.
2+
*
3+
* Licensed under the Apache License, Version 2.0 (the "License");
4+
* you may not use this file except in compliance with the License.
5+
* You may obtain a copy of the License at
6+
*
7+
* http://www.apache.org/licenses/LICENSE-2.0
8+
*
9+
* Unless required by applicable law or agreed to in writing, software
10+
* distributed under the License is distributed on an "AS IS" BASIS,
11+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12+
* See the License for the specific language governing permissions and
13+
* limitations under the License.
14+
*/
15+
16+
.cpd-button {
17+
display: block;
18+
text-align: center;
19+
border-radius: var(--cpd-radius-pill-effect);
20+
cursor: pointer;
21+
-webkit-appearance: none;
22+
}
23+
24+
.cpd-button[disabled] {
25+
cursor: not-allowed;
26+
pointer-events: all !important;
27+
}
28+
29+
/**
30+
* SIZES
31+
*/
32+
33+
.cpd-button[data-size="lg"] {
34+
font: var(--cpd-font-body-lg-semibold);
35+
padding: var(--cpd-space-3x) var(--cpd-space-10x);
36+
}
37+
38+
.cpd-button[data-size="sm"] {
39+
font: var(--cpd-font-body-md-semibold);
40+
padding: var(--cpd-space-1x) var(--cpd-space-6x);
41+
}
42+
43+
/**
44+
* KINDS
45+
*/
46+
47+
.cpd-button[data-kind="primary"] {
48+
color: var(--cpd-color-text-on-solid-primary);
49+
background: var(--cpd-color-bg-action-primary-rest);
50+
border-width: 0;
51+
}
52+
53+
.cpd-button[data-kind="primary"]:hover {
54+
background: var(--cpd-color-bg-action-primary-hovered);
55+
}
56+
57+
.cpd-button[data-kind="primary"]:active {
58+
background: var(--cpd-color-bg-action-primary-pressed);
59+
}
60+
61+
.cpd-button[data-kind="primary"][disabled] {
62+
color: var(--cpd-color-text-disabled);
63+
background: var(--cpd-color-bg-subtle-primary);
64+
}
65+
66+
.cpd-button[data-kind="secondary"] {
67+
border: 1px solid var(--cpd-color-border-interactive-primary);
68+
color: var(--cpd-color-text-primary);
69+
background: var(--cpd-color-bg-canvas-default);
70+
}
71+
72+
.cpd-button[data-kind="secondary"]:hover {
73+
border-color: var(--cpd-color-border-interactive-hovered);
74+
background: var(--cpd-color-bg-subtle-secondary);
75+
}
76+
77+
.cpd-button[data-kind="secondary"]:active {
78+
border-color: var(--cpd-color-border-interactive-hovered);
79+
background: var(--cpd-color-bg-subtle-primary);
80+
}
81+
82+
.cpd-button[data-kind="secondary"][disabled] {
83+
border-color: var(--cpd-color-border-interactive-secondary);
84+
color: var(--cpd-color-text-disabled);
85+
background: var(--cpd-color-bg-subtle-secondary);
86+
}
87+
88+
.cpd-button[data-kind="tertiary"] {
89+
border: none;
90+
color: var(--cpd-color-text-primary);
91+
text-decoration: underline;
92+
background: transparent;
93+
}
94+
95+
.cpd-button[data-kind="tertiary"]:hover {
96+
background: var(--cpd-color-bg-subtle-secondary);
97+
}
98+
99+
.cpd-button[data-kind="tertiary"]:active {
100+
background: var(--cpd-color-bg-subtle-primary);
101+
}
102+
103+
.cpd-button[data-kind="tertiary"][disabled] {
104+
color: var(--cpd-color-text-disabled);
105+
}
106+
107+
.cpd-button[data-kind="destructive"] {
108+
border: 1px solid var(--cpd-color-border-critical-primary);
109+
color: var(--cpd-color-text-critical-primary);
110+
background: var(--cpd-color-bg-canvas-default);
111+
}
112+
113+
.cpd-button[data-kind="destructive"]:hover {
114+
border-color: var(--cpd-color-border-critical-hovered);
115+
background: var(--cpd-color-bg-critical-subtle);
116+
}
117+
118+
.cpd-button[data-kind="destructive"]:active {
119+
border-color: var(--cpd-color-border-critical-hovered);
120+
background: var(--cpd-color-bg-critical-subtle-hovered);
121+
}
122+
123+
.cpd-button[data-kind="destructive"][disabled] {
124+
border-color: var(--cpd-color-border-interactive-secondary);
125+
color: var(--cpd-color-text-disabled);
126+
background: var(--cpd-color-bg-subtle-secondary);
127+
}

‎frontend/src/styles/cpd-link.css‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
/* Copyright 2023 The Matrix.org Foundation C.I.C.
2+
*
3+
* Licensed under the Apache License, Version 2.0 (the "License");
4+
* you may not use this file except in compliance with the License.
5+
* You may obtain a copy of the License at
6+
*
7+
* http://www.apache.org/licenses/LICENSE-2.0
8+
*
9+
* Unless required by applicable law or agreed to in writing, software
10+
* distributed under the License is distributed on an "AS IS" BASIS,
11+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12+
* See the License for the specific language governing permissions and
13+
* limitations under the License.
14+
*/
15+
16+
.cpd-link {
17+
display: inline-block;
18+
text-decoration: underline;
19+
color: var(--cpd-color-text-primary);
20+
font-weight: var(--cpd-font-weight-medium);
21+
border-radius: var(--cpd-radius-pill-effect);
22+
padding-inline: 0.25rem;
23+
}
24+
25+
.cpd-link[data-kind="primary"] {
26+
color: var(--cpd-color-text-primary);
27+
}
28+
29+
.cpd-link[data-kind="critical"] {
30+
color: var(--cpd-color-text-critical-primary);
31+
}
32+
33+
.cpd-link[data-kind="primary"]:hover {
34+
background: var(--cpd-color-gray-300);
35+
}
36+
37+
.cpd-link[data-kind="critical"]:hover {
38+
background: var(--cpd-color-red-300);
39+
}
40+
41+
.cpd-link:active {
42+
color: var(--cpd-color-text-on-solid-primary);
43+
}
44+
45+
.cpd-link[data-kind="primary"]:active {
46+
background: var(--cpd-color-text-primary);
47+
}
48+
49+
.cpd-link[data-kind="critical"]:active {
50+
background: var(--cpd-color-text-critical-primary);
51+
}

‎frontend/src/templates.css‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,20 @@
1919
@import "@fontsource/inter/700.css";
2020
@import "@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css";
2121
@import "@vector-im/compound-web/dist/style.css";
22+
@import "./styles/cpd-button.css";
23+
@import "./styles/cpd-link.css";
2224

2325
@config "../tailwind.templates.config.cjs";
2426

2527
@tailwind base;
2628
@tailwind components;
27-
@tailwind utilities;
29+
@tailwind utilities;
30+
31+
body {
32+
/* XXX: I'm unsure why this is not part of the tokens */
33+
--cpd-radius-pill-effect: 9999px;
34+
35+
font: var(--cpd-font-body-md-regular);
36+
background: var(--cpd-color-bg-canvas-default);
37+
color: var(--cpd-color-text-primary);
38+
}

‎frontend/vite.config.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -36,9 +36,10 @@ export default defineConfig((env) => ({
3636
assetsInlineLimit: 0,
3737
sourcemap: true,
3838
modulePreload: false,
39-
// We don't handle CSS code splitting well yet, so we disable it for now
40-
// This means we have to load all the CSS through the `style.css` virtual entrypoint
41-
cssCodeSplit: false,
39+
40+
// We don't exactly handle CSS code splitting well if we're lazy loading components.
41+
// We disabled lazy loading for now, but we should fix this at some point.
42+
cssCodeSplit: true,
4243

4344
rollupOptions: {
4445
input: [

‎templates/app.html‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,17 +28,16 @@
2828
const query = window.matchMedia("(prefers-color-scheme: dark)");
2929
function handleChange(list) {
3030
if (list.matches) {
31-
document.documentElement.classList.add("dark");
31+
document.documentElement.classList.add("cpd-theme-dark");
3232
} else {
33-
document.documentElement.classList.remove("dark");
33+
document.documentElement.classList.remove("cpd-theme-dark");
3434
}
3535
}
3636

3737
query.addEventListener("change", handleChange);
3838
handleChange(query);
3939
})();
4040
</script>
41-
{{ include_asset(path='style.css') | indent(prefix=" ") | safe }}
4241
{{ include_asset(path='src/main.tsx') | indent(prefix=" ") | safe }}
4342
</head>
4443

‎templates/base.html‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,10 +28,9 @@
2828
<meta charset="utf-8">
2929
<title>{% block title %}matrix-authentication-service{% endblock title %}</title>
3030
<meta name="viewport" content="width=device-width, initial-scale=1">
31-
{{ include_asset(path='style.css') | indent(prefix=" ") | safe }}
3231
{{ include_asset(path='src/templates.css') | indent(prefix=" ") | safe }}
3332
</head>
34-
<body class="bg-white text-black-900 dark:bg-black-800 dark:text-white flex flex-col min-h-screen">
33+
<body class="flex flex-col min-h-screen">
3534
{% block content %}{% endblock content %}
3635
</body>
3736
</html>

‎templates/components/back_to_client.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,16 +14,16 @@
1414
limitations under the License.
1515
#}
1616

17-
{% macro link(text, class="", uri, mode, params) %}
17+
{% macro link(text, uri, mode, params, kind="primary") %}
1818
{% if mode == "form_post" %}
1919
<form method="post" action="{{ uri }}">
2020
{% for key, value in params %}
2121
<input type="hidden" name="{{ key }}" value="{{ value }}" />
2222
{% endfor %}
23-
<button class="{{ class }}" type="submit">{{ text }}</button>
23+
<button class="cpd-button" data-kind="{{ kind }}" data-size="lg" type="submit">{{ text }}</button>
2424
</form>
2525
{% elif mode == "fragment" or mode == "query" %}
26-
<a class="{{ class }}" href="{{ add_params_to_url(uri=uri, mode=mode, params=params) }}">{{ text }}</a>
26+
<a class="cpd-button" data-kind="{{ kind }}" data-size="lg" href="{{ add_params_to_url(uri=uri, mode=mode, params=params) }}">{{ text }}</a>
2727
{% else %}
2828
{{ throw(message="Invalid mode") }}
2929
{% endif %}

‎templates/components/button.html‎

Lines changed: 12 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{#
2-
Copyright 2021 The Matrix.org Foundation C.I.C.
2+
Copyright 2021-2023 The Matrix.org Foundation C.I.C.
33

44
Licensed under the Apache License, Version 2.0 (the "License");
55
you may not use this file except in compliance with the License.
@@ -14,40 +14,16 @@
1414
limitations under the License.
1515
#}
1616

17-
{% macro common_class() -%}
18-
px-4 py-2 border-2 rounded-lg font-medium text-center focus:ring-0 focus:outline-0 focus:border-black dark:focus:border-white
19-
{%- endmacro %}
20-
21-
{% macro plain_error_class() -%}
22-
{{ self::common_class() }} border-alert bg-alert text-white hover:opacity-75
23-
{%- endmacro %}
24-
25-
{% macro outline_error_class() -%}
26-
{{ self::common_class() }} border-alert text-alert hover:bg-alert/10
27-
{%- endmacro %}
28-
29-
{% macro plain_class() -%}
30-
{{ self::common_class() }} border-accent bg-accent text-white hover:opacity-75
31-
{%- endmacro %}
32-
33-
{% macro outline_class() -%}
34-
{{ self::common_class() }} border-accent hover:bg-accent/10 text-accent
35-
{%- endmacro %}
36-
37-
{% macro text_class() -%}
38-
{{ self::common_class() }} border-transparent hover:text-accent/70 text-accent
39-
{%- endmacro %}
40-
4117
{% macro link(text, href="#", class="") %}
42-
<a class="{{ self::plain_class() }} {{ class }}" href="{{ href }}">{{ text }}</a>
18+
<a class="cpd-button {{ class }}" data-kind="primary" data-size="lg" href="{{ href }}">{{ text }}</a>
4319
{% endmacro %}
4420

4521
{% macro link_text(text, href="#", class="") %}
46-
<a class="{{ self::text_class() }} {{ class }}" href="{{ href }}">{{ text }}</a>
22+
<a class="cpd-link {{ class }}" data-kind="primary" href="{{ href }}">{{ text }}</a>
4723
{% endmacro %}
4824

4925
{% macro link_outline(text, href="#", class="") %}
50-
<a class="{{ self::outline_class() }} {{ class }}" href="{{ href }}">{{ text }}</a>
26+
<a class="cpd-button {{ class }}" data-kind="secondary" data-size="lg" href="{{ href }}">{{ text }}</a>
5127
{% endmacro %}
5228

5329
{% macro button(
@@ -65,7 +41,9 @@
6541
value="{{ value }}"
6642
type="{{ type }}"
6743
{% if disabled %}disabled{% endif %}
68-
class="{{ self::plain_class() }} {{ class }}"
44+
class="cpd-button {{ class }}"
45+
data-kind="primary"
46+
data-size="lg"
6947
{% if autocapitalize %}autocapitilize="{{ autocapitilize }}"{% endif %}
7048
{% if autocomplete %}autocomplete="{{ autocomplete }}"{% endif %}
7149
{% if autocorrect %}autocorrect="{{ autocorrect }}"{% endif %}
@@ -87,7 +65,8 @@
8765
value="{{ value }}"
8866
type="{{ type }}"
8967
{% if disabled %}disabled{% endif %}
90-
class="{{ self::text_class() }} {{ class }}"
68+
data-kind="primary"
69+
class="cpd-link {{ class }}"
9170
{% if autocapitalize %}autocapitilize="{{ autocapitilize }}"{% endif %}
9271
{% if autocomplete %}autocomplete="{{ autocomplete }}"{% endif %}
9372
{% if autocorrect %}autocorrect="{{ autocorrect }}"{% endif %}
@@ -108,10 +87,12 @@
10887
name="{{ name }}"
10988
value="{{ value }}"
11089
type="{{ type }}"
90+
class="cpd-button {{ class }}"
91+
data-kind="secondary"
92+
data-size="lg"
11193
{% if disabled %}disabled{% endif %}
11294
{% if autocapitalize %}autocapitilize="{{ autocapitilize }}"{% endif %}
11395
{% if autocomplete %}autocomplete="{{ autocomplete }}"{% endif %}
11496
{% if autocorrect %}autocorrect="{{ autocorrect }}"{% endif %}
115-
class="{{ self::outline_class() }} {{ class }}"
11697
>{{ text }}</button>
11798
{% endmacro %}

0 commit comments

Comments
 (0)