From 9e39a093fdb0990546a56999524d86420028d3d3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Sun, 12 Aug 2018 22:12:23 -0300
Subject: [PATCH] Adding UserBoxAuthenticated and using correct properties for
 the Flex Component

---
 .../components/UserBoxAuthenticated.css       |  3 ++
 .../components/UserBoxAuthenticated.tsx       | 51 +++++++++++++++++++
 .../UserBoxUnauthenticated.spec.1.tsx         | 16 ++++++
 .../stream/containers/UserBoxContainer.tsx    | 10 ++--
 src/core/client/ui/components/Flex/Flex.css   |  4 +-
 5 files changed, 78 insertions(+), 6 deletions(-)
 create mode 100644 src/core/client/stream/components/UserBoxAuthenticated.css
 create mode 100644 src/core/client/stream/components/UserBoxAuthenticated.tsx
 create mode 100644 src/core/client/stream/components/UserBoxUnauthenticated.spec.1.tsx

diff --git a/src/core/client/stream/components/UserBoxAuthenticated.css b/src/core/client/stream/components/UserBoxAuthenticated.css
new file mode 100644
index 000000000..272b33bdb
--- /dev/null
+++ b/src/core/client/stream/components/UserBoxAuthenticated.css
@@ -0,0 +1,3 @@
+.joinText {
+  margin-right: var(--spacing-unit);
+}
diff --git a/src/core/client/stream/components/UserBoxAuthenticated.tsx b/src/core/client/stream/components/UserBoxAuthenticated.tsx
new file mode 100644
index 000000000..d897dd205
--- /dev/null
+++ b/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;
diff --git a/src/core/client/stream/components/UserBoxUnauthenticated.spec.1.tsx b/src/core/client/stream/components/UserBoxUnauthenticated.spec.1.tsx
new file mode 100644
index 000000000..f9683c1e8
--- /dev/null
+++ b/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();
+});
diff --git a/src/core/client/stream/containers/UserBoxContainer.tsx b/src/core/client/stream/containers/UserBoxContainer.tsx
index fca219660..db68f5cb6 100644
--- a/src/core/client/stream/containers/UserBoxContainer.tsx
+++ b/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}
-        />
+        /> */}
       </>
     );
   }
diff --git a/src/core/client/ui/components/Flex/Flex.css b/src/core/client/ui/components/Flex/Flex.css
index 2e6914c7f..ea5bf810d 100644
--- a/src/core/client/ui/components/Flex/Flex.css
+++ b/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 {