From 3d16d70be1c57ccd9916123cd6d27e811a145598 Mon Sep 17 00:00:00 2001
From: lunarkid <4476442+dedywahyudi@users.noreply.github.com>
Date: Thu, 6 Oct 2022 22:18:24 +0700
Subject: [PATCH 1/7] fix: view submissions 2 lines

---
 src/shared/components/challenge-detail/Header/style.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/shared/components/challenge-detail/Header/style.scss b/src/shared/components/challenge-detail/Header/style.scss
index f97c457a6d..9aabdd7c00 100644
--- a/src/shared/components/challenge-detail/Header/style.scss
+++ b/src/shared/components/challenge-detail/Header/style.scss
@@ -16,9 +16,10 @@
   width: 100%;
   border-radius: 50px !important;
   height: 48px;
-  padding: 0 25px !important;
   background: #137d60 !important;
   color: #fff !important;
+  white-space: nowrap;
+  padding: 0 35px !important;
 
   @include xs-to-sm {
     width: fit-content;

From 7191f73fd4b521b49bb43aee952f52b9ace1a188 Mon Sep 17 00:00:00 2001
From: lunarkid <4476442+dedywahyudi@users.noreply.github.com>
Date: Fri, 7 Oct 2022 19:26:22 +0700
Subject: [PATCH 2/7] fix: buttons design system

---
 .../ProfilePage/Awards/AwardBadge/index.jsx   |  1 +
 .../challenge-detail/Header/index.jsx         | 18 ++++----
 .../challenge-detail/Header/style.scss        | 42 +++++++++++++++----
 3 files changed, 44 insertions(+), 17 deletions(-)

diff --git a/src/shared/components/ProfilePage/Awards/AwardBadge/index.jsx b/src/shared/components/ProfilePage/Awards/AwardBadge/index.jsx
index 39a2a126eb..1903b27c2f 100644
--- a/src/shared/components/ProfilePage/Awards/AwardBadge/index.jsx
+++ b/src/shared/components/ProfilePage/Awards/AwardBadge/index.jsx
@@ -17,6 +17,7 @@ const AwardBadge = ({
     }
     <div styleName="title">
       <span>
+        {/* eslint-disable-next-line react/no-danger */}
         <div dangerouslySetInnerHTML={{ __html: title }} />
       </span>
     </div>
diff --git a/src/shared/components/challenge-detail/Header/index.jsx b/src/shared/components/challenge-detail/Header/index.jsx
index a92b2e90a6..b7e4e62b43 100644
--- a/src/shared/components/challenge-detail/Header/index.jsx
+++ b/src/shared/components/challenge-detail/Header/index.jsx
@@ -423,16 +423,16 @@ export default function ChallengeHeader(props) {
                 Submit
               </PrimaryButton>
               {
-                  track === COMPETITION_TRACKS.DES && hasRegistered && !unregistering
+                track === COMPETITION_TRACKS.DES && hasRegistered && !unregistering
                   && hasSubmissions && (
-                    <PrimaryButton
-                      theme={{ button: style.submitButton }}
-                      to={`${challengesUrl}/${challengeId}/my-submissions`}
-                    >
-                      View Submissions
-                    </PrimaryButton>
-                  )
-                }
+                  <PrimaryButton
+                    theme={{ button: style.submitButton }}
+                    to={`${challengesUrl}/${challengeId}/my-submissions`}
+                  >
+                    View Submissions
+                  </PrimaryButton>
+                )
+              }
             </div>
           </div>
         </div>
diff --git a/src/shared/components/challenge-detail/Header/style.scss b/src/shared/components/challenge-detail/Header/style.scss
index 9aabdd7c00..3257462cc6 100644
--- a/src/shared/components/challenge-detail/Header/style.scss
+++ b/src/shared/components/challenge-detail/Header/style.scss
@@ -13,13 +13,13 @@
 .submitButton {
   margin: $base-unit 0;
   min-width: 0;
-  width: 100%;
+  border-width: 2px !important;
   border-radius: 50px !important;
   height: 48px;
   background: #137d60 !important;
   color: #fff !important;
   white-space: nowrap;
-  padding: 0 35px !important;
+  padding: 12 24px !important;
 
   @include xs-to-sm {
     width: fit-content;
@@ -29,10 +29,10 @@
 .submitButtonDisabled {
   margin: $base-unit 0;
   min-width: 0;
-  width: 100%;
+  border-width: 2px !important;
   border-radius: 50px !important;
   height: 48px;
-  padding: 0 25px !important;
+  padding: 12 24px !important;
   color: #767676 !important;
   background: #f4f4f4 !important;
 
@@ -44,10 +44,10 @@
 .unregisterButton {
   margin: $base-unit 0;
   min-width: 0;
-  width: 100%;
+  border-width: 2px !important;
   border-radius: 50px !important;
   height: 48px;
-  padding: 0 25px !important;
+  padding: 12 24px !important;
   color: #137d60 !important;
   border-color: #137d60 !important;
   background: #fff !important;
@@ -60,10 +60,10 @@
 .registerBtn {
   margin: $base-unit 0;
   min-width: 0;
-  width: 100%;
+  border-width: 2px !important;
   border-radius: 50px !important;
   height: 48px;
-  padding: 0 25px !important;
+  padding: 12 24px !important;
   background-color: #137d60 !important;
 
   @include xs-to-sm {
@@ -71,6 +71,32 @@
   }
 }
 
+.submitButton:hover,
+.registerBtn:hover {
+  color: #fff !important;
+  border-color: #219174 !important;
+  background: #219174 !important;
+}
+
+.unregisterButton:hover {
+  color: #219174 !important;
+  border-color: #219174 !important;
+  background: #fff !important;
+}
+
+.submitButton:active,
+.registerBtn:active {
+  color: #fff !important;
+  border-color: #0d664e !important;
+  background: #0d664e !important;
+}
+
+.unregisterButton:active {
+  color: #0d664e !important;
+  border-color: #0d664e !important;
+  background: #fff !important;
+}
+
 .challenge-ops-container {
   display: flex;
   margin-top: 32px;

From 51ac9a4b3a00d984c07678d103ff1a89d3f83c98 Mon Sep 17 00:00:00 2001
From: lunarkid <4476442+dedywahyudi@users.noreply.github.com>
Date: Sat, 8 Oct 2022 08:31:22 +0700
Subject: [PATCH 3/7] fix: change the font-weight & letter

---
 src/shared/components/challenge-detail/Header/style.scss | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/shared/components/challenge-detail/Header/style.scss b/src/shared/components/challenge-detail/Header/style.scss
index 3257462cc6..a807310475 100644
--- a/src/shared/components/challenge-detail/Header/style.scss
+++ b/src/shared/components/challenge-detail/Header/style.scss
@@ -20,6 +20,8 @@
   color: #fff !important;
   white-space: nowrap;
   padding: 12 24px !important;
+  font-weight: 700;
+  letter-spacing: 0.8em;
 
   @include xs-to-sm {
     width: fit-content;
@@ -35,6 +37,8 @@
   padding: 12 24px !important;
   color: #767676 !important;
   background: #f4f4f4 !important;
+  font-weight: 700;
+  letter-spacing: 0.8em;
 
   @include xs-to-sm {
     width: fit-content;
@@ -51,6 +55,8 @@
   color: #137d60 !important;
   border-color: #137d60 !important;
   background: #fff !important;
+  font-weight: 700;
+  letter-spacing: 0.8em;
 
   @include xs-to-sm {
     width: fit-content;
@@ -65,6 +71,8 @@
   height: 48px;
   padding: 12 24px !important;
   background-color: #137d60 !important;
+  font-weight: 700;
+  letter-spacing: 0.8em;
 
   @include xs-to-sm {
     width: fit-content;

From 8d6bca7a2b2cf6a0622ad5093fe70b8a7edcf32d Mon Sep 17 00:00:00 2001
From: lunarkid <4476442+dedywahyudi@users.noreply.github.com>
Date: Mon, 10 Oct 2022 21:54:01 +0700
Subject: [PATCH 4/7] fix: button style upgrade

---
 .../challenge-detail/Header/style.scss        | 44 +++++++++----------
 1 file changed, 22 insertions(+), 22 deletions(-)

diff --git a/src/shared/components/challenge-detail/Header/style.scss b/src/shared/components/challenge-detail/Header/style.scss
index a807310475..b87478cb31 100644
--- a/src/shared/components/challenge-detail/Header/style.scss
+++ b/src/shared/components/challenge-detail/Header/style.scss
@@ -10,8 +10,8 @@
   padding: 0 25px !important;
 }
 
-.submitButton {
-  margin: $base-unit 0;
+.challenge-ops-container .submitButton {
+  margin: 5px;
   min-width: 0;
   border-width: 2px !important;
   border-radius: 50px !important;
@@ -19,87 +19,87 @@
   background: #137d60 !important;
   color: #fff !important;
   white-space: nowrap;
-  padding: 12 24px !important;
+  padding: 12px 24px !important;
   font-weight: 700;
-  letter-spacing: 0.8em;
+  letter-spacing: 0.008em;
 
   @include xs-to-sm {
     width: fit-content;
   }
 }
 
-.submitButtonDisabled {
-  margin: $base-unit 0;
+.challenge-ops-container .submitButtonDisabled {
+  margin: 5px;
   min-width: 0;
   border-width: 2px !important;
   border-radius: 50px !important;
   height: 48px;
-  padding: 12 24px !important;
+  padding: 12px 24px !important;
   color: #767676 !important;
   background: #f4f4f4 !important;
   font-weight: 700;
-  letter-spacing: 0.8em;
+  letter-spacing: 0.008em;
 
   @include xs-to-sm {
     width: fit-content;
   }
 }
 
-.unregisterButton {
-  margin: $base-unit 0;
+.challenge-ops-container .unregisterButton {
+  margin: 5px;
   min-width: 0;
   border-width: 2px !important;
   border-radius: 50px !important;
   height: 48px;
-  padding: 12 24px !important;
+  padding: 12px 24px !important;
   color: #137d60 !important;
   border-color: #137d60 !important;
   background: #fff !important;
   font-weight: 700;
-  letter-spacing: 0.8em;
+  letter-spacing: 0.008em;
 
   @include xs-to-sm {
     width: fit-content;
   }
 }
 
-.registerBtn {
-  margin: $base-unit 0;
+.challenge-ops-container .registerBtn {
+  margin: 5px;
   min-width: 0;
   border-width: 2px !important;
   border-radius: 50px !important;
   height: 48px;
-  padding: 12 24px !important;
+  padding: 12px 24px !important;
   background-color: #137d60 !important;
   font-weight: 700;
-  letter-spacing: 0.8em;
+  letter-spacing: 0.008em;
 
   @include xs-to-sm {
     width: fit-content;
   }
 }
 
-.submitButton:hover,
-.registerBtn:hover {
+.challenge-ops-container .submitButton:hover,
+.challenge-ops-container .registerBtn:hover {
   color: #fff !important;
   border-color: #219174 !important;
   background: #219174 !important;
 }
 
-.unregisterButton:hover {
+.challenge-ops-container .unregisterButton:hover {
   color: #219174 !important;
   border-color: #219174 !important;
   background: #fff !important;
 }
 
-.submitButton:active,
-.registerBtn:active {
+.challenge-ops-container .submitButton:active,
+.challenge-ops-container .registerBtn:active {
   color: #fff !important;
   border-color: #0d664e !important;
   background: #0d664e !important;
 }
 
-.unregisterButton:active {
+.challenge-ops-container .unregisterButton:active {
   color: #0d664e !important;
   border-color: #0d664e !important;
   background: #fff !important;

From e30724b59637972b654f0b07048216c76bb98c98 Mon Sep 17 00:00:00 2001
From: lunarkid <4476442+dedywahyudi@users.noreply.github.com>
Date: Tue, 11 Oct 2022 11:43:38 +0700
Subject: [PATCH 5/7] fix: focus style for buttons

---
 .../challenge-detail/Header/style.scss        | 24 +++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/src/shared/components/challenge-detail/Header/style.scss b/src/shared/components/challenge-detail/Header/style.scss
index b87478cb31..91c5bd6a89 100644
--- a/src/shared/components/challenge-detail/Header/style.scss
+++ b/src/shared/components/challenge-detail/Header/style.scss
@@ -105,6 +105,30 @@
   background: #fff !important;
 }
 
+.challenge-ops-container .submitButton:focus,
+.challenge-ops-container .submitButton:focus-within,
+.challenge-ops-container .submitButton:focus-visible{
+  outline: none !important;
+  box-shadow: none !important;
+  border: 2px solid #219174 !important;
+}
+
+.challenge-ops-container .registerBtn:focus,
+.challenge-ops-container .registerBtn:focus-within,
+.challenge-ops-container .registerBtn:focus-visible {
+  outline: none !important;
+  box-shadow: none !important;
+  border: 2px solid #219174 !important;
+}
+
+.challenge-ops-container .unregisterButton:focus,
+.challenge-ops-container .unregisterButton:focus-within,
+.challenge-ops-container .unregisterButton:focus-visible{
+  outline: none !important;
+  box-shadow: none !important;
+  border: 2px solid #0d664e !important;
+}
+
 .challenge-ops-container {
   display: flex;
   margin-top: 32px;

From 04a22c697bbebfae4e289a5180c5f5161762f5ad Mon Sep 17 00:00:00 2001
From: lunarkid <4476442+dedywahyudi@users.noreply.github.com>
Date: Tue, 11 Oct 2022 12:14:14 +0700
Subject: [PATCH 6/7] fix: add space before brackets

---
 src/shared/components/challenge-detail/Header/style.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/shared/components/challenge-detail/Header/style.scss b/src/shared/components/challenge-detail/Header/style.scss
index 91c5bd6a89..86bd9fbe04 100644
--- a/src/shared/components/challenge-detail/Header/style.scss
+++ b/src/shared/components/challenge-detail/Header/style.scss
@@ -107,7 +107,7 @@
 
 .challenge-ops-container .submitButton:focus,
 .challenge-ops-container .submitButton:focus-within,
-.challenge-ops-container .submitButton:focus-visible{
+.challenge-ops-container .submitButton:focus-visible {
   outline: none !important;
   box-shadow: none !important;
   border: 2px solid #219174 !important;
@@ -123,7 +123,7 @@
 
 .challenge-ops-container .unregisterButton:focus,
 .challenge-ops-container .unregisterButton:focus-within,
-.challenge-ops-container .unregisterButton:focus-visible{
+.challenge-ops-container .unregisterButton:focus-visible {
   outline: none !important;
   box-shadow: none !important;
   border: 2px solid #0d664e !important;

From 8ff6d1661052dd1fba57efb6f4a58eb6c9e2f512 Mon Sep 17 00:00:00 2001
From: lunarkid <4476442+dedywahyudi@users.noreply.github.com>
Date: Thu, 13 Oct 2022 18:26:44 +0700
Subject: [PATCH 7/7] fix: button stylings

---
 .../challenge-detail/Header/index.jsx         |  2 +-
 .../challenge-detail/Header/style.scss        | 45 ++++++++++++++-----
 2 files changed, 36 insertions(+), 11 deletions(-)

diff --git a/src/shared/components/challenge-detail/Header/index.jsx b/src/shared/components/challenge-detail/Header/index.jsx
index b7e4e62b43..3cd0d3328f 100644
--- a/src/shared/components/challenge-detail/Header/index.jsx
+++ b/src/shared/components/challenge-detail/Header/index.jsx
@@ -397,7 +397,7 @@ export default function ChallengeHeader(props) {
                   onClick={unregisterFromChallenge}
                   theme={{
                     button: unregisterButtonDisabled
-                      ? style.submitButtonDisabled
+                      ? style.unregisterButtonDisabled
                       : style.unregisterButton,
                   }}
                 >
diff --git a/src/shared/components/challenge-detail/Header/style.scss b/src/shared/components/challenge-detail/Header/style.scss
index 86bd9fbe04..a3daf5e533 100644
--- a/src/shared/components/challenge-detail/Header/style.scss
+++ b/src/shared/components/challenge-detail/Header/style.scss
@@ -13,13 +13,14 @@
 .challenge-ops-container .submitButton {
   margin: 5px;
   min-width: 0;
-  border-width: 2px !important;
   border-radius: 50px !important;
   height: 48px;
   background: #137d60 !important;
   color: #fff !important;
   white-space: nowrap;
   padding: 12px 24px !important;
+  font-size: 16px;
+  line-height: 24px;
   font-weight: 700;
   letter-spacing: 0.008em;
 
@@ -31,12 +32,13 @@
 .challenge-ops-container .submitButtonDisabled {
   margin: 5px;
   min-width: 0;
-  border-width: 2px !important;
   border-radius: 50px !important;
   height: 48px;
   padding: 12px 24px !important;
   color: #767676 !important;
   background: #f4f4f4 !important;
+  font-size: 16px;
+  line-height: 24px;
   font-weight: 700;
   letter-spacing: 0.008em;
 
@@ -48,13 +50,33 @@
 .challenge-ops-container .unregisterButton {
   margin: 5px;
   min-width: 0;
-  border-width: 2px !important;
   border-radius: 50px !important;
   height: 48px;
   padding: 12px 24px !important;
   color: #137d60 !important;
-  border-color: #137d60 !important;
+  border: 2px solid #137d60 !important;
   background: #fff !important;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 700;
+  letter-spacing: 0.008em;
+
+  @include xs-to-sm {
+    width: fit-content;
+  }
+}
+
+.challenge-ops-container .unregisterButtonDisabled {
+  margin: 5px;
+  min-width: 0;
+  border-radius: 50px !important;
+  height: 48px;
+  padding: 12px 24px !important;
+  color: #767676 !important;
+  border: 2px solid #f4f4f4;
+  background: #fff !important;
+  font-size: 16px;
+  line-height: 24px;
   font-weight: 700;
   letter-spacing: 0.008em;
 
@@ -66,11 +88,12 @@
 .challenge-ops-container .registerBtn {
   margin: 5px;
   min-width: 0;
-  border-width: 2px !important;
   border-radius: 50px !important;
   height: 48px;
   padding: 12px 24px !important;
   background-color: #137d60 !important;
+  font-size: 16px;
+  line-height: 24px;
   font-weight: 700;
   letter-spacing: 0.008em;
 
@@ -82,8 +105,8 @@
 .challenge-ops-container .submitButton:hover,
 .challenge-ops-container .registerBtn:hover {
   color: #fff !important;
-  border-color: #219174 !important;
   background: #219174 !important;
+  border-color: #219174 !important;
 }
 
 .challenge-ops-container .unregisterButton:hover {
@@ -95,11 +118,13 @@
 .challenge-ops-container .submitButton:active,
 .challenge-ops-container .registerBtn:active {
   color: #fff !important;
-  border-color: #0d664e !important;
   background: #0d664e !important;
+  border-color: #0d664e !important;
 }
 
 .challenge-ops-container .unregisterButton:active {
+  outline: none !important;
+  box-shadow: none !important;
   color: #0d664e !important;
   border-color: #0d664e !important;
   background: #fff !important;
@@ -110,7 +135,7 @@
 .challenge-ops-container .submitButton:focus-visible {
   outline: none !important;
   box-shadow: none !important;
-  border: 2px solid #219174 !important;
+  border-color: #0d664e;
 }
 
 .challenge-ops-container .registerBtn:focus,
@@ -118,7 +143,7 @@
 .challenge-ops-container .registerBtn:focus-visible {
   outline: none !important;
   box-shadow: none !important;
-  border: 2px solid #219174 !important;
+  border-color: #0d664e;
 }
 
 .challenge-ops-container .unregisterButton:focus,
@@ -126,7 +151,7 @@
 .challenge-ops-container .unregisterButton:focus-visible {
   outline: none !important;
   box-shadow: none !important;
-  border: 2px solid #0d664e !important;
+  border-color: #0d664e;
 }
 
 .challenge-ops-container {