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

First-pass for Compound styles

Browse Source
This commit is contained in:
Germain
2023-06-07 12:07:01 +01:00
committed by Quentin Gliech
parent dfdfc25d00
commit 33da9f05fe
17 changed files with 493 additions and 259 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
frontend/src/components/BrowserSession.tsx
View File

@@ -12,12 +12,13 @@
// See the License for the specific language governing permissions and
// limitations under the License.
import { Link } from "../Router";
import IconWebBrowser from "@vector-im/compound-design-tokens/icons/web-browser.svg";
import { Body } from "@vector-im/compound-web";
import { FragmentType, graphql, useFragment } from "../gql";
import Block from "./Block";
import DateTime from "./DateTime";
import { Body, Subtitle } from "./Typography";
const FRAGMENT = graphql(/* GraphQL */ `
fragment BrowserSession_session on BrowserSession {
@@ -38,28 +39,33 @@ type Props = {
const BrowserSession: React.FC<Props> = ({ session, isCurrent }) => {
const data = useFragment(FRAGMENT, session);
const lastAuthentication = data.lastAuthentication?.createdAt;
// const lastAuthentication = data.lastAuthentication?.createdAt;
const createdAt = data.createdAt;
return (
<Block>
{isCurrent && <Subtitle>Current session</Subtitle>}
<Body>
<Link
route={{ type: "session", id: data.id }}
className="text-links hover:text-links/75"
>
Started: <DateTime datetime={createdAt} />
</Link>
</Body>
<Body>
Last authentication:{" "}
{lastAuthentication ? (
<DateTime datetime={lastAuthentication} />
<Block className="my-2">
<IconWebBrowser
className="session-icon float-left mr-2"
width="24"
height="24"
/>
<Body size="md" weight="medium">
{isCurrent ? (
<>
<strong>Current</strong> browser session
</>
) : (
"never"
<>Browser Session</>
)}
</Body>
<div className="flex flex-row justify-between">
<Body size="sm" className="secondary-text">
Signed in <DateTime datetime={createdAt} />
</Body>
<Body as="a" size="sm" weight="medium" href="#" data-kind="critical">
Sign out
</Body>
</div>
</Block>
);
};