Stream Styling

src/core/client/auth/components/SignUp.tsx

@@ -32,7 +32,9 @@ const SignUp: StatelessComponent = props => {
         </FormField>
         <FormField>
           <InputLabel>Password</InputLabel>
-          <Typography>Must be at least 8 characters</Typography>
+          <Typography variant="inputDescription">
+            Must be at least 8 characters
+          </Typography>
           <TextField />
         </FormField>
         <FormField>

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

@@ -22,7 +22,6 @@ const App: StatelessComponent<AppProps> = props => {
       {view}
     </Flex>
   );
-  // return <div className={styles.root}>{view}</div>;
 };
 
 export default App;

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

@@ -1,15 +1,18 @@
 .root {
   width: 100%;
+  padding-bottom: var(--spacing-unit);
 }
 
 .textarea {
   composes: bodyCopy from "talk-ui/shared/typography.css";
-
   display: block;
-  height: 100px;
+  height: 150px;
   width: 100%;
   box-sizing: border-box;
   margin-bottom: var(--spacing-unit);
+  padding: var(--spacing-unit);
+  border-radius: var(--round-corners);
+  resize: vertical;
 }
 
 .postButtonContainer {

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

@@ -15,6 +15,7 @@ interface FormProps {
 
 export interface PostCommentFormProps {
   onSubmit: OnSubmit<FormProps>;
+  signedIn: boolean;
 }
 
 const PostCommentForm: StatelessComponent<PostCommentFormProps> = props => (
@@ -29,6 +30,7 @@ const PostCommentForm: StatelessComponent<PostCommentFormProps> = props => (
                 name={input.name}
                 onChange={input.onChange}
                 value={input.value}
+                placeholder="Post a comment"
               />
               {meta.touched &&
                 (meta.error || meta.submitError) && (
@@ -40,11 +42,23 @@ const PostCommentForm: StatelessComponent<PostCommentFormProps> = props => (
           )}
         </Field>
         <div className={styles.postButtonContainer}>
-          <Localized id="comments-postCommentForm-post">
-            <Button color="primary" variant="filled" disabled={submitting}>
-              Post
+          {props.signedIn ? (
+            <Localized id="comments-postCommentForm-submit">
+              <Button color="primary" variant="filled" disabled={submitting}>
+                Submit
+              </Button>
+            </Localized>
+          ) : (
+            <Button
+              color="primary"
+              variant="filled"
+              disabled
+              fullWidth
+              size="large"
+            >
+              Sign In and join the conversation
             </Button>
-          </Localized>
+          )}
         </div>
       </form>
     )}

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

@@ -15,7 +15,7 @@ const UserBoxUnauthenticated: StatelessComponent<
   UserBoxUnauthenticatedProps
 > = props => {
   return (
-    <Flex>
+    <Flex itemGutter>
       <MatchMedia gteWidth="sm">
         <Localized id="comments-userBoxUnauthenticated-joinTheConversation">
           <Typography

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

@@ -31,7 +31,7 @@ class PostCommentFormContainer extends Component<InnerProps> {
     return undefined;
   };
   public render() {
-    return <PostCommentForm onSubmit={this.onSubmit} />;
+    return <PostCommentForm onSubmit={this.onSubmit} signedIn={false} />;
   }
 }
 

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

@@ -0,0 +1,2 @@
+.root {
+}

src/core/client/ui/components/InputDescription/InputDescription.mdx

@@ -0,0 +1,36 @@
+---
+name: FormField
+menu: UI Kit
+---
+
+import { Playground, PropsTable } from 'docz'
+import FormField from './FormField'
+import { InputLabel, ValidationMessage, TextField, Typography, Flex, Button} from '../core/client/ui/components'
+
+# Flex
+
+`FormField` is to be used with Form Components `flexbox`.
+
+## Justify content
+<Playground>
+  <FormField>
+  </FormField>
+</Playground>
+
+## Align items
+<Playground>
+  <Flex alignItems="center" itemGutter>
+    <Button variant="filled">Push Me</Button>
+    <Button variant="filled" size="small">Push Me</Button>
+    <Button variant="filled" size="large">Push Me</Button>
+  </Flex>
+</Playground>
+
+## Direction
+<Playground>
+  <Flex direction="column" itemGutter>
+    <Button variant="filled">Push Me</Button>
+    <Button variant="filled">Push Me</Button>
+    <Button variant="filled">Push Me</Button>
+  </Flex>
+</Playground>

src/core/client/ui/components/InputDescription/InputDescription.tsx

@@ -0,0 +1,43 @@
+import cn from "classnames";
+import React, { ReactNode } from "react";
+import { StatelessComponent } from "react";
+
+import { withStyles } from "talk-ui/hocs";
+
+import * as styles from "./FormField.css";
+
+interface InnerProps {
+  children: ReactNode;
+  classes: typeof styles;
+  id?: string;
+  className?: string;
+  itemGutter?: boolean | "half";
+}
+
+const FormField: StatelessComponent<InnerProps> = props => {
+  const { classes, className, children, itemGutter, ...rest } = props;
+
+  // TODO (bc): Use flex component once the extra div issue is solved.
+  return (
+    <div
+      className={cn(
+        classes.root,
+        {
+          [classes.itemGutter]: itemGutter === true,
+          [classes.halfItemGutter]: itemGutter === "half",
+        },
+        className
+      )}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+};
+
+FormField.defaultProps = {
+  itemGutter: true,
+};
+
+const enhanced = withStyles(styles)(FormField);
+export default enhanced;

src/core/client/ui/components/InputDescription/index.ts

@@ -0,0 +1 @@
+export { default } from "./InputDescription";

src/core/client/ui/shared/typography.css

@@ -161,7 +161,7 @@
 
 .inputDescription {
   font-size: calc(14rem / var(--rem-base));
-  font-weight: var(--font-weight-medium);
+  font-weight: var(--font-weight-regular);
   font-family: var(--font-family);
   line-height: calc(18em / 16);
   letter-spacing: calc(0.2em / 16);

src/locales/de/stream.ftl

@@ -2,6 +2,6 @@
 
 ## Comments Tab
 
-comments-postCommentForm-post = Posten
+comments-postCommentForm-submit = Posten
 comments-stream-loadMore = Mehr laden
 comments-replyList-showAll = Alle anzeigen

src/locales/en-US/stream.ftl

@@ -2,7 +2,7 @@
 
 ## Comments Tab
 
-comments-postCommentForm-post = Post
+comments-postCommentForm-submit = Submit
 comments-stream-loadMore = Load more
 comments-replyList-showAll = Show all