feat: add classroomio badge (#239)

* working on the classroomio badge

* still working on the classroomio badge

* updated the classroomio badge

* making some changes

* implemented the animation and some other updates

* chore: improve styling

* increase font weigth

---------

Co-authored-by: Rotimi Best <best@classroomio.com>

apps/dashboard/src/routes/org/[slug]/community/+page.svelte

@@ -2,6 +2,7 @@
   import { goto } from '$app/navigation';
   import Community from '$lib/components/Org/Community/index.svelte';
   import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
+  import { VARIANTS } from '$lib/components/PrimaryButton/constants';
   import { currentOrgPath } from '$lib/utils/store/org';
   import { isMobile } from '$lib/utils/store/useMobile';
   import Add from 'carbon-icons-svelte/lib/Add.svelte';
@@ -24,7 +25,11 @@
           <Add size={24} />
         </PrimaryButton>
       {:else}
-        <PrimaryButton label="Ask Community" onClick={askCommunity} />
+        <PrimaryButton
+          label="Ask Community"
+          variant={VARIANTS.CONTAINED_DARK}
+          onClick={askCommunity}
+        />
       {/if}
     </div>
     <Community />

apps/dashboard/src/routes/org/[slug]/community/ask/+page.svelte

@@ -4,6 +4,7 @@
   import ArrowLeftIcon from 'carbon-icons-svelte/lib/ArrowLeft.svelte';
   import { currentOrgPath, currentOrg } from '$lib/utils/store/org';
   import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
+  import { VARIANTS } from '$lib/components/PrimaryButton/constants';
   import { askCommunityValidation } from '$lib/utils/functions/validator';
   import { supabase } from '$lib/utils/functions/supabase';
   import { snackbar } from '$lib/components/Snackbar/store';
@@ -86,7 +87,7 @@
     </a>
     <div class="flex items-center gap-12 justify-between">
       <h1 class="dark:text-white text-2xl md:text-3xl font-bold">Ask the community</h1>
-      <PrimaryButton label="Publish" onClick={handleSave} />
+      <PrimaryButton label="Publish" variant={VARIANTS.CONTAINED_DARK} onClick={handleSave} />
     </div>
   </div>