feat: update pin design for new map

packages/components/src/ButtonIcon/ButtonIcon.stories.tsx

@@ -0,0 +1,12 @@
+import { ButtonIcon } from './ButtonIcon'
+
+import type { Meta, StoryFn } from '@storybook/react'
+
+export default {
+  title: 'Map/ButtonIcon',
+  component: ButtonIcon,
+} as Meta<typeof ButtonIcon>
+
+export const WithClose: StoryFn<typeof ButtonIcon> = () => (
+  <ButtonIcon icon="close" />
+)

packages/components/src/ButtonIcon/ButtonIcon.tsx

@@ -0,0 +1,22 @@
+import { Button } from 'theme-ui'
+
+import { Icon } from '../Icon/Icon'
+
+import type { ThemeUIStyleObject } from 'theme-ui'
+import type { IGlyphs } from '../Icon/types'
+
+export interface IProps extends React.ButtonHTMLAttributes<HTMLElement> {
+  icon: keyof IGlyphs
+  sx?: ThemeUIStyleObject | undefined
+}
+
+export const ButtonIcon = (props: IProps) => {
+  return (
+    <Button
+      {...props}
+      sx={{ background: 'white', borderRadius: 99, padding: 1, ...props.sx }}
+    >
+      <Icon glyph={props.icon} size={18} />
+    </Button>
+  )
+}

packages/components/src/CardList/CardList.stories.tsx

@@ -4,7 +4,7 @@ import type { Meta, StoryFn } from '@storybook/react'
 import type { ProfileTypeName } from 'oa-shared'
 
 export default {
-  title: 'Layout/CardList',
+  title: 'Map/CardList',
   component: CardList,
 } as Meta<typeof CardList>
 

packages/components/src/CardList/CardList.tsx

@@ -5,13 +5,13 @@ import { CardListItem } from '../CardListItem/CardListItem'
 import { Icon } from '../Icon/Icon'
 import { Loader } from '../Loader/Loader'
 
-import type { ListItem } from '../CardListItem/types'
+import type { MapListItem } from '../types/common'
 
 export interface IProps {
   columnsCountBreakPoints?: { [key: number]: number }
   dataCy: string
-  filteredList: ListItem[] | null
-  list: ListItem[]
+  filteredList: MapListItem[] | null
+  list: MapListItem[]
 }
 
 export const EMPTY_LIST = 'Oh nos! Nothing to show!'

packages/components/src/CardListItem/CardListItem.stories.tsx

@@ -6,7 +6,7 @@ import type { Meta, StoryFn } from '@storybook/react'
 import type { ProfileTypeName } from 'oa-shared'
 
 export default {
-  title: 'Components/CardListItem',
+  title: 'Map/CardListItem',
   component: CardListItem,
 } as Meta<typeof CardListItem>
 

packages/components/src/CardListItem/CardListItem.tsx

@@ -1,22 +1,14 @@
-import { Flex } from 'theme-ui'
-
 import { CardButton } from '../CardButton/CardButton'
+import { CardProfile } from '../CardProfile/CardProfile'
 import { InternalLink } from '../InternalLink/InternalLink'
-import { CardDetailsFallback } from './CardDetailsFallback'
-import { CardDetailsMemberProfile } from './CardDetailsMemberProfile'
-import { CardDetailsSpaceProfile } from './CardDetailsSpaceProfile'
 
-import type { ListItem } from './types'
+import type { MapListItem } from '../types/common'
 
 export interface IProps {
-  item: ListItem
+  item: MapListItem
 }
 
 export const CardListItem = ({ item }: IProps) => {
-  const { creator } = item
-
-  const isMember = creator?.profileType === 'member'
-
   return (
     <InternalLink
       data-cy="CardListItem"
@@ -28,15 +20,7 @@ export const CardListItem = ({ item }: IProps) => {
       }}
     >
       <CardButton>
-        <Flex sx={{ gap: 2, alignItems: 'stretch', alignContent: 'stretch' }}>
-          {isMember && <CardDetailsMemberProfile creator={creator} />}
-
-          {!isMember && creator && (
-            <CardDetailsSpaceProfile creator={creator} />
-          )}
-
-          {!creator && <CardDetailsFallback item={item} />}
-        </Flex>
+        <CardProfile item={item} />
       </CardButton>
     </InternalLink>
   )

packages/components/src/CardListItem/CardDetailsFallback.tsx → packages/components/src/CardProfile/CardDetailsFallback.tsx

@@ -4,10 +4,10 @@ import { Category } from '../Category/Category'
 import { MemberBadge } from '../MemberBadge/MemberBadge'
 import { Username } from '../Username/Username'
 
