responsive css for the townhall page

src/css/Controls.styles.css

@@ -129,4 +129,4 @@
     display: none;
     margin-bottom: 25px;
   }
-}
+}

src/css/markdown.css

@@ -10,6 +10,7 @@
     font-family: 'Roboto', sans-serif;
     font-size: 16px;
     line-height: 1.5em;
+    background-color: white;
 }
 
 .markdown h1 {

src/css/styles.styles.css

@@ -88,6 +88,61 @@ button {
   background: #fff;
 }
 
+@media only screen and (max-width: 820px) {
+
+	/* Force table to not be like tables anymore */
+	table, thead, tbody, th, td, tr { 
+		display: block; 
+  }
+
+  tbody {
+    margin-top: 20px;
+    padding-bottom: 70px;
+  }
+	
+	/* Hide table headers (but not display: none;, for accessibility) */
+	thead tr { 
+		position: absolute;
+		top: -9999px;
+		left: -9999px;
+	}
+	
+	tr { border: 1px solid #ccc; }
+	
+	td { 
+		/* Behave  like a "row" */
+		border: none;
+		border-bottom: 1px solid #eee; 
+		position: relative;
+		padding-left: 50%; 
+	}
+	
+	td:before { 
+		/* Now like a table header */
+		position: absolute;
+		/* Top/left values mimic padding */
+		left: 15px;
+		width: 45%; 
+		padding-right: 10px; 
+		white-space: nowrap;
+  }
+  
+  .ant-table-thead > tr > th, .ant-table-tbody > tr > td {
+    padding: 16px 0 16px 100px;
+    overflow-wrap: break-word;
+}
+  
+	
+	/*
+	Label the data
+	*/
+	td:nth-of-type(1):before { content: "ID"; }
+	td:nth-of-type(2):before { content: "Title"; }
+	td:nth-of-type(3):before { content: "Date"; }
+  td:nth-of-type(4):before { content: "Slides"; }
+  td:nth-of-type(5):before { content: "Watch"; }
+}
+
 @media only screen and (max-width: 600px) {
   .app-wrapper-content {
     padding: 10px;

src/pages/Townhall.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { TownhallSection } from "./TownhallSection";
+import TownhallSection from "./TownhallSection/TownhallSection";
 import 'antd/lib/button/style/index.css';
 import 'antd/lib/menu/style/index.css';
 import 'antd/lib/dropdown/style/index.css';

src/pages/TownhallSection/TownhallSection.js

@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-
+import { connect } from 'react-redux'
 import styles from "./style.module.css";
 import { TownhallTable } from "../TownhallTable";
 import { TitleSearch } from "../TitleSearch";
@@ -105,10 +105,11 @@ class TownhallSection extends Component {
   };
 
   render() {
+    const { theme } = this.props;
     return (
       <section className={styles.container}>
         <header className={styles.header}>
-          <h1 className="townhall-title">Status Town Hall Meetings</h1>
+          <h1 className={`townhall-title ${theme}`}>Status Town Hall Meetings</h1>
           <TitleSearch onSearch={this.handleSearch} className="townhall-title-search" />
           </header>
           <TownhallTable townhallData={this.state.townhallData} />
@@ -117,4 +118,10 @@ class TownhallSection extends Component {
   }
 }
 
-export { TownhallSection };
+const mapStateToProps = state => ({
+  theme: state.settings.theme
+})
+
+export default connect(
+  mapStateToProps,
+)( TownhallSection )

src/pages/TownhallSection/index.js

@@ -1 +0,0 @@
-export * from "./TownhallSection";

src/pages/TownhallSection/style.module.css

@@ -18,6 +18,19 @@
  margin: 20px;
 }
 
+.townhall-title.light {
+  color: #555;
+ }
+
+ .townhall-title.dark {
+  color: #999;
+ }
+
+ .townhall-title.black {
+  color: #999;
+ }
+
+
 .townhall-title-search {
   margin-bottom: 20px;
 }

src/pages/Upload.js

@@ -33,7 +33,7 @@ export const podcasts = [
     name: 'Everything Status',
     link: 'http://feeds.soundcloud.com/users/soundcloud:users:741837922/sounds.rss',
     img:
-      'https://lh3.googleusercontent.com/W5mQLucviakmoHAFldUZbtFkTHw91vbcQk0w8o3woHEm9c4lpaMqi4cmY6bl3HmTSTnCxL5dvwwbDQa0eVGHrT16dhjEQmoAvg1Mk1Gjy-i3QtJjFRk1o5RxaWQ0BDfVn3oTntFF=w2400'
+      '{img URL}'
   },
   ...
 \`\`\`