Fix style diffs on prod and dev

src/app.postcss

@@ -9,6 +9,9 @@ html {
   --scrollbarBG: #fff;
   --thumbBG: #ccc;
   scroll-behavior: smooth;
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
+    Helvetica Neue, Arial, Noto Sans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+    Segoe UI Symbol, 'Noto Color Emoji' !important;
 }
 
 #calendar .grid {

src/lib/components/Courses/components/Card/index.svelte

@@ -54,14 +54,14 @@
   class=" text-black w-fit"
 >
   <div
-    class="border border-gray w-full max-w-[350px] relative hover:shadow-lg transition-all ease-in-out"
+    class="border border-gray rounded w-full max-w-[350px] relative hover:shadow-lg transition-all ease-in-out"
   >
     <div class="p-4">
       <div class=" mb-5">
         <ImageLoader
           src={bannerImage ?? '/images/classroomio-course-img-template.jpg'}
           alt="Course Logo"
-          class="h-2/5 w-full rounded"
+          class="h-2/5 w-full rounded dark:border dark:border-white"
         >
           <svelte:fragment slot="loading">
             <SkeletonPlaceholder style="width: 100%; height: 10rem;" />

src/lib/components/PrimaryButton/index.svelte

@@ -22,7 +22,7 @@
     : 'cursor-pointer'} flex items-center h-auto {VARIANTS_CLASS[
     isLoading ? VARIANTS.OUTLINED : variant
   ]} {!disablePadding &&
-    'py-[0.5rem] px-6'} rounded-md {className} w-fit justify-center sm:w-auto {isLoading &&
+    'py-[0.5rem] px-6'} rounded-md {className} w-fit min-h-[36px] justify-center sm:w-auto {isLoading &&
     'py-[1rem] border-primary-700'} {variant !== VARIANTS.TEXT &&
     'hover:shadow-xl'} transition delay-150 duration-300 ease-in-out {variant !==
   VARIANTS.CONTAINED_WHITE