fix: replace separator dots with svg vector; closes #194

src/components/Article/Article.Stats.tsx

@@ -1,5 +1,6 @@
 import { Typography } from '@acid-info/lsd-react'
 import styled from '@emotion/styled'
+import { DotIcon } from '../Icons/DotIcon'
 
 const ArticleStats = ({
   date,
@@ -14,7 +15,7 @@ const ArticleStats = ({
     </Typography>
     {date && (
       <>
-        <Typography variant="body3">•</Typography>
+        <DotIcon color="primary" />
         <Date variant="body3" genericFontFamily="sans-serif">
           {date &&
             date.toLocaleString('en-GB', {

src/components/Authors/Authors.tsx

@@ -1,6 +1,6 @@
-import { Typography } from '@acid-info/lsd-react'
 import styled from '@emotion/styled'
 import { LPE } from '../../types/lpe.types'
+import { DotIcon } from '../Icons/DotIcon'
 import Author from './Author'
 
 export enum AuthorsDirection {
@@ -24,16 +24,12 @@ const Authors: React.FC<AuthorsProps> = ({
 }) => {
   return authors?.length > 0 ? (
     <AuthorsContainer gap={gap} flexDirection={flexDirection} {...props}>
-      {authors.map((author, index) =>
+      {authors.map((author, index) => (
-        index < authors.length - 1 ? (
+        <AuthorContainer gap={gap} key={author.name}>
-          <AuthorContainer gap={gap} key={author.name}>
+          <Author author={author} email={email} />
-            <Author author={author} email={email} />
+          {index < authors.length - 1 && <DotIcon color="primary" />}
-            <Dot variant={'body2'}>•</Dot>
+        </AuthorContainer>
-          </AuthorContainer>
+      ))}
-        ) : (
-          <Author key={author.name} author={author} email={email} />
-        ),
-      )}
     </AuthorsContainer>
   ) : null
 }
@@ -48,12 +44,6 @@ const AuthorsContainer = styled.div<{
   align-items: center;
 `
 
-const Dot = styled(Typography)`
-  font-size: 14px;
-  display: flex;
-  align-items: center;
-`
-
 const AuthorContainer = styled.div<{
   gap: number
 }>`

src/components/Icons/DotIcon/DotIcon.tsx

@@ -0,0 +1,17 @@
+import { LsdIcon } from '@acid-info/lsd-react'
+
+export const DotIcon = LsdIcon(
+  (props) => (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="2"
+      height="2"
+      viewBox="0 0 2 2"
+      fill="none"
+      {...props}
+    >
+      <circle cx="1" cy="1" r="1" fill="black" />
+    </svg>
+  ),
+  { filled: true },
+)

src/components/Icons/DotIcon/index.ts

@@ -0,0 +1 @@
+export * from './DotIcon'

src/components/PostCard/PostCard.Label.tsx

@@ -2,6 +2,7 @@ import { LPE } from '@/types/lpe.types'
 import { Typography } from '@acid-info/lsd-react'
 import styled from '@emotion/styled'
 import React, { FC } from 'react'
+import { DotIcon } from '../Icons/DotIcon'
 import PostType = LPE.PostType
 
 export type Props = React.ComponentProps<typeof Container> & {
@@ -23,7 +24,7 @@ export const PostCardLabel: FC<Props> = ({
       </Typography>
       {date && (
         <>
-          <Typography variant="body3">•</Typography>
+          <DotIcon color="primary" />
           <Date variant="body3" genericFontFamily="sans-serif">
             {date.toLocaleString('en-GB', {
               day: 'numeric',

src/components/SearchBox/SearchBox.tsx

@@ -15,6 +15,7 @@ import {
   useQueryParam,
   withDefault,
 } from 'use-query-params'
+import { DotIcon } from '../Icons/DotIcon'
 import PostTypes = LPE.PostTypes
 import ContentBlockTypes = LPE.Post.ContentBlockTypes
 interface SearchBoxProps {
@@ -258,28 +259,30 @@ const SearchBox = (props: SearchBoxProps) => {
             <Details
               variant={'subtitle2'}
               className={`search-details ${showDetails ? 'show' : ''}`}
-              dangerouslySetInnerHTML={{
+            >
-                __html: [
+              {query && query.length > 0 && (
-                  ...(query && query.length
+                <span>
-                    ? [`<span class="dot">.</span><span>${query}</span>`]
+                  <DotIcon className="dot" color="primary" />
-                    : []),
+                  <span>{query}</span>
-                  ...(filterTags && filterTags.length
+                </span>
-                    ? [
+              )}
-                        `<span>${filterTags
+              {filterTags && filterTags.length > 0 && (
-                          .map((t) => `<span>[${t}]</span>`)
+                <span>
-                          .join('')}</span>`,
+                  <DotIcon className="dot" color="primary" />
-                      ]
+                  {filterTags.map((filterTag, index) => (
-                    : []),
+                    <span key={index}>[{filterTag}]</span>
-                  ...(filterContentTypes && filterContentTypes.length
+                  ))}
-                    ? [
+                </span>
-                        `<span>${filterContentTypes
+              )}
-                          .map((t) => `<span>[${t}]</span>`)
+              {filterContentTypes && filterContentTypes.length > 0 && (
-                          .join('')}</span>`,
+                <span>
-                      ]
+                  <DotIcon className="dot" color="primary" />
-                    : []),
+                  {filterContentTypes.map((contentType, index) => (
-                ].join('<span class="dot">.</span>'),
+                    <span key={index}>[{contentType}]</span>
-              }}
+                  ))}
-            />
+                </span>
+              )}
+            </Details>
           </>
         </Results>
       )}
@@ -373,15 +376,6 @@ const Results = styled.div`
     white-space: nowrap;
   }
 
-  .dot {
-    width: 3px;
-    height: 3px;
-    display: inline-block;
-    border-radius: 50%;
-    background-color: rgba(var(--lsd-text-primary), 1);
-    transform: translateY(1px);
-  }
-
   .search-details {
   }
 `
@@ -422,6 +416,10 @@ const Details = styled(Typography)`
     flex-direction: row;
     gap: 4px;
     align-items: center;
+
+    .dot {
+      margin-right: 4px;
+    }
   }
 `
 export default SearchBox