studio/element-call
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Replace typography components with Compound components

Browse Source
This commit is contained in:
Robin
2024-09-11 13:44:43 -04:00
parent a5aeb6f324
commit e5e6233efb
18 changed files with 118 additions and 423 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/room/RoomAuthView.tsx
View File

@@ -9,16 +9,16 @@ import { FC, useCallback, useState } from "react";
import { useLocation } from "react-router-dom";
import { Trans, useTranslation } from "react-i18next";
import { logger } from "matrix-js-sdk/src/logger";
import { Button } from "@vector-im/compound-web";
import { Button, Heading, Text } from "@vector-im/compound-web";
import styles from "./RoomAuthView.module.css";
import { Body, Caption, Link, Headline } from "../typography/Typography";
import { Header, HeaderLogo, LeftNav, RightNav } from "../Header";
import { FieldRow, InputField, ErrorMessage } from "../input/Input";
import { Form } from "../form/Form";
import { UserMenuContainer } from "../UserMenuContainer";
import { useRegisterPasswordlessUser } from "../auth/useRegisterPasswordlessUser";
import { Config } from "../config/Config";
import { ExternalLink, Link } from "../button/Link";
export const RoomAuthView: FC = () => {
const [loading, setLoading] = useState(false);
@@ -63,9 +63,9 @@ export const RoomAuthView: FC = () => {
</Header>
<div className={styles.container}>
<main className={styles.main}>
<Headline className={styles.headline}>
<Heading size="xl" weight="semibold" className={styles.headline}>
{t("lobby.join_button")}
</Headline>
</Heading>
<Form className={styles.form} onSubmit={onSubmit}>
<FieldRow>
<InputField
@@ -79,14 +79,14 @@ export const RoomAuthView: FC = () => {
autoComplete="off"
/>
</FieldRow>
<Caption>
<Text size="sm">
<Trans i18nKey="room_auth_view_eula_caption">
By clicking "Join call now", you agree to our{" "}
<Link href={Config.get().eula}>
<ExternalLink href={Config.get().eula}>
End User Licensing Agreement (EULA)
</Link>
</ExternalLink>
</Trans>
</Caption>
</Text>
{error && (
<FieldRow>
<ErrorMessage error={error} />
@@ -103,17 +103,14 @@ export const RoomAuthView: FC = () => {
<div id={recaptchaId} />
</Form>
</main>
<Body className={styles.footer}>
<Text className={styles.footer}>
<Trans i18nKey="unauthenticated_view_body">
Not registered yet?{" "}
<Link
color="primary"
to={{ pathname: "/register", state: { from: location } }}
>
<Link to="/register" state={{ from: location }}>
Create an account
</Link>
</Trans>
</Body>
</Text>
</div>
</>
);