From a0fd95b491976c31d8996f90cad7a8b24d023541 Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Tue, 12 Sep 2023 17:26:51 +1200 Subject: [PATCH] tweak header style to match design --- .../src/components/UserGreeting.module.css | 26 +++++++++++++++++++ frontend/src/components/UserGreeting.tsx | 7 +++-- 2 files changed, 31 insertions(+), 2 deletions(-) create mode 100644 frontend/src/components/UserGreeting.module.css diff --git a/frontend/src/components/UserGreeting.module.css b/frontend/src/components/UserGreeting.module.css new file mode 100644 index 00000000..2cbd3c92 --- /dev/null +++ b/frontend/src/components/UserGreeting.module.css @@ -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); +} \ No newline at end of file diff --git a/frontend/src/components/UserGreeting.tsx b/frontend/src/components/UserGreeting.tsx index d91d53f1..1089b74f 100644 --- a/frontend/src/components/UserGreeting.tsx +++ b/frontend/src/components/UserGreeting.tsx @@ -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 ( <> -
+
= ({ userId }) => { {user.matrix.displayName || user.username} - {user.matrix.mxid} + + {user.matrix.mxid} +