matrix/authentication-service
1
0
Fork 0
mirror of https://github.com/matrix-org/matrix-authentication-service.git synced 2025-11-20 12:02:22 +03:00
Code Activity

tweak header style to match design

Browse Source
This commit is contained in:
Kerry Archibald
2023-09-12 17:26:51 +12:00
committed by Quentin Gliech
parent 406577ed1a
commit a0fd95b491
2 changed files with 31 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
frontend/src/components/UserGreeting.module.css Normal file
View File

@@ -0,0 +1,26 @@
/* Copyright 2023 The Matrix.org Foundation C.I.C.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.header {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--cpd-space-4x);
text-align: center;
}
.mxid {
color: var(--cpd-color-text-secondary);
}

7
frontend/src/components/UserGreeting.tsx
View File

@@ -23,6 +23,7 @@ import { FragmentType } from "../gql/fragment-masking";
import UnverifiedEmailAlert, {
UNVERIFIED_EMAILS_FRAGMENT,
} from "./UnverifiedEmailAlert/UnverifiedEmailAlert";
import styles from "./UserGreeting.module.css";
const QUERY = graphql(/* GraphQL */ `
query UserGreeting($userId: ID!) {
@@ -61,7 +62,7 @@ const UserGreeting: React.FC<{ userId: string }> = ({ userId }) => {
const user = result.data.user;
return (
<>
<header className="text-center">
<header className={styles.header}>
<Avatar
size="var(--cpd-space-24x)"
id={user.matrix.mxid}
@@ -70,7 +71,9 @@ const UserGreeting: React.FC<{ userId: string }> = ({ userId }) => {
<Heading size="xl" weight="semibold">
{user.matrix.displayName || user.username}
</Heading>
<Body size="lg">{user.matrix.mxid}</Body>
<Body size="lg" className={styles.mxid}>
{user.matrix.mxid}
</Body>
</header>
<UnverifiedEmailAlert
unverifiedEmails={