Minor styling improvements to mazemap link

webkom · Jan 29, 2025 · 072bc1c · 072bc1c
1 parent f458347
commit 072bc1c
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 18 deletions.
diff --git a/app/components/MazemapEmbed/MazemapEmbed.module.css b/app/components/MazemapEmbed/MazemapEmbed.module.css
@@ -21,5 +21,9 @@
 }
 
 .mazemapLink {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  gap: 0.2rem;
   font-size: var(--font-size-sm);
 }
diff --git a/app/components/MazemapEmbed/MazemapLink.tsx b/app/components/MazemapEmbed/MazemapLink.tsx
@@ -1,22 +1,30 @@
+import { Icon } from '@webkom/lego-bricks';
+import { LucideSquareArrowOutUpRight } from 'lucide-react';
+import { Link } from 'react-router-dom';
 import styles from './MazemapEmbed.module.css';
+import type { CSSProperties } from 'react';
 
 type Props = {
   mazemapPoi: number;
   linkText?: string;
+  style?: CSSProperties;
+  iconOnly?: boolean;
 };
 
-const MazemapLink = ({ mazemapPoi, linkText }: Props) => (
-  <a
-    href={
+const MazemapLink = ({ mazemapPoi, linkText, style, iconOnly }: Props) => (
+  <Link
+    to={
       'https://use.mazemap.com/#v=1&sharepoitype=poi&campusid=1&sharepoi=' +
       mazemapPoi
     }
     rel="noreferrer noopener"
     target="_blank"
     className={styles.mazemapLink}
+    style={style}
   >
-    {linkText || 'Åpne kart i ny fane'}
-  </a>
+    <Icon iconNode={<LucideSquareArrowOutUpRight />} size={19} />
+    {!iconOnly && (linkText || 'Åpne kart i ny fane')}
+  </Link>
 );
 
 export default MazemapLink;
diff --git a/app/components/MazemapEmbed/index.tsx b/app/components/MazemapEmbed/index.tsx
@@ -180,7 +180,7 @@ export const MazemapEmbed = ({ mazemapPoi, ...props }: Props) => {
   }
 
   return (
-    <Flex column gap="var(--spacing-xs)">
+    <Flex column gap="var(--spacing-sm)">
       <div
         style={{
           height: props.height || 400,

diff --git a/app/routes/events/components/EventEditor/EditorSection/Details.tsx b/app/routes/events/components/EventEditor/EditorSection/Details.tsx
@@ -108,7 +108,8 @@ const Details: React.FC<Props> = ({ values }) => {
                 <Tooltip content="Åpne stedet i MazeMap">
                   <MazemapLink
                     mazemapPoi={values.mazemapPoi?.value}
-                    linkText="↗️"
+                    iconOnly
+                    style={{ position: 'relative', top: '0.8rem' }}
                   />
                 </Tooltip>
               )}

diff --git a/app/routes/meetings/components/MeetingEditor.tsx b/app/routes/meetings/components/MeetingEditor.tsx
@@ -8,7 +8,7 @@ import {
 } from '@webkom/lego-bricks';
 import { usePreparedEffect } from '@webkom/react-prepare';
 import { unionBy } from 'lodash';
-import { Trash2 } from 'lucide-react';
+import { LucideSquareArrowOutUpRight, Trash2 } from 'lucide-react';
 import moment from 'moment-timezone';
 import { useState } from 'react';
 import { Field, FormSpy } from 'react-final-form';
@@ -309,20 +309,21 @@ const MeetingEditor = () => {
                 type="checkbox"
                 component={CheckBox.Field}
               />
-              {spyValues<MeetingFormValues>((values) => {
-                return values?.useMazemap ? (
-                  <Flex alignItems="center">
+              {spyValues<MeetingFormValues>((values) =>
+                values?.useMazemap ? (
+                  <Flex gap="var(--spacing-sm)">
                     <Field
-                      label="MazeMap-rom"
+                      label="Mazemap-rom"
                       required
                       name="mazemapPoi"
                       component={SelectInput.MazemapAutocomplete}
                       placeholder="R1, Abakus, Kjel4"
                     />
-                    {values?.mazemapPoi?.value > 0 && (
+                    {values?.mazemapPoi?.value && (
                       <MazemapLink
-                        mazemapPoi={values?.mazemapPoi?.value}
-                        linkText="↗️"
+                        mazemapPoi={values.mazemapPoi?.value}
+                        iconOnly
+                        style={{ position: 'relative', top: '0.8rem' }}
                       />
                     )}
                   </Flex>
@@ -334,9 +335,8 @@ const MeetingEditor = () => {
                     placeholder="Sted for møte"
                     component={TextInput.Field}
                   />
-                );
-              })}
-
+                ),
+              )}
               <RowSection>
                 <Field
                   name="users"