Feat/#35/general design

src/Bus/BusListItem.js

@@ -14,9 +14,9 @@ class BusListItem extends Component {
     const { number, bus, time, index } = this.props;
     return (
       <div className={index === 0 ? "list-item" : " list-item border-top"}>
-        <div>
-          <span className="line">{number}</span>
-          <span className="destination">{bus}</span>
+        <div className="left-info">
+          <p className="line">{number}</p>
+          <p className="destination">{bus}</p>
         </div>
         <span className="time-to-departure">{time}</span>
       </div>

src/Bus/bus.css

@@ -1,8 +1,9 @@
+/* Styling for Bus */
+
 .full-grid {
-  height: 75vh;
   display: grid;
-  margin: 0 5vw;
-  grid-gap: 5vw 5vw;
+  padding: 0 2.5vw;
+  grid-gap: 5vh 5vw;
   grid-template-columns: auto auto;
 }
 
@@ -12,14 +13,27 @@
 }
 
 .bus-list {
-  background-color: #262938;
-  border-radius: 10px;
+  background-color: white;
+  border-radius: 14px;
   flex-grow: 3;
 }
 
+.stop-title {
+  color: white;
+  font-size: 50px;
+  margin: 0 0 5px 0;
+  flex-grow: 1;
+}
+
+.stop-title > span {
+  font-size: 35px;
+}
+
+/* Styling for BusListItem */
+
 .list-item {
   height: 8vh;
-  color: white;
+  color: black;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -28,37 +42,34 @@
 }
 
 .border-top {
-  border-top: 3px solid black;
+  border-top: 2px solid #707070;
+}
+
+.left-info {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: left;
 }
 
 .line {
-  margin-left: 5px;
+  margin-right: 15px;
   font-style: bold;
-  width: 10%;
-  font-size: 59px;
+  font-size: 50px;
+  text-align: center;
+  min-width: 50px;
 }
 
 .destination {
-  margin-left: 15px;
-  font-size: 37px;
+  margin-left: 5px;
+  font-size: 30px;
   white-space: nowrap;
   overflow: hidden;
 }
 
 .time-to-departure {
   text-align: right;
-  font-size: 44px;
-  color: #ebd01c;
+  font-size: 40px;
+  color: #01579b;
   padding-left: 10px;
 }
-
-.stop-title {
-  color: white;
-  font-size: 55px;
-  margin: 0;
-  flex-grow: 1;
-}
-
-.stop-title > span {
-  font-size: 35px;
-}

src/Events/PromotedEvents/PromotedEvents.scss

@@ -4,6 +4,7 @@
   flex-direction: row;
   flex: auto;
   height: 80%;
+  margin-top: 5vh;
 }
 
 #promoted-event-wrapper {
@@ -14,10 +15,6 @@
   z-index: 10;
 }
 
-.promoted-wrapper {
-  height: 100vh;
-}
-
 .title-header {
   height: 20%;
   width: 100%;

src/Events/PromotedEvents/index.js

@@ -1,23 +1,21 @@
-import React, { Component } from 'react';
-import { object, arrayOf } from 'prop-types';
-import SinglePromotedEvent from './SinglePromotedEvent';
-import './PromotedEvents.scss';
+import React, { Component } from "react";
+import { object, arrayOf } from "prop-types";
+import SinglePromotedEvent from "./SinglePromotedEvent";
+import "./PromotedEvents.scss";
 
 class PromotedEventsComponent extends Component {
   static propTypes = {
-    events: arrayOf(object),
-  }
+    events: arrayOf(object)
+  };
 
   static defaultProps = {
-    events: [],
-  }
-
+    events: []
+  };
 
   renderEvent() {
     const { events } = this.props;
     return (
       <div id="all-wrapper">
-
         <div className="split left">
           <SinglePromotedEvent event={events[0]} className="promotedBusiness" />
         </div>
@@ -28,18 +26,14 @@ class PromotedEventsComponent extends Component {
     );
   }
 
-
   render() {
     return (
       <div className="promoted-wrapper">
-        <div className="title-header">
-          <h1>PÅMELDINGER</h1>
-        </div>
+        <div className="main-title">PÅMELDINGER</div>
         {this.renderEvent()}
       </div>
     );
   }
 }
 
