Remove invasive, tighten up layout

Also, use em for layout units (1em = 14px here)

public/locales/en.json

@@ -7,7 +7,6 @@
   "poi": "Points of interest",
   "settings": "Settings",
   "type": "Type",
-  "invasives": "Invasive species only",
   "select_all": "Select all",
   "deselect_all": "Deselect all",
   "only_on_map": "On the map",

public/locales/fr.json

@@ -7,7 +7,6 @@
   "poi": "Points d'intérêt",
   "settings": "Paramètres",
   "type": "Type",
-  "invasives": "Espèces envahissantes seulement",
   "select_all": "Sélectionner tous",
   "deselect_all": "Désélectionner tous",
   "only_on_map": "Sur la carte",

src/components/desktop/FilterWrapper.js

@@ -15,8 +15,10 @@ const StyledFilter = styled.div`
     flex: 1;
   }
   background-color: ${({ theme }) => theme.background};
-  padding: 0 10px 8px 10px;
-  margin-top: 3px;
+  padding-left: 0.75em;
+  padding-right: 0.75em;
+  padding-top: 0;
+  padding-bottom: 0;
   height: 100%;
   display: flex;
   flex-direction: column;

src/components/desktop/MainSidePane.js

@@ -10,8 +10,14 @@ import Button from '../ui/Button'
 import FilterWrapper from './FilterWrapper'
 
 const AddLocationButton = styled(Button)`
-  margin: 10px 10px;
-  padding: 15px 0;
+  margin-left: 0.75em;
+  margin-right: 0.75em;
+  margin-top: 0;
+  margin-bottom: 1em;
+  padding-top: 1em;
+  padding-bottom: 1em;
+  padding-left: 0;
+  padding-right: 0;
   opacity: ${({ greyedOut }) => (greyedOut ? '0.5' : '1')};
   cursor: ${({ greyedOut }) => (greyedOut ? 'help' : 'pointer')};
 `

src/components/filter/Filter.js

@@ -4,11 +4,7 @@ import { useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
 import styled from 'styled-components/macro'
 
-import {
-  invasiveChanged,
-  muniChanged,
-  selectionChanged,
-} from '../../redux/viewChange'
+import { muniChanged, selectionChanged } from '../../redux/viewChange'
 import buildSelectTree from '../../utils/buildSelectTree'
 import Input from '../ui/Input'
 import FilterButtons from './FilterButtons'
@@ -20,33 +16,35 @@ const EdibleTypeText = styled.p`
   font-size: 0.875rem;
   font-weight: bold;
   color: ${({ theme }) => theme.secondaryText};
-  margin-top: 18px;
-  margin-bottom: 7px;
+  margin-top: 1.5em;
+  margin-bottom: 0.5em;
+  @media ${({ theme }) => theme.device.mobile} {
+    margin-top: 0em;
+  }
 `
 
 const TreeFiltersContainer = styled.div`
-  margin: 8px 0;
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
   /* Provide vertical space when buttons wrap over multiple lines */
   line-height: 1.5rem;
 `
 
 const SearchInput = styled(Input)`
-  height: 36px;
-  padding: 9px 12px;
+  height: 2.5em;
+  padding: 0;
+  flex: 0;
   input {
+    margin-top: 1em;
+    margin-left: 0.75em;
+    margin-bottom: 1em;
+    margin-right: 0.75em;
     height: 100%;
   }
 `
-
-const MuniAndInvasiveCheckboxFilters = styled.div`
-  label:not(:last-child) {
-    margin-bottom: 8px;
-  }
-  label:first-child {
-    @media ${({ theme }) => theme.device.mobile} {
-      margin-top: 15px;
-    }
-  }
+const MuniCheckbox = styled.div`
+  margin-top: 1em;
+  margin-bottom: 1em;
 `
 
 const Filter = () => {
@@ -58,9 +56,7 @@ const Filter = () => {
   )
 
   const dispatch = useDispatch()
-  const { countsById, types, muni, invasive } = useSelector(
-    (state) => state.filter,
-  )
+  const { countsById, types, muni } = useSelector((state) => state.filter)
 
   const { typesAccess } = useSelector((state) => state.type)
   const { tree: selectTree, visibleTypeIds } = useMemo(
@@ -117,20 +113,15 @@ const Filter = () => {
           />
         )}
       </div>
-      <MuniAndInvasiveCheckboxFilters>
+
+      <MuniCheckbox>
         <LabeledCheckbox
           field="muni"
           value={muni}
           label={t('glossary.tree_inventory', { count: 2 })}
           onChange={(checked) => dispatch(muniChanged(checked))}
         />
-        <LabeledCheckbox
-          field="invasive"
-          value={invasive}
-          label={t('invasives')}
-          onChange={(checked) => dispatch(invasiveChanged(checked))}
-        />
-      </MuniAndInvasiveCheckboxFilters>
+      </MuniCheckbox>
     </>
   )
 }

src/components/filter/FilterIconButton.js

