fixed responsive

package.json

@@ -86,6 +86,7 @@
     "react-dom": "^16.12.0",
     "react-redux": "^7.2.3",
     "react-select": "^1.3.0",
+    "react-responsive": "^9.0.0-beta.5",
     "redux": "^4.0.5",
     "redux-actions": "^2.6.5",
     "redux-logger": "^3.0.6",

src/components/DateRangePicker/DateInput/styles.scss

@@ -18,7 +18,6 @@
 }
 
 .date-range-input {
-  width: 230px;
   margin-top: -12px;
   font-size: $font-size-sm;
 

src/components/DateRangePicker/index.jsx

@@ -551,15 +551,15 @@ function DateRangePicker(props) {
     return isBeforeDay(preview.endDate, range.startDate);
   };
 
-  const className = `
-    ${focusedRange[1] === 1 && styles.endDate}
-    ${" "}
-    ${range.startDate && range.endDate && styles.isRange}
-    ${" "}
-    ${isInvalidPreview() && styles.isInvalidPreview}
-    ${" "}
-    ${(errors.startDate || errors.endDate) && styles.isErrorInput}
-  `;
+  const className = `${
+      focusedRange[1] === 1 && styles.endDate || ""
+    } ${
+      range.startDate && range.endDate && styles.isRange || ""
+    } ${
+      isInvalidPreview() && styles.isInvalidPreview || ""
+    } ${
+      (errors.startDate || errors.endDate) && styles.isErrorInput || ""
+    }`;
 
   return (
     <div styleName="dateRangePicker" className={className}>

src/components/DateRangePicker/style.scss

@@ -57,24 +57,25 @@ $darkGreen: #0AB88A;;
     @include phone {
       .rdrDateRangePickerWrapper {
         position: relative !important;
-        width: 100vw !important;
+        width: 100% !important;
         flex-direction: column-reverse;
         align-items: center;
         justify-content: flex-end;
         padding: 0 20px;
+        border-radius: 0 !important;
 
         .rdrDefinedRangesWrapper {
-          width: 100vw;
-          padding-bottom: 10px;
-
           .rdrStaticRanges {
             display: inline-flex;
             flex-direction: row;
             justify-content: space-around;
+            flex-wrap: wrap;
             margin-top: 10px !important;
-            border-bottom: 1px solid $tc-gray-20;
-            width: 100vw;
-            padding-bottom: 10px;
+            width: calc(100% - 40px);
+
+            .rdrStaticRange {
+              width: 50%;
+            }
 
             .rdrStaticRangeLabel {
               font-size: 14px;
@@ -83,10 +84,6 @@ $darkGreen: #0AB88A;;
             > button:hover .rdrStaticRangeLabel {
               background-color: $green;
             }
-
-            & > *:last-child {
-              display: none;
-            }
           }
         }
 
@@ -137,14 +134,14 @@ $darkGreen: #0AB88A;;
     .rdrDateRangePickerWrapper {
       z-index: 15;
       position: relative;
-      background: $tc-white;
+      // background: $tc-white;
       border-bottom-left-radius: 4px;
       border-bottom-right-radius: 4px;
       overflow: hidden;
       width: 455px;
 
       .rdrDefinedRangesWrapper {
-        width: unset;
+        width: 100%;
         border: none;
 
         .rdrStaticRanges {
@@ -164,6 +161,10 @@ $darkGreen: #0AB88A;;
             background-color: $green;
           }
         }
+
+        .rdrInputRanges {
+          display: none;
+        }
       }
     }
 
@@ -373,7 +374,6 @@ $darkGreen: #0AB88A;;
 }
 
 .dateInputWrapper {
-  display: inline-flex;
   position: relative;
   text-align: left;
 }
@@ -395,26 +395,32 @@ $darkGreen: #0AB88A;;
   z-index: 10;
 
   @include phone {
-    width: 100vw;
+    width: 100%;
     position: fixed;
     top: 0;
     left: 0;
-    right: 0;
+    right: 20px;
     bottom: 0;
     z-index: 15;
-    padding: 65px 0 0;
+    padding: 187px 0 0;
     border: 0;
     border-radius: 0;
-  }
+    background: rgba(#2A2A2A, 0.6);
 
-  .calendar-footer {
-    width: 100%;
+    @include down(320px) {
+      padding: 40px 0 0;
+    }
 
-    @include phone {
-      padding: 0 20px;
+    .calendar-footer {
+      margin: 0 20px;
+      padding: 20px 0;
     }
   }
 
+  .calendar-footer {
+    background: $tc-white;
+  }
+
   .calendar-button {
     @include roboto-bold;
 
@@ -439,20 +445,18 @@ $darkGreen: #0AB88A;;
   }
 }
 
-.endDate {
+@include tablet {
   .calendar-container,
   .calendar-inner-container {
-    left: 0;
+    right: 0;
   }
 
   :global {
     .rdrDateRangePickerWrapper {
-      @include tablet {
-        .calendar-container,
-        .calendar-inner-container {
-          right: auto;
-          left: 62px;
-        }
+      .calendar-container,
+      .calendar-inner-container {
+        right: 62px;
+        left: auto;
       }
     }
   }

src/components/Pagination/index.jsx

@@ -105,14 +105,14 @@ const Pagination = ({ length, pageIndex, pageSize, onChange }) => {
           onChange={onChangePageSize}
           size="xs"
         />
+        <span styleName="label">per page</span>
       </div>
       <ul styleName="pages">
         <li styleName={`page previous ${pageIndex === 0 ? "hidden" : ""}`}>
           <button onClick={previous}>
             <span styleName="arrow">
               <IconArrow />
-            </span>{" "}
-            PREVIOUS
+            </span>
           </button>
         </li>
         {displayPages.map((p) => (
@@ -132,7 +132,6 @@ const Pagination = ({ length, pageIndex, pageSize, onChange }) => {
           }`}
         >
           <button onClick={next}>
-            NEXT{" "}
             <span styleName="arrow">
               <IconArrow />
             </span>

src/components/Pagination/styles.scss

@@ -5,15 +5,60 @@
   display: flex;
   align-items: center;
   justify-content: center;
+
+  @include down(1024px) {
+    .per-page {
+      width: 60px;
+
+      :global {
+        .Select-arrow-zone {
+          padding: 0 8px !important;
+        }
+
+        .Select ~ img {
+          right: 8px;
+        }
+      }
+
+      .label {
+        display: none;
+      }
+    }
+
+    .pages {
+      margin: 0;
+
+      .page.previous > button,
+      .page.next > button {
+        width: 30px;
+        padding: 0;
+
+        &::before,
+        &::after {
+          content: '';
+        }
+      }
+    }
+  }
+
+  @include down($mfe-screen-xs) {
+    .pages {
+      flex: auto;
+      margin: 0;
+      justify-content: flex-end;
+    }
+  }
 }
 
 .per-page {
-  width: 128px;
+  display: flex;
+  align-items: center;
+  width: 144px;
 
-  :global {
-    .Select-value-label::after {
-      content: ' per page';
-    }
+  .label {
+    white-space: nowrap;
+    margin-left: 9px;
+    font-size: $font-size-sm;
   }
 }
 
@@ -65,18 +110,22 @@
   }
 
   &.previous {
+    > button::after {
+      content: 'PREVIOUS ';
+    }
+
     .arrow {
       transform: rotate(90deg) scale(0.75);
     }
   }
 
   &.next {
+    > button::before {
+      content: ' NEXT';
+    }
+
     .arrow {
       transform: rotate(-90deg) scale(0.75);
     }
   }
 }
-
-
-
-

src/components/Panel/styles.scss

@@ -7,6 +7,21 @@ $panel-padding-y: 16px;
 .panel {
   background: $white;
   border-radius: $border-radius-lg;
+
+  @include down($mfe-screen-xs) {
+    padding: 0;
+    border-radius: 0;
+
+    .panel-header,
+    .panel-footer {
+      padding: 10px 20px;
+      border-radius: 0;
+    }
+
+    .panel-body {
+      padding: 0;
+    }
+  }
 }
 
 .panel-header {

src/components/challenge-listing/ChallengeLoading/styles.module.scss

@@ -1,4 +1,5 @@
 @import "~styles/mixins";
+@import "~styles/variables";
 
 @keyframes placeholderAnim {
   0% {
@@ -81,4 +82,19 @@
     height: 42px;
     width: 40px;
   }
+
+  @include down($mfe-screen-sm) {
+    .title {
+      width: 50%;
+      max-width: 100px;
+    }
+    .info {
+      width: 100%;
+      max-width: 200px;
+    }
+  }
+
+  @include down($mfe-screen-xs) {
+    margin: 0;
+  }
 }

src/containers/Challenges/Listing/ChallengeItem/Prize/index.jsx

@@ -5,7 +5,7 @@ import * as utils from "../../../../../utils";
 import "./styles.scss";
 
 const Prize = ({ totalPrizes, currencySymbol }) => (
-  <div>
+  <div styleName="prize">
     <span styleName="text">Purse</span>
     <span styleName="value">
       {utils.formatMoneyValue(totalPrizes, currencySymbol)}

src/containers/Challenges/Listing/ChallengeItem/Prize/styles.scss

@@ -1,6 +1,20 @@
 @import "styles/variables";
 @import "styles/mixins";
 
+.prize {
+  @include down($mfe-screen-xs) {
+    display: inline-flex;
+    flex-direction: row-reverse;
+    align-items: center;
+
+    .value {
+      margin-right: 10px;
+      font-size: 21px;
+      line-height: 25px;
+    }
+  }
+}
+
 .text,
 .value {
   display: block;