Add close button to VersionSelector and update styles for SlidePanel

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: 400px;

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

@@ -6,7 +6,7 @@ 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';
+import { CheckmarkIcon, XMarkIcon } from '@navikt/aksel-icons';
 
 type Props = {
     versions: VersionReference[];
@@ -45,7 +45,6 @@ export const VersionSelector = ({ versions, isOpen, onClose }: Props) => {
         const nodeId = versions.find((v) => v.versionId === versionId)?.nodeId;
         if (nodeId) setSelectedContentId(nodeId);
         setSelectedVersion(versionId);
-        handleClose();
     };
 
     const filteredVersions = versions.filter((version) =>
@@ -78,6 +77,14 @@ export const VersionSelector = ({ versions, isOpen, onClose }: Props) => {
                     </VersionButton>
                 ))}
             </div>
+            <Button
+                className={style.closeButton}
+                variant="primary-neutral"
+                icon={<XMarkIcon />}
+                onClick={handleClose}
+            >
+                Lukk versjonsvelger
+            </Button>
         </SlidePanel>
     );
 };