@@ -4,7 +4,7 @@ import { useSelector } from 'react-redux'
 import IconButton from '../ui/IconButton'
 
 const FilterIconButton = (props) => {
-  const { types, muni, invasive } = useSelector((state) => state.filter)
+  const { types, muni } = useSelector((state) => state.filter)
 
   const { typesAccess } = useSelector((state) => state.type)
 
@@ -21,8 +21,7 @@ const FilterIconButton = (props) => {
   const isDefaultChoice =
     defaultSelectionSet.size === currentSelectionSet.size &&
     [...defaultSelectionSet].every((id) => currentSelectionSet.has(id)) &&
-    muni === true &&
-    invasive === false
+    muni === true
 
   return (
     <IconButton

src/components/filter/RCTreeSelectSkeleton.js

@@ -9,7 +9,7 @@ const TreeSelectContainer = styled.div`
   box-sizing: border-box;
 
   overflow: hidden;
-  margin-bottom: 12px;
+  margin 0;
   @media ${({ theme }) => theme.device.mobile} {
     height: 50vh;
   }

src/components/filter/TreeSelectView.js

@@ -9,7 +9,7 @@ const ControlsContainer = styled.div`
 `
 
 const TreeSelectContainer = styled.ul`
-  margin-top: 0;
+  margin: 0;
   padding: 0;
   flex: 1 1 0;
   overflow-y: auto;

src/redux/filterSlice.js

@@ -12,15 +12,14 @@ export const fetchFilterCounts = createAsyncThunk(
     const { lastMapView } = state.viewport
     const isOpen = state.filter.isOpenInMobileLayout || state.misc.isDesktop
     if (isOpen && lastMapView) {
-      const { muni, invasive } = state.filter
+      const { muni } = state.filter
       const { bounds, zoom, center: _ } = lastMapView
       const counts = await getTypeCounts(
         // Match zoom level used in getClusters
         // Wojtek: not sure why?
         selectParams({
           types: undefined,
           muni,
-          invasive,
           bounds,
           zoom: zoom + 1,
           center: undefined,
@@ -44,7 +43,6 @@ export const filterSlice = createSlice({
     types: null,
     muni: true,
     isOpenInMobileLayout: false,
-    invasive: false,
     isLoading: false,
     countsById: {},
   },

src/redux/listSlice.js

@@ -9,11 +9,11 @@ const fetchListLocations = createAsyncThunk(
   'list/fetchListLocations',
   async ({ offset, fetchCount }, { getState }) => {
     const state = getState()
-    const { types, muni, invasive } = state.filter
+    const { types, muni } = state.filter
     const { lastMapView } = state.viewport
     const { bounds, zoom, center } = lastMapView
     const params = selectParams(
-      { types, muni, invasive, bounds, zoom, center },
+      { types, muni, bounds, zoom, center },
       { limit: 100, offset, photo: true },
     )
     return {

src/redux/mapSlice.js

@@ -12,13 +12,13 @@ export const fetchMapLocations = createAsyncThunk(
   'map/fetchMapLocations',
   async (_, { getState }) => {
     const state = getState()
-    const { types, muni, invasive } = state.filter
+    const { types, muni } = state.filter
     const { lastMapView } = state.viewport
     if (lastMapView) {
       const { bounds, zoom, center: _ } = lastMapView
       return await getLocations(
         selectParams(
-          { types, muni, invasive, bounds, zoom, center: undefined },
+          { types, muni, bounds, zoom, center: undefined },
           { limit: 250 },
         ),
       )
@@ -32,15 +32,14 @@ export const fetchMapClusters = createAsyncThunk(
   'map/fetchMapClusters',
   async (_, { getState }) => {
     const state = getState()
-    const { types, muni, invasive } = state.filter
+    const { types, muni } = state.filter
     const { lastMapView } = state.viewport
     if (lastMapView) {
       const { bounds, zoom, center: _ } = lastMapView
       return await getClusters(
         selectParams({
           types,
           muni,
-          invasive,
           bounds,
           zoom: zoom + 1,
           center: undefined,

src/redux/selectParams.js

@@ -25,12 +25,11 @@ const convertCenter = (center) => ({
 })
 
 export const selectParams = (
-  { types, muni, invasive, bounds, zoom, center },
+  { types, muni, bounds, zoom, center },
   extraParams = {},
 ) => ({
   types: types && types.join(','),
   muni,
-  invasive,
   zoom,
   ...convertBounds(bounds),
   ...(center && convertCenter(center)), //If provided, the API will sort the locations returned by distance from center

src/redux/viewChange.js

@@ -21,12 +21,6 @@ export const fetchLocations = () => (dispatch, getState) => {
   }
 }
 
-export const invasiveChanged = (checked) => (dispatch) => {
-  dispatch(updateSelection({ invasive: checked }))
-  dispatch(fetchFilterCounts())
-  dispatch(fetchLocations())
-}
-
 export const muniChanged = (checked) => (dispatch) => {
   dispatch(updateSelection({ muni: checked }))
   dispatch(fetchFilterCounts())