Add subscribed mode to subscribing topic button

public/icons/check-subscribed.svg

@@ -0,0 +1,3 @@
+<svg width="13" height="10" viewBox="0 0 13 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 4.5L4.66667 8L12 1" stroke="white" stroke-width="1.5"/>
+</svg>

src/components/Topic/Card.module.scss

@@ -120,3 +120,7 @@
 .isSubscribing {
   color: transparent;
 }
+
+.isSubscribed {
+  background: #000;
+}

src/components/Topic/Card.tsx

@@ -10,6 +10,7 @@ import { clsx } from 'clsx'
 import { useSession } from '../../context/session'
 import { StatMetrics } from '../_shared/StatMetrics'
 import { ShowOnlyOnClient } from '../_shared/ShowOnlyOnClient'
+import { Icon } from '../_shared/Icon'
 
 const log = getLogger('TopicCard')
 
@@ -96,13 +97,14 @@ export const TopicCard = (props: TopicProps) => {
               class="button--light button--subscribe-topic"
               classList={{
                 [styles.buttonCompact]: props.compact,
-                [styles.isSubscribing]: isSubscribing()
+                [styles.isSubscribing]: isSubscribing(),
+                [styles.isSubscribed]: subscribed()
               }}
               disabled={isSubscribing()}
             >
               <Show when={props.iconButton}>
                 <Show when={subscribed()} fallback="+">
-                  -
+                  <Icon name="check-subscribed" />
                 </Show>
               </Show>
               <Show when={!props.iconButton}>

src/styles/app.scss

@@ -243,6 +243,11 @@ button {
   border: 2px solid #000;
   border-radius: 0.8rem;
   color: #000;
+  font-size: 1.2em;
+  line-height: 2.8rem;
+  height: 3.2rem;
+  padding: 0;
+  width: 3.2rem;
 
   &:hover {
     background: #000;