Make design responsive

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

@@ -2,6 +2,54 @@
   display: flex;
 }
 
+.halfItemGutter {
+  & > * {
+    margin: 0 calc(0.5 * var(--spacing-unit)) 0 0;
+  }
+  &.directionRowReverse {
+    & > * {
+      margin: 0 0 0 calc(0.5 * var(--spacing-unit));
+    }
+  }
+  &.directionColumn {
+    & > * {
+      margin: 0 0 calc(0.5 * var(--spacing-unit)) 0;
+    }
+  }
+  &.directionColumnReverese {
+    & > * {
+      margin: calc(0.5 * var(--spacing-unit)) 0 0 0;
+    }
+  }
+  & > *:last-child {
+    margin: 0;
+  }
+}
+
+.itemGutter {
+  & > * {
+    margin: 0 var(--spacing-unit) 0 0;
+  }
+  &.directionRowReverse {
+    & > * {
+      margin: 0 0 0 var(--spacing-unit);
+    }
+  }
+  &.directionColumn {
+    & > * {
+      margin: 0 0 var(--spacing-unit) 0;
+    }
+  }
+  &.directionColumnReverese {
+    & > * {
+      margin: var(--spacing-unit) 0 0 0;
+    }
+  }
+  & > *:last-child {
+    margin: 0;
+  }
+}
+
 .justifyFlexStart {
   justify-content: flex-start;
 }

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

@@ -7,6 +7,8 @@ import { pascalCase } from "talk-common/utils";
 import * as styles from "./Flex.css";
 
 interface InnerProps {
+  id?: string;
+  role?: string;
   justifyContent?:
     | "flex-start"
     | "flex-end"
@@ -16,12 +18,24 @@ interface InnerProps {
     | "space-evenly";
   alignItems?: "flex-start" | "flex-end" | "center" | "baseline" | "stretch";
   direction?: "row" | "column" | "row-reverse" | "column-reverse";
+  itemGutter?: boolean | "half";
+  className?: string;
 }
 
 const Flex: StatelessComponent<InnerProps> = props => {
-  const { justifyContent, alignItems, direction, ...rest } = props;
+  const {
+    className,
+    justifyContent,
+    alignItems,
+    direction,
+    itemGutter,
+    ...rest
+  } = props;
 
-  const classObject: Record<string, boolean> = {};
+  const classObject: Record<string, boolean> = {
+    [styles.itemGutter]: itemGutter === true,
+    [styles.halfItemGutter]: itemGutter === "half",
+  };
 
   if (justifyContent) {
     classObject[(styles as any)[`justify${pascalCase(justifyContent)}`]] = true;
@@ -35,7 +49,7 @@ const Flex: StatelessComponent<InnerProps> = props => {
     classObject[(styles as any)[`direction${pascalCase(direction)}`]] = true;
   }
 
-  const classNames: string = cn(styles.root, classObject);
+  const classNames: string = cn(styles.root, className, classObject);
 
   return <div className={classNames} {...rest} />;
 };

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

@@ -43,6 +43,10 @@
   composes: overline from "talk-ui/shared/typography.css";
 }
 
+.timestamp {
+  composes: timestamp from "talk-ui/shared/typography.css";
+}
+
 .alignLeft {
   text-align: left;
 }
@@ -70,7 +74,7 @@
 }
 
 .paragraph {
-  margin-bottom: calc(1px * var(--spacing-unit));
+  margin-bottom: var(--spacing-unit);
 }
 
 .colorInherit {

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

@@ -16,7 +16,8 @@ type Variant =
   | "subtitle2"
   | "body1"
   | "body2"
-  | "button";
+  | "button"
+  | "timestamp";
 
 // Based on Typography Component of Material UI.
 // https://github.com/mui-org/material-ui/blob/303199d39b42a321d28347d8440d69166f872f27/packages/material-ui/src/Typography/Typography.js
@@ -129,6 +130,7 @@ Typography.defaultProps = {
     subtitle2: "h3",
     body1: "p",
     body2: "aside",
+    timestamp: "span",
   },
   noWrap: false,
   paragraph: false,