matrix/authentication-service
1
0
Fork 0
mirror of https://github.com/matrix-org/matrix-authentication-service.git synced 2026-01-12 22:51:25 +03:00
Code Activity

Apply prettier to all files in the frontend

Browse Source
This commit is contained in:
Quentin Gliech
2024-04-03 11:34:42 +02:00
parent b8205f2afd
commit d178a63281
29 changed files with 484 additions and 475 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/.prettierignore Normal file
View File

@@ -0,0 +1,4 @@
.storybook/locales.ts
locales/*.json
src/routeTree.gen.ts
src/gql/*

6
frontend/index.html
View File

@@ -16,14 +16,16 @@ limitations under the License.
<!-- Must be kept in sync with templates/app.html -->
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>matrix-authentication-service</title>
<script type="application/javascript">
window.APP_CONFIG = JSON.parse('{"root": "/account/", "graphqlEndpoint": "/graphql", "branding": {}}');
window.APP_CONFIG = JSON.parse(
'{"root": "/account/", "graphqlEndpoint": "/graphql", "branding": {}}',
);
(function () {
const query = window.matchMedia("(prefers-color-scheme: dark)");
function handleChange(list) {

12
frontend/src/components/Block/Block.module.css
View File

@@ -14,13 +14,13 @@
*/
.block {
width: 100%;
color: var(--cpd-color-text-primary);
padding-bottom: var(--cpd-space-5x);
width: 100%;
color: var(--cpd-color-text-primary);
padding-bottom: var(--cpd-space-5x);
&:last-child {
border-bottom: none;
}
&:last-child {
border-bottom: none;
}
}
.title {

8
frontend/src/components/BlockList/BlockList.module.css
View File

@@ -14,8 +14,8 @@
*/
.block-list {
display: flex;
flex-direction: column;
align-content: flex-start;
gap: var(--cpd-space-8x);
display: flex;
flex-direction: column;
align-content: flex-start;
gap: var(--cpd-space-8x);
}

12
frontend/src/components/Client/OAuth2ClientDetail.module.css
View File

@@ -13,10 +13,10 @@
* limitations under the License.
*/
.header {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
gap: var(--cpd-space-2x);
.header {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
gap: var(--cpd-space-2x);
}

163
frontend/src/components/Dialog/Dialog.module.css
View File

@@ -15,128 +15,133 @@
.overlay,
.scroll-container {
position: fixed;
inset: 0;
background: rgba(3 12 27 / 52.8%);
position: fixed;
inset: 0;
background: rgba(3 12 27 / 52.8%);
}
.scroll-container {
overflow-y: auto;
overflow-y: auto;
}
.container {
display: flex;
align-items: center;
justify-content: center;
min-height: 100svh;
display: flex;
align-items: center;
justify-content: center;
min-height: 100svh;
}
.dialog {
/* To position the close icon */
position: relative;
margin: var(--cpd-space-4x);
min-width: 0;
flex: 0 1 520px;
/* To position the close icon */
position: relative;
margin: var(--cpd-space-4x);
min-width: 0;
flex: 0 1 520px;
}
.body {
display: flex;
flex-direction: column;
gap: var(--cpd-space-4x);
background: var(--cpd-color-bg-canvas-default);
display: flex;
flex-direction: column;
gap: var(--cpd-space-4x);
background: var(--cpd-color-bg-canvas-default);
}
.title {
font: var(--cpd-font-heading-md-semibold);
letter-spacing: var(--cpd-font-letter-spacing-heading-md);
color: var(--cpd-color-text-primary);
margin-block-start: var(--cpd-space-4x);
font: var(--cpd-font-heading-md-semibold);
letter-spacing: var(--cpd-font-letter-spacing-heading-md);
color: var(--cpd-color-text-primary);
margin-block-start: var(--cpd-space-4x);
}
.dialog .body {
padding: var(--cpd-space-4x) var(--cpd-space-10x) var(--cpd-space-10x);
padding: var(--cpd-space-4x) var(--cpd-space-10x) var(--cpd-space-10x);
}
.dialog .title {
/* This adds a padding to the title to make sure it overflows correctly
/* This adds a padding to the title to make sure it overflows correctly
* and not behind the close button */
padding-inline-end: var(--cpd-space-7x);
padding-inline-end: var(--cpd-space-7x);
}
.dialog .close {
position: absolute;
inset-block-start: var(--cpd-space-7x);
inset-inline-end: var(--cpd-space-7x);
padding: var(--cpd-space-1x);
border-radius: var(--cpd-radius-pill-effect);
background: var(--cpd-color-bg-subtle-secondary);
color: var(--cpd-color-icon-secondary);
position: absolute;
inset-block-start: var(--cpd-space-7x);
inset-inline-end: var(--cpd-space-7x);
padding: var(--cpd-space-1x);
border-radius: var(--cpd-radius-pill-effect);
background: var(--cpd-color-bg-subtle-secondary);
color: var(--cpd-color-icon-secondary);
&>svg {
inline-size: var(--cpd-space-5x);
block-size: var(--cpd-space-5x);
}
& > svg {
inline-size: var(--cpd-space-5x);
block-size: var(--cpd-space-5x);
}
&:hover {
background: var(--cpd-color-bg-subtle-primary);
color: var(--cpd-color-icon-primary);
}
&:hover {
background: var(--cpd-color-bg-subtle-primary);
color: var(--cpd-color-icon-primary);
}
}
.drawer {
position: fixed;
background: var(--cpd-color-bg-canvas-default);
inset-block-end: 0;
inset-inline: 0;
position: fixed;
background: var(--cpd-color-bg-canvas-default);
inset-block-end: 0;
inset-inline: 0;
/* Cap the inline content size at 520px, filling the rest of the space with
/* Cap the inline content size at 520px, filling the rest of the space with
padding */
padding-inline: max(0px, calc((100% - 520px) / 2));
border-start-start-radius: var(--border-radius);
border-start-end-radius: var(--border-radius);
display: flex;
flex-direction: column;
padding-inline: max(0px, calc((100% - 520px) / 2));
border-start-start-radius: var(--border-radius);
border-start-end-radius: var(--border-radius);
display: flex;
flex-direction: column;
/* Drawer comes in the Android style by default */
--border-radius: 28px;
--handle-block-size: 4px;
--handle-inline-size: 32px;
--handle-inset-block-start: var(--cpd-space-4x);
--handle-inset-block-end: 0px;
--content-inset-block-start: calc(var(--handle-inset-block-start) + var(--handle-block-size) + var(--handle-inset-block-end));
/* Drawer comes in the Android style by default */
--border-radius: 28px;
--handle-block-size: 4px;
--handle-inline-size: 32px;
--handle-inset-block-start: var(--cpd-space-4x);
--handle-inset-block-end: 0px;
--content-inset-block-start: calc(
var(--handle-inset-block-start) + var(--handle-block-size) +
var(--handle-inset-block-end)
);
}
.drawer[data-platform="ios"] {
--border-radius: 10px;
--handle-block-size: 5px;
--handle-inline-size: 36px;
--handle-inset-block-start: var(--cpd-space-1-5x);
--handle-inset-block-end: 1px;
--border-radius: 10px;
--handle-block-size: 5px;
--handle-inline-size: 36px;
--handle-inset-block-start: var(--cpd-space-1-5x);
--handle-inset-block-end: 1px;
}
.drawer .body {
padding-inline: var(--cpd-space-4x);
padding-block-start: calc(var(--content-inset-block-start) + var(--cpd-space-6x));
padding-block-end: var(--cpd-space-12x);
border-start-start-radius: var(--border-radius);
border-start-end-radius: var(--border-radius);
padding-inline: var(--cpd-space-4x);
padding-block-start: calc(
var(--content-inset-block-start) + var(--cpd-space-6x)
);
padding-block-end: var(--cpd-space-12x);
border-start-start-radius: var(--border-radius);
border-start-end-radius: var(--border-radius);
/* Even with overflow: auto, the content can still overflow at the corners
/* Even with overflow: auto, the content can still overflow at the corners
where it meets with the curved border. A contain: paint fixes that. */
contain: paint;
overflow: auto;
scrollbar-width: none;
contain: paint;
overflow: auto;
scrollbar-width: none;
--cpd-separator-spacing: 0;
--cpd-separator-inset: var(--cpd-space-4x);
--cpd-separator-spacing: 0;
--cpd-separator-inset: var(--cpd-space-4x);
}
.drawer .body::before {
content: "";
position: absolute;
block-size: var(--handle-block-size);
inset-inline: calc((100% - var(--handle-inline-size)) / 2);
inset-block-start: var(--handle-inset-block-start);
background: var(--cpd-color-icon-secondary);
border-radius: var(--cpd-radius-pill-effect);
content: "";
position: absolute;
block-size: var(--handle-block-size);
inset-inline: calc((100% - var(--handle-inline-size)) / 2);
inset-block-start: var(--handle-inset-block-start);
background: var(--cpd-color-icon-secondary);
border-radius: var(--cpd-radius-pill-effect);
}

8
frontend/src/components/ExternalLink/ExternalLink.module.css
View File

@@ -13,7 +13,7 @@
* limitations under the License.
*/
.external-link {
/* override compound style */
color: var(--cpd-color-text-link-external) !important;
}
.external-link {
/* override compound style */
color: var(--cpd-color-text-link-external) !important;
}

10
frontend/src/components/GenericError.module.css
View File

@@ -14,9 +14,9 @@
*/
.details {
font: var(--cpd-font-body-sm-regular);
background: var(--cpd-color-bg-critical-subtle);
border: 1px solid var(--cpd-color-border-critical-subtle);
padding: var(--cpd-space-4x);
text-align: initial;
font: var(--cpd-font-body-sm-regular);
background: var(--cpd-color-bg-critical-subtle);
border: 1px solid var(--cpd-color-border-critical-subtle);
padding: var(--cpd-space-4x);
text-align: initial;
}

12
frontend/src/components/LoadingScreen/LoadingScreen.module.css
View File

@@ -14,12 +14,12 @@
*/
.loading-screen {
display: flex;
display: flex;
/* Fallback for browsers that do not support 100svh */
min-height: 100vh;
min-height: 100svh;
/* Fallback for browsers that do not support 100svh */
min-height: 100vh;
min-height: 100svh;
justify-content: center;
align-items: center;
justify-content: center;
align-items: center;
}

32
frontend/src/components/LoadingSpinner/LoadingSpinner.module.css
View File

@@ -14,29 +14,29 @@
*/
@keyframes spin {
to {
transform: rotate(360deg);
}
to {
transform: rotate(360deg);
}
}
:root {
--size: var(--cpd-space-16x);
--size: var(--cpd-space-16x);
}
.inline {
display: inline;
margin-right: var(--cpd-space-4x);
.loading-spinner-inner {
height: var(--cpd-space-4x);
width: var(--cpd-space-4x);
}
display: inline;
margin-right: var(--cpd-space-4x);
.loading-spinner-inner {
height: var(--cpd-space-4x);
width: var(--cpd-space-4x);
}
}
.loading-spinner-inner {
height: var(--cpd-space-16x);
width: var(--cpd-space-16x);
display: inline;
animation: spin 1s linear infinite;
fill: var(--cpd-color-icon-primary);
height: var(--cpd-space-16x);
width: var(--cpd-space-16x);
display: inline;
animation: spin 1s linear infinite;
fill: var(--cpd-color-icon-primary);
}

12
frontend/src/components/NavBar/NavBar.module.css
View File

@@ -14,13 +14,13 @@
*/
.nav-bar {
border-bottom: var(--cpd-border-width-1) solid var(--cpd-color-gray-400);
border-bottom: var(--cpd-border-width-1) solid var(--cpd-color-gray-400);
}
.nav-bar-items {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
gap: var(--cpd-space-3x);
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
gap: var(--cpd-space-3x);
}

55
frontend/src/components/NavItem/NavItem.module.css
View File

@@ -14,57 +14,56 @@
*/
.nav-tab {
padding: var(--cpd-space-4x) 0;
position: relative;
padding: var(--cpd-space-4x) 0;
position: relative;
}
/* Underline effect */
.nav-tab::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 0;
border-radius: var(--cpd-radius-pill-effect) var(--cpd-radius-pill-effect) 0 0;
background-color: var(--cpd-color-bg-action-primary-rest);
transition: height 0.1s ease-in-out;
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 0;
border-radius: var(--cpd-radius-pill-effect) var(--cpd-radius-pill-effect) 0 0;
background-color: var(--cpd-color-bg-action-primary-rest);
transition: height 0.1s ease-in-out;
}
.nav-tab:has(.nav-item[aria-current="page"])::before {
/* This is not exactly right: designs says 3px, but there are no variables for that */
height: var(--cpd-border-width-4);
/* This is not exactly right: designs says 3px, but there are no variables for that */
height: var(--cpd-border-width-4);
}
.nav-item {
padding: var(--cpd-space-1x) var(--cpd-space-2x);
color: var(--cpd-color-text-secondary);
line-height: var(--cpd-space-6x);
border-radius: var(--cpd-radius-pill-effect);
border: transparent var(--cpd-border-width-2) solid;
padding: var(--cpd-space-1x) var(--cpd-space-2x);
color: var(--cpd-color-text-secondary);
line-height: var(--cpd-space-6x);
border-radius: var(--cpd-radius-pill-effect);
border: transparent var(--cpd-border-width-2) solid;
}
.nav-item.external-link {
text-decoration: underline;
color: var(--cpd-color-text-primary);
text-decoration: underline;
color: var(--cpd-color-text-primary);
}
.nav-item:hover {
color: var(--cpd-color-text-primary);
background-color: var(--cpd-color-bg-subtle-secondary);
color: var(--cpd-color-text-primary);
background-color: var(--cpd-color-bg-subtle-secondary);
}
.nav-item:active {
color: var(--cpd-color-text-primary);
background-color: var(--cpd-color-bg-subtle-primary);
color: var(--cpd-color-text-primary);
background-color: var(--cpd-color-bg-subtle-primary);
}
.nav-item:focus {
outline: none;
border-color: var(--cpd-color-border-focused);
outline: none;
border-color: var(--cpd-color-border-focused);
}
.nav-item[aria-current="page"] {
color: var(--cpd-color-text-primary);
color: var(--cpd-color-text-primary);
}

119
frontend/src/components/PageHeading/PageHeading.module.css
View File

@@ -14,71 +14,70 @@
*/
.page-heading {
display: flex;
flex-direction: column;
gap: var(--cpd-space-4x);
/* Layout already has 6x padding, and we need 10x */
margin-block-start: var(--cpd-space-4x);
& .icon {
display: flex;
align-items: center;
justify-content: center;
align-self: center;
height: var(--cpd-space-16x);
width: var(--cpd-space-16x);
padding: var(--cpd-space-2x);
background-color: var(--cpd-color-bg-subtle-secondary);
border-radius: var(--cpd-space-2x);
&.invalid {
background-color: var(--cpd-color-bg-critical-subtle);
& svg {
color: var(--cpd-color-icon-critical-primary);
}
}
&.success {
background-color: var(--cpd-color-bg-success-subtle);
& svg {
color: var(--cpd-color-icon-success-primary);
}
}
& svg {
height: var(--cpd-space-10x);
width: var(--cpd-space-10x);
color: var(--cpd-color-icon-secondary);
}
}
& .header {
display: flex;
flex-direction: column;
gap: var(--cpd-space-4x);
gap: var(--cpd-space-2x);
text-align: center;
/* Layout already has 6x padding, and we need 10x */
margin-block-start: var(--cpd-space-4x);
& .icon {
display: flex;
align-items: center;
justify-content: center;
align-self: center;
height: var(--cpd-space-16x);
width: var(--cpd-space-16x);
padding: var(--cpd-space-2x);
background-color: var(--cpd-color-bg-subtle-secondary);
border-radius: var(--cpd-space-2x);
&.invalid {
background-color: var(--cpd-color-bg-critical-subtle);
& svg {
color: var(--cpd-color-icon-critical-primary);
}
}
&.success {
background-color: var(--cpd-color-bg-success-subtle);
& svg {
color: var(--cpd-color-icon-success-primary);
}
}
& svg {
height: var(--cpd-space-10x);
width: var(--cpd-space-10x);
color: var(--cpd-color-icon-secondary);
}
& .title {
font: var(--cpd-font-heading-lg-semibold);
letter-spacing: var(--cpd-font-letter-spacing-heading-xl);
color: var(--cpd-color-text-primary);
}
& .header {
display: flex;
flex-direction: column;
gap: var(--cpd-space-2x);
text-align: center;
& .text {
font: var(--cpd-font-body-lg-regular);
letter-spacing: var(--cpd-font-letter-spacing-body-lg);
color: var(--cpd-color-text-secondary);
text-wrap: balance;
& .title {
font: var(--cpd-font-heading-lg-semibold);
letter-spacing: var(--cpd-font-letter-spacing-heading-xl);
color: var(--cpd-color-text-primary);
}
& .text {
font: var(--cpd-font-body-lg-regular);
letter-spacing: var(--cpd-font-letter-spacing-body-lg);
color: var(--cpd-color-text-secondary);
text-wrap: balance;
& em {
font-style: normal;
color: var(--cpd-color-text-primary);
}
}
& em {
font-style: normal;
color: var(--cpd-color-text-primary);
}
}
}
}

14
frontend/src/components/Session/ClientAvatar.module.css
View File

@@ -14,10 +14,10 @@
*/
.avatar {
object-fit: cover;
overflow: hidden;
aspect-ratio: 1 / 1;
width: var(--mas-avatar-size);
border-radius: 50%;
display: inline-block;
}
object-fit: cover;
overflow: hidden;
aspect-ratio: 1 / 1;
width: var(--mas-avatar-size);
border-radius: 50%;
display: inline-block;
}

14
frontend/src/components/Session/DeviceTypeIcon.module.css
View File

@@ -14,11 +14,11 @@
*/
.device-type-icon {
color: var(--cpd-color-icon-secondary);
background-color: var(--cpd-color-bg-subtle-secondary);
box-sizing: content-box;
height: var(--cpd-space-6x);
width: var(--cpd-space-6x);
padding: var(--cpd-space-2x);
border-radius: var(--cpd-space-2x);
color: var(--cpd-color-icon-secondary);
background-color: var(--cpd-color-bg-subtle-secondary);
box-sizing: content-box;
height: var(--cpd-space-6x);
width: var(--cpd-space-6x);
padding: var(--cpd-space-2x);
border-radius: var(--cpd-space-2x);
}

4
frontend/src/components/Session/LastActive.module.css
View File

@@ -14,5 +14,5 @@
*/
.active {
color: var(--cpd-color-text-success-primary);
}
color: var(--cpd-color-text-success-primary);
}

215
frontend/src/components/SessionCard/SessionCard.module.css
View File

@@ -14,12 +14,12 @@
*/
.session-card-root {
position: relative;
position: relative;
}
@media screen and (min-width: 768px) {
.session-card-root:has(.action) .session-card .card-header {
/* We can't exactly know the width of the action button,
.session-card-root:has(.action) .session-card .card-header {
/* We can't exactly know the width of the action button,
* so we use a somewhat arbitrary safe value:
* - the button padding is 4x + 5x
* - the icon is 5x wide
@@ -28,13 +28,13 @@
*
* Of course that depends on the translation, but it's a good start
*/
padding-inline-end: calc(var(--cpd-space-16x) + 10ch);
}
padding-inline-end: calc(var(--cpd-space-16x) + 10ch);
}
}
@media screen and (max-width: 767px) {
.session-card-root:has(.action) .session-card {
/* On small screen, the action button is at the bottom, and we can accurately
.session-card-root:has(.action) .session-card {
/* On small screen, the action button is at the bottom, and we can accurately
* calculate the height of the button:
*
* - the button padding is 1x + 1x
@@ -43,128 +43,131 @@
* - the 4x margin on top of the button
* - the regular 6x padding
*/
padding-block-end: calc(var(--cpd-space-9x) + var(--cpd-space-6x) + var(--cpd-space-6x));
}
padding-block-end: calc(
var(--cpd-space-9x) + var(--cpd-space-6x) + var(--cpd-space-6x)
);
}
}
.session-card {
display: flex;
gap: var(--cpd-space-4x);
flex-direction: column;
text-align: start;
border-radius: var(--cpd-space-4x);
background-color: var(--cpd-color-bg-canvas-default);
outline: 1px solid var(--cpd-color-border-interactive-secondary);
outline-offset: -1px;
box-shadow: 0px 1.2px 2.4px 0px rgba(0, 0, 0, 0.15);
padding: var(--cpd-space-6x);
&.disabled {
outline-color: var(--cpd-color-border-disabled);
background-color: var(--cpd-color-bg-canvas-disabled);
box-shadow: none;
}
&.compact {
box-shadow: none;
padding: var(--cpd-space-3x);
}
& .card-header {
display: flex;
gap: var(--cpd-space-4x);
flex-direction: column;
text-align: start;
align-items: center;
border-radius: var(--cpd-space-4x);
background-color: var(--cpd-color-bg-canvas-default);
outline: 1px solid var(--cpd-color-border-interactive-secondary);
outline-offset: -1px;
box-shadow: 0px 1.2px 2.4px 0px rgba(0, 0, 0, 0.15);
padding: var(--cpd-space-6x);
& .content {
display: flex;
flex-direction: column;
&.disabled {
outline-color: var(--cpd-color-border-disabled);
background-color: var(--cpd-color-bg-canvas-disabled);
box-shadow: none;
}
/* This makes sure it can shrink, and that the text doesn't overflow */
flex: 0 1 auto;
min-width: 0;
&.compact {
box-shadow: none;
padding: var(--cpd-space-3x);
}
&.auto div:first-child,
& .name {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font: var(--cpd-font-body-md-semibold);
letter-spacing: var(--cpd-font-letter-spacing-body-md);
color: var(--cpd-color-text-primary);
}
& .card-header {
display: flex;
gap: var(--cpd-space-4x);
align-items: center;
&.auto div:not(:first-child),
& .client {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font: var(--cpd-font-body-sm-regular);
letter-spacing: var(--cpd-font-letter-spacing-body-sm);
color: var(--cpd-color-text-secondary);
& .content {
display: flex;
flex-direction: column;
/* This makes sure it can shrink, and that the text doesn't overflow */
flex: 0 1 auto;
min-width: 0;
&.auto div:first-child,
& .name {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font: var(--cpd-font-body-md-semibold);
letter-spacing: var(--cpd-font-letter-spacing-body-md);
color: var(--cpd-color-text-primary);
}
&.auto div:not(:first-child),
& .client {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font: var(--cpd-font-body-sm-regular);
letter-spacing: var(--cpd-font-letter-spacing-body-sm);
color: var(--cpd-color-text-secondary);
& img {
margin-inline-end: var(--cpd-space-1x);
}
}
& img {
margin-inline-end: var(--cpd-space-1x);
}
}
}
}
& .metadata {
display: flex;
flex-wrap: wrap;
gap: var(--cpd-space-4x) var(--cpd-space-10x);
& .key {
font: var(--cpd-font-body-sm-regular);
letter-spacing: var(--cpd-font-letter-spacing-body-sm);
color: var(--cpd-color-text-secondary);
}
& .metadata {
display: flex;
flex-wrap: wrap;
gap: var(--cpd-space-4x) var(--cpd-space-10x);
& .key {
font: var(--cpd-font-body-sm-regular);
letter-spacing: var(--cpd-font-letter-spacing-body-sm);
color: var(--cpd-color-text-secondary);
}
& .value {
font: var(--cpd-font-body-md-regular);
letter-spacing: var(--cpd-font-letter-spacing-body-md);
color: var(--cpd-color-text-primary);
}
& .value {
font: var(--cpd-font-body-md-regular);
letter-spacing: var(--cpd-font-letter-spacing-body-md);
color: var(--cpd-color-text-primary);
}
}
}
a.session-card:not(.disabled) {
transition-property: outline-color, box-shadow;
transition-duration: 0.1s;
transition-timing-function: linear;
transition-property: outline-color, box-shadow;
transition-duration: 0.1s;
transition-timing-function: linear;
&:hover,
&:focus-visible {
box-shadow: none;
outline: 2px solid var(--cpd-color-border-interactive-hovered);
outline-offset: -2px;
}
&:hover,
&:focus-visible {
box-shadow: none;
outline: 2px solid var(--cpd-color-border-interactive-hovered);
outline-offset: -2px;
}
&:focus-visible {
outline-color: var(--cpd-color-border-focused);
}
&:focus-visible {
outline-color: var(--cpd-color-border-focused);
}
}
.session-card-root {
@media screen and (min-width: 768px) {
.action {
position: absolute;
/* This padding creates a safe area for the action button */
padding: var(--cpd-space-6x) var(--cpd-space-6x) var(--cpd-space-2x) var(--cpd-space-2x);
inset-block-start: 0;
inset-inline-end: 0;
}
@media screen and (min-width: 768px) {
.action {
position: absolute;
/* This padding creates a safe area for the action button */
padding: var(--cpd-space-6x) var(--cpd-space-6x) var(--cpd-space-2x)
var(--cpd-space-2x);
inset-block-start: 0;
inset-inline-end: 0;
}
}
@media screen and (max-width: 767px) {
.action {
display: flex;
flex-direction: column;
position: absolute;
padding: var(--cpd-space-6x);
inset-block-end: 0;
inset-inline: 0;
}
@media screen and (max-width: 767px) {
.action {
display: flex;
flex-direction: column;
position: absolute;
padding: var(--cpd-space-6x);
inset-block-end: 0;
inset-inline: 0;
}
}
}

4
frontend/src/components/SessionDetail/BrowserSessionDetail.module.css
View File

@@ -14,5 +14,5 @@
*/
.current-badge {
align-self: flex-start;
}
align-self: flex-start;
}

58
frontend/src/components/SessionDetail/SessionHeader.module.css
View File

@@ -14,39 +14,39 @@
*/
.header {
display: flex;
flex-direction: row;
justify-content: flex-start;
gap: var(--cpd-space-4x);
align-items: center;
display: flex;
flex-direction: row;
justify-content: flex-start;
gap: var(--cpd-space-4x);
align-items: center;
}
.back-button {
display: block;
inline-size: var(--cpd-space-7x);
block-size: var(--cpd-space-7x);
display: block;
inline-size: var(--cpd-space-7x);
block-size: var(--cpd-space-7x);
/* the icon is 0.75 the size of the button, so add padding to put it in the middle */
padding: var(--cpd-space-1x);
aspect-ratio: 1 / 1;
color: var(--cpd-color-icon-tertiary);
border: 0;
appearance: none;
cursor: pointer;
border-radius: 50%;
position: relative;
background-color: var(--cpd-color-bg-subtle-secondary);
line-height: 0px;
/* the icon is 0.75 the size of the button, so add padding to put it in the middle */
padding: var(--cpd-space-1x);
aspect-ratio: 1 / 1;
color: var(--cpd-color-icon-tertiary);
border: 0;
appearance: none;
cursor: pointer;
border-radius: 50%;
position: relative;
background-color: var(--cpd-color-bg-subtle-secondary);
line-height: 0px;
}
.back-button svg {
inline-size: var(--cpd-space-5x);
block-size: var(--cpd-space-5x);
inline-size: var(--cpd-space-5x);
block-size: var(--cpd-space-5x);
}
.back-button[aria-disabled="true"] {
color: var(--cpd-color-icon-disabled);
cursor: not-allowed;
color: var(--cpd-color-icon-disabled);
cursor: not-allowed;
}
/**
@@ -54,13 +54,13 @@
*/
@media (hover) {
.back-button:not([aria-disabled="true"]):hover {
color: var(--cpd-color-icon-primary);
background: var(--cpd-color-bg-subtle-primary);
}
.back-button:not([aria-disabled="true"]):hover {
color: var(--cpd-color-icon-primary);
background: var(--cpd-color-bg-subtle-primary);
}
}
.back-button:not([aria-disabled="true"]):active {
color: var(--cpd-color-icon-primary);
background: var(--cpd-color-bg-subtle-primary);
color: var(--cpd-color-icon-primary);
background: var(--cpd-color-bg-subtle-primary);
}

2
frontend/src/components/UserEmail/UserEmail.module.css
View File

@@ -50,7 +50,7 @@ button[disabled] .user-email-delete-icon {
padding: var(--cpd-space-3x);
font: var(--cpd-font-body-md-semibold);
&>svg {
& > svg {
color: var(--cpd-color-icon-secondary);
background-color: var(--cpd-color-bg-subtle-secondary);
padding: var(--cpd-space-2x);

50
frontend/src/components/UserGreeting/UserGreeting.module.css
View File

@@ -14,43 +14,43 @@
*/
.user {
display: flex;
flex-direction: row;
align-items: center;
gap: var(--cpd-space-4x);
outline: 1px solid var(--cpd-color-gray-400);
outline-offset: -1px;
border-radius: var(--cpd-space-3x);
padding: var(--cpd-space-4x)
display: flex;
flex-direction: row;
align-items: center;
gap: var(--cpd-space-4x);
outline: 1px solid var(--cpd-color-gray-400);
outline-offset: -1px;
border-radius: var(--cpd-space-3x);
padding: var(--cpd-space-4x);
}
.meta {
flex: 1 1;
flex: 1 1;
/* Make sure the text properly truncates */
min-width: 0;
/* Make sure the text properly truncates */
min-width: 0;
& p {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
& p {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
.edit-button {
align-self: flex-start;
align-self: flex-start;
}
.mxid {
color: var(--cpd-color-text-secondary);
color: var(--cpd-color-text-secondary);
}
.dialog-form {
display: flex;
flex-direction: column;
gap: var(--cpd-space-4x);
align-self: center;
max-width: 378px;
width: 100%;
margin-block-end: var(--cpd-space-9x);
display: flex;
flex-direction: column;
gap: var(--cpd-space-4x);
align-self: center;
max-width: 378px;
width: 100%;
margin-block-end: var(--cpd-space-9x);
}

80
frontend/src/components/UserProfile/EditInPlace.module.css
View File

@@ -14,60 +14,60 @@
*/
.container {
display: flex;
gap: var(--cpd-space-2x);
display: flex;
gap: var(--cpd-space-2x);
}
button.save,
button.cancel {
height: var(--cpd-space-9x);
width: var(--cpd-space-9x);
padding: calc(var(--cpd-space-2x) - 1px);
border-style: solid;
border-width: 1px;
border-radius: var(--cpd-radius-pill-effect);
transition-duration: 0.1s;
transition-property: color, background-color, border-color, box-shadow;
height: var(--cpd-space-9x);
width: var(--cpd-space-9x);
padding: calc(var(--cpd-space-2x) - 1px);
border-style: solid;
border-width: 1px;
border-radius: var(--cpd-radius-pill-effect);
transition-duration: 0.1s;
transition-property: color, background-color, border-color, box-shadow;
&>svg {
height: var(--cpd-space-5x);
width: var(--cpd-space-5x);
}
& > svg {
height: var(--cpd-space-5x);
width: var(--cpd-space-5x);
}
}
button.save {
background-color: var(--cpd-color-bg-action-primary-rest);
border-color: var(--cpd-color-bg-action-primary-rest);
color: var(--cpd-color-text-on-solid-primary);
background-color: var(--cpd-color-bg-action-primary-rest);
border-color: var(--cpd-color-bg-action-primary-rest);
color: var(--cpd-color-text-on-solid-primary);
&:hover {
background-color: var(--cpd-color-bg-action-primary-hovered);
border-color: var(--cpd-color-bg-action-primary-hovered);
}
&:hover {
background-color: var(--cpd-color-bg-action-primary-hovered);
border-color: var(--cpd-color-bg-action-primary-hovered);
}
&:active {
background-color: var(--cpd-color-bg-action-primary-pressed);
border-color: var(--cpd-color-bg-action-primary-pressed);
}
&:active {
background-color: var(--cpd-color-bg-action-primary-pressed);
border-color: var(--cpd-color-bg-action-primary-pressed);
}
}
button.cancel {
background-color: var(--cpd-color-bg-action-secondary-rest);
border-color: var(--cpd-color-border-interactive-secondary);
color: var(--cpd-color-icon-primary);
background-color: var(--cpd-color-bg-action-secondary-rest);
border-color: var(--cpd-color-border-interactive-secondary);
color: var(--cpd-color-icon-primary);
/** TODO: have the shadow in the design tokens */
box-shadow: 0 1.2px 2.4px 0 rgb(0 0 0 / 15%);
/** TODO: have the shadow in the design tokens */
box-shadow: 0 1.2px 2.4px 0 rgb(0 0 0 / 15%);
&:hover {
background-color: var(--cpd-color-bg-action-secondary-hovered);
border-color: var(--cpd-color-border-interactive-hovered);
box-shadow: none;
}
&:hover {
background-color: var(--cpd-color-bg-action-secondary-hovered);
border-color: var(--cpd-color-border-interactive-hovered);
box-shadow: none;
}
&:active {
background-color: var(--cpd-color-bg-action-secondary-pressed);
border-color: var(--cpd-color-border-interactive-hovered);
box-shadow: none;
}
&:active {
background-color: var(--cpd-color-bg-action-secondary-pressed);
border-color: var(--cpd-color-border-interactive-hovered);
box-shadow: none;
}
}

18
frontend/src/components/UserSessionsOverview/BrowserSessionsOverview.module.css
View File

@@ -14,14 +14,14 @@
*/
.session-list-block {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
gap: var(--cpd-space-1x);
}
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
gap: var(--cpd-space-1x);
}
.session-list-block-info {
display: flex;
flex-direction: column;
}
display: flex;
flex-direction: column;
}

15
frontend/src/styles/cpd-checkbox-control.css
View File

@@ -88,7 +88,8 @@
}
@media (hover) {
.cpd-checkbox-input:not([disabled], [readonly], :checked):hover + .cpd-checkbox-ui {
.cpd-checkbox-input:not([disabled], [readonly], :checked):hover
+ .cpd-checkbox-ui {
color: var(--cpd-color-icon-quaternary);
border-color: var(--cpd-color-border-interactive-hovered);
@@ -96,22 +97,26 @@
box-shadow: 0 1.2px 2.4px 0 rgb(0 0 0 / 15%);
}
.cpd-checkbox-input:not([disabled], [readonly]):checked:hover + .cpd-checkbox-ui {
.cpd-checkbox-input:not([disabled], [readonly]):checked:hover
+ .cpd-checkbox-ui {
border-color: var(--cpd-color-bg-action-primary-hovered);
background: var(--cpd-color-bg-action-primary-hovered);
}
.cpd-checkbox-input[data-invalid]:not([disabled], [readonly]):checked:hover + .cpd-checkbox-ui {
.cpd-checkbox-input[data-invalid]:not([disabled], [readonly]):checked:hover
+ .cpd-checkbox-ui {
border-color: var(--cpd-color-bg-critical-hovered);
background: var(--cpd-color-bg-critical-hovered);
}
}
.cpd-checkbox-input[data-invalid]:not([disabled], :checked, [readonly]) + .cpd-checkbox-ui {
.cpd-checkbox-input[data-invalid]:not([disabled], :checked, [readonly])
+ .cpd-checkbox-ui {
border-color: var(--cpd-color-border-critical-primary);
}
.cpd-checkbox-input[data-invalid]:not([disabled], [readonly]):checked + .cpd-checkbox-ui {
.cpd-checkbox-input[data-invalid]:not([disabled], [readonly]):checked
+ .cpd-checkbox-ui {
background-color: var(--cpd-color-bg-critical-primary);
border-color: var(--cpd-color-bg-critical-primary);
}

2
frontend/src/styles/cpd-link.css
View File

@@ -50,4 +50,4 @@
.cpd-link[data-kind="critical"]:active {
background: var(--cpd-color-text-critical-primary);
}
}

10
frontend/src/styles/cpd-mfa-control.css
View File

@@ -68,7 +68,7 @@
}
@media (hover) {
.cpd-mfa-control:hover~.cpd-mfa-digit {
.cpd-mfa-control:hover ~ .cpd-mfa-digit {
border-color: var(--cpd-color-border-interactive-hovered);
/** TODO: have the shadow in the design tokens */
@@ -81,7 +81,7 @@
cursor: not-allowed;
}
.cpd-mfa-control:disabled~.cpd-mfa-digit {
.cpd-mfa-control:disabled ~ .cpd-mfa-digit {
box-shadow: none;
background: var(--cpd-color-bg-canvas-disabled);
border-color: var(--cpd-color-border-disabled);
@@ -91,17 +91,17 @@
color: var(--cpd-color-text-secondary);
}
.cpd-mfa-control[readonly]~.cpd-mfa-digit {
.cpd-mfa-control[readonly] ~ .cpd-mfa-digit {
box-shadow: none;
background: var(--cpd-color-bg-subtle-secondary);
border-color: var(--cpd-color-bg-subtle-secondary);
}
.cpd-mfa-control[data-invalid]~.cpd-mfa-digit {
.cpd-mfa-control[data-invalid] ~ .cpd-mfa-digit {
border-color: var(--cpd-color-text-critical-primary);
}
.cpd-mfa-control:focus~.cpd-mfa-digit:not([data-filled]) {
.cpd-mfa-control:focus ~ .cpd-mfa-digit:not([data-filled]) {
outline: 2px solid var(--cpd-color-border-focused);
border-color: transparent;
}

6
frontend/src/templates.css
View File

@@ -98,7 +98,7 @@
flex-direction: column;
gap: var(--cpd-space-1x);
&>li {
& > li {
font: var(--cpd-font-body-md-regular);
letter-spacing: var(--cpd-font-letter-spacing-body-md);
color: var(--cpd-color-text-primary);
@@ -119,11 +119,11 @@
border-bottom-right-radius: var(--border-radius);
}
&>p {
& > p {
flex: 1;
}
&>svg {
& > svg {
display: block;
height: var(--cpd-space-6x);
width: var(--cpd-space-6x);

12
frontend/tsconfig.json
View File

@@ -2,11 +2,7 @@
"compilerOptions": {
"target": "ESNext",
"useDefineForClassFields": true,
"lib": [
"DOM",
"DOM.Iterable",
"ESNext"
],
"lib": ["DOM", "DOM.Iterable", "ESNext"],
"types": ["vite/client", "vitest/importMeta"],
"allowJs": false,
"skipLibCheck": true,
@@ -21,11 +17,7 @@
"noEmit": true,
"jsx": "react-jsx"
},
"include": [
"src",
"locales",
".storybook/preview.tsx"
],
"include": ["src", "locales", ".storybook/preview.tsx"],
"references": [
{
"path": "./tsconfig.node.json"

2
frontend/vite.config.ts
View File

@@ -31,7 +31,7 @@ function i18nHotReload(): PluginOption {
handleHotUpdate({ file, server }): void {
if (file.includes("locales") && file.endsWith(".json")) {
console.log("Locale file updated");
server.ws.send({
server.hot.send({
type: "custom",
event: "locales-update",
});