From e0f6f04f2ec8bfefb620b8eee51b8c369486aeaa Mon Sep 17 00:00:00 2001
From: Anjith <v-anpal@microsoft.com>
Date: Wed, 7 Aug 2013 16:56:49 +0530
Subject: [PATCH 1/2] UI changes for participant joining the competition steps

This includes following,

1) Registering the participant
2) Status indication for pending , denying etc.
3) Login from the participant page
4) Arranging the submit result page.
---
 .../web/static/foundation/css/codalab.css     | 151 ++++++++++--------
 .../web/static/foundation/sass/_settings.scss |  21 ++-
 .../web/competitions/_submit_results.html     |  10 +-
 .../web/templates/web/competitions/view.html  |  55 +++++--
 4 files changed, 142 insertions(+), 95 deletions(-)

diff --git a/codalab/apps/web/static/foundation/css/codalab.css b/codalab/apps/web/static/foundation/css/codalab.css
index 2f31a12c7..814d7f3b9 100644
--- a/codalab/apps/web/static/foundation/css/codalab.css
+++ b/codalab/apps/web/static/foundation/css/codalab.css
@@ -154,34 +154,39 @@ a > i {
   padding-top: 10px;
 }
 
-/* line 136, ../sass/_settings.scss */
+/* line 137, ../sass/_settings.scss */
+.user_results {
+  margin-left: 15px;
+}
+
+/* line 141, ../sass/_settings.scss */
 .globalBlueButton a, .globalBlueButton a:hover {
   color: white;
 }
 
-/* line 140, ../sass/_settings.scss */
+/* line 145, ../sass/_settings.scss */
 .content > h3 {
   font-size: 14px;
   font-weight: 700;
 }
 
-/* line 145, ../sass/_settings.scss */
+/* line 150, ../sass/_settings.scss */
 .content > p {
   font-size: 13px;
 }
 
-/* line 149, ../sass/_settings.scss */
+/* line 154, ../sass/_settings.scss */
 .section-container.vertical-tabs > section > .content {
   border: 0px;
   color: #3b3b3b;
 }
 
-/* line 154, ../sass/_settings.scss */
+/* line 159, ../sass/_settings.scss */
 .competitionProcessHeader > ul > li {
   height: 100%;
 }
 
