fix: styles

Author: hentrymartin

src/shared/components/SubmissionManagement/DownloadArtifactsModal/style.scss

@@ -44,6 +44,7 @@
     padding-right: 25px;
     color: $color-black-60;
     font-size: 11px;
+    text-transform: uppercase;
 
     @include roboto-medium;
 
@@ -70,6 +71,7 @@
     padding-right: 25px;
     color: $color-tc-black;
     font-size: 14px;
+    font-weight: 500;
 
     @include roboto-regular;
 
@@ -98,8 +100,8 @@
   transform: translate(-50%);
   height: auto;
   width: 720px;
-  padding-top: 36px;
-  padding-bottom: 36px;
+  padding-top: 25px;
+  padding-bottom: 25px;
   padding-left: 0;
   padding-right: 0;
   border-radius: 8px;

src/shared/components/SubmissionManagement/RatingsListModal/index.jsx

@@ -1,8 +1,9 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import _ from 'lodash';
+import tc from 'components/buttons/themed/tc.scss';
 
-import { Modal } from 'topcoder-react-ui-kit';
+import { Modal, PrimaryButton } from 'topcoder-react-ui-kit';
 import LoadingIndicator from 'components/LoadingIndicator';
 import IconClose from 'assets/images/icon-close-green.svg';
 
@@ -14,6 +15,10 @@ const theme = {
   overlay: styles.modalOverlay,
 };
 
+const buttonThemes = {
+  tc,
+};
+
 const SystemReviewers = {
   Default: 'TC System',
 };
@@ -65,16 +70,19 @@ const RatingsListModal = ({
 
   return (
     <Modal onCancel={() => onCancel()} theme={theme}>
-      <div styleName="container">
-        <div styleName="icon" role="presentation" onClick={() => onCancel()}>
-          <IconClose />
+      <div className={styles.container}>
+        <div className={styles["modal-header"]}>
+          <h2 className={styles["modal-title"]}>Submission Details</h2>
+          <div className={styles["icon"]}role="presentation" onClick={() => onCancel()}>
+            <IconClose />
+          </div>
         </div>
-        <div styleName="list">
-          <div styleName="header">
-            <div styleName="header-item">Review Type</div>
-            <div styleName="header-item">Reviewer</div>
-            <div styleName="header-item">Score</div>
-            <div styleName="header-item">Status</div>
+        <div className={styles["list"]}>
+          <div className={styles["header"]}>
+            <div className={styles["header-item"]}>Review Type</div>
+            <div className={styles["header-item"]}>Reviewer</div>
+            <div className={styles["header-item"]}>Score</div>
+            <div className={styles["header-item"]}>Status</div>
           </div>
           {reviews.map((review) => {
             const { isPassing } = review;
@@ -84,17 +92,17 @@ const RatingsListModal = ({
             const status = isPassing ? 'Passed' : 'Failed';
 
             return (
-              <div styleName="list-item">
-                <div styleName="list-col-item">
+              <div className={styles["list-item"]}>
+                <div className={styles["list-col-item"]}>
                   {review.reviewType}
                 </div>
-                <div styleName="list-col-item">
+                <div className={styles["list-col-item"]}>
                   <strong>{review.reviewer}</strong>
                 </div>
-                <div styleName="list-col-item">
+                <div className={styles["list-col-item"]}>
                   {review.score}
                 </div>
-                <div styleName="list-col-item">
+                <div className={styles["list-col-item"]}>
                   {statusIsDefined ? status : 'N/A'}
                 </div>
               </div>
@@ -105,6 +113,16 @@ const RatingsListModal = ({
           }
         </div>
       </div>
+      <div className={styles["buttons-container"]}>
+        <PrimaryButton
+          onClick={() => onCancel()}
+          theme={{
+            button: buttonThemes.tc['primary-green-md'],
+          }}
+        >
+          Close
+        </PrimaryButton>
+      </div>
     </Modal>
   );
 };

src/shared/components/SubmissionManagement/RatingsListModal/styles.scss

@@ -6,14 +6,27 @@
 
   z-index: 1000;
 
-  .icon {
-    cursor: pointer;
-    margin-top: 5px;
-    margin-right: 30px;
+  .modal-header {
     display: flex;
-    align-items: flex-end;
-    justify-content: flex-end;
-    flex-grow: 1;
+    justify-content: space-between;
+    padding-bottom: 25px;
+    padding-left: 25px;
+    padding-right: 25px;
+  
+    .modal-title {
+      @include barlow-medium;
+  
+      font-weight: 600;
+      color: #2a2a2a;
+      font-size: 18px;
+      line-height: 22px;
+      text-transform: uppercase;
+    }
+  
+    .icon {
+      cursor: pointer;
+      margin-top: 5px;
+    }
   }
 }
 
@@ -22,27 +35,31 @@
   padding: 30px 0;
 
   .header {
-    border-bottom: 1px solid $tc-gray-60;
+    border-bottom: 1px solid #ededf2;
     padding-bottom: 10px;
     display: flex;
-    padding-left: 40px;
-    padding-right: 40px;
-    color: $tc-gray-70;
+    padding-left: 25px;
+    padding-right: 25px;
+    color: $color-black-60;
+    font-size: 11px;
     font-weight: 500;
+    text-transform: uppercase;
 
     .header-item {
       flex: 1;
     }
   }
 
   .list-item {
-    border-bottom: 1px solid $tc-gray-60;
+    border-bottom: 1px solid #ededf2;
     padding-bottom: 10px;
     padding-top: 10px;
     display: flex;
-    padding-left: 40px;
-    padding-right: 40px;
-    color: $tc-gray-70;
+    padding-left: 25px;
+    padding-right: 25px;
+    color: $color-tc-black;
+    font-size: 14px;
+    font-weight: 500;
 
     .list-col-item {
       display: flex;
@@ -57,12 +74,19 @@
   transform: translate(-50%);
   height: auto;
   width: 720px;
-  padding-top: 36px;
-  padding-bottom: 36px;
+  padding-top: 25px;
+  padding-bottom: 25px;
   padding-left: 0;
   padding-right: 0;
+  border-radius: 8px;
 }
 
 .modalOverlay {
   pointer-events: bounding-box;
 }
+
+.buttons-container {
+  display: flex;
+  justify-content: flex-end;
+  padding-right: 25px;
+}