refactor(row-events): fixed attendance terminology and applied minor styling for mobile view

components/row-events.js

@@ -20,10 +20,13 @@ const RowEvent = props => {
         </span>
         <span className="card_icons">
           <Icon name="users" />
-          {`${props.yesCount} attended`}
+          {props.yesCount}
+          {props.status === 'upcoming' ? ' attending' : ' attended'}
+        </span>
+        <span className="card_icons">
+          <Icon name="log out" />
+          {props.venue === undefined ? 'Free session' : 'Free entry'}
         </span>
-        <Icon name="log out" />
-        {props.venue === undefined ? 'Free session' : 'Free entry'}
       </Card.Content>
       <style jsx>{`
         .card_venue {
@@ -32,6 +35,12 @@ const RowEvent = props => {
         .card_icons {
           margin-right: 15px;
         }
+        @media (max-width: 700px) {
+          .card_icons {
+            display: flex;
+            margin: 5px 0;
+          }
+        }
       `}</style>
     </Card>
   );

pages/events.js

@@ -53,6 +53,7 @@ export default publicPage(
                         time={event.time}
                         venue={event.venue}
                         link={event.link}
+                        status={event.status}
                       />
                     </Card.Group>
                   ))}
@@ -68,6 +69,7 @@ export default publicPage(
                         time={event.time}
                         venue={event.venue}
                         link={event.link}
+                        status={event.status}
                       />
                     </Card.Group>
                   ))}