From 9cef7044c72bc7883ccfcb5d2e7f561dd23bdeff Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Mon, 27 Aug 2018 14:11:15 +0200
Subject: [PATCH] Design improvements

---
 .../stream/components/Comment/Comment.css     |  1 -
 .../PermalinkButton/PermalinkPopover.css      |  1 -
 .../stream/components/PostCommentForm.css     | 13 ++----------
 .../stream/components/PostCommentForm.tsx     |  6 +++---
 .../stream/components/PostCommentFormFake.css | 13 ++++++++++++
 .../stream/components/PostCommentFormFake.tsx | 21 +++++++++++++++++++
 .../client/stream/components/PoweredBy.tsx    | 15 ++++++++++---
 src/core/client/stream/components/Stream.tsx  |  9 ++++++--
 .../components/UserBoxAuthenticated.tsx       | 12 ++++++++---
 .../components/UserBoxUnauthenticated.tsx     |  2 +-
 .../ui/components/BaseButton/BaseButton.css   |  1 +
 .../client/ui/components/Button/Button.css    | 14 ++-----------
 src/core/client/ui/components/Flex/Flex.css   |  4 ----
 src/core/client/ui/components/Flex/Flex.tsx   | 18 +++-------------
 .../ui/components/FormField/FormField.css     |  1 -
 src/locales/en-US/stream.ftl                  |  2 +-
 16 files changed, 75 insertions(+), 58 deletions(-)
 create mode 100644 src/core/client/stream/components/PostCommentFormFake.css
 create mode 100644 src/core/client/stream/components/PostCommentFormFake.tsx

