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;