Fully implement Flex and MatchMedia

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

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { StatelessComponent } from "react";
 
-import { Center } from "talk-ui/components";
+import { Flex } from "talk-ui/components";
 
 import StreamContainer from "../containers/StreamContainer";
 
@@ -12,9 +12,9 @@ export interface AppProps {
 const App: StatelessComponent<AppProps> = props => {
   if (props.asset) {
     return (
-      <Center>
+      <Flex justifyContent="center">
         <StreamContainer asset={props.asset} />
-      </Center>
+      </Flex>
     );
   }
   return <div>Asset not found </div>;

src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`loads more comments 1`] = `
 <div
-  className="Center-root"
+  className="Flex-root Flex-justifyCenter"
 >
   <div>
     <h1
@@ -111,7 +111,7 @@ exports[`loads more comments 1`] = `
 
 exports[`renders comment stream 1`] = `
 <div
-  className="Center-root"
+  className="Flex-root Flex-justifyCenter"
 >
   <div>
     <h1

src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`renders comment stream 1`] = `
 <div
-  className="Center-root"
+  className="Flex-root Flex-justifyCenter"
 >
   <div>
     <h1

src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`renders comment stream 1`] = `
 <div
-  className="Center-root"
+  className="Flex-root Flex-justifyCenter"
 >
   <div>
     <h1

src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`renders comment stream 1`] = `
 <div
-  className="Center-root"
+  className="Flex-root Flex-justifyCenter"
 >
   <div>
     <h1
@@ -109,7 +109,7 @@ exports[`renders comment stream 1`] = `
 
 exports[`show all replies 1`] = `
 <div
-  className="Center-root"
+  className="Flex-root Flex-justifyCenter"
 >
   <div>
     <h1