diff --git a/src/core/client/stream/components/Comment/Comment.css b/src/core/client/stream/components/Comment/Comment.css
index 5c0f67095..821be5613 100644
--- a/src/core/client/stream/components/Comment/Comment.css
+++ b/src/core/client/stream/components/Comment/Comment.css
@@ -1,5 +1,4 @@
 .root {
-  width: 100%;
 }
 .footer {
   margin-top: var(--spacing-unit);
diff --git a/src/core/client/stream/components/PermalinkButton/PermalinkPopover.css b/src/core/client/stream/components/PermalinkButton/PermalinkPopover.css
index c2afa31b2..3fad6d3be 100644
--- a/src/core/client/stream/components/PermalinkButton/PermalinkPopover.css
+++ b/src/core/client/stream/components/PermalinkButton/PermalinkPopover.css
@@ -1,5 +1,4 @@
 .root {
-  width: 100%;
 }
 
 .textField {
diff --git a/src/core/client/stream/components/PostCommentForm.css b/src/core/client/stream/components/PostCommentForm.css
index 6c6c47b29..8c35347ff 100644
--- a/src/core/client/stream/components/PostCommentForm.css
+++ b/src/core/client/stream/components/PostCommentForm.css
@@ -1,5 +1,4 @@
 .root {
-  width: 100%;
 }
 
 .textarea {
@@ -13,14 +12,6 @@
   resize: vertical;
 }
 
-.postButtonContainer {
-  display: flex;
-
-  &:first-child {
-    flex-grow: 1;
-  }
-
-  &:last-child {
-    flex-grow: 0;
-  }
+.poweredBy {
+  margin-top: calc(-0.5 * var(--spacing-unit));
 }
diff --git a/src/core/client/stream/components/PostCommentForm.tsx b/src/core/client/stream/components/PostCommentForm.tsx
index 36e7d8be4..3eab2ddd8 100644
--- a/src/core/client/stream/components/PostCommentForm.tsx
+++ b/src/core/client/stream/components/PostCommentForm.tsx
@@ -19,10 +19,10 @@ const PostCommentForm: StatelessComponent<PostCommentFormProps> = props => (
   <Form onSubmit={props.onSubmit}>
     {({ handleSubmit, submitting }) => (
       <form autoComplete="off" onSubmit={handleSubmit} className={styles.root}>
-        <HorizontalGutter size="half">
+        <HorizontalGutter>
           <Field name="body" validate={required}>
             {({ input, meta }) => (
-              <div style={{ width: "100%" }}>
+              <div>
                 <textarea
                   className={styles.textarea}
                   name={input.name}
@@ -44,7 +44,7 @@ const PostCommentForm: StatelessComponent<PostCommentFormProps> = props => (
             justifyContent="space-between"
             alignItems="flex-start"
           >
-            <PoweredBy />
+            <PoweredBy className={styles.poweredBy} />
             <Localized id="comments-postCommentForm-submit">
               <Button
                 color="primary"
diff --git a/src/core/client/stream/components/PostCommentFormFake.css b/src/core/client/stream/components/PostCommentFormFake.css
new file mode 100644
index 000000000..775481fb4
--- /dev/null
+++ b/src/core/client/stream/components/PostCommentFormFake.css
@@ -0,0 +1,13 @@
+.root {
+}
+
+.textarea {
+  composes: bodyCopy from "talk-ui/shared/typography.css";
+  display: block;
+  height: 150px;
+  width: 100%;
+  box-sizing: border-box;
+  padding: var(--spacing-unit);
+  border-radius: var(--round-corners);
+  resize: vertical;
+}
diff --git a/src/core/client/stream/components/PostCommentFormFake.tsx b/src/core/client/stream/components/PostCommentFormFake.tsx
new file mode 100644
index 000000000..923955708
--- /dev/null
+++ b/src/core/client/stream/components/PostCommentFormFake.tsx
@@ -0,0 +1,21 @@
+import { Localized } from "fluent-react/compat";
+import React, { StatelessComponent } from "react";
+import { Button, HorizontalGutter } from "talk-ui/components";
+import * as styles from "./PostCommentFormFake.css";
+
+const PostCommentFormFake: StatelessComponent = props => (
+  <HorizontalGutter className={styles.root}>
+    <textarea
+      className={styles.textarea}
+      placeholder="Post a comment"
+      disabled
+    />
+    <Localized id="comments-PostCommentFormFake-signInAndJoin">
+      <Button color="primary" variant="filled" disabled type="submit" fullWidth>
+        Sign in and join the conversation
+      </Button>
+    </Localized>
+  </HorizontalGutter>
+);
+
+export default PostCommentFormFake;
diff --git a/src/core/client/stream/components/PoweredBy.tsx b/src/core/client/stream/components/PoweredBy.tsx
index ce2eb5563..b507bc61b 100644
--- a/src/core/client/stream/components/PoweredBy.tsx
+++ b/src/core/client/stream/components/PoweredBy.tsx
@@ -1,10 +1,19 @@
+import cn from "classnames";
 import React, { StatelessComponent } from "react";
 import { Typography } from "talk-ui/components";
 
-const PoweredBy: StatelessComponent = () => {
+interface Props {
+  className: string;
+}
+
+const PoweredBy: StatelessComponent<Props> = props => {
   return (
-    <div>
-      <Typography variant="inputDescription" container="span">
+    <div className={cn(props.className)}>
+      <Typography
+        variant="inputDescription"
+        container="span"
+        color="textSecondary"
+      >
         Powered by
       </Typography>{" "}
       <Typography variant="heading4" container="span">
diff --git a/src/core/client/stream/components/Stream.tsx b/src/core/client/stream/components/Stream.tsx
index 49a2f2cef..884157e36 100644
--- a/src/core/client/stream/components/Stream.tsx
+++ b/src/core/client/stream/components/Stream.tsx
@@ -8,6 +8,7 @@ import CommentContainer from "../containers/CommentContainer";
 import PostCommentFormContainer from "../containers/PostCommentFormContainer";
 import ReplyListContainer from "../containers/ReplyListContainer";
 import UserBoxContainer from "../containers/UserBoxContainer";
+import PostCommentFormFake from "./PostCommentFormFake";
 import * as styles from "./Stream.css";
 
 export interface StreamProps {
@@ -22,10 +23,14 @@ export interface StreamProps {
 
 const Stream: StatelessComponent<StreamProps> = props => {
   return (
-    <HorizontalGutter className={styles.root}>
+    <HorizontalGutter className={styles.root} size="double">
       <HorizontalGutter size="half">
         <UserBoxContainer user={props.user} />
-        <PostCommentFormContainer assetID={props.assetID} />
+        {props.user ? (
+          <PostCommentFormContainer assetID={props.assetID} />
+        ) : (
+          <PostCommentFormFake />
+        )}
       </HorizontalGutter>
       <HorizontalGutter
         id="talk-comments-stream-log"
diff --git a/src/core/client/stream/components/UserBoxAuthenticated.tsx b/src/core/client/stream/components/UserBoxAuthenticated.tsx
index 0ed1dc483..410b143c0 100644
--- a/src/core/client/stream/components/UserBoxAuthenticated.tsx
+++ b/src/core/client/stream/components/UserBoxAuthenticated.tsx
@@ -11,14 +11,20 @@ export interface UserBoxAuthenticatedProps {
 const UserBoxAuthenticated: StatelessComponent<
   UserBoxAuthenticatedProps
 > = props => {
+  const Username = () => (
+    <Typography variant="bodyCopyBold" container="span">
+      {props.username}
+    </Typography>
+  );
+
   return (
     <Flex itemGutter="half" wrap>
       <Localized
         id="comments-userBoxAuthenticated-signedInAs"
-        username={<Typography variant="bodyCopyBold" container="span" />}
+        username={<Username />}
       >
         <Typography variant="bodyCopy" container="div">
-          {"Signed in as <username>Username</username>."}
+          {"Signed in as <username />."}
         </Typography>
       </Localized>
       <Localized
@@ -32,7 +38,7 @@ const UserBoxAuthenticated: StatelessComponent<
           />
         }
       >
-        <Typography variant="bodyCopy" container={<Flex inline wrap />}>
+        <Typography variant="bodyCopy" container={Flex}>
           {"Not you? <button>Sign Out</button>"}
         </Typography>
       </Localized>
diff --git a/src/core/client/stream/components/UserBoxUnauthenticated.tsx b/src/core/client/stream/components/UserBoxUnauthenticated.tsx
index f184f76f6..8eec09e9e 100644
--- a/src/core/client/stream/components/UserBoxUnauthenticated.tsx
+++ b/src/core/client/stream/components/UserBoxUnauthenticated.tsx
@@ -15,7 +15,7 @@ const UserBoxUnauthenticated: StatelessComponent<
   UserBoxUnauthenticatedProps
 > = props => {
   return (
-    <Flex itemGutter>
+    <Flex itemGutter alignItems="center">
       <MatchMedia gteWidth="sm">
         <Localized id="comments-userBoxUnauthenticated-joinTheConversation">
           <Typography
diff --git a/src/core/client/ui/components/BaseButton/BaseButton.css b/src/core/client/ui/components/BaseButton/BaseButton.css
index 14b111258..a20ff333a 100644
--- a/src/core/client/ui/components/BaseButton/BaseButton.css
+++ b/src/core/client/ui/components/BaseButton/BaseButton.css
@@ -1,5 +1,6 @@
 .root {
   composes: buttonReset from "talk-ui/shared/buttonReset.css";
+  text-transform: capitalize;
 }
 
 .keyboardFocus {
diff --git a/src/core/client/ui/components/Button/Button.css b/src/core/client/ui/components/Button/Button.css
index 5ab16bc6d..bf569174f 100644
--- a/src/core/client/ui/components/Button/Button.css
+++ b/src/core/client/ui/components/Button/Button.css
@@ -287,67 +287,57 @@
   padding-right: 0;
   padding-left: 0;
   border-radius: 0;
+  border-bottom: 1px solid currentColor;
+  padding: 0;
 
   &.colorRegular {
     color: var(--palette-grey-main);
-    border-bottom: 1px solid currentColor;
   }
   &.colorPrimary {
     color: var(--palette-primary-main);
-    border-bottom: 1px solid currentColor;
   }
   &.colorError {
     color: var(--palette-error-main);
-    border-bottom: 1px solid currentColor;
   }
   &.colorSuccess {
     color: var(--palette-success-main);
-    border-bottom: 1px solid currentColor;
   }
 
   &:not(.disabled) {
     &.colorRegular {
       &.mouseHover {
         color: var(--palette-grey-light);
-        border-bottom: 1px solid currentColor;
       }
       &:active,
       &.active {
         color: var(--palette-grey-lighter);
-        border-bottom: 1px solid currentColor;
       }
     }
     &.colorPrimary {
       &.mouseHover {
         color: var(--palette-primary-light);
-        border-bottom: 1px solid currentColor;
       }
       &:active,
       &.active {
         color: var(--palette-primary-lighter);
-        border-bottom: 1px solid currentColor;
       }
     }
     &.colorError {
       &.mouseHover {
         color: var(--palette-error-light);
-        border-bottom: 1px solid currentColor;
       }
       &:active,
       &.active {
         color: var(--palette-error-lighter);
-        border-bottom: 1px solid currentColor;
       }
     }
     &.colorSuccess {
       &.mouseHover {
         color: var(--palette-success-light);
-        border-bottom: 1px solid currentColor;
       }
       &:active,
       &.active {
         color: var(--palette-success-lighter);
-        border-bottom: 1px solid currentColor;
       }
     }
   }
diff --git a/src/core/client/ui/components/Flex/Flex.css b/src/core/client/ui/components/Flex/Flex.css
index 26c744a11..9f20d8414 100644
--- a/src/core/client/ui/components/Flex/Flex.css
+++ b/src/core/client/ui/components/Flex/Flex.css
@@ -5,10 +5,6 @@
   display: flex;
 }
 
-.inline {
-  width: auto;
-}
-
 .halfItemGutter {
   & > * {
     margin: 0 calc(0.5 * var(--spacing-unit)) 0 0 !important;
diff --git a/src/core/client/ui/components/Flex/Flex.tsx b/src/core/client/ui/components/Flex/Flex.tsx
index 2fde17254..1d2dd932a 100644
--- a/src/core/client/ui/components/Flex/Flex.tsx
+++ b/src/core/client/ui/components/Flex/Flex.tsx
@@ -28,7 +28,6 @@ interface InnerProps {
   itemGutter?: boolean | "half" | "double";
   className?: string;
   wrap?: boolean | "reverse";
-  inline?: boolean;
 
   /** Internal: Forwarded Ref */
   forwardRef?: Ref<HTMLDivElement>;
@@ -45,16 +44,9 @@ const Flex: StatelessComponent<InnerProps> = props => {
     wrap,
     forwardRef,
     children,
-    inline,
     ...rest
   } = props;
 
-  let alignItemsWithDefault = alignItems;
-  if (!alignItems) {
-    alignItemsWithDefault =
-      direction && direction.startsWith("column") ? "flex-start" : "center";
-  }
-
   const classObject: Record<string, boolean> = {
     [classes.itemGutter]: itemGutter === true,
     [classes.halfItemGutter]: itemGutter === "half",
@@ -69,19 +61,15 @@ const Flex: StatelessComponent<InnerProps> = props => {
     ] = true;
   }
 
-  if (alignItemsWithDefault) {
-    classObject[
-      (classes as any)[`align${pascalCase(alignItemsWithDefault)}`]
-    ] = true;
+  if (alignItems) {
+    classObject[(classes as any)[`align${pascalCase(alignItems)}`]] = true;
   }
 
   if (direction) {
     classObject[(classes as any)[`direction${pascalCase(direction)}`]] = true;
   }
 
-  const rootClassNames: string = cn(classes.root, className, {
-    [classes.inline]: inline === true,
-  });
+  const rootClassNames: string = cn(classes.root, className);
   const flexClassNames: string = cn(classes.flex, classObject);
 
   // text nodes can't be modified with css, so replace them with spans.
diff --git a/src/core/client/ui/components/FormField/FormField.css b/src/core/client/ui/components/FormField/FormField.css
index 88de80d08..c3a2af639 100644
--- a/src/core/client/ui/components/FormField/FormField.css
+++ b/src/core/client/ui/components/FormField/FormField.css
@@ -1,3 +1,2 @@
 .root {
-  width: 100%;
 }
diff --git a/src/locales/en-US/stream.ftl b/src/locales/en-US/stream.ftl
index 4b7be9a5e..35a8cd34e 100644
--- a/src/locales/en-US/stream.ftl
+++ b/src/locales/en-US/stream.ftl
@@ -17,7 +17,7 @@ comments-userBoxUnauthenticated-signIn = Sign in
 comments-userBoxUnauthenticated-register = Register
 
 comments-userBoxAuthenticated-signedInAs =
-  Signed in as <username>Username</username>.
+  Signed in as <username />.
 
 comments-userBoxAuthenticated-notYou =
   Not you? <button>Sign Out</button>