UI adjustments

src/components/downloadCard.tsx

@@ -1,4 +1,4 @@
-import { mdiDownload } from "@mdi/js";
+import { mdiDownload, mdiFileDownloadOutline } from "@mdi/js";
 import Icon from "@mdi/react";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -42,8 +42,8 @@ export default function DownloadCard() {
 		return `${countryName(country)} (${country.featureCount})`;
 	}
 	return (
-		<div className="px-4 pt-5">
-			<div className="content has-text-weight-light">
+		<div className="px-3 pt-5">
+			<div className="content">
 				<p className="has-text-weight-normal">
 					<Icon
 						path={mdiDownload}
@@ -53,23 +53,25 @@ export default function DownloadCard() {
 					/>
 					{t("sidebar.download_title")}
 				</p>
-				<select
-					className="select mb-2"
-					onChange={(e) => {
-						const selected = sortedCountriesByName.find(
-							(country) => country.code === e.target.value,
-						);
-						if (selected !== undefined) setSelectedCountryCode(selected.code);
-					}}
-				>
-					{sortedCountriesByName.map((country) => (
-						<option key={country.code} value={country.code}>
-							{countryLabel(country)}
-						</option>
-					))}
-				</select>
+				<div className="select is-primary is-small mb-1">
+					<select
+						className="select mb-2"
+						onChange={(e) => {
+							const selected = sortedCountriesByName.find(
+								(country) => country.code === e.target.value,
+							);
+							if (selected !== undefined) setSelectedCountryCode(selected.code);
+						}}
+					>
+						{sortedCountriesByName.map((country) => (
+							<option key={country.code} value={country.code}>
+								{countryLabel(country)}
+							</option>
+						))}
+					</select>
+				</div>
 				<a
-					className="button is-success mr-1"
+					className="button is-success is-fullwidth is-small"
 					href={
 						selectedCountry ? backendBaseUrl + selectedCountry.dataPath : ""
 					}
@@ -78,10 +80,10 @@ export default function DownloadCard() {
 					download
 					key={t("sidebar.geojson")}
 				>
-					<Icon path={mdiDownload} size={1} className="icon mr-2" />
+					<Icon path={mdiFileDownloadOutline} size={1} className="icon mr-2" />
 					{t("sidebar.geojson")}
 				</a>
-				<hr className="my-3" />
+				<hr className="my-4" />
 			</div>
 		</div>
 	);

src/components/legend.tsx

@@ -50,15 +50,15 @@ export default function MapLegend() {
 		},
 	];
 	return (
-		<div className="px-3 pt-4 pb-5">
+		<div className="px-3 pb-5">
 			<div className="columns is-mobile is-flex is-vcentered p-3">
 				<Icon
 					path={mdiMapLegend}
-					size={1.3}
+					size={1}
 					className="icon mr-2"
 					color="#7a7a7a"
 				/>
-				<p className="legend-header has-text-weight-medium has-text-grey">
+				<p className="has-text-weight-normal">
 					{t("sidebar.map_legend_title")}
 				</p>
 			</div>
@@ -72,7 +72,7 @@ export default function MapLegend() {
 						title={tag}
 						alt={text}
 						src={icon.toString()}
-						className="legend-image image is-32x32"
+						className="legend-image image is-24x24"
 					/>
 					<p
 						key={`legend-text-${key}`}

src/components/sidebar.css

@@ -60,13 +60,11 @@
     white-space: pre-wrap;
 }
 
-.card-content
-{
+.card-content {
     overflow-y: auto;
 }
 
-.card-footer
-{
+.card-footer {
     flex: 1;
     max-width: 100%;
     overflow: auto;
@@ -104,9 +102,8 @@
     }
 }
 
-#sidebar-caption
-{
-    max-width: 78%; 
+#sidebar-caption {
+    max-width: 78%;
 }
 
 [class*=" icon"],
@@ -123,33 +120,28 @@
 }
 
 
-.legend-image
-{
+.legend-image {
     border-radius: 2px;
     box-shadow: 0 .5em 1em -0.125em rgba(182, 182, 182, 0.1), 0 0 0 1px rgba(121, 121, 121, 0.02);
 }
 
-.legend-text {
-    font-size: calc(100% - 1px);
-}
-
 .image-gallery-custom-icon {
-    color:#fff;
+    color: #fff;
     /* transition:all .3s ease-out; */
     /* appearance:none; */
-    background-color:transparent;
+    background-color: transparent;
     /* border:0; */
-    cursor:pointer;
+    cursor: pointer;
     /* outline:none; */
     position: absolute;
     left: 15px;
     bottom: 15px;
     /* padding: 4; */
-    z-index:4;
-    filter:drop-shadow(0 2px 2px #1a1a1a)
+    z-index: 4;
+    filter: drop-shadow(0 2px 2px #1a1a1a)
 }
 
 .image-gallery-content:not(.fullscreen) .image-gallery-slides img {
     max-height: 250px;
     object-fit: cover;
-}
+}

src/components/sidebar/buttons.tsx

@@ -88,7 +88,7 @@ export function CloseSidebarButton({
 		<button
 			id="sidebar-card-close-button"
 			aria-label={t("sidebar.close")}
-			className="delete is-large is-pulled-right"
+			className="delete is-medium is-pulled-right"
 			onClick={closeSidebarFunction}
 			type="button"
 		/>

src/components/sidebar/defibrillatorDetails.tsx

@@ -1,8 +1,8 @@
 import {
 	mdiAccountSupervisorOutline,
 	mdiClockOutline,
+	mdiFileImagePlusOutline,
 	mdiHomeRoof,
-	mdiImagePlus,
 	mdiInformationOutline,
 	mdiMapMarkerOutline,
 	mdiPhoneOutline,
@@ -97,7 +97,7 @@ const PhotoGallery: FC<DefibrillatorDetailsProps> = ({
 			<Button
 				mb={1}
 				mt={0}
-				className="button is-small is-success mx-1"
+				className="is-small is-success mx-1"
 				onClick={() => {
 					if (auth === null || !auth.authenticated()) {
 						closeSidebar();
@@ -110,7 +110,12 @@ const PhotoGallery: FC<DefibrillatorDetailsProps> = ({
 					setSidebarAction(SidebarAction.uploadPhoto);
 				}}
 			>
-				<Icon path={mdiImagePlus} size={1.15} className="icon" color="#fff" />
+				<Icon
+					path={mdiFileImagePlusOutline}
+					size={1}
+					className="icon"
+					color="#fff"
+				/>
 				<span>{t("photo.upload")}</span>
 			</Button>
 			<hr style={{ marginTop: "0.5rem", marginBottom: "1rem" }} />