Add UserBox

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

@@ -6,7 +6,7 @@
   justify-content: center;
   align-items: center;
   box-sizing: border-box;
-  border: 1px solid transparent;
+  border: 0px solid transparent;
 
   & > * {
     margin: 0 calc(0.5 * var(--spacing-unit)) 0 0;
@@ -154,6 +154,7 @@
 }
 
 .variantOutlined {
+  border: 1px solid transparent;
   &.colorRegular {
     color: var(--palette-grey-main);
     border: 1px solid currentColor;
@@ -220,6 +221,7 @@
 }
 
 .variantGhost {
+  border: 1px solid transparent;
   &.colorRegular {
     color: var(--palette-grey-main);
   }

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

@@ -1,8 +1,5 @@
 .root {
   display: flex;
-  & > * {
-    flex-shrink: 0;
-  }
 }
 
 .halfItemGutter {

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

@@ -80,6 +80,10 @@ const Flex: StatelessComponent<InnerProps> = props => {
   return <div ref={forwardRef} className={classNames} {...rest} />;
 };
 
+Flex.defaultProps = {
+  wrap: true,
+};
+
 const enhanced = withForwardRef(withStyles(styles)(Flex));
 export default enhanced;
 export type FlexProps = PropTypesOf<typeof enhanced>;

src/core/client/ui/components/Popup/Popup.ts

@@ -36,6 +36,9 @@ export default class Popup extends Component<PopupProps> {
   }
 
   private setCallbacks() {
+    if (!this.ref) {
+      return;
+    }
     this.ref!.onload = e => {
       if (this.detectCloseInterval) {
         clearInterval(this.detectCloseInterval);

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

@@ -23,6 +23,10 @@
   composes: bodyCopy from "talk-ui/shared/typography.css";
 }
 
+.bodyCopyBold {
+  composes: bodyCopyBold from "talk-ui/shared/typography.css";
+}
+
 .button {
   composes: button from "talk-ui/shared/typography.css";
 }

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

@@ -17,6 +17,7 @@ import Flex from '../Flex'
     <Typography variant="heading3">Heading3</Typography>
     <Typography variant="heading4">Heading4</Typography>
     <Typography variant="bodyCopy">BodyCopy</Typography>
+    <Typography variant="bodyCopyBold">bodyCopyBold</Typography>
     <Typography variant="timestamp">timestamp</Typography>
   </Flex>
 </Playground>

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

@@ -13,6 +13,7 @@ type Variant =
   | "heading3"
   | "heading4"
   | "bodyCopy"
+  | "bodyCopyBold"
   | "timestamp";
 
 // Based on Typography Component of Material UI.
@@ -130,6 +131,7 @@ Typography.defaultProps = {
     heading3: "h1",
     heading4: "h1",
     bodyCopy: "p",
+    bodyCopyBold: "p",
     timestamp: "span",
   },
   noWrap: false,

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

@@ -100,6 +100,11 @@
   color: var(--palette-text-primary);
 }
 
+.bodyCopyBold {
+  composes: bodyCopy;
+  font-weight: var(--font-weight-medium);
+}
+
 .button {
   color: var(--palette-text-secondary);
   font-family: "Source Sans Pro";