Modified Event page as per Mocks

src/components/event/index.js

@@ -24,43 +24,52 @@ class Event extends React.Component {
  return <div className="uk-container uk-margin-large-top">
  <div uk-grid="true" className="uk-grid-large uk-child-width-expand@s">
  <div className={'uk-width-1-2@s'}>
- <img src={event.img ? event.img: "/fest-logo.png"} alt=""></img>
- <div className="uk-margin-large-top uk-flex uk-flex-center butt">
- <div>{this.props.user ? (
- isRegistered ? <button className="unregister"
- onClick={() => this.props.unregisterFromEvent(event)} disabled>Unregister</button> :
- <button className="register" onClick={() => this.props.registerToEvent(event)} disabled>Register</button>) :
- 'Please log in to register!'}
- </div>
- <button className="uk-margin-left go-back" onClick={() => this.props.history.push('/')}> Back to Events
- </button>
- </div>
- </div>
- <div className={'uk-width-1-2@s'}>
- <div style={{color: 'white', fontWeight: '800', fontSize: '28px'}}>{event.name}</div>
- <div className={'primary-color uk-margin-top'}>PRIZE WORTH: <b>{event['prize-worth']}</b></div>
+ <div className="event-name uk-text-bold">{event.name}</div>
+ <div className={'primary-color uk-margin-large-top'}>PRIZE WORTH: <b>{event['prize-worth']}</b></div>
  <div className={'primary-color uk-margin-small-top'}>TEAM SIZE: <b>{event['team-size']}</b></div>
  <div className={'primary-color uk-margin-small-top'}>VENUE: <b>{event['venue']}</b></div>
  <div className={'primary-color uk-margin-small-top'}>DATE: <b>{event['start-time'].slice(0,11)}</b></div>
  <div className={'primary-color uk-margin-small-top'}>TIME: <b>{event['start-time'].slice(11)} - {event['end-time'].slice(11)}</b></div>
  <div className={'uk-margin-large-top'}>
- <span className="contacts">Contacts:</span>
+ <h3 className="contacts uk-text-bold">Contacts :</h3>
  <div className={'uk-margin-top'}>
  {Object.keys(event.contact).map(role => <div className={'uk-flex uk-flex-between'} key={role}>
  <div>{event.contact[role].name} ({event.contact[role].role})</div>
  <div className={'primary-color'}>{event.contact[role].phone}</div>
  </div>)}
  </div>
  </div>
- <p className={'uk-margin-large-top faded'}>{event.description}</p>
+ </div>
+ <div className={'uk-width-1-2@s'}>
+ <img src={event.img ? event.img: "/fest-logo.png"} alt=""></img>
+ <div className="uk-margin-medium-top uk-flex uk-flex-center">
+ <div>{this.props.user ? (
+ isRegistered ? <button className="unregister"
+ onClick={() => this.props.unregisterFromEvent(event)} disabled>Unregister</button> :
+ <button className="register" onClick={() => this.props.registerToEvent(event)} disabled>Register</button>) :
+ 'Please log in to register!'}
+ </div>
+ <span className="uk-margin-left go-back" onClick={() => this.props.history.push('/')}> Back to Events
+ </span>
+ </div>
+ </div>
+ </div>
+ <div uk-grid="true" className="uk-child-width-expand@s">
+ <div className={'uk-width-2-5@s event-information'}>
  <div className="uk-margin-large-top rules">
  <div className="contacts">Rules</div>
  <ul className={'rule-ul'}>
  {event.rules.map((rule, idx) => <li className={'uk-margin-small-top faded rule-li'}
-  key={idx} dangerouslySetInnerHTML={{__html: rule}}/>)}
+ key={idx} dangerouslySetInnerHTML={{__html: rule}}/>)}
  </ul>
  </div>
-
+ </div>
+ <div className={'uk-width-1-5@s'}>
+ <hr className="uk-margin-large-top divider uk-divider-vertical"></hr>
+ </div>
+ <div className={'uk-width-2-5@s'}>
+ <div className="uk-margin-large-top contacts">Description</div> 
+ <p className={'faded'}>{event.description}</p>
  </div>
  </div>
  </div>

src/css/EventDetail.css

@@ -54,21 +54,15 @@
 }
 
 .go-back {
- border: 1px solid #FF6E2C;
- padding: 10px 14px;
- background-color: transparent;
- color: white;
  cursor: pointer;
- white-space: nowrap;
 }
 
 .space {
  width: 2%;
 }
 
 .contacts {
- border-left: 3px solid #FF6E2C;
- padding-left: 8px;
+ color: white;
 }
 
 .header-rules {
@@ -100,3 +94,13 @@
  top: 0;
  color: #FF6E2C;
 }
+
+.event-name {
+ color: white; 
+ font-size: 3rem;
+ font-style: italic;
+}
+
+.divider {
+ height: 100%;
+}