Merge pull request #356 from unitaryfund/rounded_submission_boxes

Make SubmissionBox rounded

Author: WrathfulSpatula

src/App.css

@@ -1,5 +1,6 @@
 .App {
   text-align: center;
+  background-color: #E5E5E5;
 }
 
 .App-logo {
@@ -40,6 +41,16 @@
   background-color: white;
 }
 
+.navbar-nav {
+  border-radius: 16px;
+  border: none;
+}
+
+.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
+  border-radius: 16px;
+  border: none;
+}
+
 .navbar-nav .metriq-navbar-text.nav-link {
     padding-top: 0.9rem;
     color:black;
@@ -52,6 +63,10 @@
   font-weight: bold;
 }
 
+.infinite-scroll-component {
+  overflow: visible !important;
+}
+
 #metriq-main-content {
   min-height: 700px;
   padding-top: 20px;
@@ -106,9 +121,14 @@ form > .row > label {
 }
 
 .submission {
-  border: 1px solid black;
+  border-radius: 16px;
   margin: 6px;
   padding: 8px;
+  background-color: #FFFFFF;
+}
+
+.submission:hover {
+  box-shadow: 0 0 16px rgba(33,33,33,.2); 
 }
 
 .submission-heading {

src/App.js

@@ -53,7 +53,9 @@ class App extends React.Component {
           twitter='unitaryfund'
           youtube='UCDbDLAzGRTHnhkoMMOX7D1A'
           linkedin='unitary-fund'
-          backgroundColor='#f8f9fa'
+          backgroundColor='#212529'
+          fontColor='#FFFFFF'
+          iconColor='#FFFFFF'
           columns={[]}
         />
       </div>

src/components/simple-react-footer/SimpleReactFooter.js

@@ -8,7 +8,7 @@ import logo from './../../images/unitary_fund_logo.png'
 class SimpleReactFooter extends React.Component {
   render () {
     return (
-      <div style={{ backgroundColor: this.props.backgroundColor || 'bisque' }} className='footer-container'>
+      <div style={{ backgroundColor: this.props.backgroundColor || 'bisque', color: this.props.fontColor }} className='footer-container'>
         <div className='first-row'>
           {this.props.columns.map((column, i) => (
             <div key={i} className='columns'>

src/components/simple-react-footer/SimpleReactFooter.sass

@@ -16,6 +16,7 @@ $letter-spacing: 1px
         flex-wrap: nowrap
 
 .footer-container
+    border-radius: 16px 16px 0 0
     margin-top: 20px
     height: fit-content
     width: 100%

src/views/Home.js

@@ -7,7 +7,7 @@ const Home = (props) => {
       <header><h5>Top Submissions {props.match ? 'for "' + props.match.params.tag + '"' : ''}</h5></header>
       <br />
       <Tabs defaultActiveKey='trending' id='top-submissions-tabs'>
-        <Tab eventKey='trending' title='Trending'>
+        <Tab eventKey='trending' title='Trending' className='metriq-nav-tab'>
           <SubmissionScroll sortType='trending' isLoggedIn={props.isLoggedIn} tag={props.match ? props.match.params.tag : ''} />
         </Tab>
         <Tab eventKey='popular' title='Popular'>