Navbar, card, other UI adjustments

src/components/downloadCard.tsx

@@ -53,7 +53,7 @@ export default function DownloadCard() {
 					/>
 					{t("sidebar.download_title")}
 				</p>
-				<div className="select is-primary is-small mb-1">
+				<div className="select is-fullwidth is-success is-small mb-1">
 					<select
 						className="select mb-2"
 						onChange={(e) => {
@@ -63,11 +63,13 @@ export default function DownloadCard() {
 							if (selected !== undefined) setSelectedCountryCode(selected.code);
 						}}
 					>
-						{sortedCountriesByName.map((country) => (
-							<option key={country.code} value={country.code}>
-								{countryLabel(country)}
-							</option>
-						))}
+						{sortedCountriesByName
+							.filter((country) => country.featureCount > 0)
+							.map((country) => (
+								<option key={country.code} value={country.code}>
+									{countryLabel(country)}
+								</option>
+							))}
 					</select>
 				</div>
 				<a

src/components/languageSwitcher.tsx

@@ -1,3 +1,5 @@
+import { mdiTranslate } from "@mdi/js";
+import Icon from "@mdi/react";
 import i18n from "i18next";
 import React, { useEffect } from "react";
 import { Navbar } from "react-bulma-components";
@@ -12,20 +14,31 @@ export default function LanguageSwitcher() {
 	}, [t]);
 	return (
 		<Navbar.Item px={1}>
-			<div className="select">
-				<select
-					id="language-switcher"
-					value={language}
-					onChange={(e) => {
-						i18n.changeLanguage(e.target.value);
-					}}
-				>
-					{Object.keys(languages).map((language) => (
-						<option key={language} value={language}>
-							{languages[language].nativeName}
-						</option>
-					))}
-				</select>
+			<div className="control has-icons-left">
+				<div className="select is-white">
+					<select
+						className="has-background-green has-text-white-bis"
+						id="language-switcher"
+						value={language}
+						onChange={(e) => {
+							i18n.changeLanguage(e.target.value);
+						}}
+					>
+						{Object.keys(languages).map((language) => (
+							<option key={language} value={language}>
+								{languages[language].nativeName}
+							</option>
+						))}
+					</select>
+				</div>
+				<span className="icon is-small is-left is-flex is-justify-content-center mt-3">
+					<Icon
+						path={mdiTranslate}
+						size={0.8}
+						className="icon"
+						color="#ffffff"
+					/>
+				</span>
 			</div>
 		</Navbar.Item>
 	);

src/components/logInButton.tsx

@@ -1,4 +1,4 @@
-import { mdiAccount, mdiLogoutVariant } from "@mdi/js";
+import { mdiAccount, mdiLoginVariant, mdiLogoutVariant } from "@mdi/js";
 import Icon from "@mdi/react";
 import React, { FC } from "react";
 import { Button, Navbar } from "react-bulma-components";
@@ -19,27 +19,29 @@ const LogInButton: FC<LogInButtonProps> = ({ inNavBar }) => {
 
 	if (auth?.authenticated()) {
 		return (
-			<Navbar.Item className="has-text-white" hoverable>
+			<Navbar.Item className="has-text-white is-fullwidth" hoverable>
 				<Navbar.Item>
 					<Icon className="icon mr-2" path={mdiAccount} size={1.0} />
 					{osmUsername}
 				</Navbar.Item>
-				<Navbar.Dropdown className="has-background-green">
+				<Navbar.Dropdown className="has-background-green is-fullwidth">
 					<Navbar.Item onClick={handleLogOut}>
-						<Icon path={mdiLogoutVariant} size={1.3} className="icon mr-2" />
+						<Icon path={mdiLogoutVariant} size={1.0} className="icon mr-2" />
 						{t("navbar.logout")}
 					</Navbar.Item>
 				</Navbar.Dropdown>
 			</Navbar.Item>
 		);
 	}
 	return (
-		<Navbar.Item renderAs="div" p={1}>
+		<Navbar.Item renderAs="div" className="py-0" px={1}>
 			<Button
+				className="is-fullwidth"
 				color={inNavBar ? "white" : undefined}
 				outlined
 				onClick={handleLogIn}
 			>
+				<Icon path={mdiLoginVariant} size={1.0} className="icon mr-2" />
 				{t("navbar.login")}
 			</Button>
 		</Navbar.Item>

src/components/map.css

@@ -1,7 +1,7 @@
 .map-wrap {
     position: absolute;
     width: 100%;
-    height: calc(100% - 60px);
+    height: calc(100% - 56px);
     /* calculate height of the screen minus the heading */
 }
 
@@ -29,7 +29,6 @@
     filter: contrast(80%);
 }
 
-.maplibregl-ctrl-group:not(:empty)
-{
-    box-shadow: 0 .5em 1em -.125em rgba(10,10,10,.1),0 0 0 1px rgba(10,10,10,.02)
+.maplibregl-ctrl-group:not(:empty) {
+    box-shadow: 0 .5em 1em -.125em rgba(10, 10, 10, .1), 0 0 0 1px rgba(10, 10, 10, .02)
 }

src/components/modal.tsx

@@ -1,4 +1,4 @@
-import { mdiGithub, mdiInformationOutline } from "@mdi/js";
+import { mdiGithub, mdiInformationOutline, mdiTranslate } from "@mdi/js";
 import Icon from "@mdi/react";
 import React, { FC } from "react";
 import { Button, Modal } from "react-bulma-components";
@@ -13,7 +13,6 @@ const ModalContent: FC = () => {
 	const {
 		modalState: { type, currentZoom, errorMessage, nodeId },
 	} = useAppContext();
-	const helpTranslationText = `🖋 ${t("navbar.help_translating")}`;
 
 	switch (type) {
 		case ModalType.NodeAddedSuccessfully: {
@@ -80,7 +79,8 @@ const ModalContent: FC = () => {
 							rel="noreferrer"
 							href="https://github.com/openstreetmap-polska/openaedmap-frontend#translating"
 						>
-							{helpTranslationText}
+							<Icon path={mdiTranslate} size={1.2} className="icon mr-2" />
+							{t("navbar.help_translating")}
 						</Button>
 						<Button
 							mr={2}
@@ -89,7 +89,7 @@ const ModalContent: FC = () => {
 							rel="noreferrer"
 							href="https://github.com/openstreetmap-polska/openaedmap-frontend"
 						>
-							<Icon path={mdiGithub} size="2rem" />
+							<Icon path={mdiGithub} size={1.2} className="icon mr-2" />
 							<span>{t("navbar.visit_github")}</span>
 						</Button>
 					</p>

src/components/navbar.css

@@ -15,9 +15,16 @@
 .navbarUrl {
     color: #effaf5 !important;
 }
+
 .navbarLogo {
     width: 35px;
     height: 35px;
     fill: #effaf5 !important;
-    filter: drop-shadow(2px 2px 2px #026841e0);
+    filter: drop-shadow(2px 2px 2px #18855b);
+}
+
+.navbar .is-outlined.button.button,
+#language-switcher {
+    border-color: #f5f5f5b0;
+    filter: drop-shadow(2px 2px 2px #18855b);
 }

src/components/navbar.tsx

@@ -1,4 +1,4 @@
-import { mdiMapLegend } from "@mdi/js";
+import { mdiInformationOutline, mdiMapLegend } from "@mdi/js";
 import Icon from "@mdi/react";
 import React, { FC } from "react";
 import { Button, Navbar } from "react-bulma-components";
@@ -19,7 +19,7 @@ const SiteNavbar: FC<SiteNavbarProps> = ({ toggleSidebarShown }) => {
 	return (
 		<Navbar color="success" className="has-background-green">
 			<Navbar.Brand>
-				<Navbar.Item renderAs="a" href="/" pr={1} pl={1}>
+				<Navbar.Item renderAs="a" href="/" pr={1} pl={2}>
 					<svg
 						className="navbarLogo"
 						viewBox="0 0 60 60"
@@ -29,7 +29,7 @@ const SiteNavbar: FC<SiteNavbarProps> = ({ toggleSidebarShown }) => {
 						{/* TODO: extract svg logo */}
 						<path d="M16.283 18.614c-6.594.058-12.469 6.32-10.7 14.606 1.35 6.317 8.359 14.53 20.587 22.493C38.4 47.75 45.41 39.537 46.758 33.22c1.77-8.286-4.106-14.548-10.7-14.606-3.39-.05-7.628 1.67-9.888 5.822-2.259-4.153-6.498-5.872-9.887-5.822zm4.996 2.292a9.981 9.981 0 013.966 3.995l.531.975-2.532 11.319 9.556-6.637-4.21 18.274h2.477l-4.956 5.287-2.956-6.61 2.478.835 1.374-10.172-7.972 5.516 2.244-22.782zM49.08 3.165v5.23h-5.434v5.228h5.435v5.23h5.434v-5.23h5.435V8.394h-5.435V3.165z" />
 					</svg>
-					<span className="has-text-weight-light has-text-white-ter is-size-4 is-size-5-mobile p-1">
+					<span className="has-text-weight-light has-text-white-ter is-size-4 is-size-5-mobile px-1">
 						Open
 						<span className="has-text-weight-semibold">AED</span>
 						Map
@@ -63,7 +63,9 @@ const SiteNavbar: FC<SiteNavbarProps> = ({ toggleSidebarShown }) => {
 						<img alt="CloudFerro" src="/img/cloudferro_logo.png" />
 					</a>
 				</Navbar.Item>
-				<LanguageSwitcher />
+				<div className="is-hidden-desktop">
+					<LanguageSwitcher />
+				</div>
 				<Navbar.Burger
 					id="navbarBurger"
 					onClick={() => {
@@ -84,9 +86,13 @@ const SiteNavbar: FC<SiteNavbarProps> = ({ toggleSidebarShown }) => {
 				id="navbarMenu"
 			>
 				<Navbar.Container align="right">
+					<div className="is-hidden-touch py-0">
+						<LanguageSwitcher />
+					</div>
 					<LogInButton inNavBar />
-					<Navbar.Item renderAs="div" p={1}>
+					<Navbar.Item renderAs="div" className="py-0" px={1}>
 						<Button
+							className="is-fullwidth"
 							color="white"
 							outlined
 							onClick={() =>
@@ -97,30 +103,42 @@ const SiteNavbar: FC<SiteNavbarProps> = ({ toggleSidebarShown }) => {
 								})
 							}
 						>
+							<Icon
+								path={mdiInformationOutline}
+								size={1}
+								className="icon mr-2"
+							/>
 							{t("navbar.about")}
 						</Button>
 					</Navbar.Item>
-					<Navbar.Item renderAs="div" p={1}>
-						<Button onClick={() => toggleSidebarShown()} color="white" outlined>
+					<Navbar.Item renderAs="div" className="py-0" px={1}>
+						<Button
+							className="is-fullwidth"
+							onClick={() => toggleSidebarShown()}
+							color="white"
+							outlined
+						>
 							<Icon path={mdiMapLegend} size="2rem" />
 						</Button>
 					</Navbar.Item>
-					<Navbar.Item p={1} renderAs="div">
+					<Navbar.Item
+						px={1}
+						renderAs="div"
+						className="pt-1 pb-1 has-text-centered"
+					>
 						<ReactStoreBadges
 							platform="android"
 							url="https://play.google.com/store/apps/details?id=pl.enteam.aed_map"
 							language={language}
 						/>
-					</Navbar.Item>
-					<Navbar.Item p={1} renderAs="div">
 						<ReactStoreBadges
 							platform="ios"
 							url="https://apps.apple.com/app/mapa-aed/id1638495701"
 							language={language}
 						/>
 					</Navbar.Item>
 					<Navbar.Item
-						className="is-hidden-desktop"
+						className="is-hidden-desktop has-text-centered"
 						textColor="white"
 						renderAs="div"
 						pl={0}
@@ -141,7 +159,7 @@ const SiteNavbar: FC<SiteNavbarProps> = ({ toggleSidebarShown }) => {
 						</span>
 					</Navbar.Item>
 					<Navbar.Item
-						className="is-hidden-desktop"
+						className="is-hidden-desktop has-text-centered"
 						textColor="white"
 						renderAs="div"
 						pl={0}

src/components/partnersModal.tsx

@@ -93,8 +93,8 @@ const PartnersModal: FC = () => {
 					))}
 				</div>
 			</section>
-			<footer className="modal-card-foot p-2">
-				<div className="notification is-info is-light">
+			<footer className="modal-card-foot py-4 has-text-centered">
+				<p className="block py-3">
 					{t("modal.become_openaedmap_partner")}
 					&nbsp;
 					<a
@@ -104,7 +104,7 @@ const PartnersModal: FC = () => {
 						{t("modal.contact_us")}
 					</a>
 					.
-				</div>
+				</p>
 			</footer>
 		</>
 	);

src/components/sidebar-left.tsx

@@ -19,8 +19,6 @@ const SidebarLeft: FC<SidebarLeftProps> = (props) => {
 		setOpenChangesetId,
 	} = props;
 
-	console.log("Opening left sidebar with action: ", action, " and data:", data);
-
 	if (!visible) return null;
 
 	switch (action) {

src/components/sidebar/defibrillatorDetails.tsx

@@ -98,7 +98,9 @@ const PhotoGallery: FC<DefibrillatorDetailsProps> = ({
 			<Button
 				mb={1}
 				mt={0}
-				className="is-small is-success mx-1"
+				mx={1}
+				p={4}
+				className="is-normal is-fullwidth has-text-success-dark"
 				onClick={() => {
 					if (auth === null || !auth.authenticated()) {
 						closeSidebar();
@@ -115,7 +117,7 @@ const PhotoGallery: FC<DefibrillatorDetailsProps> = ({
 					path={mdiFileImagePlusOutline}
 					size={1}
 					className="icon"
-					color="#fff"
+					color="#028955"
 				/>
 				<span>{t("photo.upload")}</span>
 			</Button>

src/index.css

@@ -1,6 +1,8 @@
 html {
-  overflow-y: hidden !important; /* Hide vertical scrollbar */
-  overflow-x: hidden !important; /* Hide horizontal scrollbar */
+  overflow-y: hidden !important;
+  /* Hide vertical scrollbar */
+  overflow-x: hidden !important;
+  /* Hide horizontal scrollbar */
 }
 
 body {
@@ -59,22 +61,21 @@ code {
   background-color: #7a7a7a !important;
 }
 
-.navbar-item a:hover
-{
+.navbar-item a:hover {
   color: #000000 !important;
 }
 
-.column
-{
+.column {
   border-radius: 4px;
 }
 
-a.navbar-item:focus-within, a.navbar-item:hover {
+a.navbar-item:focus-within,
+a.navbar-item:hover {
   background-color: #028955 !important;
 }
 
 #language-switcher {
-  max-width: 120px;
+  max-width: 130px;
 }
 
 .maplibregl-ctrl-geocoder {
@@ -84,4 +85,8 @@ a.navbar-item:focus-within, a.navbar-item:hover {
 .partner-row {
   flex-wrap: wrap;
   align-items: center !important;
+}
+
+.modal-card {
+  min-width: 30%;
 }