Improve VisKart button

webkom · Feb 6, 2023 · 76e15bc · 76e15bc
1 parent 534d847
commit 76e15bc
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 17 deletions.
diff --git a/app/assets/mazemap.png b/app/assets/mazemap.png
diff --git a/app/components/Content/ContentHeader.tsx b/app/components/Content/ContentHeader.tsx
@@ -2,15 +2,15 @@ import cx from 'classnames';
 import type { Event } from 'app/models';
 import { eventTypeToString } from 'app/routes/events/utils';
 import styles from './ContentHeader.css';
-import type { ReactNode } from 'react';
+import type { HTMLAttributes, ReactNode } from 'react';
 
 type Props = {
   className?: string;
   borderColor?: string;
   children: ReactNode;
   event?: Event;
-  color: string;
-};
+  color?: string;
+} & HTMLAttributes<HTMLDivElement>;
 const DEFAULT_BORDER_COLOR = '#FCD748';
 
 /**

diff --git a/app/routes/events/components/EventDetail/EventDetail.css b/app/routes/events/components/EventDetail/EventDetail.css
@@ -48,6 +48,13 @@
   align-items: center;
 }
 
+.iconWithTextMazeMap {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  flex-wrap: wrap;
+}
+
 .infoIcon {
   min-width: 26px;
   display: flex;
@@ -58,3 +65,10 @@
 .registeredBox {
   margin-top: 1em;
 }
+
+.mapButton {
+  margin-top: 5px;
+  margin-bottom: 5px;
+  max-width: 130px;
+  max-height: 33px;
+}
diff --git a/app/routes/events/components/EventDetail/index.tsx b/app/routes/events/components/EventDetail/index.tsx
@@ -1,6 +1,8 @@
 import moment from 'moment-timezone';
 import { Component, Fragment } from 'react';
 import { Link } from 'react-router-dom';
+import mazemapLogo from 'app/assets/mazemap.png';
+import Button from 'app/components/Button';
 import CommentView from 'app/components/Comments/CommentView';
 import {
   Content,
@@ -11,6 +13,7 @@ import {
 } from 'app/components/Content';
 import DisplayContent from 'app/components/DisplayContent';
 import Icon from 'app/components/Icon';
+import { CircularPicture } from 'app/components/Image';
 import InfoList from 'app/components/InfoList';
 import { Flex } from 'app/components/Layout';
 import { MazemapEmbed } from 'app/components/MazemapEmbed';
@@ -395,29 +398,34 @@ export default class EventDetail extends Component<Props, State> {
                 <Icon name="time-outline" className={styles.infoIcon} />
                 <FromToTime from={event.startTime} to={event.endTime} />
               </div>
-              <div className={styles.iconWithText}>
-                <Icon name="location-outline" className={styles.infoIcon} />
-                {event.location}
-              </div>
-              {event.isPriced && (
+              <div className={styles.iconWithTextMazeMap}>
                 <div className={styles.iconWithText}>
-                  <Icon name="cash-outline" className={styles.infoIcon} />
-                  {event.priceMember / 100},-
+                  <Icon name="location-outline" className={styles.infoIcon} />
+                  {event.location}
                 </div>
-              )}
-              {event.mazemapPoi && (
-                <>
-                  <div
-                    className={styles.simulateLink}
+                {event.mazemapPoi && (
+                  <Button
+                    className={styles.mapButton}
                     onClick={() =>
                       this.setState({
                         mapIsOpen: !this.state.mapIsOpen,
                       })
                     }
                   >
-                    {' '}
+                    <CircularPicture size={25} alt="" src={mazemapLogo} />
                     {this.state.mapIsOpen ? 'Skjul kart' : 'Vis kart'}
-                  </div>
+                  </Button>
+                )}
+              </div>
+
+              {event.isPriced && (
+                <div className={styles.iconWithText}>
+                  <Icon name="cash-outline" className={styles.infoIcon} />
+                  {event.priceMember / 100},-
+                </div>
+              )}
+              {event.mazemapPoi && (
+                <>
                   {this.state.mapIsOpen && (
                     <MazemapEmbed mazemapPoi={event.mazemapPoi} />
                   )}