Adding UserBoxAuthenticated and using correct properties for the Flex Component

src/core/client/stream/components/UserBoxAuthenticated.css

@@ -0,0 +1,3 @@
+.joinText {
+  margin-right: var(--spacing-unit);
+}

src/core/client/stream/components/UserBoxAuthenticated.tsx

@@ -0,0 +1,51 @@
+import { Localized } from "fluent-react/compat";
+import React, { StatelessComponent } from "react";
+
+import { Button, Flex, Typography } from "talk-ui/components";
+
+import MatchMedia from "talk-ui/components/MatchMedia";
+// import * as styles from "./UserBoxUnauthenticated.css";
+
+export interface UserBoxUnauthenticatedProps {
+  onSignOut: () => void;
+}
+
+const UserBoxAuthenticated: StatelessComponent<
+  UserBoxUnauthenticatedProps
+> = props => {
+  return (
+    <Flex itemGutter>
+      <Flex itemGutter="half">
+        <MatchMedia gteWidth="sm">
+          <Localized id="comments-userBoxAuthenticated-signedInAs">
+            <Typography variant="bodyCopy" component="span">
+              Signed in as
+            </Typography>
+          </Localized>
+          <Typography variant="bodyCopyBold" component="span">
+            okbel
+          </Typography>
+        </MatchMedia>
+      </Flex>
+      <Flex itemGutter="half">
+        <Localized id="comments-userBoxUnauthenticated-notYou">
+          <Typography variant="bodyCopy" component="span">
+            Not you?
+          </Typography>
+        </Localized>
+        <Localized id="comments-userBoxUnauthenticated-register">
+          <Button
+            color="primary"
+            size="small"
+            variant="underlined"
+            onClick={props.onSignOut}
+          >
+            Sign Out
+          </Button>
+        </Localized>
+      </Flex>
+    </Flex>
+  );
+};
+
+export default UserBoxAuthenticated;

src/core/client/stream/components/UserBoxUnauthenticated.spec.1.tsx

@@ -0,0 +1,16 @@
+import { shallow } from "enzyme";
+import { noop } from "lodash";
+import React from "react";
+
+import { PropTypesOf } from "talk-framework/types";
+
+import UserBoxUnauthenticated from "./UserBoxUnauthenticated";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof UserBoxUnauthenticated> = {
+    onSignIn: noop,
+    onRegister: noop,
+  };
+  const wrapper = shallow(<UserBoxUnauthenticated {...props} />);
+  expect(wrapper).toMatchSnapshot();
+});

src/core/client/stream/containers/UserBoxContainer.tsx

@@ -11,7 +11,8 @@ import {
 } from "talk-stream/mutations";
 import { Popup } from "talk-ui/components";
 
-import UserBoxUnauthenticated from "../components/UserBoxUnauthenticated";
+import UserBoxAuthenticated from "../components/UserBoxAuthenticated";
+// import UserBoxUnauthenticated from "../components/UserBoxUnauthenticated";
 
 interface InnerProps {
   local: Local;
@@ -23,7 +24,7 @@ export class UserBoxContainer extends Component<InnerProps> {
   private handleFocus = () => this.props.setAuthPopupState({ focus: true });
   private handleBlur = () => this.props.setAuthPopupState({ focus: false });
   private handleClose = () => this.props.setAuthPopupState({ open: false });
-  private handleSignIn = () => this.props.showAuthPopup({ view: "SIGN_IN" });
+  // private handleSignIn = () => this.props.showAuthPopup({ view: "SIGN_IN" });
   private handleRegister = () => this.props.showAuthPopup({ view: "SIGN_UP" });
 
   public render() {
@@ -44,10 +45,11 @@ export class UserBoxContainer extends Component<InnerProps> {
           onBlur={this.handleBlur}
           onClose={this.handleClose}
         />
-        <UserBoxUnauthenticated
+        <UserBoxAuthenticated onSignOut={this.handleRegister} />
+        {/* <UserBoxUnauthenticated
           onSignIn={this.handleSignIn}
           onRegister={this.handleRegister}
-        />
+        /> */}
       </>
     );
   }

src/core/client/ui/components/Flex/Flex.css

@@ -1,10 +1,10 @@
 .root {
-  width: 100%;
+  flex-grow: 1;
 }
 
 .flex {
   display: flex;
-  width: 100%;
+  flex-grow: 1;
 }
 
 .halfItemGutter {