diff --git a/public/icons/check-subscribed.svg b/public/icons/check-subscribed.svg
new file mode 100644
index 00000000..0e76cf14
--- /dev/null
+++ b/public/icons/check-subscribed.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/components/Topic/Card.module.scss b/src/components/Topic/Card.module.scss
index 88faeca1..e6755b0d 100644
--- a/src/components/Topic/Card.module.scss
+++ b/src/components/Topic/Card.module.scss
@@ -120,3 +120,7 @@
.isSubscribing {
color: transparent;
}
+
+.isSubscribed {
+ background: #000;
+}
diff --git a/src/components/Topic/Card.tsx b/src/components/Topic/Card.tsx
index 5dcf8c23..9d0a2592 100644
--- a/src/components/Topic/Card.tsx
+++ b/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()}
>
- -
+
diff --git a/src/styles/app.scss b/src/styles/app.scss
index 91400adc..f437819d 100644
--- a/src/styles/app.scss
+++ b/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;