Follow topic btn (#291)

* Follow topic btn

src/components/Topic/Full.module.scss

@@ -15,16 +15,22 @@
 .topicActions {
   margin-top: 2.8rem;
 
-  button,
-  a {
-    background: #000;
+  .write {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: 40px;
+    min-width: 64px;
+    font-size: 17px;
+    padding: 8px 16px;
+
+    background: var(--background-color-invert);
+    color: var(--default-color-invert);
     border: none;
+    font-weight: 500;
     border-radius: 2px;
-    color: #fff;
     cursor: pointer;
-    font-size: 100%;
     margin: 0 1.2rem 1em;
-    padding: 0.8rem 1.6rem;
     white-space: nowrap;
   }
 }

src/components/Topic/Full.tsx

@@ -7,6 +7,7 @@ import { follow, unfollow } from '../../stores/zine/common'
 import { clsx } from 'clsx'
 import { useSession } from '../../context/session'
 import { useLocalize } from '../../context/localize'
+import { Button } from '../_shared/Button'
 
 type Props = {
   topic: Topic
@@ -15,7 +16,7 @@ type Props = {
 export const FullTopic = (props: Props) => {
   const {
     subscriptions,
-    actions: { requireAuthentication }
+    actions: { requireAuthentication, loadSubscriptions }
   } = useSession()
 
   const { t } = useLocalize()
@@ -24,13 +25,12 @@ export const FullTopic = (props: Props) => {
     subscriptions().topics.some((topic) => topic.slug === props.topic?.slug)
   )
 
-  const handleSubscribe = (isFollowed: boolean) => {
-    requireAuthentication(() => {
-      if (isFollowed) {
-        unfollow({ what: FollowingEntity.Topic, slug: props.topic.slug })
-      } else {
-        follow({ what: FollowingEntity.Topic, slug: props.topic.slug })
-      }
+  const handleSubscribe = (really: boolean) => {
+    requireAuthentication(async () => {
+      await (really
+        ? follow({ what: FollowingEntity.Topic, slug: props.topic.slug })
+        : unfollow({ what: FollowingEntity.Topic, slug: props.topic.slug }))
+      loadSubscriptions()
     }, 'follow')
   }
 
@@ -40,16 +40,18 @@ export const FullTopic = (props: Props) => {
       <p>{props.topic.body}</p>
       <div class={clsx(styles.topicActions)}>
         <Show when={!subscribed()}>
-          <button onClick={() => handleSubscribe(false)} class="button">
-            {t('Follow the topic')}
-          </button>
+          <Button variant="primary" onClick={() => handleSubscribe(true)} value={t('Follow the topic')} />
         </Show>
         <Show when={subscribed()}>
-          <button onClick={() => handleSubscribe(true)} class="button">
-            {t('Unfollow the topic')}
-          </button>
+          <Button
+            variant="primary"
+            onClick={() => handleSubscribe(false)}
+            value={t('Unfollow the topic')}
+          />
         </Show>
-        <a href={`/create/?topicId=${props.topic.id}`}>{t('Write about the topic')}</a>
+        <a class={styles.write} href={`/create/?topicId=${props.topic.id}`}>
+          {t('Write about the topic')}
+        </a>
       </div>
       <Show when={props.topic.pic}>
         <img src={props.topic.pic} alt={props.topic.title} />

src/components/_shared/Button/Button.module.scss

@@ -8,8 +8,8 @@
   white-space: nowrap;
 
   &.primary {
-    background: #000;
-    color: #fff;
+    background: var(--background-color-invert);
+    color: var(--default-color-invert);
 
     &:hover {
       color: #ccc;