Merge pull request #306 from xyvora/fade-in

Add page fade in to layout to remove duplication
xyvora · Aug 10, 2023 · a98fb5f · a98fb5f
2 parents a19790b + f37b147
commit a98fb5f
Show file tree

Hide file tree

Showing 8 changed files with 15 additions and 104 deletions.
diff --git a/frontend/src/lib/components/AccountInfoForm.svelte b/frontend/src/lib/components/AccountInfoForm.svelte
@@ -354,18 +354,3 @@
     </div>
   </form>
 </div>
-
-<style>
-  @keyframes fadeIn {
-    from {
-      opacity: 0;
-    }
-    to {
-      opacity: 1;
-    }
-  }
-
-  .page-fade-in {
-    animation: fadeIn 1s ease-in-out;
-  }
-</style>
diff --git a/frontend/src/lib/components/Navbar.svelte b/frontend/src/lib/components/Navbar.svelte
@@ -144,18 +144,3 @@
     </div>
   </div>
 </div>
-
-<style>
-  @keyframes fadeIn {
-    from {
-      opacity: 0;
-    }
-    to {
-      opacity: 1;
-    }
-  }
-
-  .page-fade-in {
-    animation: fadeIn 1s ease-in-out;
-  }
-</style>
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
@@ -7,3 +7,18 @@
   <Navbar />
   <slot />
 </div>
+
+<style>
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  :global(.page-fade-in) {
+    animation: fadeIn 1s ease-in-out;
+  }
+</style>
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
@@ -787,19 +787,4 @@
       </div>
     </div>
   {/if}
-
-  <style>
-    @keyframes fadeIn {
-      from {
-        opacity: 0;
-      }
-      to {
-        opacity: 1;
-      }
-    }
-
-    .page-fade-in {
-      animation: fadeIn 1s ease-in-out;
-    }
-  </style>
 </div>
diff --git a/frontend/src/routes/create-goals/+page.svelte b/frontend/src/routes/create-goals/+page.svelte
@@ -513,18 +513,3 @@
     </div>
   </div>
 </div>
-
-<style>
-  @keyframes fadeIn {
-    from {
-      opacity: 0;
-    }
-    to {
-      opacity: 1;
-    }
-  }
-
-  .page-fade-in {
-    animation: fadeIn 1s ease-in-out;
-  }
-</style>
diff --git a/frontend/src/routes/edit-goal/+page.svelte b/frontend/src/routes/edit-goal/+page.svelte
@@ -494,18 +494,3 @@
     </div>
   </div>
 </div>
-
-<style>
-  @keyframes fadeIn {
-    from {
-      opacity: 0;
-    }
-    to {
-      opacity: 1;
-    }
-  }
-
-  .page-fade-in {
-    animation: fadeIn 1s ease-in-out;
-  }
-</style>
diff --git a/frontend/src/routes/forgot-password/+page.svelte b/frontend/src/routes/forgot-password/+page.svelte
@@ -162,18 +162,3 @@
     </figure>
   </form>
 </div>
-
-<style>
-  @keyframes fadeIn {
-    from {
-      opacity: 0;
-    }
-    to {
-      opacity: 1;
-    }
-  }
-
-  .page-fade-in {
-    animation: fadeIn 1s ease-in-out;
-  }
-</style>
diff --git a/frontend/src/routes/signup/+page.svelte b/frontend/src/routes/signup/+page.svelte
@@ -7,18 +7,4 @@
   <main>
     <AccountInfoForm />
   </main>
-  <style>
-    @keyframes fadeIn {
-      from {
-        opacity: 0;
-      }
-      to {
-        opacity: 1;
-      }
-    }
-
-    .page-fade-in {
-      animation: fadeIn 1s ease-in-out;
-    }
-  </style>
 </div>