wassname/talk
1
0
Fork 0
mirror of https://github.com/wassname/talk.git synced 2026-09-11 12:51:33 +08:00
Code Issues Packages Projects Releases Wiki Activity

Use HorizontalGutter component, simplify Flex

Browse Source
This commit is contained in:
Chi Vinh Le
2018-08-24 19:11:56 +02:00
parent 10df1de98e
commit 3dc3e1435a
28 changed files with 286 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/core/client/stream/components/UserBoxAuthenticated.tsx
+19 -28
View File
@@ -3,9 +3,6 @@ import React, { StatelessComponent } from "react";
import { Button, Flex, Typography } from "talk-ui/components";
import MatchMedia from "talk-ui/components/MatchMedia";
import * as styles from "./UserBoxAuthenticated.css";
export interface UserBoxAuthenticatedProps {
onSignOut: () => void;
username: string;
@@ -15,36 +12,30 @@ const UserBoxAuthenticated: StatelessComponent<
UserBoxAuthenticatedProps
> = props => {
return (
<Flex itemGutter="half">
<Flex itemGutter="half" className={styles.child}>
<MatchMedia gteWidth="sm">
<Localized id="comments-userBoxAuthenticated-signedInAs">
<Typography variant="bodyCopy" component="span">
Signed in as
</Typography>
</Localized>
<Typography variant="bodyCopyBold" component="span">
{props.username}
</Typography>
</MatchMedia>
</Flex>
<Flex itemGutter="half" className={styles.child}>
<Localized id="comments-userBoxAuthenticated-notYou">
<Typography variant="bodyCopy" component="span">
Not you?
</Typography>
</Localized>
<Localized id="comments-userBoxAuthenticated-signOut">
<Flex itemGutter="half" wrap>
<Localized
id="comments-userBoxAuthenticated-signedInAs"
username={<Typography variant="bodyCopyBold" container="span" />}
>
<Typography variant="bodyCopy" container="div">
{"Signed in as <username>Username</username>."}
</Typography>
</Localized>
<Localized
id="comments-userBoxAuthenticated-notYou"
button={
<Button
color="primary"
size="small"
variant="underlined"
onClick={props.onSignOut}
>
Sign Out
</Button>
</Localized>
</Flex>
/>
}
>
<Typography variant="bodyCopy" container={<Flex inline wrap />}>
{"Not you? <button>Sign Out</button>"}
</Typography>
</Localized>
</Flex>
);
};