From cd50cf8f67934db3ec57287f1a8d87bbe572c7d7 Mon Sep 17 00:00:00 2001
From: Divyesh Puri <divyeshpuri66@gmail.com>
Date: Fri, 21 Dec 2018 20:41:45 +0530
Subject: [PATCH] Modified Event page as per Mocks

---
 src/components/event/index.js | 47 +++++++++++++++++++++--------------
 src/css/EventDetail.css       | 18 ++++++++------
 2 files changed, 39 insertions(+), 26 deletions(-)

diff --git a/src/components/event/index.js b/src/components/event/index.js
index a4c6f75..f86b05c 100644
--- a/src/components/event/index.js
+++ b/src/components/event/index.js
@@ -24,27 +24,14 @@ 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>
@@ -52,15 +39,37 @@ class Event extends React.Component {
               </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>
diff --git a/src/css/EventDetail.css b/src/css/EventDetail.css
index b782e86..538d290 100644
--- a/src/css/EventDetail.css
+++ b/src/css/EventDetail.css
@@ -54,12 +54,7 @@
 }
 
 .go-back {
-  border: 1px solid #FF6E2C;
-  padding: 10px 14px;
-  background-color: transparent;
-  color: white;
   cursor: pointer;
-  white-space: nowrap;
 }
 
 .space {
@@ -67,8 +62,7 @@
 }
 
 .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%;
+}
\ No newline at end of file