Merge pull request #102 from Goldenrash-lab/bux-fixes/statistics

fixed mob/ tablet sizes and arrow direction
Goldenrash-lab · Jan 15, 2024 · b8ef319 · b8ef319
2 parents d79be0b + 535e8b6
commit b8ef319
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 2 deletions.
diff --git a/src/components/Chart/Chart.styled.js b/src/components/Chart/Chart.styled.js
@@ -15,14 +15,15 @@ export const StyledTitle = styled.h2`
   line-height: normal;
 
   @media only screen and (min-width: 768px) and (max-width: 1279px) {
-    margin-left: 32px;
+    margin: 10px 0 20px 32px;
     width: 336px;
   }
 
   @media only screen and (min-width: 320px) and (max-width: 767px) {
     width: 280px;
     margin: 0 auto;
     margin-top: 0px;
+    padding: 8px;
   }
 `;
 
@@ -45,6 +46,10 @@ export const StyledContainer = styled.div`
 
 export const StyledStatsInfo = styled.div`
   flex-direction: column;
+
+  @media only screen and (min-width: 768px) and (max-width: 1279px) {
+    margin-top: -45px;
+  }
 `;
 
 export const StyledChartContainer = styled.div`

diff --git a/src/components/StatisticsDashboard/StatisticsDashboard.jsx b/src/components/StatisticsDashboard/StatisticsDashboard.jsx
@@ -75,7 +75,20 @@ export const StatisticsDashboard = ({
         background: ' var(--transparency-20)',
       },
     }),
+    dropdownIndicator: styles => ({
+      ...styles,
+      transform: 'rotate(180deg)',
+    }),
+  };
+
+  const customStylesSecondSelect = {
+    ...customStyles,
+    dropdownIndicator: styles => ({
+      ...styles,
+      transform: 'rotate(0deg)',
+    }),
   };
+
   return (
     <StyledContainer>
       <Select
@@ -96,7 +109,7 @@ export const StatisticsDashboard = ({
         value={yearOptions.find(option => option.value === selectedYear)}
         onChange={handleYearChange}
         options={yearOptions}
-        styles={customStyles}
+        styles={customStylesSecondSelect}
         isSearchable={false}
         components={{
           IndicatorSeparator: () => null,