💄 [open-formulieren/open-forms#2177] Leaflet styling

src/components/Map/index.jsx

@@ -1,7 +1,5 @@
 import * as Leaflet from 'leaflet';
-import 'leaflet-draw/dist/leaflet.draw.css';
 import {GeoSearchControl} from 'leaflet-geosearch';
-import 'leaflet/dist/leaflet.css';
 import PropTypes from 'prop-types';
 import {useContext, useEffect, useRef} from 'react';
 import {defineMessages, useIntl} from 'react-intl';
@@ -20,6 +18,7 @@ import {
 import {getBEMClassName} from 'utils';
 
 import NearestAddress from './NearestAddress';
+import './map.scss';
 import OpenFormsProvider from './provider';
 
 const searchControlMessages = defineMessages({

src/components/Map/map.scss

@@ -0,0 +1,16 @@
+@import 'leaflet/dist/leaflet.css';
+@import 'leaflet-draw/dist/leaflet.draw.css';
+
+.leaflet-container .leaflet-draw-actions {
+  // Make sure all action bars are the same height
+  a,
+  &.leaflet-draw-actions-top a,
+  &.leaflet-draw-actions-bottom a {
+    height: 30px;
+    line-height: 30px;
+  }
+
+  a {
+    color: #fff;
+  }
+}