legg til knapp for å lukke versjonsvelgeren

Author: bdahle

xp-archive/client/versionSelector/SlidePanel/SlidePanel.module.css

@@ -17,6 +17,8 @@
 }
 
 .panel {
+    display: flex;
+    flex-direction: column;
     position: relative;
     z-index: 1;
     width: 460px;

xp-archive/client/versionSelector/VersionSelector.module.css

@@ -40,3 +40,14 @@
         font-weight: var(--a-font-weight-bold);
     }
 }
+
+.closeButton {
+    position: sticky;
+    bottom: 1rem;
+    margin-top: 1.75rem;
+
+    width: fit-content;
+    border-radius: 99px;
+    background-color: var(--a-surface-inverted);
+    align-self: center;
+}

xp-archive/client/versionSelector/VersionSelector.tsx

@@ -1,12 +1,12 @@
 import React, { useState, useEffect } from 'react';
+import { CheckmarkIcon, XMarkIcon } from '@navikt/aksel-icons';
 import { Heading, Button, Search } from '@navikt/ds-react';
 import { VersionReference } from 'shared/types';
 import { formatTimestamp } from '@common/shared/timestamp';
 import { useAppState } from 'client/context/appState/useAppState';
 import { SlidePanel } from './SlidePanel/SlidePanel';
 import { classNames } from '@common/client/utils/classNames';
 import style from './VersionSelector.module.css';
-import { CheckmarkIcon } from '@navikt/aksel-icons';
 
 type Props = {
     versions: VersionReference[];
@@ -87,6 +87,14 @@ export const VersionSelector = ({ versions, isOpen, onClose, onMount }: Props) =
                     </VersionButton>
                 ))}
             </div>
+            <Button
+                className={style.closeButton}
+                variant="primary-neutral"
+                icon={<XMarkIcon />}
+                onClick={handleClose}
+            >
+                Lukk versjonsvelger
+            </Button>
         </SlidePanel>
     );