fixed

client/main.css

@@ -322,7 +322,7 @@ select {
     color: #ffffff;
 }
 
-#thisImage {
+#thisImage { /* ??? */
     visibility: visible;
     width: 500 !important;
     height: 500 !important; 
@@ -334,34 +334,25 @@ select {
 }
 
 .cellTable{
-     border-right: solid 3px #555; 
-  border-left: solid 3px #555;
+     border-right: solid 1px #414141; 
+    border-left: solid 1px #414141;
     padding-left: 50px;
     padding-right: 50px;
+    text-align:center;
+}
+
+.cellTable h2, .rest h2 {
+    font-weight: bold;
 }
 
 .rest{
     padding-left: 50px;
     padding-right: 50px;
+    text-align:center;
 }
 
-/* testing for home */
-.login-link-text {
-    background-color: #056571;
-    color: #ffffff;
-    font-weight: bold;
-    border: 3px solid #056571;
-    border-radius: 5px;
-    padding: 10px;
-    text-decoration: none !important;
-}
-
-.login-link-text:hover {
-    background-color: #ffffff;
-    color: #414141;
-    text-decoration: none !important;
-}
 
+/* testing for home */
 .login-close-text {
     font-weight: bold;
     color: #414141;
@@ -372,6 +363,19 @@ select {
     color: #056571;
 }
 
+.login-link-text {
+    -webkit-transition-duration: 0.4s !important; /* Safari */
+    transition-duration: 0.4s !important;
+    border: 3px solid #056571 !important;
+    background-color: #056571 !important;
+    color: #ffffff !important;
+    border-radius: 5px !important;
+    padding:7px 50px 7px 50px !important;
+    text-decoration: none !important;
+    margin-left: 5px;
+
+}
+
 .login-button {
     -webkit-transition-duration: 0.4s !important; /* Safari */
     transition-duration: 0.4s !important;
@@ -380,10 +384,11 @@ select {
     color: #ffffff !important;
     border-radius: 5px !important;
     padding:7px !important;
+    text-decoration: none !important;
 }
 
-.login-button:hover{
-    background-color: transparent !important; /* Green */
+.login-button:hover, .login-link-text:hover {
+    background-color: transparent !important;
     border: 3px solid #056571 !important;
     border-radius: 5px !important;
     color: #414141 !important;
@@ -402,4 +407,28 @@ select {
 .additional-link:hover {
     color: #056571 !important;
 }
+
+img.subscribeButton {
+    content: url('/images/fb.png');
+    height: 50px;
+}
+
+img.subscribeButton:hover {
+    content: url('/images/fb_hover.png');
+    height: 50px;
+}
+
+img.followButton {
+    content: url('images/twitter.png');
+    height:50px;
+}
+
+img.followButton:hover {
+    content: url('images/twitter_hover.png');
+    height:50px;
+}
+
+.subscribe {
+    text-align:center;
+}
 stack{display:block;margin:0;padding:0;border:0;}

imports/ui/home.jsx

@@ -34,7 +34,9 @@ constructor() {
     return (
       <div>
       <br/>
+      <br/>
       <AccountsUIWrapper />
+      <br/>
       <br/><br/>
       {this.renderUser()}
       {this.state.ready ? this.checkUser() : null}
@@ -51,14 +53,14 @@ constructor() {
         <div>
         <table className="homeTable" border="1">
           <tr>
-            <td className="rest"><img src="/images/realTime.png" height="100" width="100" align="middle"/></td>
-            <td className="cellTable"><img src="/images/report.png" height="100" width="100" align="middle"/></td> 
-            <td className="rest"><img src="/images/24hr.png" height="100" width="100" align="middle"/></td>
+            <td className="rest"><img src="/images/realTime.png" height="200" width="200" align="center"/></td>
+            <td className="cellTable"><img src="/images/report.png" height="200" width="200" align="center"/></td> 
+            <td className="rest"><img src="/images/24hr.png" height="200" width="200" align="center"/></td>
           </tr>
           <tr>
-            <td className="rest"><h3>Real-time Update</h3></td>
-            <td className="cellTable"><h3>Reliable Report</h3></td> 
-            <td className="rest"><h3>24-hr Status</h3></td>
+            <td className="rest"><h2><font color="#056571">Real-time Update</font></h2></td>
+            <td className="cellTable"><h2><font color="#f2695d">Reliable Report</font></h2></td> 
+            <td className="rest"><h2><font color="#f89c1b">24-hr Status</font></h2></td>
           </tr>
           <tr>
             <td className="rest">We provide real-time updates to all the reports and crisis reported. This helps you to get information quickly and precisely. </td>
@@ -70,13 +72,17 @@ constructor() {
         <br/>
         <br/>
 
-        <Link to =  "/report/0/1" activeClassName="active"><button>Submit Report</button></Link>
-                &emsp;
-
-        <Link to =  "https://www.facebook.com/profile.php?id=100013904162136&fref=ts" target="_blank" activeClassName="active"><button>Facebook Subscription</button></Link>
-                &emsp;
-
-        <Link to =  "https://twitter.com/cmssingapore" target="_blank" activeClassName="active"><button>Twitter Subscription</button></Link>
+        <table width="100%">
+          <tr width="100%">
+            <td colspan="3" className="subscribe" align="center">
+              <Link to =  "https://www.facebook.com/profile.php?id=100013904162136&fref=ts" target="_blank" activeClassName="active"><img className="subscribeButton"/></Link>
+              &nbsp;&nbsp;
+              <Link to =  "https://twitter.com/cmssingapore" target="_blank" activeClassName="active"><img className="followButton"/></Link>
+            </td>
+
+          </tr>
+        </table>
+
         </div>
     );
   }