restyle ad to be clearer

components/item.js

@@ -15,6 +15,7 @@ import ItemInfo from './item-info'
 import { commentsViewedAt } from '../lib/new-comments'
 import { useRouter } from 'next/router'
 import { Badge } from 'react-bootstrap'
+import AdIcon from '../svgs/advertisement-fill.svg'
 
 export function SearchTitle ({ title }) {
   return reactStringReplace(title, /:high\[([^\]]+)\]/g, (match, i) => {
@@ -40,7 +41,11 @@ export default function Item ({ item, rank, belowTitle, right, full, children, s
       <div className={`${styles.item} ${siblingComments ? 'pt-2' : ''}`}>
         {item.position
           ? <Pin width={24} height={24} className={styles.pin} />
-          : item.meDontLike ? <Flag width={24} height={24} className={styles.dontLike} /> : <UpVote item={item} className={styles.upvote} pendingSats={pendingSats} setPendingSats={setPendingSats} />}
+          : item.meDontLike
+            ? <Flag width={24} height={24} className={styles.dontLike} />
+            : Number(item.user?.id) === AD_USER_ID
+              ? <AdIcon width={24} height={24} className={styles.ad} />
+              : <UpVote item={item} className={styles.upvote} pendingSats={pendingSats} setPendingSats={setPendingSats} />}
         <div className={styles.hunk}>
           <div className={`${styles.main} flex-wrap`}>
             <Link
@@ -78,7 +83,7 @@ export default function Item ({ item, rank, belowTitle, right, full, children, s
           </div>
           <ItemInfo
             full={full} item={item} pendingSats={pendingSats}
-            embellishUser={Number(item?.user?.id) === AD_USER_ID && <Badge bg='primary'>AD</Badge>}
+            embellishUser={Number(item?.user?.id) === AD_USER_ID && <Badge className={styles.newComment} bg={null}>AD</Badge>}
           />
           {belowTitle}
         </div>

components/item.module.css

@@ -50,13 +50,21 @@ a.title:visited {
     fill: #a5a5a5;
     margin-right: .4rem;
     margin-left: -.2rem;
+    flex-shrink: 0;
+}
+
+.ad {
+    fill: #a5a5a5ac;
+    margin-right: .4rem;
+    margin-left: -.2rem;
+    flex-shrink: 0;
 }
 
 .dontLike {
     fill: #a5a5a5;
-    margin-right: .2rem;
-    padding: 2px;
-    margin-left: 1px;
+    margin-right: .35rem;
+    margin-left: -.2rem;
+    flex-shrink: 0;
 }
 
 .case {

svgs/advertisement-line.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12.598 16 9.39893 8H7.39893L5.39893 13 5.39795 13.002 4.19897 16H6.35303L6.75293 15H10.043L10.443 16H12.598ZM7.552 13 8.39893 10.8851 9.24402 13H7.552ZM17 8H19V16H16C14.3431 16 13 14.6569 13 13 13 11.3431 14.3431 10 16 10H17V8ZM16 12C15.4478 12 15 12.4478 15 13 15 13.5522 15.4478 14 16 14H17V12H16ZM21 3H3C2.44775 3 2 3.44775 2 4V20C2 20.5522 2.44775 21 3 21H21C21.5522 21 22 20.5522 22 20V4C22 3.44775 21.5522 3 21 3ZM4 19V5H20V19H4Z"></path></svg>