Merge branch 'feat/restyling-POI-single-view' into 'main'

Feat/restyling poi single view

Closes #7

See merge request !6

src/components/FabCityMap.tsx

@@ -32,11 +32,7 @@ const FabCityMap: React.FC<Props> = ({ data, mapboxToken, className, baseUrl, ma
       <Router {...(baseUrl ? { basename: baseUrl } : {})}>
         <ErrorModal />
         <Notification />
-        <div
-          className={`fcmap-relative fcmap-h-full fcmap-bg-white fcmap-overflow-hidden ${
-            className || ''
-          }`}
-        >
+        <div className={`fcmap-relative fcmap-h-full fcmap-bg-white fcmap-overflow-hidden ${className || ''}`}>
           <Route path="/">
             {/* This route will always match, so the Map is always visible */}
             <Map mapboxToken={mapboxToken} mapStyle={mapStyle} />

src/components/Map/Map.tsx

@@ -14,11 +14,12 @@ interface Props {
 
 interface MarkerProps {
   className: string;
+  [x: string]: unknown;
 }
 
-const MarkerSvg: React.FC<MarkerProps> = ({ className }) => {
+const MarkerSvg: React.FC<MarkerProps> = ({ className, ...props }) => {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" className={className}>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" className={className} {...props}>
       <path
         fill="currentColor"
         d="M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z"
@@ -32,6 +33,7 @@ const Map: React.FC<Props> = ({ mapboxToken, mapStyle }) => {
   const data = useStore((state) => state.poiData);
   const selectedPoi = useStore((state) => state.selectedPoi);
   const hoveredPoi = useStore((state) => state.hoveredPoi);
+  const setHoveredPoi = useStore((state) => state.setHoveredPoi);
   const isSidebarHidden = useStore((state) => state.isSidebarHidden);
   const { data: filteredData } = useFilteredPoiData();
   const DEFAULT_CENTER: [number, number] = [9.986701, 53.550359];
@@ -109,6 +111,8 @@ const Map: React.FC<Props> = ({ mapboxToken, mapStyle }) => {
                 className={`fcmap-transition fcmap-ease-in-out fcmap-w-8 fcmap-h-8 hover:fcmap-scale-125 fcmap-opacity-70 hover:fcmap-opacity-100 hover:fcmap-cursor-pointer fcmap-text-fabcity-red ${
                   isHovered ? 'fcmap-scale-125 fcmap-opacity-100' : ''
                 }`}
+                onMouseEnter={() => setHoveredPoi(poi)}
+                onMouseLeave={() => setHoveredPoi(null)}
               />
             </Marker>
           );

src/components/Sidebar/CloseButton.tsx

@@ -2,16 +2,13 @@ import type { SyntheticEvent } from 'react';
 import { X as CloseIcon } from 'heroicons-react';
 interface Props {
   onClick: (event: SyntheticEvent) => void;
-  absolute?: boolean;
 }
 
-const CloseButton: React.FC<Props> = ({ onClick, absolute = false }) => {
+const CloseButton: React.FC<Props> = ({ onClick }) => {
   return (
     <CloseIcon
-      size={32}
-      className={`${
-        absolute ? 'fcmap-absolute fcmap-left-5 fcmap-top-5' : ''
-      } fcmap-p-1 fcmap-text-gray-600 fcmap-inline-block fcmap-cursor-pointer fcmap-bg-gray-200 fcmap-bg-opacity-30 hover:fcmap-bg-opacity-80 fcmap-rounded-full`}
+      size={28}
+      className="fcmap-p-1 fcmap-text-gray-400 fcmap-inline-block fcmap-cursor-pointer"
       onClick={onClick}
     />
   );

src/components/Sidebar/ListElement.tsx

@@ -14,15 +14,20 @@ const ListElement: React.FC<Props> = ({ value, hovered, ...restProps }) => {
     value && (
       <div
         {...restProps}
-        className={`fcmap-border fcmap-border-grey-900 fcmap-border-opacity-40 ${
-          hovered ? 'fcmap-border-opacity-100' : ''
-        } fcmap-cursor-pointer`}
+        className="fcmap-flex fcmap-justify-start fcmap-items-start fcmap-h-[75px] fcmap-gap-4 fcmap-cursor-pointer"
       >
-        <div className="fcmap-p-3">
-          <h2 className="fcmap-tracking-widest fcmap-text-xs fcmap-uppercase fcmap-title-font fcmap-font-medium fcmap-text-gray-400 fcmap-mb-1">
+        <img src={value.image} alt={value.name} className="fcmap-h-full fcmap-aspect-square" />
+        <div className="fcmap-flex-col fcmap-gap-1">
+          <h1
+            className={`fcmap-font-plex fcmap-text-base fcmap-font-bold fcmap-multi-line-gray-900 hover:fcmap-multi-line-underline ${
+              hovered ? 'fcmap-multi-line-underline' : ''
+            } fcmap-text-gray-900 `}
+          >
+            {value.name}
+          </h1>
+          <h2 className="fcmap-text-sm fcmap-font-plex fcmap-font-normal fcmap-text-gray-500 fcmap-mb-1">
             {value.category}
           </h2>
-          <h1 className="fcmap-title-font fcmap-text-lg fcmap-font-medium fcmap-text-gray-900">{value.name}</h1>
         </div>
       </div>
     )

src/components/Sidebar/SidebarListView.tsx

@@ -36,7 +36,7 @@ const SidebarListView: React.FC = () => {
         isSidebarHidden ? 'fcmap-top-[calc(100%-98px)]' : 'fcmap-top-0'
       }`}
     >
-      <div className="fcmap-flex fcmap-flex-col fcmap-m-4 fcmap-mb-2 fcmap-pb-2 fcmap-border-black fcmap-border-opacity-20 fcmap-border-b-2 fcmap-gap-2">
+      <div className="fcmap-flex fcmap-flex-col fcmap-m-4 fcmap-mb-2 fcmap-pb-2 fcmap-gap-2">
         <div className="fcmap-flex fcmap-justify-end">
           <MinimizeButton
             isMinimized={isSidebarHidden}
@@ -46,7 +46,7 @@ const SidebarListView: React.FC = () => {
           />
         </div>
         <div className="fcmap-flex fcmap-justify-between fcmap-items-center">
-          <h1 className="fcmap-text-xl fcmap-font-medium fcmap-title-font fcmap-text-gray-900">
+          <h1 className="fcmap-text-lg fcmap-font-medium fcmap-font-plex fcmap-text-gray-900">
             {filteredData?.length} Orte:
           </h1>
           <FilterIcon
@@ -65,7 +65,7 @@ const SidebarListView: React.FC = () => {
           </div>
         )}
       </div>
-      <div className="fcmap-overflow-y-auto fcmap-flex fcmap-flex-col fcmap-gap-2 fcmap-m-4 fcmap-mr-2 fcmap-pr-2">
+      <div className="fcmap-overflow-y-auto fcmap-flex fcmap-flex-col fcmap-gap-6 fcmap-m-4 fcmap-mr-2 fcmap-pr-2">
         {filteredData?.map((poi) => (
           <ListElement
             key={poi.id}

src/components/Sidebar/SidebarSingleView.tsx

@@ -16,54 +16,50 @@ const SidebarSingleView: React.FC = () => {
 
   return (
     <SidebarContainer className={`fcmap-top-0 fcmap-p-0 fcmap-overflow-y-auto md:fcmap-mt-9 md:fcmap-mb-4`}>
-      <div className={`${selectedPoi?.image ? '' : 'fcmap-pl-5 fcmap-pt-5 '}`}>
+      <div className="fcmap-flex fcmap-justify-between fcmap-items-center fcmap-px-4 fcmap-py-6">
+        <h1 className="fcmap-text-lg fcmap-font-medium fcmap-font-plex fcmap-text-gray-900">Profil</h1>
         <CloseButton
-          absolute
           onClick={() => {
             history.push('/');
           }}
         />
       </div>
+      <div className={`${selectedPoi?.image ? '' : 'fcmap-pl-5 fcmap-pt-5 '}`}></div>
       {selectedPoi?.image && (
         <img
-          className="lg:fcmap-h-48 md:fcmap-h-36 fcmap-w-full fcmap-object-cover fcmap-object-center"
+          className="fcmap-h-40 fcmap-w-full fcmap-object-cover fcmap-object-center"
           src={selectedPoi?.image}
           alt={selectedPoi?.name}
         />
       )}
-      <div className="fcmap-p-6">
-        <h2 className="fcmap-tracking-widest fcmap-uppercase fcmap-text-xs fcmap-title-font fcmap-font-medium fcmap-text-gray-400 fcmap-mb-1">
-          {selectedPoi?.category}
-        </h2>
-        <h1 className="fcmap-title-font fcmap-text-lg fcmap-font-medium fcmap-text-gray-900 fcmap-mb-3">
+      <div className="fcmap-px-4 fcmap-pt-6 fcmap-pb-5">
+        <h1 className="fcmap-font-karla fcmap-text-xl fcmap-leading-6 fcmap-font-bold fcmap-text-gray-900">
           {selectedPoi?.name}
         </h1>
-        <p className="fcmap-leading-relaxed fcmap-mb-6">{selectedPoi?.description}</p>
+        <h2 className="fcmap-text-sm fcmap-font-plex fcmap-font-normal fcmap-text-gray-500">{selectedPoi?.category}</h2>
+      </div>
+      <div className="fcmap-px-7 fcmap-pb-14 fcmap-font-plex">
+        <h3 className="fcmap-text-sm fcmap-font-medium fcmap-text-gray-500 fcmap-mb-1">Info</h3>
+        <p className="fcmap-leading-relaxed fcmap-mb-8">{selectedPoi?.description}</p>
+        {selectedPoi?.address && (
+          <div className={'fcmap-flex-col fcmap-items-center fcmap-mb-8'}>
+            <h3 className="fcmap-text-sm fcmap-font-medium fcmap-text-gray-500 fcmap-mb-1">Location</h3>
+            <div className="fcmap-text-sm fcmap-font-normal fcmap-text-gray-900">{selectedPoi?.address}</div>
+          </div>
+        )}
         {selectedPoi?.website && (
-          <div className={'fcmap-flex fcmap-items-center'}>
-            <HomeIcon size={18} className={'fcmap-text-gray-500 fcmap-mr-2'} />
+          <div className={'fcmap-flex-col fcmap-items-center fcmap-mb-8'}>
+            <h3 className="fcmap-text-sm fcmap-font-medium fcmap-text-gray-500 fcmap-mb-1">Website</h3>
             <a
               target="_blank"
               rel="noopener noreferrer"
-              className={'fcmap-text-sm fcmap-text-gray-500 hover:fcmap-underline'}
+              className={'fcmap-text-sm fcmap-font-normal  fcmap-text-gray-900 hover:fcmap-underline'}
               href={selectedPoi?.website}
             >
               {strippedUrl}
             </a>
           </div>
         )}
-        {selectedPoi?.address && (
-          <div className={'fcmap-flex fcmap-items-center fcmap-mt-3'}>
-            <AddressIcon size={18} className={'fcmap-text-gray-500 fcmap-mr-2'} />
-            <div className="fcmap-text-sm fcmap-text-gray-500">{selectedPoi?.address}</div>
-          </div>
-        )}
-        {selectedPoi?.relationStatus && (
-          <div className={'fcmap-flex fcmap-items-center fcmap-mt-3'}>
-            <RealtionStatusIcon size={18} className={'fcmap-text-gray-500 fcmap-mr-2'} />
-            <div className="fcmap-text-sm fcmap-text-gray-500">{selectedPoi?.relationStatus}</div>
-          </div>
-        )}
         {!!selectedPoi?.tags?.length && (
           <div className={'fcmap-flex fcmap-items-center fcmap-mt-3 fcmap-flex-wrap'}>
             {selectedPoi?.tags.map((tag) => (

src/index.css

@@ -20,6 +20,33 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
 }
 
+@font-face {
+  font-family: 'IBM Plex Sans';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: local(''), url('../src/assets/fonts/ibm-plex-sans-v14-latin-regular.woff2') format('woff2'),
+    url('../src/assets/fonts/ibm-plex-sans-v14-latin-regular.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'IBM Plex Sans';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: local(''), url('../src/assets/fonts/ibm-plex-sans-v14-latin-500.woff2') format('woff2'),
+    url('../src/assets/fonts/ibm-plex-sans-v14-latin-500.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Karla';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: local(''), url('../src/assets/fonts/karla-v22-latin-700.woff2') format('woff2'),
+    url('../src/assets/fonts/karla-v22-latin-700.woff') format('woff');
+}
+
 .sidebar-height {
   max-height: calc(100% - 2 * theme(spacing.5));
 }

tailwind.config.js

+/** @type {import('tailwindcss').Config} */
+const plugin = require("tailwindcss/plugin");
+const {
+  default: flattenColorPalette,
+} = require("tailwindcss/lib/util/flattenColorPalette");
 module.exports = {
   corePlugins: {
     preflight: false,
@@ -9,22 +14,52 @@ module.exports = {
     require('@tailwindcss/forms')({
       strategy: 'class',
     }),
+    plugin(function ({ matchUtilities, addUtilities, theme }) {
+      const baseStyles = {
+        width: '100%',
+        display: 'initial',
+        'background-repeat': 'no-repeat',
+        'background-size': '0% 100%',
+        'padding-bottom': '2px',
+        transition: 'background-size ease-in-out 300ms',
+      };
+      matchUtilities(
+        {
+          'multi-line': (value) => ({
+            ...baseStyles,
+            'background-image': `linear-gradient(transparent calc(100% - 1.5px), ${value} 1.5px)`,
+          })
+        },
+        { values: flattenColorPalette(theme('colors')) },
+      );
+      addUtilities([
+        {
+          '.multi-line-underline': {
+            'background-size': '100% 100%',
+          },
+        },
+      ]);
+    }),
   ],
   theme: {
     extend: {
+      fontFamily: {
+        plex: ['IBM Plex Sans', 'sans-serif'],
+        karla: ['Karla', 'sans-serif'],
+      },
       colors: {
         'fabcity-red': '#ee2f45',
         'fabcity-green': '#08aa64',
         'fabcity-blue': '#19459c',
         grey: {
-          50: "#FDFDFC",
-          100: "#F0F1F1",
-          200: "#E4E4E5",
-          400: "#A4A7AC",
-          500: "#8A8E96",
-          600: "#71767F",
-          700: "#4B515D",
-          900: "#0B1324",
+          50: '#FDFDFC',
+          100: '#F0F1F1',
+          200: '#E4E4E5',
+          400: '#A4A7AC',
+          500: '#8A8E96',
+          600: '#71767F',
+          700: '#4B515D',
+          900: '#0B1324',
         },
       },
     },