-import type { ListItem } from './types'
+import type { MapListItem } from '../types/common'
 
 interface IProps {
-  item: ListItem
+  item: MapListItem
 }
 
 export const CardDetailsFallback = ({ item }: IProps) => {

packages/components/src/CardListItem/CardDetailsMemberProfile.tsx → packages/components/src/CardProfile/CardDetailsMemberProfile.tsx

@@ -12,6 +12,7 @@ interface IProps {
 
 export const CardDetailsMemberProfile = ({ creator }: IProps) => {
   const { _id, badges, countryCode, profileType, userImage } = creator
+
   return (
     <Flex
       sx={{

packages/components/src/CardListItem/CardDetailsSpaceProfile.tsx → packages/components/src/CardProfile/CardDetailsSpaceProfile.tsx

@@ -1,4 +1,4 @@
-import { Flex, Image, Text } from 'theme-ui'
+import { Box, Flex, Image, Text } from 'theme-ui'
 
 import { Category } from '../Category/Category'
 import { MemberBadge } from '../MemberBadge/MemberBadge'
@@ -20,7 +20,7 @@ export const CardDetailsSpaceProfile = ({ creator }: IProps) => {
   return (
     <Flex sx={{ flexDirection: 'column', width: '100%' }}>
       {coverImage && (
-        <Flex sx={{ flexDirection: 'column' }}>
+        <>
           <Flex sx={{ aspectRatio: 16 / 6, overflow: 'hidden' }}>
             <Image
               src={coverImage}
@@ -31,25 +31,31 @@ export const CardDetailsSpaceProfile = ({ creator }: IProps) => {
               }}
             />
           </Flex>
-          <MemberBadge
-            profileType={profileType}
-            size={40}
+          <Box
             sx={{
-              alignSelf: 'flex-end',
-              transform: 'translateY(-20px)',
-              marginX: 2,
+              position: 'relative',
+              height: 0,
+              top: '-20px',
+              width: '100%',
             }}
-          />
-        </Flex>
+          >
+            <MemberBadge
+              profileType={profileType}
+              size={40}
+              sx={{
+                float: 'right',
+                marginX: 2,
+              }}
+            />
+          </Box>
+        </>
       )}
       <Flex
         sx={{
           alignItems: 'flex-start',
           flexDirection: 'column',
           gap: 1,
-          transform: coverImage ? 'translateY(-20px)' : '',
-          paddingX: 2,
-          paddingY: coverImage ? 0 : 2,
+          padding: 2,
         }}
       >
         <Flex sx={{ gap: 2 }}>
@@ -67,7 +73,9 @@ export const CardDetailsSpaceProfile = ({ creator }: IProps) => {
         </Flex>
         {subType && (
           <Category
-            category={{ label: 'Wants to get started' }}
+            category={{
+              label: subType.charAt(0).toUpperCase() + subType.slice(1),
+            }}
             sx={{
               border: '1px solid #0087B6',
               backgroundColor: '#ECFAFF',

packages/components/src/CardProfile/CardProfile.tsx

@@ -0,0 +1,25 @@
+import { Flex } from 'theme-ui'
+
+import { CardDetailsFallback } from './CardDetailsFallback'
+import { CardDetailsMemberProfile } from './CardDetailsMemberProfile'
+import { CardDetailsSpaceProfile } from './CardDetailsSpaceProfile'
+
+import type { MapListItem } from '../types/common'
+
+export interface IProps {
+  item: MapListItem
+}
+
+export const CardProfile = ({ item }: IProps) => {
+  const { creator } = item
+
+  const isMember = creator?.profileType === 'member'
+
+  return (
+    <Flex sx={{ alignItems: 'stretch', alignContent: 'stretch' }}>
+      {isMember && <CardDetailsMemberProfile creator={creator} />}
+      {!isMember && creator && <CardDetailsSpaceProfile creator={creator} />}
+      {!creator && <CardDetailsFallback item={item} />}
+    </Flex>
+  )
+}

packages/components/src/FilterList/FilterList.stories.tsx

@@ -6,7 +6,7 @@ import type { Meta, StoryFn } from '@storybook/react'
 import type { ProfileTypeName } from 'oa-shared'
 
 export default {
-  title: 'Components/FilterList',
+  title: 'Map/FilterList',
   component: FilterList,
 } as Meta<typeof FilterList>
 

packages/components/src/FilterList/FilterList.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from 'react'
 import { Flex, Text } from 'theme-ui'
 
-import { Button } from '../Button/Button'
+import { ButtonIcon } from '../ButtonIcon/ButtonIcon'
 import { CardButton } from '../CardButton/CardButton'
 import { MemberBadge } from '../MemberBadge/MemberBadge'
 
@@ -130,25 +130,22 @@ export const FilterList = (props: IProps) => {
             zIndex: 2,
             paddingX: 2,
             position: 'relative',
-            top: '-65px',
+            top: '-62px',
             height: 0,
           }}
         >
-          <Button
+          <ButtonIcon
             onClick={() => handleHorizantalScroll(-10)}
             icon="chevron-left"
             disabled={disableLeftArrow}
-            sx={{ borderRadius: 99 }}
-            showIconOnly
-            small
+            sx={{ height: '28px', borderColor: 'grey' }}
           />
-          <Button
+          <ButtonIcon
+            data-cy="FilterList-ButtonRight"
             onClick={() => handleHorizantalScroll(10)}
             icon="chevron-right"
             disabled={disableRightArrow}
-            sx={{ borderRadius: 99, zIndex: 2 }}
-            showIconOnly
-            small
+            sx={{ height: '28px', borderColor: 'grey' }}
           />
         </Flex>
       )}

packages/components/src/Icon/Icon.tsx

@@ -16,7 +16,6 @@ import { MdAdd } from '@react-icons/all-files/md/MdAdd'
 import { MdArrowBack } from '@react-icons/all-files/md/MdArrowBack'
 import { MdArrowForward } from '@react-icons/all-files/md/MdArrowForward'
 import { MdCheck } from '@react-icons/all-files/md/MdCheck'
-import { MdClose } from '@react-icons/all-files/md/MdClose'
 import { MdEdit } from '@react-icons/all-files/md/MdEdit'
 import { MdFileDownload } from '@react-icons/all-files/md/MdFileDownload'
 import { MdImage } from '@react-icons/all-files/md/MdImage'
@@ -66,12 +65,13 @@ export const glyphs: IGlyphs = {
   'arrow-full-up': iconMap.arrowFullUp,
   bazar: iconMap.bazar,
   comment: iconMap.comment,
+  contact: iconMap.contact,
   check: <MdCheck />,
   'chevron-down': <FaChevronDown />,
   'chevron-left': iconMap.chevronLeft,
   'chevron-right': iconMap.chevronRight,
   'chevron-up': <FaChevronUp />,
-  close: <MdClose />,
+  close: iconMap.close,
   delete: iconMap.delete,
   difficulty: <FaSignal />,
   discord: iconMap.discord,

packages/components/src/Icon/svgs.tsx

@@ -2,6 +2,8 @@ import accountSVG from '../../assets/icons/account.svg'
 import arrowCurvedBottomRightSVG from '../../assets/icons/arrow-curved-bottom-right.svg'
 import chevronLeftSVG from '../../assets/icons/chevron-left.svg'
 import chevronRightSVG from '../../assets/icons/chevron-right.svg'
+import contactSVG from '../../assets/icons/contact.svg'
+import closeSVG from '../../assets/icons/cross-close.svg'
 import deleteSVG from '../../assets/icons/delete.svg'
 import employeeSVG from '../../assets/icons/employee.svg'
 import eyeSVG from '../../assets/icons/eye.svg'
@@ -55,7 +57,9 @@ export const iconMap = {
   bazar: <ImageIcon src={bazarSVG} />,
   chevronLeft: <ImageIcon src={chevronLeftSVG} />,
   chevronRight: <ImageIcon src={chevronRightSVG} />,
+  close: <ImageIcon src={closeSVG} />,
   comment: <ImageIcon src={commentSVG} />,
+  contact: <ImageIcon src={contactSVG} />,
   delete: <ImageIcon src={deleteSVG} />,
   discord: <ImageIcon src={discordSVG} />,
   emailOutline: <ImageIcon src={emailOutlineSVG} />,

packages/components/src/Icon/types.ts

@@ -16,6 +16,7 @@ export type availableGlyphs =
   | 'chevron-up'
   | 'close'
   | 'comment'
+  | 'contact'
   | 'discord'
   | 'delete'
   | 'difficulty'

packages/components/src/Map/Map.stories.tsx

@@ -5,7 +5,7 @@ import { Map } from './Map'
 import type { Meta, StoryFn } from '@storybook/react'
 
 export default {
-  title: 'Components/Map',
+  title: 'Map/Map',
   component: Map,
 } as Meta<typeof Map>
 

packages/components/src/MapMemberCard/MapMemberCard.stories.tsx

@@ -5,7 +5,7 @@ import { MapMemberCard } from './MapMemberCard'
 import type { Meta } from '@storybook/react'
 
 export default {
-  title: 'Layout/MapMemberCard',
+  title: 'Map/MapMemberCard',
   component: MapMemberCard,
 } as Meta<typeof MapMemberCard>
 

packages/components/src/MapWithPin/MapPin.stories.tsx

@@ -3,7 +3,7 @@ import { MapPin } from './MapPin'
 import type { Meta, StoryFn } from '@storybook/react'
 
 export default {
-  title: 'Components/MapPin',
+  title: 'Map/MapPin',
   component: MapPin,
 } as Meta<typeof MapPin>
 

packages/components/src/MapWithPin/MapWithPin.stories.tsx

@@ -3,7 +3,7 @@ import { MapWithPin } from './MapWithPin'
 import type { Meta, StoryFn } from '@storybook/react'
 
 export default {
-  title: 'Components/MapWithPin',
+  title: 'Map/MapWithPin',
   component: MapWithPin,
 } as Meta<typeof MapWithPin>