Merge pull request #6361 from topcoder-platform/develop

Reskin updates to prod
topcoder-platform · May 26, 2022 · 841cc85 · 841cc85
2 parents 40f5b9d + 69b103f
commit 841cc85
Show file tree

Hide file tree

Showing 7 changed files with 179 additions and 164 deletions.
diff --git a/src/shared/components/SortingSelectBar/style.scss b/src/shared/components/SortingSelectBar/style.scss
@@ -1,4 +1,5 @@
 @import '~styles/mixins';
+
 $view-options-toggle-right-margin: $base-unit * 2;
 $down-arrow-size: $base-unit;
 
@@ -46,6 +47,144 @@ $down-arrow-size: $base-unit;
     @include xs-to-md {
       margin-right: 16px;
     }
+
+    :global {
+      // 'Sort by' dropdown
+      .Select {
+        @include roboto-regular;
+      }
+
+      .is-focused {
+        font-weight: 700;
+      }
+
+      .Select-control {
+        line-height: 12px;
+        padding: 4px 35px 4px 10px;
+        width: 208px;
+        height: 40px;
+        background-color: $tc-white;
+        font-weight: 400;
+        font-size: 12px;
+        text-transform: none;
+        border: 1px solid #aaa;
+        color: $tc-gray-90;
+        position: relative;
+        overflow: hidden;
+        box-sizing: border-box;
+      }
+
+      .Select-input {
+        width: 100% !important;
+        height: 0;
+        padding: 0;
+        opacity: 0;
+        position: absolute;
+      }
+
+      .Select--single > .Select-control .Select-value {
+        position: static;
+        padding: 0;
+        overflow: visible;
+      }
+
+      .Select.is-focused:not(.is-open) > .Select-control {
+        border-color: #137d60 !important;
+      }
+
+      .Select-value-label {
+        @include roboto-regular;
+
+        font-size: 400;
+        font-size: 14px;
+        line-height: 22px;
+        color: $tco-black;
+        vertical-align: middle;
+      }
+
+      .Select-arrow-zone {
+        content: ' ';
+        display: block;
+        height: 0;
+        position: absolute;
+        right: 17px;
+        top: 50%;
+        width: 0;
+
+        svg {
+          width: 10px;
+          height: 10px;
+        }
+      }
+
+      .Select-menu-outer {
+        width: 100%;
+        color: $tc-gray-90;
+        font-weight: 400;
+        font-size: 12px;
+        background-color: $tc-white;
+        box-sizing: border-box;
+        margin-top: 2px;
+        padding: 4px 0;
+        position: absolute;
+        top: 100%;
+        right: 0;
+        z-index: 1000;
+        -webkit-overflow-scrolling: touch;
+        border: none !important;
+      }
+
+      .Select-menu {
+        max-height: none;
+        overflow-y: visible;
+        height: 22px;
+        font-size: 14px;
+      }
+
+      .Select-option {
+        box-sizing: border-box;
+        color: rgba(51, 51, 51, 0.8);
+        cursor: pointer;
+        display: block;
+        padding: 6px 16px;
+        border-left: 1px solid #aaa;
+        border-right: 1px solid #aaa;
+      }
+
+      .Select-option:last-child {
+        border-bottom-right-radius: 5px !important;
+        border-bottom-left-radius: 5px !important;
+        border-bottom: 1px solid #aaa;
+      }
+
+      .Select-option:first-child {
+        border-top: 1px solid #aaa;
+        border-top-left-radius: $base-unit;
+        border-top-right-radius: $base-unit;
+      }
+
+      .Select-option:hover {
+        color: $tc-black;
+      }
+
+      .Select-option.is-selected {
+        color: $tc-black;
+        font-weight: 500;
+        background: $tc-white;
+      }
+
+      .Select-option.is-focused {
+        background: $tc-white;
+      }
+
+      .Select-noresults {
+        box-sizing: border-box;
+        color: $tc-gray-90;
+        cursor: default;
+        display: block;
+        padding: 8px 20px;
+      }
+    }
   }
 
   .view-options {
@@ -92,142 +231,4 @@ $down-arrow-size: $base-unit;
     border-top: $down-arrow-size solid $tc-gray-50;
     margin-left: 3 * $base-unit;
   }
