diff --git a/CHANGELOG b/CHANGELOG
index c1deae1cb18d929d497824e6257a356c09d7de6d..d31f060384d0d4f3c54960e6055cc8bdc02706ea 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -9,6 +9,7 @@ minerva-front (19.0.0~alpha.0) stable; urgency=medium
* Small improvement: reaction element annotations use the same styling as
elements (#187)
* Small improvement: styling of annotation links improved (#186)
+ * Small improvement: styling of submap links improved (#184)
-- Piotr Gawron <piotr.gawron@uni.lu> Fri, 18 Oct 2024 13:00:00 +0200
diff --git a/src/components/Map/Drawer/SubmapsDrawer/SubmapItem/DownloadSubmap/DownloadSubmap.component.tsx b/src/components/Map/Drawer/SubmapsDrawer/SubmapItem/DownloadSubmap/DownloadSubmap.component.tsx
index 316528128b6a0dec97b0fd16761961f47b2ed60e..a498e16e65f575441b73fbc0dd0181160dd1f03f 100644
--- a/src/components/Map/Drawer/SubmapsDrawer/SubmapItem/DownloadSubmap/DownloadSubmap.component.tsx
+++ b/src/components/Map/Drawer/SubmapsDrawer/SubmapItem/DownloadSubmap/DownloadSubmap.component.tsx
@@ -6,6 +6,7 @@ import Image from 'next/image';
import spinnerIcon from '@/assets/vectors/icons/spinner.svg';
import { useState } from 'react';
import { downloadFileFromUrl } from '@/redux/export/export.utils';
+import { Icon } from '@/shared/Icon';
import { SUBMAP_DOWNLOAD_HANDLERS_NAMES } from './DownloadSubmap.constants';
import { useGetSubmapDownloadUrl } from './utils/useGetSubmapDownloadUrl';
@@ -34,9 +35,11 @@ export const DownloadSubmap = (): React.ReactNode => {
<div className="relative">
<Button
data-testid="download-submap-button"
- variantStyles="ghost"
- className="mr-4"
+ variantStyles="quiet"
+ className="mr-4 p-0"
{...getToggleButtonProps()}
+ title="Download"
+ disabled={isDownloading}
>
{isDownloading && (
<Image
@@ -47,11 +50,11 @@ export const DownloadSubmap = (): React.ReactNode => {
className="mr-5 animate-spin"
/>
)}
- Download
+ {!isDownloading && <Icon name="download" className="h-6 w-6 fill-font-500" />}
</Button>
<ul
data-testid="download-submap-list"
- className={`absolute left-[-50%] z-10 max-h-80 w-48 overflow-scroll rounded-sm border bg-white p-0 ps-0 ${
+ className={`absolute right-[-50%] z-10 max-h-80 w-48 overflow-scroll rounded-sm border bg-white p-0 ps-0 ${
!isOpen && 'hidden'
}`}
{...getMenuProps()}
diff --git a/src/components/Map/Drawer/SubmapsDrawer/SubmapItem/SubmapItem.component.tsx b/src/components/Map/Drawer/SubmapsDrawer/SubmapItem/SubmapItem.component.tsx
index a7a38dfae9cb989d98e2bbb2e8be273f4b8cf0aa..d4b355ef7a1d21c43be352724906bc92e54ba664 100644
--- a/src/components/Map/Drawer/SubmapsDrawer/SubmapItem/SubmapItem.component.tsx
+++ b/src/components/Map/Drawer/SubmapsDrawer/SubmapItem/SubmapItem.component.tsx
@@ -1,4 +1,4 @@
-import { IconButton } from '@/shared/IconButton';
+import { Button } from '@/shared/Button';
import { DownloadSubmap } from './DownloadSubmap';
interface SubmapItemProps {
@@ -6,18 +6,19 @@ interface SubmapItemProps {
onOpenClick: () => void;
}
-export const SubmpamItem = ({ modelName, onOpenClick }: SubmapItemProps): JSX.Element => (
- <div className="flex flex-row flex-nowrap items-center justify-between border-b py-6">
+export const SubmapItem = ({ modelName, onOpenClick }: SubmapItemProps): JSX.Element => (
+ <div className="flex flex-row flex-nowrap items-center justify-between py-2">
{modelName}
<div className="flex flex-row flex-nowrap items-center">
<DownloadSubmap />
- <IconButton
- icon="chevron-right"
- className="h-6 w-6 bg-white-pearl"
- classNameIcon="fill-font-500 h-6 w-6"
+ <Button
+ variantStyles="secondary"
+ className="h-6"
data-testid={`${modelName}-open`}
onClick={onOpenClick}
- />
+ >
+ Open
+ </Button>
</div>
</div>
);
diff --git a/src/components/Map/Drawer/SubmapsDrawer/SubmapsDrawer.tsx b/src/components/Map/Drawer/SubmapsDrawer/SubmapsDrawer.tsx
index eb15bad6dc36b3d802de9ec7f45a942b11b813b6..c5c87a33f89d1ab2d1796b7a3ac223b6525788b5 100644
--- a/src/components/Map/Drawer/SubmapsDrawer/SubmapsDrawer.tsx
+++ b/src/components/Map/Drawer/SubmapsDrawer/SubmapsDrawer.tsx
@@ -6,7 +6,7 @@ import { openMapAndSetActive, setActiveMap } from '@/redux/map/map.slice';
import { MapModel } from '@/types/models';
import { mapModelIdSelector, mapOpenedMapsSelector } from '@/redux/map/map.selectors';
import { PluginsEventBus } from '@/services/pluginsManager/pluginsEventBus';
-import { SubmpamItem } from './SubmapItem/SubmapItem.component';
+import { SubmapItem } from './SubmapItem/SubmapItem.component';
export const SubmapsDrawer = (): JSX.Element => {
const models = useAppSelector(modelsDataSelector);
@@ -34,7 +34,7 @@ export const SubmapsDrawer = (): JSX.Element => {
<DrawerHeading title="Submaps" />
<ul className="h-[calc(100%-93px)] max-h-[calc(100%-93px)] overflow-y-auto px-6">
{models.map(model => (
- <SubmpamItem
+ <SubmapItem
key={model.idObject}
modelName={model.name}
onOpenClick={(): void => onSubmapOpenClick(model)}
diff --git a/src/shared/Icon/Icon.component.tsx b/src/shared/Icon/Icon.component.tsx
index b05d1f5704360b583f6d716d55db7c26081dcb03..634569549c9d5375d469e1e2c3208a63798986c2 100644
--- a/src/shared/Icon/Icon.component.tsx
+++ b/src/shared/Icon/Icon.component.tsx
@@ -16,6 +16,7 @@ import { PluginIcon } from '@/shared/Icon/Icons/PluginIcon';
import { PlusIcon } from '@/shared/Icon/Icons/PlusIcon';
import type { IconComponentType, IconTypes } from '@/types/iconTypes';
+import { DownloadIcon } from '@/shared/Icon/Icons/DownloadIcon';
import { LocationIcon } from './Icons/LocationIcon';
import { MaginfierZoomInIcon } from './Icons/MagnifierZoomIn';
import { MaginfierZoomOutIcon } from './Icons/MagnifierZoomOut';
@@ -43,6 +44,7 @@ const icons: Record<IconTypes, IconComponentType> = {
export: ExportIcon,
layers: LayersIcon,
info: InfoIcon,
+ download: DownloadIcon,
legend: LegendIcon,
page: PageIcon,
plugin: PluginIcon,
diff --git a/src/shared/Icon/Icons/DownloadIcon.tsx b/src/shared/Icon/Icons/DownloadIcon.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..5b550d35dafdb690e5d1501328ddd7cddb561670
--- /dev/null
+++ b/src/shared/Icon/Icons/DownloadIcon.tsx
@@ -0,0 +1,23 @@
+interface DownloadIconProps {
+ className?: string;
+}
+
+export const DownloadIcon = ({ className }: DownloadIconProps): JSX.Element => (
+ <svg
+ width="800px"
+ height="800px"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ className={className}
+ >
+ <path
+ d="M12.5535 16.5061C12.4114 16.6615 12.2106 16.75 12 16.75C11.7894 16.75 11.5886 16.6615 11.4465 16.5061L7.44648 12.1311C7.16698 11.8254 7.18822 11.351 7.49392 11.0715C7.79963 10.792 8.27402 10.8132 8.55352 11.1189L11.25 14.0682V3C11.25 2.58579 11.5858 2.25 12 2.25C12.4142 2.25 12.75 2.58579 12.75 3V14.0682L15.4465 11.1189C15.726 10.8132 16.2004 10.792 16.5061 11.0715C16.8118 11.351 16.833 11.8254 16.5535 12.1311L12.5535 16.5061Z"
+ fill="#1C274C"
+ />
+ <path
+ d="M3.75 15C3.75 14.5858 3.41422 14.25 3 14.25C2.58579 14.25 2.25 14.5858 2.25 15V15.0549C2.24998 16.4225 2.24996 17.5248 2.36652 18.3918C2.48754 19.2919 2.74643 20.0497 3.34835 20.6516C3.95027 21.2536 4.70814 21.5125 5.60825 21.6335C6.47522 21.75 7.57754 21.75 8.94513 21.75H15.0549C16.4225 21.75 17.5248 21.75 18.3918 21.6335C19.2919 21.5125 20.0497 21.2536 20.6517 20.6516C21.2536 20.0497 21.5125 19.2919 21.6335 18.3918C21.75 17.5248 21.75 16.4225 21.75 15.0549V15C21.75 14.5858 21.4142 14.25 21 14.25C20.5858 14.25 20.25 14.5858 20.25 15C20.25 16.4354 20.2484 17.4365 20.1469 18.1919C20.0482 18.9257 19.8678 19.3142 19.591 19.591C19.3142 19.8678 18.9257 20.0482 18.1919 20.1469C17.4365 20.2484 16.4354 20.25 15 20.25H9C7.56459 20.25 6.56347 20.2484 5.80812 20.1469C5.07435 20.0482 4.68577 19.8678 4.40901 19.591C4.13225 19.3142 3.9518 18.9257 3.85315 18.1919C3.75159 17.4365 3.75 16.4354 3.75 15Z"
+ fill="#1C274C"
+ />
+ </svg>
+);
diff --git a/src/types/iconTypes.ts b/src/types/iconTypes.ts
index 6feeea09e29c8d0c4a0eb0c46df5d514cb0dd67e..5000d642307404c19565b28b421a461d6729e859 100644
--- a/src/types/iconTypes.ts
+++ b/src/types/iconTypes.ts
@@ -22,6 +22,7 @@ export type IconTypes =
| 'reload'
| 'clear'
| 'user'
- | 'manage-user';
+ | 'manage-user'
+ | 'download';
export type IconComponentType = ({ className }: { className: string }) => JSX.Element;