cleanup css

caktus · Aug 4, 2023 · 1c9c283 · 1c9c283
1 parent 826b14b
commit 1c9c283
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 12 deletions.
diff --git a/frontend/src/Components/Charts/TrafficStops/TrafficStops.js b/frontend/src/Components/Charts/TrafficStops/TrafficStops.js
@@ -4,6 +4,7 @@ import TrafficStopsStyled, {
   LineWrapper,
   PieWrapper,
   StopGroupsContainer,
+  SwitchContainer,
 } from './TrafficStops.styled';
 import * as S from '../ChartSections/ChartsCommon.styled';
 import { useTheme } from 'styled-components';
@@ -721,19 +722,10 @@ function TrafficStops(props) {
             options={groupedStopPurposeModalData.purposeTypes}
           />
         </NewModal>
-        <div
-          style={{
-            display: 'flex',
-            flexDirection: 'row',
-            gap: '10px',
-            marginTop: '10px',
-            marginBottom: '10px',
-            alignItems: 'center',
-          }}
-        >
+        <SwitchContainer>
           <span>Switch to {checked ? 'line' : 'pie'} charts</span>
           <Switch onChange={handleChange} checked={checked} className="react-switch" />
-        </div>
+        </SwitchContainer>
         <LineWrapper visible={checked === false}>
           <GroupedStopsContainer visible={visibleStopsGroupedByPurpose[0].visible}>
             <LineChart
@@ -812,7 +804,7 @@ function TrafficStops(props) {
 
         <div style={{ marginTop: '2em' }}>
           <P weight={WEIGHTS[1]}>Toggle graphs:</P>
-          <div style={{ display: 'flex', gap: '10px', flexDirection: 'row' }}>
+          <div style={{ display: 'flex', gap: '10px', flexDirection: 'row', flexWrap: 'wrap' }}>
             {visibleStopsGroupedByPurpose.map((vg, i) => (
               <Checkbox
                 height={25}

diff --git a/frontend/src/Components/Charts/TrafficStops/TrafficStops.styled.js b/frontend/src/Components/Charts/TrafficStops/TrafficStops.styled.js
@@ -22,6 +22,7 @@ export const PieWrapper = styled.div`
   flex-direction: row;
   flex-wrap: wrap;
   gap: 10px;
+  justify-content: space-evenly;
 `;
 
 export const StopGroupsContainer = styled.div`
@@ -37,3 +38,12 @@ export const GroupedStopsContainer = styled.div`
   }
   display: ${(props) => (props.visible ? 'block' : 'none')};
 `;
+
+export const SwitchContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  align-items: center;
+`;