chore: mark as done overlay

src/components/TopicOverlay/TopicOverlay.astro

@@ -11,7 +11,7 @@ const { contentContributionLink } = Astro.props;
 
 <div id='topic-overlay' class='hidden'>
   <div
-    class='fixed top-0 right-0 z-40 h-screen p-4 sm:p-6 overflow-y-auto bg-white w-full sm:max-w-[600px]'
+    class='fixed top-0 right-0 z-40 h-screen w-full overflow-y-auto bg-white p-4 sm:max-w-[600px] sm:p-6'
     tabindex='-1'
     id='topic-body'
   >
@@ -19,13 +19,24 @@ const { contentContributionLink } = Astro.props;
       <Loader />
     </div>
 
-    <div id='topic-actions' class='hidden mb-2'>
+    <div id='topic-actions' class='mb-2 hidden'>
       <button
         data-popup='login-popup'
         ga-category='TopicClick'
         ga-action='topic/mark-completion'
         ga-label='done'
-        class='bg-green-600 text-white p-1 px-2 text-sm rounded-md hover:bg-green-700 inline-flex items-center'
+        class='inline-flex hidden items-center rounded-md bg-green-600 p-1 px-2 text-sm text-white hover:bg-green-700'
+        id='mark-topic-done-login'
+      >
+        <Icon icon='check' />
+        <span class='ml-2'>Mark as Done</span>
+      </button>
+      <button
+        id='mark-topic-done'
+        ga-category='TopicClick'
+        ga-action='topic/mark-completion'
+        ga-label='done'
+        class='inline-flex hidden items-center rounded-md bg-green-600 p-1 px-2 text-sm text-white hover:bg-green-700'
       >
         <Icon icon='check' />
         <span class='ml-2'>Mark as Done</span>
@@ -36,7 +47,7 @@ const { contentContributionLink } = Astro.props;
         ga-category='TopicClick'
         ga-action='topic/mark-completion'
         ga-label='pending'
-        class='hidden bg-red-600 text-white p-1 px-2 text-sm rounded-md hover:bg-red-700 items-center'
+        class='inline-flex hidden items-center rounded-md bg-red-600 p-1 px-2 text-sm text-white hover:bg-red-700'
       >
         <Icon icon='reset' />
         <span class='ml-2'>Mark as Pending</span>
@@ -45,7 +56,7 @@ const { contentContributionLink } = Astro.props;
       <button
         type='button'
         id='close-topic'
-        class='text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 absolute top-2.5 right-2.5 inline-flex items-center'
+        class='absolute top-2.5 right-2.5 inline-flex items-center rounded-lg bg-transparent p-1.5 text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900'
       >
         <Icon icon='close' />
       </button>
@@ -53,24 +64,41 @@ const { contentContributionLink } = Astro.props;
 
     <div
       id='topic-content'
-      class='prose prose-blockquote:not-italic prose-blockquote:text-gray-700 prose-quoteless prose-blockquote:font-normal prose-h1:mt-7 prose-h1:mb-2.5 prose-p:mt-0 prose-p:mb-2 prose-li:m-0 prose-li:mb-0.5 prose-h2:mb-3 prose-h2:mt-0 prose-h3:mt-[10px] prose-h3:mb-[5px]'
+      class='prose prose-quoteless prose-h1:mt-7 prose-h1:mb-2.5 prose-h2:mb-3 prose-h2:mt-0 prose-h3:mt-[10px] prose-h3:mb-[5px] prose-p:mt-0 prose-p:mb-2 prose-blockquote:font-normal prose-blockquote:not-italic prose-blockquote:text-gray-700 prose-li:m-0 prose-li:mb-0.5'
     >
     </div>
 
     <p
       id='contrib-meta'
-      class='text-gray-400 text-sm border-t pt-3 mt-10 hidden'
+      class='mt-10 hidden border-t pt-3 text-sm text-gray-400'
     >
       We are still working on this page. You can contribute by submitting a
       brief description and a few links to learn more about this topic <a
         target='_blank'
-        class='underline text-blue-700'
+        class='text-blue-700 underline'
         href={contentContributionLink}>on GitHub repository.</a
       >.
     </p>
   </div>
-  <div class='bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-30'>
+  <div class='fixed inset-0 z-30 bg-gray-900 bg-opacity-50 dark:bg-opacity-80'>
   </div>
 </div>
 
-<script src="./topic.js" />
+<script src='./topic.js'></script>
+<script>
+  import Cookies from 'js-cookie';
+  import { TOKEN_COOKIE_NAME } from '../../lib/constants';
+
+  const markDone = document.getElementById('mark-topic-done');
+  const loginMarkDone = document.getElementById('mark-topic-done-login');
+
+  const token = Cookies.get(TOKEN_COOKIE_NAME);
+
+  if (token) {
+    loginMarkDone?.classList.add('hidden');
+    markDone?.classList.remove('hidden');
+  } else {
+    loginMarkDone?.classList.remove('hidden');
+    markDone?.classList.add('!hidden');
+  }
+</script>