-
 export default PromotedEventsComponent;

src/Events/UpcomingEvents/UpcomingEvents.css

@@ -1,19 +1,6 @@
-.upcoming-wrapper {
-  text-align: center;
-  white-space: nowrap;
-  background-color: #ffffff;
-  margin: 40px 0;
-  padding: 10px;
-  border-radius: 0 0 14px 14px;
-  box-shadow: 0px 5px 20px rgb(71, 71, 71);
-}
+/* Styling for UpcomingEvents */
 
-.upcoming-wrapper div {
-  font-size: 1.3em;
-  white-space: pre;
-}
-
-.signup-wrapper {
+.upcoming-wrapper {
   display: flex;
 }
 
@@ -25,13 +12,7 @@
   text-align: center;
 }
 
-.left {
-  left: 0;
-}
-
-.right {
-  right: 0;
-}
+/* Styling for UpcomingHalfEvents */
 
 .title {
   font-size: 2.3em;
@@ -40,9 +21,32 @@
   margin: 0;
 }
 
+/* Styling for UpcomingSingleEvent */
+
+.single-event-wrapper {
+  text-align: center;
+  white-space: nowrap;
+  background-color: #ffffff;
+  margin: 2vw 0;
+  padding: 7px;
+  border-radius: 14px;
+}
+
+.single-event-wrapper div {
+  white-space: pre;
+}
+
 .event-title {
   text-transform: uppercase;
-  font-size: 2.5em;
+  font-size: 2.8em;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.event-information {
+  color: #707070;
+  font-size: 1.6em;
 }
 
 .event-title,

src/Events/UpcomingEvents/UpcomingEvents.js

@@ -46,18 +46,16 @@ class UpcomingEventsComponent extends Component {
         return (
           <div>
             <p className="main-title">KALENDER</p>
-            <div className="signup-wrapper">
+            <div className="upcoming-wrapper">
               <div className="split left">
                 <UpcomingHalfEvents
                   events={this.getBusinessEvents(data)}
-                  className="half"
                   title={"Bedriftspresentasjon & Kurs"}
                 />
               </div>
               <div className="split right">
                 <UpcomingHalfEvents
                   events={this.getPartyEvents(data)}
-                  className="half"
                   title={"Sosialarrangement"}
                 />
               </div>

src/Events/UpcomingEvents/UpcomingSingleEvent.js

@@ -38,7 +38,7 @@ const SingleSignupEvent = ({ event }) => {
 
   return (
     <div
-      className={`upcoming-wrapper border-${getTitleLineColor(eventType)}`}
+      className={`single-event-wrapper border-${getTitleLineColor(eventType)}`}
       key={id}
     >
       <h1 className="event-title">{title}</h1>

src/Main.css

@@ -20,7 +20,7 @@ body {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
-  background-color: #263238;
+  background-color: #03080f;
 }
 
 div {
@@ -39,19 +39,19 @@ div {
   position: relative;
   width: 100%;
   height: 100%;
-  background: url("../public/background.svg") no-repeat center bottom fixed;
+  /* background: url("../public/background.svg") no-repeat center bottom fixed;*/
   z-index: 0;
 }
 
 .wrapper {
-  margin: 80px 0;
+  margin: 40px;
 }
 
 .main-title {
   color: white;
   text-align: center;
-  height: 20vh;
-  margin: 0;
   font-weight: bolder;
   font-size: 90px;
+  margin: 0;
+  height: 20vh;
 }

src/Main.js

@@ -46,11 +46,10 @@ class MainComponent extends Component {
     return (
       <div className="main">
         <div className="wrapper">
-          <UpcomingEvents />;
           {/* <React.Fragment>
           <Time displayTime />
         </React.Fragment> */}
-          {/* this.renderComponent() */}
+          {this.renderComponent()}
           {/* <Abakus /> */}
         </div>
       </div>