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

19
src/room/CallEndedView.tsx
View File

@@ -9,12 +9,11 @@ import { FC, FormEventHandler, ReactNode, useCallback, useState } from "react";
import { MatrixClient } from "matrix-js-sdk/src/client";
import { Trans, useTranslation } from "react-i18next";
import { useHistory } from "react-router-dom";
import { Button } from "@vector-im/compound-web";
import { Button, Heading, Text } from "@vector-im/compound-web";
import styles from "./CallEndedView.module.css";
import feedbackStyle from "../input/FeedbackInput.module.css";
import { useProfile } from "../profile/useProfile";
import { Body, Headline } from "../typography/Typography";
import { Header, HeaderLogo, LeftNav, RightNav } from "../Header";
import { PosthogAnalytics } from "../analytics/PosthogAnalytics";
import { FieldRow, InputField } from "../input/Input";
@@ -139,11 +138,11 @@ export const CallEndedView: FC<Props> = ({
return (
<>
<main className={styles.main}>
<Headline className={styles.headline}>
<Heading size="xl" weight="semibold" className={styles.headline}>
<Trans i18nKey="call_ended_view.body">
You were disconnected from the call
</Trans>
</Headline>
</Heading>
<div className={styles.disconnectedButtons}>
<Button onClick={reconnect}>
{t("call_ended_view.reconnect_button")}
@@ -154,9 +153,9 @@ export const CallEndedView: FC<Props> = ({
</div>
</main>
{!confineToRoom && (
<Body className={styles.footer}>
<Text className={styles.footer}>
<Link to="/"> {t("return_home_button")} </Link>
</Body>
</Text>
)}
</>
);
@@ -164,7 +163,7 @@ export const CallEndedView: FC<Props> = ({
return (
<>
<main className={styles.main}>
<Headline className={styles.headline}>
<Heading size="xl" weight="semibold" className={styles.headline}>
{surveySubmitted
? t("call_ended_view.headline", {
displayName,
@@ -174,16 +173,16 @@ export const CallEndedView: FC<Props> = ({
}) +
"\n" +
t("call_ended_view.survey_prompt")}
</Headline>
</Heading>
{(!surveySubmitted || confineToRoom) &&
PosthogAnalytics.instance.isEnabled()
? qualitySurveyDialog
: createAccountDialog}
</main>
{!confineToRoom && (
<Body className={styles.footer}>
<Text className={styles.footer}>
<Link to="/"> {t("call_ended_view.not_now_button")} </Link>
</Body>
</Text>
)}
</>
);

22
src/room/GroupCallLoader.tsx
View File

@@ -5,13 +5,12 @@ SPDX-License-Identifier: AGPL-3.0-only
Please see LICENSE in the repository root for full details.
*/
import { useCallback } from "react";
import { MatrixClient } from "matrix-js-sdk/src/client";
import { useTranslation } from "react-i18next";
import { MatrixError } from "matrix-js-sdk/src/matrix";
import { useHistory } from "react-router-dom";
import { Heading, Link, Text } from "@vector-im/compound-web";
import { Heading, Text } from "@vector-im/compound-web";
import { Link } from "../button/Link";
import {
useLoadGroupCall,
GroupCallStatus,
@@ -35,15 +34,6 @@ export function GroupCallLoader({
const { t } = useTranslation();
const groupCallState = useLoadGroupCall(client, roomIdOrAlias, viaServers);
const history = useHistory();
const onHomeClick = useCallback(
(ev: React.MouseEvent) => {
ev.preventDefault();
history.push("/");
},
[history],
);
switch (groupCallState.kind) {
case "loaded":
case "waitForInvite":
@@ -63,9 +53,7 @@ export function GroupCallLoader({
<Text>{t("group_call_loader.failed_text")}</Text>
{/* XXX: A 'create it for me' button would be the obvious UX here. Two screens already have
dupes of this flow, let's make a common component and put it here. */}
<Link href="/" onClick={onHomeClick}>
{t("common.home")}
</Link>
<Link to="/">{t("common.home")}</Link>
</FullScreenView>
);
} else if (groupCallState.error instanceof CallTerminatedMessage) {
@@ -79,9 +67,7 @@ export function GroupCallLoader({
<Text size="sm">"{groupCallState.error.reason}"</Text>
</>
)}
<Link href="/" onClick={onHomeClick}>
{t("common.home")}
</Link>
<Link to="/">{t("common.home")}</Link>
</FullScreenView>
);
} else {

15
src/room/GroupCallView.tsx
View File

@@ -15,7 +15,7 @@ import {
import { logger } from "matrix-js-sdk/src/logger";
import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
import { JoinRule } from "matrix-js-sdk/src/matrix";
import { Heading, Link, Text } from "@vector-im/compound-web";
import { Heading, Text } from "@vector-im/compound-web";
import { useTranslation } from "react-i18next";
import type { IWidgetApiRequest } from "matrix-widget-api";
@@ -40,6 +40,7 @@ import { useJoinRule } from "./useJoinRule";
import { InviteModal } from "./InviteModal";
import { useUrlParams } from "../UrlParams";
import { E2eeType } from "../e2ee/e2eeType";
import { Link } from "../button/Link";
declare global {
interface Window {
@@ -281,14 +282,6 @@ export const GroupCallView: FC<Props> = ({
);
const onShareClick = joinRule === JoinRule.Public ? onShareClickFn : null;
const onHomeClick = useCallback(
(ev: React.MouseEvent) => {
ev.preventDefault();
history.push("/");
},
[history],
);
const { t } = useTranslation();
if (!isE2EESupportedBrowser() && e2eeSystem.kind !== E2eeType.NONE) {
@@ -297,9 +290,7 @@ export const GroupCallView: FC<Props> = ({
<FullScreenView>
<Heading>{t("browser_media_e2ee_unsupported_heading")}</Heading>
<Text>{t("browser_media_e2ee_unsupported")}</Text>
<Link href="/" onClick={onHomeClick}>
{t("common.home")}
</Link>
<Link to="/">{t("common.home")}</Link>
</FullScreenView>
);
}

5
src/room/RageshakeRequestModal.tsx
View File

@@ -7,12 +7,11 @@ Please see LICENSE in the repository root for full details.
import { FC, useEffect } from "react";
import { useTranslation } from "react-i18next";
import { Button } from "@vector-im/compound-web";
import { Button, Text } from "@vector-im/compound-web";
import { Modal, Props as ModalProps } from "../Modal";
import { FieldRow, ErrorMessage } from "../input/Input";
import { useSubmitRageshake } from "../settings/submit-rageshake";
import { Body } from "../typography/Typography";
interface Props extends Omit<ModalProps, "title" | "children"> {
rageshakeRequestId: string;
@@ -40,7 +39,7 @@ export const RageshakeRequestModal: FC<Props> = ({
open={open}
onDismiss={onDismiss}
>
<Body>{t("rageshake_request_modal.body")}</Body>
<Text>{t("rageshake_request_modal.body")}</Text>
<FieldRow>
<Button
onClick={(): void =>

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>
</>
);