fix(MapLayerLegend): Refactoring created confusion

technologiestiftung · Mar 25, 2021 · 38cc5a4 · 38cc5a4
1 parent dc4b205
commit 38cc5a4
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 11 deletions.
diff --git a/src/components/Legend/MapLayersLegend.tsx b/src/components/Legend/MapLayersLegend.tsx
@@ -91,7 +91,7 @@ const MapLayerLegend: FC = () => {
   return (
     <LegendDiv isActive>
       <FlexSpace isActive>
-        <FlexColumn>
+        <FlexColumnLast>
           <StyledCardDescription onClick={() => setLegendExpanded(false)}>
             {visibleMapLayer === 'pumps'
               ? 'Öffentliche Pumpen'
@@ -102,7 +102,7 @@ const MapLayerLegend: FC = () => {
               der letzten 30 Tage (Liter)
             </StyledCardDescriptionSecond>
           )}
-        </FlexColumn>
+        </FlexColumnLast>
         <LegendToggle onClick={() => setLegendExpanded(false)}>—</LegendToggle>
       </FlexSpace>
       {visibleMapLayer !== 'pumps' && (

diff --git a/src/components/Legend/PumpsColorLegend.tsx b/src/components/Legend/PumpsColorLegend.tsx
@@ -1,33 +1,38 @@
 import React from 'react';
+import styled from 'styled-components';
 import {
   workingColor,
   defaultColor,
   brokenColor,
   lockedColor,
 } from '../map/colors';
-import { FlexRow, FlexColumnLast } from './LegendFlexBoxes';
+import { FlexRow, FlexColumn } from './LegendFlexBoxes';
 import { PumpLabel } from './LegendLabels';
 import { PumpsDot } from './LegendRectsDots';
+
+const FlexRowDots = styled(FlexColumn)`
+  flex-direction: row;
+`;
 export const PumpsColorLegend: React.FC = () => {
   return (
     <FlexRow>
-      <FlexColumnLast>
+      <FlexRowDots>
         <PumpsDot color={workingColor.hex} size={13} />
         <PumpLabel>funktionsfähig</PumpLabel>
-      </FlexColumnLast>
-      <FlexColumnLast>
+      </FlexRowDots>
+      <FlexRowDots>
         <PumpsDot color={brokenColor.hex} size={13} />
         <PumpLabel>defekt</PumpLabel>
-      </FlexColumnLast>
+      </FlexRowDots>
 
-      <FlexColumnLast>
+      <FlexRowDots>
         <PumpsDot color={lockedColor.hex} size={13} />
         <PumpLabel>verriegelt</PumpLabel>
-      </FlexColumnLast>
-      <FlexColumnLast>
+      </FlexRowDots>
+      <FlexRowDots>
         <PumpsDot color={defaultColor.hex} size={13} />
         <PumpLabel>unbekannt</PumpLabel>
-      </FlexColumnLast>
+      </FlexRowDots>
     </FlexRow>
   );
 };