-
-  :global {
-    // 'Sort by' dropdown
-    .Select {
-      @include roboto-regular;
-    }
-
-    .is-focused {
-      font-weight: 700;
-    }
-
-    .Select-control {
-      line-height: 12px;
-      padding: 4px 35px 4px 10px;
-      width: 208px;
-      height: 40px;
-      background-color: $tc-white;
-      font-weight: 400;
-      font-size: 12px;
-      text-transform: none;
-      border: 1px solid #aaa;
-      color: $tc-gray-90;
-      position: relative;
-      overflow: hidden;
-      box-sizing: border-box;
-    }
-
-    .Select-input {
-      width: 100% !important;
-      height: 0;
-      padding: 0;
-      opacity: 0;
-      position: absolute;
-    }
-
-    .Select--single > .Select-control .Select-value {
-      position: static;
-      padding: 0;
-      overflow: visible;
-    }
-
-    .Select.is-focused:not(.is-open) > .Select-control {
-      border-color: #137d60 !important;
-    }
-
-    .Select-value-label {
-      @include roboto-regular;
-
-      font-size: 400;
-      font-size: 14px;
-      line-height: 22px;
-      color: $tco-black;
-      vertical-align: middle;
-    }
-
-    .Select-arrow-zone {
-      content: ' ';
-      display: block;
-      height: 0;
-      position: absolute;
-      right: 17px;
-      top: 50%;
-      width: 0;
-
-      svg {
-        width: 10px;
-        height: 10px;
-      }
-    }
-
-    .Select-menu-outer {
-      width: 100%;
-      color: $tc-gray-90;
-      font-weight: 400;
-      font-size: 12px;
-      background-color: $tc-white;
-      box-sizing: border-box;
-      margin-top: 2px;
-      padding: 4px 0;
-      position: absolute;
-      top: 100%;
-      right: 0;
-      z-index: 1000;
-      -webkit-overflow-scrolling: touch;
-      border: none !important;
-    }
-
-    .Select-menu {
-      max-height: none;
-      overflow-y: visible;
-      height: 22px;
-      font-size: 14px;
-    }
-
-    .Select-option {
-      box-sizing: border-box;
-      color: rgba(51, 51, 51, 0.8);
-      cursor: pointer;
-      display: block;
-      padding: 6px 16px;
-      border-left: 1px solid #aaa;
-      border-right: 1px solid #aaa;
-    }
-
-    .Select-option:last-child {
-      border-bottom-right-radius: 5px !important;
-      border-bottom-left-radius: 5px !important;
-      border-bottom: 1px solid #aaa;
-    }
-
-    .Select-option:first-child {
-      border-top: 1px solid #aaa;
-      border-top-left-radius: $base-unit;
-      border-top-right-radius: $base-unit;
-    }
-
-    .Select-option:hover {
-      color: $tc-black;
-    }
-
-    .Select-option.is-selected {
-      color: $tc-black;
-      font-weight: 500;
-      background: $tc-white;
-    }
-
-    .Select-option.is-focused {
-      background: $tc-white;
-    }
-
-    .Select-noresults {
-      box-sizing: border-box;
-      color: $tc-gray-90;
-      cursor: default;
-      display: block;
-      padding: 8px 20px;
-    }
-  }
 }
diff --git a/src/shared/components/Tooltip/style.scss b/src/shared/components/Tooltip/style.scss
@@ -13,11 +13,28 @@
     padding: 0;
   }
 
+  .rc-tooltip-arrow {
+    background: url(assets/images/tooltip-arrow.svg);
+    width: 30px;
+    height: 9px;
+    z-index: 10000;
+  }
+
   .rc-tooltip-placement-top .rc-tooltip-arrow,
   .rc-tooltip-placement-topLeft .rc-tooltip-arrow,
   .rc-tooltip-placement-topRight .rc-tooltip-arrow {
     border-top-color: $tc-gray-80;
-    background: url(assets/images/tooltip-arrow.svg);
+    padding: 0;
+    bottom: 1px;
+    border-width: 0;
+  }
+
+  .rc-tooltip-placement-top .rc-tooltip-arrow {
+    margin-left: -19px;
+  }
+
+  .rc-tooltip-placement-topLeft .rc-tooltip-arrow {
+    margin-left: -13px;
   }
 
   .rc-tooltip-placement-right .rc-tooltip-arrow,

diff --git a/src/shared/components/challenge-detail/MySubmissions/SubmissionsList/styles.scss b/src/shared/components/challenge-detail/MySubmissions/SubmissionsList/styles.scss
@@ -96,10 +96,13 @@
   flex-direction: column;
   font-size: 13px;
   line-height: 20px;
-  margin: 16px 40px 0 40px;
+  padding-top: 30px;
+  padding-bottom: 50px;
+  margin: 0 41px;
 
   @include xs-to-sm {
-    margin: 16px 0 0 0;
+    padding: 0;
+    margin: 0 16px;
   }
 }
 
@@ -177,6 +180,10 @@ button.column-1-1,
     margin: 0 32px 0 16px;
     height: auto;
   }
+
+  @include xs-to-sm {
+    margin-top: 24px;
+  }
 }
 
 .column-1 {