Merge pull request #866 from tutors-sdk/ux/dynamic-footer

home and auth styles + dynamic footer

src/lib/ui/navigators/footers/TutorsMessage.svelte

@@ -1,11 +1,20 @@
 <script lang="ts">
   import { convertMdToHtml } from "$lib/services/models/markdown-utils";
+  import { onMount } from "svelte";
 
-  interface Props {
-    content?: string;
-  }
-  let { content = "An [Open Learning Web Toolkit](/course/tutors-reference-manual)" }: Props = $props();
-  let contentHtml = convertMdToHtml(content);
+  let contentHtml = "";
+
+  onMount(async () => {
+    try {
+      const response = await fetch("https://msg.tutors.dev/msg.json");
+      const data = await response.json();
+      contentHtml = convertMdToHtml(data.footerMessage);
+    } catch (error) {
+      console.error("Failed to fetch message:", error);
+      // Fallback message if fetch fails
+      contentHtml = convertMdToHtml("An [Open Learning Web Toolkit](/course/tutors-reference-manual)");
+    }
+  });
 </script>
 
 <p class="prose prose-sm prose-slate dark:prose-invert">

src/routes/(auth)/auth/SigninWithGithub.svelte

@@ -18,18 +18,22 @@
   }
 </script>
 
-<div class="bg-surface-100-800-token mx-auto mb-2 place-items-center overflow-hidden rounded-xl p-4">
+<div class="bg-surface-100-800 mx-auto mb-2 place-items-center overflow-hidden rounded-xl p-4">
   <div class="flex flex-wrap justify-center">
-    <div class="card w-4/5 border-y-8 !bg-surface-50 dark:!bg-surface-700 border-{getIcon('note').color}-500 m-2">
+    <div class="card !bg-surface-50 dark:!bg-surface-700 w-4/5 border-y-8 border-{getIcon('note').color}-500 m-2">
       <header class="card-header flex flex-row items-center justify-between p-3">
         <div class="flex-auto text-center !text-black dark:!text-white">Tutors Sign In</div>
       </header>
       <footer class="card-footer">
-        <div class="bg-surface-100-800-token mx-auto mb-2 place-items-center overflow-hidden rounded-xl p-4">
+        <div class="bg-surface-100-800 mx-auto mb-2 place-items-center overflow-hidden rounded-xl p-4">
           <div class="flex flex-wrap justify-center">
-            <button type="button" class="variant-filled btn w-full" onclick={handleSignInWithProgress}>
+            <button
+              type="button"
+              class="btn bg-primary-500 hover:bg-primary-600 w-2/3 transform text-white transition-transform hover:scale-105"
+              onclick={handleSignInWithProgress}
+            >
               {#if showProgress}
-                <Progress width="w-8" />
+                <Progress width="w-32" />
               {:else}
                 <span><Icon icon="mdi:github" /></span>
                 <span>Sign in with GitHub</span>
@@ -39,7 +43,7 @@
         </div>
       </footer>
     </div>
-    <div class="card w-4/5 border-y-8 !bg-surface-50 dark:!bg-surface-700 border-{getIcon('topic').color}-500 m-2">
+    <div class="card !bg-surface-50 dark:!bg-surface-700 w-4/5 border-y-8 border-{getIcon('topic').color}-500 m-2">
       <footer class="card-footer mt-4">
         <article class="prose mx-auto w-[80%] max-w-none dark:prose-invert">
           <TutorsTerms />

src/routes/(home)/+page.svelte

@@ -5,8 +5,8 @@
   import Welcome from "./Welcome.svelte";
 </script>
 
-<div class="to-accent-50 dark:to-accent-900 bg-gradient-to-l from-primary-50 dark:from-primary-900">
-  <div class="container mx-auto items-center justify-between lg:flex">
+<div class="card to-accent-50 dark:to-accent-900 from-primary-50 dark:from-primary-900 m-4 border bg-gradient-to-l">
+  <div class="container mx-auto mt-2 items-center justify-between lg:flex">
     <div class="mx-4">
       <Welcome />
     </div>

src/routes/(home)/CourseList.svelte

@@ -15,12 +15,12 @@
   }
 </script>
 
-<div class="container card mx-auto my-4 p-8">
+<div class="card container mx-auto my-1 p-4">
   <p class="pb-4 text-2xl">Your previously accessed courses</p>
   <div class="mx-auto grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3">
     {#each courseVisits as courseVisit}
       <div
-        class="to-accent-50 dark:to-accent-900 card card-hover m-2 border bg-gradient-to-l from-primary-50 p-2 dark:from-primary-900"
+        class="to-accent-50 dark:to-accent-900 card card-hover from-primary-50 dark:from-primary-900 m-2 border bg-gradient-to-l p-2"
       >
         <div class="flex justify-between">
           <section class="p-4">
@@ -43,11 +43,11 @@
         <footer class="card-footer p-0">
           <div class="flex w-full">
             <a
-              class="variant-filled-primary btn m-0 w-2/3 rounded-t-none rounded-br-none hover:preset-tonal"
+              class="variant-filled-primary btn hover:preset-tonal m-0 w-2/3 rounded-t-none rounded-br-none"
               href={"/course/" + courseVisit.id}>Visit Course</a
             >
             <button
-              class="variant-filled-error btn m-0 w-1/3 rounded-t-none rounded-bl-none hover:preset-tonal"
+              class="variant-filled-error btn hover:preset-tonal m-0 w-1/3 rounded-t-none rounded-bl-none"
               onclick={() => deleteCourse(courseVisit.id)}>Delete</button
             >
           </div>

src/routes/(home)/TutorsInfo.svelte

@@ -1,7 +1,7 @@
 <h1 class="my-4 inline-block !text-4xl font-bold">
   Tutors:An
   <span
-    class="inline-block bg-gradient-to-br from-primary-500 to-secondary-500 box-decoration-clone bg-clip-text !text-4xl font-bold text-transparent"
+    class="from-primary-500 to-secondary-500 inline-block bg-gradient-to-br box-decoration-clone bg-clip-text !text-4xl font-bold text-transparent"
     >Open Learning
   </span>
   Web Toolkit