-/* line 157, ../sass/_settings.scss */
+/* line 162, ../sass/_settings.scss */
 .competitionProcessHeader > ul > li > a {
   color: white;
   font-size: 13px;
@@ -189,21 +194,21 @@ a > i {
   padding-right: 40px;
 }
 
-/* line 164, ../sass/_settings.scss */
+/* line 169, ../sass/_settings.scss */
 .competition-preview {
   border: 1px solid #cccccc;
   margin-top: 5px;
   margin-bottom: 5px;
 }
 
-/* line 170, ../sass/_settings.scss */
+/* line 175, ../sass/_settings.scss */
 .competition-summary {
   background: #fafafa;
   height: 100px;
   overflow: hidden;
 }
 
-/* line 176, ../sass/_settings.scss */
+/* line 181, ../sass/_settings.scss */
 .competition-preview > .columns > .button.small {
   vertical-align: middle;
   margin-bottom: 5px;
@@ -213,13 +218,13 @@ a > i {
   border-color: #ffac31;
 }
 
-/* line 185, ../sass/_settings.scss */
+/* line 190, ../sass/_settings.scss */
 .competition-summary > .columns {
   margin: 0px;
   padding: 0px;
 }
 
-/* line 190, ../sass/_settings.scss */
+/* line 195, ../sass/_settings.scss */
 .competition-label {
   height: 100px;
   background: #3684d6;
@@ -228,7 +233,7 @@ a > i {
   padding-left: 0px;
 }
 
-/* line 198, ../sass/_settings.scss */
+/* line 203, ../sass/_settings.scss */
 .competition-image {
   padding: 0px;
   margin: 0px;
@@ -236,33 +241,33 @@ a > i {
   vertical-align: middle;
 }
 
-/* line 205, ../sass/_settings.scss */
+/* line 210, ../sass/_settings.scss */
 .competition-info .columns {
   padding: 0px;
   margin: 0px;
 }
 
-/* line 209, ../sass/_settings.scss */
+/* line 214, ../sass/_settings.scss */
 .competition-title {
   color: #333333;
   text-align: left;
   font-size: 15px;
 }
 
-/* line 215, ../sass/_settings.scss */
+/* line 220, ../sass/_settings.scss */
 .large-12 > .competition-label {
   margin: 0px;
   padding: 0px;
   width: 30px;
 }
 
-/* line 221, ../sass/_settings.scss */
+/* line 226, ../sass/_settings.scss */
 .competition-description, .competition-owner {
   font-size: small;
   color: #999999;
 }
 
-/* line 226, ../sass/_settings.scss */
+/* line 231, ../sass/_settings.scss */
 .slider {
   color: white;
   font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
@@ -278,26 +283,26 @@ a > i {
   vertical-align: middle;
 }
 
-/* line 241, ../sass/_settings.scss */
+/* line 246, ../sass/_settings.scss */
 .subheader {
   height: auto;
   padding-bottom: 10px;
 }
 
-/* line 246, ../sass/_settings.scss */
+/* line 251, ../sass/_settings.scss */
 #footer, #footer a, #footer a:hover {
   font-size: small;
   background: #3684d6;
   color: white;
 }
 
-/* line 252, ../sass/_settings.scss */
+/* line 257, ../sass/_settings.scss */
 .topbar-title {
   font-size: x-large;
   font-weight: light;
 }
 
-/* line 257, ../sass/_settings.scss */
+/* line 262, ../sass/_settings.scss */
 .header {
   position: fixed;
   left: 0;
@@ -306,13 +311,13 @@ a > i {
   z-index: 1000;
 }
 
-/* line 265, ../sass/_settings.scss */
+/* line 270, ../sass/_settings.scss */
 .container {
   padding-top: 45px;
   padding-bottom: 20px;
 }
 
-/* line 270, ../sass/_settings.scss */
+/* line 275, ../sass/_settings.scss */
 p.competition-paragraph {
   font-size: 11px;
   color: #666666;
@@ -320,49 +325,49 @@ p.competition-paragraph {
   margin-bottom: 0;
 }
 
-/* line 277, ../sass/_settings.scss */
+/* line 282, ../sass/_settings.scss */
 .competition-info {
   height: 90px;
   overflow: hidden;
   padding-top: 5px;
 }
 
-/* line 283, ../sass/_settings.scss */
+/* line 288, ../sass/_settings.scss */
 .competition-image > img {
   height: 90px;
   margin-top: 5px;
 }
 
-/* line 288, ../sass/_settings.scss */
+/* line 293, ../sass/_settings.scss */
 .competition-preview.panel {
   background: #fafafa;
 }
 
-/* line 292, ../sass/_settings.scss */
+/* line 297, ../sass/_settings.scss */
 .competition-tile {
   margin-bottom: 10px;
 }
 
-/* line 296, ../sass/_settings.scss */
+/* line 301, ../sass/_settings.scss */
 .competition-tile h3 {
   font-size: 16px;
   color: #333333;
 }
 
-/* line 301, ../sass/_settings.scss */
+/* line 306, ../sass/_settings.scss */
 .articleHeadingContainer h3 {
   margin: 0;
   line-height: 100%;
 }
 
-/* line 306, ../sass/_settings.scss */
+/* line 311, ../sass/_settings.scss */
 .articleHeadingContainer label {
   color: #a4a4a4;
   margin-bottom: 14px;
   font-size: 12px;
 }
 
-/* line 312, ../sass/_settings.scss */
+/* line 317, ../sass/_settings.scss */
 .signin-centered-container {
   margin: auto !important;
   float: none !important;
@@ -370,162 +375,174 @@ p.competition-paragraph {
   padding: 25px;
 }
 
-/* line 319, ../sass/_settings.scss */
+/* line 324, ../sass/_settings.scss */
 .small-6.pull-6.columns > .globalBlueButton {
   float: right;
 }
 
-/* line 322, ../sass/_settings.scss */
+/* line 327, ../sass/_settings.scss */
 .signin-formfields p:nth-child(3) > input {
   float: left;
   position: relative;
   top: -20px;
 }
 
-/* line 327, ../sass/_settings.scss */
+/* line 332, ../sass/_settings.scss */
 .signin-formfields p:nth-child(3) > label {
   padding-left: 20px;
 }
 
-/* line 331, ../sass/_settings.scss */
+/* line 336, ../sass/_settings.scss */
 .globalBlueButton, .globalBlueButtonBig, .globalBlueButtonInput, .globalBlueButtonAtag > a, .globalBlueButtonSmallAtag > a, .globalBlueButtonSmall, .globalBlueButtonSmallFlexi, .buttonAccept {
   box-shadow: none;
   white-space: nowrap;
 }
+/* line 340, ../sass/_settings.scss */
+.globalBlueButton a:focus, .globalBlueButtonBig a:focus, .globalBlueButtonInput a:focus, .globalBlueButtonAtag > a a:focus, .globalBlueButtonSmallAtag > a a:focus, .globalBlueButtonSmall a:focus, .globalBlueButtonSmallFlexi a:focus, .buttonAccept a:focus {
+  color: white !important;
+}
 
-/* line 336, ../sass/_settings.scss */
+/* line 344, ../sass/_settings.scss */
 .signin-centered-container > p > a {
   display: inline-block;
 }
 
-/* line 340, ../sass/_settings.scss */
+/* line 348, ../sass/_settings.scss */
 ul.side-nav {
   padding-top: 0;
   position: fixed;
 }
-/* line 343, ../sass/_settings.scss */
+/* line 351, ../sass/_settings.scss */
 ul.side-nav li {
   margin-bottom: 2px;
 }
-/* line 346, ../sass/_settings.scss */
+/* line 354, ../sass/_settings.scss */
 ul.side-nav li a {
   color: #3684d6 !important;
   font-size: 15px !important;
 }
-/* line 348, ../sass/_settings.scss */
+/* line 356, ../sass/_settings.scss */
 ul.side-nav li a:hover {
   color: #ffac31;
 }
-/* line 349, ../sass/_settings.scss */
+/* line 357, ../sass/_settings.scss */
 ul.side-nav li a:active {
   background: none;
 }
-/* line 351, ../sass/_settings.scss */
+/* line 359, ../sass/_settings.scss */
 ul.side-nav li.active a {
   color: #666666 !important;
 }
 
-/* line 357, ../sass/_settings.scss */
+/* line 365, ../sass/_settings.scss */
 .glossary-page-container h6, competitions-block-Styling h6, .section-container.vertical-tabs .content h6 {
   font-size: 14px;
   color: #666666;
 }
-/* line 362, ../sass/_settings.scss */
+/* line 370, ../sass/_settings.scss */
 .glossary-page-container p, competitions-block-Styling p, .section-container.vertical-tabs .content p {
   font-size: 12px;
   color: #666666;
 }
-/* line 367, ../sass/_settings.scss */
+/* line 375, ../sass/_settings.scss */
 .glossary-page-container ol, competitions-block-Styling ol, .section-container.vertical-tabs .content ol {
   font-size: 13px;
   color: #666666;
 }
-/* line 370, ../sass/_settings.scss */
+/* line 378, ../sass/_settings.scss */
 .glossary-page-container ol li, competitions-block-Styling ol li, .section-container.vertical-tabs .content ol li {
   padding-bottom: 10px;
   list-style-type: disc;
 }
-/* line 376, ../sass/_settings.scss */
+/* line 384, ../sass/_settings.scss */
 .glossary-page-container ul, competitions-block-Styling ul, .section-container.vertical-tabs .content ul {
   font-size: 13px;
   color: #666666;
   margin-left: 20px;
 }
-/* line 381, ../sass/_settings.scss */
+/* line 389, ../sass/_settings.scss */
 .glossary-page-container ul li, competitions-block-Styling ul li, .section-container.vertical-tabs .content ul li {
   padding-bottom: 10px;
   list-style-type: disc;
 }
-/* line 387, ../sass/_settings.scss */
+/* line 395, ../sass/_settings.scss */
 .glossary-page-container pre, competitions-block-Styling pre, .section-container.vertical-tabs .content pre {
   padding: 10px;
   background: #ebf2fb;
   margin-bottom: 15px;
 }
-/* line 393, ../sass/_settings.scss */
-.glossary-page-container a, competitions-block-Styling a, .section-container.vertical-tabs .content a {
+/* line 401, ../sass/_settings.scss */
+.glossary-page-container p a, competitions-block-Styling p a, .section-container.vertical-tabs .content p a {
   color: #3684d6;
 }
-/* line 397, ../sass/_settings.scss */
+/* line 405, ../sass/_settings.scss */
 .glossary-page-container b, competitions-block-Styling b, .section-container.vertical-tabs .content b {
   color: #666666;
 }
 
-/* line 403, ../sass/_settings.scss */
+/* line 411, ../sass/_settings.scss */
 div.auto.section-container > section > .title a, .auto.section-container > .section > .title a {
   background: white;
   padding-left: 40px !important;
   padding-right: 40px !important;
   font-size: 19px;
+  height: 57px;
 }
 
-/* line 411, ../sass/_settings.scss */
+/* line 420, ../sass/_settings.scss */
 .auto.section-container > section > .content, .auto.section-container > .section > .content, .vertical-tabs.section-container > section > .content, .vertical-tabs.section-container > .section > .content {
   background: #f8f8f8 !important;
 }
 
-/* line 415, ../sass/_settings.scss */
+/* line 424, ../sass/_settings.scss */
 .auto.section-container > section.active > .title {
   border-bottom: solid 1px #f8f8f8 !important;
 }
-/* line 417, ../sass/_settings.scss */
+/* line 426, ../sass/_settings.scss */
 .auto.section-container > section.active > .title a {
   background: #f8f8f8 !important;
 }
 
-/* line 422, ../sass/_settings.scss */
+/* line 431, ../sass/_settings.scss */
 .section-container.vertical-tabs .content {
   padding-top: 1px !important;
 }
-/* line 425, ../sass/_settings.scss */
+/* line 434, ../sass/_settings.scss */
 .section-container.vertical-tabs .content p {
   color: #3b3b3b;
   font-size: 13px;
   line-height: 22px;
 }
-/* line 430, ../sass/_settings.scss */
+/* line 439, ../sass/_settings.scss */
 .section-container.vertical-tabs .CompetitionsDetailLftUl {
   margin-bottom: 2px;
 }
-/* line 433, ../sass/_settings.scss */
-.section-container.vertical-tabs .CompetitionsDetailLftUl a {
+/* line 442, ../sass/_settings.scss */
+.section-container.vertical-tabs .CompetitionsDetailLftUl p a {
   color: #3684d6 !important;
   font-size: 15px !important;
 }
-/* line 435, ../sass/_settings.scss */
-.section-container.vertical-tabs .CompetitionsDetailLftUl a:hover {
+/* line 444, ../sass/_settings.scss */
+.section-container.vertical-tabs .CompetitionsDetailLftUl p a:hover {
   color: #ffac31 !important;
 }
-/* line 436, ../sass/_settings.scss */
-.section-container.vertical-tabs .CompetitionsDetailLftUl a:active {
+/* line 445, ../sass/_settings.scss */
+.section-container.vertical-tabs .CompetitionsDetailLftUl p a:active {
   background: none !important;
 }
-/* line 440, ../sass/_settings.scss */
-.section-container.vertical-tabs .active a {
+/* line 449, ../sass/_settings.scss */
+.section-container.vertical-tabs .active p a {
   color: #666666 !important;
   font-weight: bold;
 }
 
+/* line 455, ../sass/_settings.scss */
+.participateInfoBlock p {
+  color: #3b3b3b;
+  font-size: 13px;
+  line-height: 22px;
+}
+
 /* font-face */
 @font-face {
   font-family: "GeneralFoundicons";
diff --git a/codalab/apps/web/static/foundation/sass/_settings.scss b/codalab/apps/web/static/foundation/sass/_settings.scss
index d8c8731af..f1bccf9a4 100644
--- a/codalab/apps/web/static/foundation/sass/_settings.scss
+++ b/codalab/apps/web/static/foundation/sass/_settings.scss
@@ -133,6 +133,11 @@ a > i {
 .user_results, .competition_results {
 	padding-top: 10px;
 }
+
+.user_results {
+	margin-left:15px;
+}
+
 .globalBlueButton a, .globalBlueButton a:hover {
 	color: $foreground;
 }
@@ -331,6 +336,9 @@ p.competition-paragraph {
 .globalBlueButton, .globalBlueButtonBig, .globalBlueButtonInput, .globalBlueButtonAtag > a, .globalBlueButtonSmallAtag > a, .globalBlueButtonSmall, .globalBlueButtonSmallFlexi, .buttonAccept {
 	box-shadow:none;
 	white-space:nowrap;
+	a {
+		&:focus{color:$white !important}
+	}
 }
 
 .signin-centered-container > p > a {
@@ -390,7 +398,7 @@ ul.side-nav {
 		margin-bottom:15px;
 		}
 
-	a {
+	p a {
 		color:$link-color
 		}
 
@@ -405,6 +413,7 @@ div.auto.section-container > section > .title, .auto.section-container > .sectio
 		padding-left:40px !important;
 		padding-right:40px !important;
 		font-size:19px;
+		height:57px;
 		}
 }
 
@@ -418,7 +427,7 @@ div.auto.section-container > section > .title, .auto.section-container > .sectio
 		background:$background-gray !important;
 	}
 }
-.section-container.vertical-tabs{
+.section-container.vertical-tabs {
 	 .content{
 			padding-top:1px !important;
 			@extend competitions-block-Styling;
@@ -430,15 +439,19 @@ div.auto.section-container > section > .title, .auto.section-container > .sectio
 	.CompetitionsDetailLftUl {
 		margin-bottom:2px;
 
-		a {
+		p a {
 			@include linkStyle;
 			&:hover{color:$active !important}
 			&:active{background:none !important}
 		}
 	}
 
-	.active a {
+	.active p a {
 			color:$gray !important;
 			font-weight:bold;
 	}
+}
+
+.participateInfoBlock p {
+	@include paragraph-Style;
 }
\ No newline at end of file
diff --git a/codalab/apps/web/templates/web/competitions/_submit_results.html b/codalab/apps/web/templates/web/competitions/_submit_results.html
index 58f3b32c5..0c1e55581 100644
--- a/codalab/apps/web/templates/web/competitions/_submit_results.html
+++ b/codalab/apps/web/templates/web/competitions/_submit_results.html
@@ -1,14 +1,10 @@
-<div class="row">
-	<div class="small-4 columns push right">
-		<div class="row">
-      <div class="globalBlueButton phaseToggleBtn lFloat">
+<div class="phaseToggleBtnContainer">
+	<div class="globalBlueButton phaseToggleBtn lFloat">
        <a href="#">Phase 1</a> 
      </div>
      <div class="globalBlueButton phaseToggleBtn lFloat">
        <a href="#">Phase 2</a> 
-     </div>
-   </div>
- </div>
+    </div>
 </div>
 
 <p>Submit a new result set or view your previous submissions.</p>
diff --git a/codalab/apps/web/templates/web/competitions/view.html b/codalab/apps/web/templates/web/competitions/view.html
index b96a26a76..175c96171 100644
--- a/codalab/apps/web/templates/web/competitions/view.html
+++ b/codalab/apps/web/templates/web/competitions/view.html
@@ -61,34 +61,55 @@ <h2>{{ competition.title }}</h2>
                     <div class="content" data-slug="{{tab.codename}}" data-section-content>
                         {% if tab.codename == "participate" %}
                             {% if not user.is_authenticated %}
-                                <strong>You must be logged in to participate in competitions.</strong>
-                                <br/>
+                        <div class="participateInfoBlock">
+                            <div class="infoStatusBar"></div>
+                            <div class="labelArea">
+                                <label class="regApprovLabel">You must be logged in to participate in competitions.</label>
+                                <label></label>
                                 <div class="globalBlueButtonAtag">
-                                    <a href="{% url 'account_login' %}">Sign in</a>
+                                    <a class="registerCompetition" href="{% url 'account_login' %}">Sign in</a>
                                 </div>
+                            </div>
+                        </div>
                             {% else %}
                                 {% if my_status == "unknown" %}
                                     <form id="participate_form">
                                         {% csrf_token %}
-                                        <p><strong>You have not yet registered for this competition.</strong></p>
-
-                                        <p>
-                                            To participate in this competition, you must accept its specific terms and conditions. After you register, the competition organizer will review your application and notify you when your participation is approved.
-                                        </p>
-
-                                        <label id="terms" for="checkbox">
-                                            <input type="checkbox" name="agreed_terms" id="checkbox" required>
-                                            <span class="custom checkbox"></span> 
-                                            I accept the <a href="#learn_the_details-3">terms and conditions</a> of the competition.
-                                        </label>
-                                        <input type="submit" class="globalBlueButton" value="Register" />
+                                        <div class="participateInfoBlock">
+                                            <div class="infoStatusBar"></div>
+                                            <div class="labelArea">
+                                                <label class="regApprovLabel">You have not yet registered for this competition.</label>
+                                                <label></label>
+                                                <p>
+                                                    To participate in this competition, you must accept its specific terms and conditions. After you register, the competition organizer will review your application and notify you when your participation is approved.
+                                                </p>
+                                                <label id="terms" for="checkbox">
+                                                <input type="checkbox" name="agreed_terms" id="checkbox" required>
+                                                <span class="custom checkbox"></span> 
+                                                I accept the <a href="#learn_the_details-3">terms and conditions</a> of the competition.
+                                                </label>
+                                                <input type="submit" class="globalBlueButton" value="Register" />
+                                            </div>
+                                        </div>
                                     </form>
                                 {% endif %}
                                 {% if my_status == "pending" %}
-                                    <p>You've already requested to participate in this challenge and your status is pending.</p>
+                                <div class="participateInfoBlock pendingApproval">
+                            <div class="infoStatusBar"></div>
+                            <div class="labelArea">
+                                <label class="regApprovLabel">You've already requested to participate in this challenge and your status is pending.</label>
+                                <label></label>
+                            </div>
+                        </div>
                                 {% endif %}
                                 {% if my_status == "denied" %}
-                                    <p>Your request to register for this competition was denied.</p>
+                        <div class="participateInfoBlock rejectedApproval">
+                            <div class="infoStatusBar"></div>
+                            <div class="labelArea">
+                                <label class="regApprovLabel">Your request to register for this competition was denied.</label>
+                                <label></label>
+                            </div>
+                        </div>
                                 {% endif %}
                                 {% if my_status == "approved" %} 
                                     {% include "web/competitions/_participate.html" with tab=tab contents=contents %}      

From e818bc85bc99638e37555ff2669a8a2d2d0b0847 Mon Sep 17 00:00:00 2001
From: Anjith <v-anpal@microsoft.com>
Date: Wed, 7 Aug 2013 18:14:39 +0530
Subject: [PATCH 2/2] UI changes for  Participate Page

UI changes for  Participate Page
---
 .../web/static/foundation/css/codalab.css     | 179 ++++++++++--------
 .../web/static/foundation/sass/_settings.scss |  19 ++
 .../web/templates/web/my/participants.html    |  33 ++--
 3 files changed, 137 insertions(+), 94 deletions(-)

diff --git a/codalab/apps/web/static/foundation/css/codalab.css b/codalab/apps/web/static/foundation/css/codalab.css
index 814d7f3b9..169821117 100644
--- a/codalab/apps/web/static/foundation/css/codalab.css
+++ b/codalab/apps/web/static/foundation/css/codalab.css
@@ -63,80 +63,80 @@ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav,
   display: block;
 }
 
-/* line 61, ../sass/_settings.scss */
+/* line 66, ../sass/_settings.scss */
 * {
   font-family: Segoe UI,'Segoe UI', Helvetica, Arial,'Trebuchet MS',sans-serif;
   font-size: 100%;
   font-weight: normal;
 }
 
-/* line 67, ../sass/_settings.scss */
+/* line 72, ../sass/_settings.scss */
 .menu-icon {
   background: #3684d6;
 }
 
-/* line 71, ../sass/_settings.scss */
+/* line 76, ../sass/_settings.scss */
 .menu-icon > span, .menu-icon > span a, .menu-icon > span a:hover {
   border-bottom-style: none;
   border: 0px;
   padding: 2px;
 }
 
-/* line 78, ../sass/_settings.scss */
+/* line 83, ../sass/_settings.scss */
 div.CompetitionsDetailContainer div.section-container section:not(.active) p a:hover {
   color: #ffac31;
 }
 
-/* line 82, ../sass/_settings.scss */
+/* line 87, ../sass/_settings.scss */
 div.CompetitionsDetailContainer div.section-container section.active div.content div.section-container section p.title {
   background: transparent;
 }
 
-/* line 85, ../sass/_settings.scss */
+/* line 90, ../sass/_settings.scss */
 div.CompetitionsDetailContainer div.section-container section.active div.content div.section-container section.active div.content {
   border: 0px;
 }
 
-/* line 89, ../sass/_settings.scss */
+/* line 94, ../sass/_settings.scss */
 div.CompetitionsDetailContainer div.section-container section.active div.content div.section-container section p.title a {
   padding: 2px;
   text-align: right;
   border: 0px;
 }
 
-/* line 95, ../sass/_settings.scss */
+/* line 100, ../sass/_settings.scss */
 div.CompetitionsDetailContainer div.section-container section.active div.content div.section-container section p {
   border: 0px;
 }
 
-/* line 99, ../sass/_settings.scss */
+/* line 104, ../sass/_settings.scss */
 td > a > i {
   color: #3684d6;
 }
 
-/* line 103, ../sass/_settings.scss */
+/* line 108, ../sass/_settings.scss */
 a > i {
   height: 100%;
   color: white;
 }
 
-/* line 108, ../sass/_settings.scss */
+/* line 113, ../sass/_settings.scss */
 .competitionsDetailTabArea > section > .title {
   font-size: 19px;
   font-weight: 400;
 }
 
-/* line 113, ../sass/_settings.scss */
+/* line 118, ../sass/_settings.scss */
 .competitionsDetailTabArea > section > .title a:hover {
   color: #ffac31;
 }
 
-/* line 117, ../sass/_settings.scss */
+/* line 122, ../sass/_settings.scss */
 .process_participant_request {
   padding-top: 10px;
 }
 
-/* line 122, ../sass/_settings.scss */
+/* line 127, ../sass/_settings.scss */
 .competitionUserBlock {
   border: solid 1px #ccc;
   margin-bottom: 10px;
@@ -144,49 +144,49 @@ a > i {
   padding: 0;
 }
 
-/* line 129, ../sass/_settings.scss */
+/* line 134, ../sass/_settings.scss */
 .competitionUserBlock p {
   font-size: 13px;
 }
 
-/* line 133, ../sass/_settings.scss */
+/* line 138, ../sass/_settings.scss */
 .user_results, .competition_results {
   padding-top: 10px;
 }
 
-/* line 137, ../sass/_settings.scss */
+/* line 142, ../sass/_settings.scss */
 .user_results {
   margin-left: 15px;
 }
 
-/* line 141, ../sass/_settings.scss */
+/* line 146, ../sass/_settings.scss */
 .globalBlueButton a, .globalBlueButton a:hover {
   color: white;
 }
 
-/* line 145, ../sass/_settings.scss */
+/* line 150, ../sass/_settings.scss */
 .content > h3 {
   font-size: 14px;
   font-weight: 700;
 }
 
-/* line 150, ../sass/_settings.scss */
+/* line 155, ../sass/_settings.scss */
 .content > p {
   font-size: 13px;
 }
 
-/* line 154, ../sass/_settings.scss */
+/* line 159, ../sass/_settings.scss */
 .section-container.vertical-tabs > section > .content {
   border: 0px;
   color: #3b3b3b;
 }
 
-/* line 159, ../sass/_settings.scss */
+/* line 164, ../sass/_settings.scss */
 .competitionProcessHeader > ul > li {
   height: 100%;
 }
 
-/* line 162, ../sass/_settings.scss */
+/* line 167, ../sass/_settings.scss */
 .competitionProcessHeader > ul > li > a {
   color: white;
   font-size: 13px;
@@ -194,21 +194,21 @@ a > i {
   padding-right: 40px;
 }
 
-/* line 169, ../sass/_settings.scss */
+/* line 174, ../sass/_settings.scss */
 .competition-preview {
   border: 1px solid #cccccc;
   margin-top: 5px;
   margin-bottom: 5px;
 }
 
-/* line 175, ../sass/_settings.scss */
+/* line 180, ../sass/_settings.scss */
 .competition-summary {
   background: #fafafa;
   height: 100px;
   overflow: hidden;
 }
 
-/* line 181, ../sass/_settings.scss */
+/* line 186, ../sass/_settings.scss */
 .competition-preview > .columns > .button.small {
   vertical-align: middle;
   margin-bottom: 5px;
@@ -218,13 +218,13 @@ a > i {
   border-color: #ffac31;
 }
 
-/* line 190, ../sass/_settings.scss */
+/* line 195, ../sass/_settings.scss */
 .competition-summary > .columns {
   margin: 0px;
   padding: 0px;
 }
 
-/* line 195, ../sass/_settings.scss */
+/* line 200, ../sass/_settings.scss */
 .competition-label {
   height: 100px;
   background: #3684d6;
@@ -233,7 +233,7 @@ a > i {
   padding-left: 0px;
 }
 
-/* line 203, ../sass/_settings.scss */
+/* line 208, ../sass/_settings.scss */
 .competition-image {
   padding: 0px;
   margin: 0px;
@@ -241,33 +241,33 @@ a > i {
   vertical-align: middle;
 }
 
-/* line 210, ../sass/_settings.scss */
+/* line 215, ../sass/_settings.scss */
 .competition-info .columns {
   padding: 0px;
   margin: 0px;
 }
 
-/* line 214, ../sass/_settings.scss */
+/* line 219, ../sass/_settings.scss */
 .competition-title {
   color: #333333;
   text-align: left;
   font-size: 15px;
 }
 
-/* line 220, ../sass/_settings.scss */
+/* line 225, ../sass/_settings.scss */
 .large-12 > .competition-label {
   margin: 0px;
   padding: 0px;
   width: 30px;
 }
 
-/* line 226, ../sass/_settings.scss */
+/* line 231, ../sass/_settings.scss */
 .competition-description, .competition-owner {
   font-size: small;
   color: #999999;
 }
 
-/* line 231, ../sass/_settings.scss */
+/* line 236, ../sass/_settings.scss */
 .slider {
   color: white;
   font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
@@ -283,26 +283,26 @@ a > i {
   vertical-align: middle;
 }
 
-/* line 246, ../sass/_settings.scss */
+/* line 251, ../sass/_settings.scss */
 .subheader {
   height: auto;
   padding-bottom: 10px;
 }
 
-/* line 251, ../sass/_settings.scss */
+/* line 256, ../sass/_settings.scss */
 #footer, #footer a, #footer a:hover {
   font-size: small;
   background: #3684d6;
   color: white;
 }
 
-/* line 257, ../sass/_settings.scss */
+/* line 262, ../sass/_settings.scss */
 .topbar-title {
   font-size: x-large;
   font-weight: light;
 }
 
-/* line 262, ../sass/_settings.scss */
+/* line 267, ../sass/_settings.scss */
 .header {
   position: fixed;
   left: 0;
@@ -311,13 +311,13 @@ a > i {
   z-index: 1000;
 }
 
-/* line 270, ../sass/_settings.scss */
+/* line 275, ../sass/_settings.scss */
 .container {
   padding-top: 45px;
   padding-bottom: 20px;
 }
 
-/* line 275, ../sass/_settings.scss */
+/* line 280, ../sass/_settings.scss */
 p.competition-paragraph {
   font-size: 11px;
   color: #666666;
@@ -325,49 +325,49 @@ p.competition-paragraph {
   margin-bottom: 0;
 }
 
-/* line 282, ../sass/_settings.scss */
+/* line 287, ../sass/_settings.scss */
 .competition-info {
   height: 90px;
   overflow: hidden;
   padding-top: 5px;
 }
 
-/* line 288, ../sass/_settings.scss */
+/* line 293, ../sass/_settings.scss */
 .competition-image > img {
   height: 90px;
   margin-top: 5px;
 }
 
-/* line 293, ../sass/_settings.scss */
+/* line 298, ../sass/_settings.scss */
 .competition-preview.panel {
   background: #fafafa;
 }
 
-/* line 297, ../sass/_settings.scss */
+/* line 302, ../sass/_settings.scss */
 .competition-tile {
   margin-bottom: 10px;
 }
 
-/* line 301, ../sass/_settings.scss */
+/* line 306, ../sass/_settings.scss */
 .competition-tile h3 {
   font-size: 16px;
   color: #333333;
 }
 
-/* line 306, ../sass/_settings.scss */
+/* line 311, ../sass/_settings.scss */
 .articleHeadingContainer h3 {
   margin: 0;
   line-height: 100%;
 }
 
-/* line 311, ../sass/_settings.scss */
+/* line 316, ../sass/_settings.scss */
 .articleHeadingContainer label {
   color: #a4a4a4;
   margin-bottom: 14px;
   font-size: 12px;
 }
 
-/* line 317, ../sass/_settings.scss */
+/* line 322, ../sass/_settings.scss */
 .signin-centered-container {
   margin: auto !important;
   float: none !important;
@@ -375,112 +375,112 @@ p.competition-paragraph {
   padding: 25px;
 }
 
-/* line 324, ../sass/_settings.scss */
+/* line 329, ../sass/_settings.scss */
 .small-6.pull-6.columns > .globalBlueButton {
   float: right;
 }
 
-/* line 327, ../sass/_settings.scss */
+/* line 332, ../sass/_settings.scss */
 .signin-formfields p:nth-child(3) > input {
   float: left;
   position: relative;
   top: -20px;
 }
 
-/* line 332, ../sass/_settings.scss */
+/* line 337, ../sass/_settings.scss */
 .signin-formfields p:nth-child(3) > label {
   padding-left: 20px;
 }
 
-/* line 336, ../sass/_settings.scss */
+/* line 341, ../sass/_settings.scss */
 .globalBlueButton, .globalBlueButtonBig, .globalBlueButtonInput, .globalBlueButtonAtag > a, .globalBlueButtonSmallAtag > a, .globalBlueButtonSmall, .globalBlueButtonSmallFlexi, .buttonAccept {
   box-shadow: none;
   white-space: nowrap;
 }
-/* line 340, ../sass/_settings.scss */
+/* line 345, ../sass/_settings.scss */
 .globalBlueButton a:focus, .globalBlueButtonBig a:focus, .globalBlueButtonInput a:focus, .globalBlueButtonAtag > a a:focus, .globalBlueButtonSmallAtag > a a:focus, .globalBlueButtonSmall a:focus, .globalBlueButtonSmallFlexi a:focus, .buttonAccept a:focus {
   color: white !important;
 }
 
-/* line 344, ../sass/_settings.scss */
+/* line 349, ../sass/_settings.scss */
 .signin-centered-container > p > a {
   display: inline-block;
 }
 
-/* line 348, ../sass/_settings.scss */
+/* line 353, ../sass/_settings.scss */
 ul.side-nav {
   padding-top: 0;
   position: fixed;
 }
-/* line 351, ../sass/_settings.scss */
+/* line 356, ../sass/_settings.scss */
 ul.side-nav li {
   margin-bottom: 2px;
 }
-/* line 354, ../sass/_settings.scss */
+/* line 359, ../sass/_settings.scss */
 ul.side-nav li a {
   color: #3684d6 !important;
   font-size: 15px !important;
 }
-/* line 356, ../sass/_settings.scss */
+/* line 361, ../sass/_settings.scss */
 ul.side-nav li a:hover {
   color: #ffac31;
 }
-/* line 357, ../sass/_settings.scss */
+/* line 362, ../sass/_settings.scss */
 ul.side-nav li a:active {
   background: none;
 }
-/* line 359, ../sass/_settings.scss */
+/* line 364, ../sass/_settings.scss */
 ul.side-nav li.active a {
   color: #666666 !important;
 }
 
-/* line 365, ../sass/_settings.scss */
+/* line 370, ../sass/_settings.scss */
 .glossary-page-container h6, competitions-block-Styling h6, .section-container.vertical-tabs .content h6 {
   font-size: 14px;
   color: #666666;
 }
-/* line 370, ../sass/_settings.scss */
+/* line 375, ../sass/_settings.scss */
 .glossary-page-container p, competitions-block-Styling p, .section-container.vertical-tabs .content p {
   font-size: 12px;
   color: #666666;
 }
-/* line 375, ../sass/_settings.scss */
+/* line 380, ../sass/_settings.scss */
 .glossary-page-container ol, competitions-block-Styling ol, .section-container.vertical-tabs .content ol {
   font-size: 13px;
   color: #666666;
 }
-/* line 378, ../sass/_settings.scss */
+/* line 383, ../sass/_settings.scss */
 .glossary-page-container ol li, competitions-block-Styling ol li, .section-container.vertical-tabs .content ol li {
   padding-bottom: 10px;
   list-style-type: disc;
 }
-/* line 384, ../sass/_settings.scss */
+/* line 389, ../sass/_settings.scss */
 .glossary-page-container ul, competitions-block-Styling ul, .section-container.vertical-tabs .content ul {
   font-size: 13px;
   color: #666666;
   margin-left: 20px;
 }
-/* line 389, ../sass/_settings.scss */
+/* line 394, ../sass/_settings.scss */
 .glossary-page-container ul li, competitions-block-Styling ul li, .section-container.vertical-tabs .content ul li {
   padding-bottom: 10px;
   list-style-type: disc;
 }
-/* line 395, ../sass/_settings.scss */
+/* line 400, ../sass/_settings.scss */
 .glossary-page-container pre, competitions-block-Styling pre, .section-container.vertical-tabs .content pre {
   padding: 10px;
   background: #ebf2fb;
   margin-bottom: 15px;
 }
-/* line 401, ../sass/_settings.scss */
+/* line 406, ../sass/_settings.scss */
 .glossary-page-container p a, competitions-block-Styling p a, .section-container.vertical-tabs .content p a {
   color: #3684d6;
 }
-/* line 405, ../sass/_settings.scss */
+/* line 410, ../sass/_settings.scss */
 .glossary-page-container b, competitions-block-Styling b, .section-container.vertical-tabs .content b {
   color: #666666;
 }
 
-/* line 411, ../sass/_settings.scss */
+/* line 416, ../sass/_settings.scss */
 div.auto.section-container > section > .title a, .auto.section-container > .section > .title a {
   background: white;
   padding-left: 40px !important;
@@ -489,60 +489,77 @@ div.auto.section-container > section > .title a, .auto.section-container > .sect
   height: 57px;
 }
 
-/* line 420, ../sass/_settings.scss */
+/* line 425, ../sass/_settings.scss */
 .auto.section-container > section > .content, .auto.section-container > .section > .content, .vertical-tabs.section-container > section > .content, .vertical-tabs.section-container > .section > .content {
   background: #f8f8f8 !important;
 }
 
-/* line 424, ../sass/_settings.scss */
+/* line 429, ../sass/_settings.scss */
 .auto.section-container > section.active > .title {
   border-bottom: solid 1px #f8f8f8 !important;
 }
-/* line 426, ../sass/_settings.scss */
+/* line 431, ../sass/_settings.scss */
 .auto.section-container > section.active > .title a {
   background: #f8f8f8 !important;
 }
 
-/* line 431, ../sass/_settings.scss */
+/* line 436, ../sass/_settings.scss */
 .section-container.vertical-tabs .content {
   padding-top: 1px !important;
 }
-/* line 434, ../sass/_settings.scss */
+/* line 439, ../sass/_settings.scss */
 .section-container.vertical-tabs .content p {
   color: #3b3b3b;
   font-size: 13px;
   line-height: 22px;
 }
-/* line 439, ../sass/_settings.scss */
+/* line 444, ../sass/_settings.scss */
 .section-container.vertical-tabs .CompetitionsDetailLftUl {
   margin-bottom: 2px;
 }
-/* line 442, ../sass/_settings.scss */
+/* line 447, ../sass/_settings.scss */
 .section-container.vertical-tabs .CompetitionsDetailLftUl p a {
   color: #3684d6 !important;
   font-size: 15px !important;
 }
-/* line 444, ../sass/_settings.scss */
+/* line 449, ../sass/_settings.scss */
 .section-container.vertical-tabs .CompetitionsDetailLftUl p a:hover {
   color: #ffac31 !important;
 }
-/* line 445, ../sass/_settings.scss */
+/* line 450, ../sass/_settings.scss */
 .section-container.vertical-tabs .CompetitionsDetailLftUl p a:active {
   background: none !important;
 }
-/* line 449, ../sass/_settings.scss */
+/* line 454, ../sass/_settings.scss */
 .section-container.vertical-tabs .active p a {
   color: #666666 !important;
   font-weight: bold;
 }
 
-/* line 455, ../sass/_settings.scss */
+/* line 460, ../sass/_settings.scss */
 .participateInfoBlock p {
   color: #3b3b3b;
   font-size: 13px;
   line-height: 22px;
 }
 
+/* line 464, ../sass/_settings.scss */
+.deny_reason {
+  box-shadow: inset 0 0 8px #ccc;
+  border-radius: 5px;
+}
+
+/* line 468, ../sass/_settings.scss */
+div.pending-approval-select.columns {
+  padding-left: 0.93em;
+}
+
+/* line 472, ../sass/_settings.scss */
+.competitionUserBlock h3 {
+  color: #3684d6;
+  margin-bottom: 2px;
+}
+
 /* font-face */
 @font-face {
   font-family: "GeneralFoundicons";
diff --git a/codalab/apps/web/static/foundation/sass/_settings.scss b/codalab/apps/web/static/foundation/sass/_settings.scss
index f1bccf9a4..114cb17fd 100644
--- a/codalab/apps/web/static/foundation/sass/_settings.scss
+++ b/codalab/apps/web/static/foundation/sass/_settings.scss
@@ -58,6 +58,11 @@ $tooltip-bg: $background;
 	line-height:22px;
 }
 
+@mixin textbox-style {
+	box-shadow:inset 0 0 8px #ccc;
+	border-radius:5px;
+}
+
 *{
     font-family: Segoe UI,'Segoe UI', Helvetica, Arial,'Trebuchet MS',sans-serif;
 	font-size:   100%;
@@ -454,4 +459,18 @@ div.auto.section-container > section > .title, .auto.section-container > .sectio
 
 .participateInfoBlock p {
 	@include paragraph-Style;
+}
+
+.deny_reason {
+	@include textbox-style;
+}
+
+div.pending-approval-select.columns {
+	padding-left:0.93em;
+}
+.competitionUserBlock {
+	 h3 {
+		color:$highlight;
+		margin-bottom:2px;
+	 }
 }
\ No newline at end of file
diff --git a/codalab/apps/web/templates/web/my/participants.html b/codalab/apps/web/templates/web/my/participants.html
index 12d096c37..0270a04da 100644
--- a/codalab/apps/web/templates/web/my/participants.html
+++ b/codalab/apps/web/templates/web/my/participants.html
@@ -15,32 +15,39 @@ <h4>Participants</h4>
         {% for item in object_list %}
             <div class="row">
                 <div class="competitionUserBlock">
-                    <div class="large-4 push-8 columns process_participant_request">
+                    <div class="large-8 push-4 columns process_participant_request">
                         {% if item.status.codename == 'pending' %}
                                 <form class="process_request" id="process_request" action="/api/competition/{{competition.id}}/participate/" method="POST">{% csrf_token %}
-                                    <div class="small-6 push-6 columns">
-                                        <label for="accept"><input name="request" type="radio" id="accept"/> Accept</label>
+                                    <div class="row">
+                                        <div class="small-3 push-1 columns pending-approval-select">
+                                            <label for="accept"><input name="request" type="radio" id="accept"/> Accept</label>
+                                        </div>
+                                        <div class="small-3 pull-6 columns pending-approval-select">
+                                            <label for="deny"><input name="request" type="radio" id="deny"/> Deny</label>
+                                        </div>
                                     </div>
-                                    <div class="small-6 pull-6 columns">
-                                        <label for="deny"><input name="request" type="radio" id="deny"/> Deny</label>
+                                    <div class="row">
+                                        <div class="small-9 push-1 columns">
+                                            <label for="deny_reason">
+                                                <textarea id="deny_reason" name="deny_reason" class="deny_reason" placeholder="Reason :"></textarea>
+                                            </label>
+                                        </div>
+                                        <div class="small-2 pull-0 columns">
+                                            <input type="submit" class="globalBlueButtonSmall" value="Process" />
+                                        </div>
                                     </div>
-                                    <label for="deny_reason">
-                                        <strong>Reason :</strong>
-                                        <textarea id="deny_reason" name="deny_reason"></textarea>
-                                    </label>
-                                    <input type="submit" class="globalBlueButtonAtag" value="Process" />
                                 </form>
                         {% endif %} 
                     </div>
-                    <div class="large-8 pull-4 columns">
+                    <div class="large-4 pull-8 columns">
                         <h3>{{ item.user.username }}</h3>
                         {% if item.status.codename == 'pending' %}
                             <p>Participation pending approval</p>
                         {% elif item.status.codename == 'approved' %}
                             <p>Participation approved</p>
                         {% elif item.status.codename == 'denied' %}
-                            <p>Participation rejected</p>
-                            <p style="color:red;">Reason: {{ item.reason }}</p>
+                            <p>Participation rejected <br /><span style="color:red;"> Reason: {{ item.reason }}</span></p>
+                            
                         {% else %}
                             <p>Unknown Status</p>
                         {% endif %}