Merge pull request #4 from topcoder-platform/reskin-payment

fix: add payment settings button

Author: dedywahyudi

css/reskin-2/paymentHistory.css

@@ -68,14 +68,16 @@ body {
   .page-header .back-btn .arrow-prev-icon {
     content: url('/i/reskin-2/arrow-prev.svg');
   }
-  .page-header .how-to-get-paid {
-    order: -1;
-    align-self: flex-end;
+  .page-header .page-header-right {
+    display: flex;
+    align-items: center;
+    column-gap: 24px;
+  }
+  .page-header .page-header-right .how-to-get-paid {
     text-transform: uppercase;
-
     padding: 0 !important;
   }
-  .page-header .how-to-get-paid a {
+  .page-header .page-header-right .how-to-get-paid a {
     font-family: Roboto;
     font-weight: 700;
     font-size: 16px;
@@ -84,9 +86,27 @@ body {
 
     display: block;
   }
-  .page-header .how-to-get-paid a:hover {
+  .page-header .page-header-right .how-to-get-paid a:hover {
     text-shadow: none;
   }
+  .page-header .page-header-right .payment-settings-btn {
+    padding: 0px 16px;
+    background: var(--tc-white);
+    border: 1.5px solid var(--green);
+    border-radius: 24px;
+  }
+  .page-header .page-header-right .payment-settings-btn a {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 700;
+    font-size: 12px;
+    line-height: 24px;
+
+    letter-spacing: 0.008em;
+    text-transform: uppercase;
+
+    color: var(--green);
+  }
   .page-header .divider {
     width: 100%;
     height: 2px;

css/reskin-2/paymentStatusSummary.css

@@ -63,14 +63,16 @@ body {
   .page-header .back-btn .arrow-prev-icon {
     content: url('/i/reskin-2/arrow-prev.svg');
   }
-  .page-header .how-to-get-paid {
-    order: -1;
-    align-self: flex-end;
+  .page-header .page-header-right {
+    display: flex;
+    align-items: center;
+    column-gap: 24px;
+  }
+  .page-header .page-header-right .how-to-get-paid {
     text-transform: uppercase;
-
     padding: 0 !important;
   }
-  .page-header .how-to-get-paid a {
+  .page-header .page-header-right .how-to-get-paid a {
     font-family: Roboto;
     font-weight: 700;
     font-size: 16px;
@@ -79,9 +81,27 @@ body {
 
     display: block;
   }
-  .page-header .how-to-get-paid a:hover {
+  .page-header .page-header-right .how-to-get-paid a:hover {
     text-shadow: none;
   }
+  .page-header .page-header-right .payment-settings-btn {
+    padding: 0px 16px;
+    background: var(--tc-white);
+    border: 1.5px solid var(--green);
+    border-radius: 24px;
+  }
+  .page-header .page-header-right .payment-settings-btn a {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 700;
+    font-size: 12px;
+    line-height: 24px;
+
+    letter-spacing: 0.008em;
+    text-transform: uppercase;
+
+    color: var(--green);
+  }
   .page-header .divider {
     width: 100%;
     height: 2px;