Theme

src/App.svelte

@@ -2,11 +2,11 @@
     import { Router, Route } from "svelte-routing";
     import "./app.css";
     import Navbar from "$lib/components/Navbar.svelte";
-    import ProfileView from "$lib/components/ProfileView.svelte";
-    import UserProfile from "$lib/components/UserProfile.svelte";
+    import ProfileView from "$lib/components/views/profile/ProfileView.svelte";
+    import UserProfile from "$lib/components/views/profile/UserProfile.svelte";
     import CreatePostModal from "$lib/components/CreateMeme.svelte";
     import Feed from "$lib/components/Feed.svelte";
-    import Explore from "$lib/components/Explore.svelte";
+    import Explore from "$lib/components/views/explore/Explore.svelte";
     import {
         Home as HomeIcon,
         Search,
@@ -26,12 +26,12 @@
         AvatarImage,
     } from "$lib/components/ui/avatar";
     import { Profile } from "$lib/ao/messegeFactory.svelte";
-    import LowerProfile from "$lib/components/LowerProfile.svelte";
+    import LowerProfile from "$lib/components/views/profile/LowerProfile.svelte";
 
     export let url = "";
 
     let isCreatePostModalOpen = false;
-    let profile:any;
+    let profile: any;
     function toUrl(tx: string) {
         return (
             "https://7emz5ndufz7rlmskejnhfx3znpjy32uw73jm46tujftmrg5mdmca.arweave.net/" +
@@ -61,24 +61,22 @@
 <Router {url}>
     <div class="flex h-screen overflow-hidden">
         <aside
-            class="w-64 bg-white shadow-lg flex flex-col justify-between p-4"
+            class="w-64 bg-background-500 shadow-lg flex flex-col justify-between p-4"
         >
             <div class="space-y-4 pt-16">
-
                 <nav>
                     <ul class="space-y-2">
                         {#each menuItems as item}
                             <li>
                                 <a
                                     href={item.href}
-                                    class="flex items-center p-2 rounded-full hover:bg-secondary-100 transition-colors duration-200"
+                                    class="flex items-center p-2 px-2 rounded-full hover:bg-background-700 transition-colors duration-200"
                                 >
                                     <svelte:component
                                         this={item.icon}
-                                        class="w-6 h-6 mr-4 text-primary-500"
+                                        class="w-6 h-6 mr-4 text-primary-50"
                                     />
-                                    <span
-                                        class="text-lg font-medium text-gray-700"
+                                    <span class="text-lg font-medium text-white"
                                         >{item.label}</span
                                     >
                                 </a>
@@ -87,12 +85,12 @@
                         <li>
                             <button
                                 on:click={toggleCreatePostModal}
-                                class="flex items-center p-2 rounded-full hover:bg-secondary-100 transition-colors duration-200"
+                                class="flex items-center p-2 px-5 rounded-full hover:bg-background-700 transition-colors duration-200"
                             >
                                 <MoreHorizontal
-                                    class="w-6 h-6 mr-4 text-primary-500"
+                                    class="w-6 h-6 mr-4 text-white"
                                 />
-                                <span class="text-lg font-medium text-gray-700"
+                                <span class="text-lg font-medium text-white"
                                     >More</span
                                 >
                             </button>
@@ -101,18 +99,18 @@
                 </nav>
                 <button
                     on:click={toggleCreatePostModal}
-                    class="w-full bg-black text-white rounded-full py-3 font-bold text-lg hover:bg-secondary-600 transition-colors duration-200 flex items-center justify-center"
+                    class="w-full bg-background-700 text-white rounded-full py-3 font-bold text-lg hover:bg-primary-50 transition-colors duration-200 flex items-center justify-center"
                 >
                     <Plus class="w-5 h-5 mr-2" />
                     Post
                 </button>
             </div>
             <div class="p-4">
-                <LowerProfile/>
+                <LowerProfile />
             </div>
         </aside>
 
-        <main class="flex-1 overflow-y-auto bg-[#FFF0F5]">
+        <main class="flex-1 overflow-y-auto bg-background-500">
             <Navbar />
             <div class="container mx-auto px-4 pt-16">
                 <Route path="/feed" component={Feed} />

src/app.css

@@ -1,42 +1,3 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
-
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 240 10% 3.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 240 10% 3.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 240 10% 3.9%;
-    --primary: 240 5.9% 10%;
-    --primary-foreground: 0 0% 98%;
-    --secondary: 240 4.8% 95.9%;
-    --secondary-foreground: 240 5.9% 10%;
-    --muted: 240 4.8% 95.9%;
-    --muted-foreground: 240 3.8% 45%;
-    --accent: 240 4.8% 95.9%;
-    --accent-foreground: 240 5.9% 10%;
-    --destructive: 0 72% 51%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 240 5.9% 90%;
-    --input: 240 5.9% 90%;
-    --ring: 240 5.9% 10%;
-    --radius: 0.5rem;
-  }
-}
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-
-  body {
-    @apply bg-background text-foreground font-body;
-  }
-
-  h1, h2, h3, h4, h5, h6 {
-    @apply font-heading;
-  }
-}
+@tailwind utilities;

src/lib/Feed.svelte

@@ -1,31 +1,25 @@
 <script lang="ts">
-  //@ts-nocheck
-  import { onMount } from 'svelte';
-  import Tweet from '$lib/components/Tweet.svelte';
-  import { fetchMemes } from './ao/mememaker';
-  import type { Meme } from "$lib/models/Meme";
+    //@ts-nocheck
+    import { onMount } from "svelte";
+    import Tweet from "$lib/components/Tweet.svelte";
+    import { fetchMemes } from "./ao/mememaker";
+    import type { Meme } from "$lib/models/Meme";
 
-  let memes: Meme[] = [];
+    let memes: Meme[] = [];
 
-  onMount(async () => {
-    try {
-      memes = await fetchMemes("1", "100");
-    } catch (error) {
-      console.error('Error fetching memes:', error);
-    }
-  });
+    onMount(async () => {
+        try {
+            memes = await fetchMemes("1", "100");
+        } catch (error) {
+            console.error("Error fetching memes:", error);
+        }
+    });
 </script>
 
 <div class="max-w-4xl mx-auto p-4">
-  <div class="space-y-6">
-    {#each memes as meme (meme.Pool)}
-      <Tweet {meme} />
-    {/each}
-  </div>
+    <div class="space-y-6">
+        {#each memes as meme (meme.Pool)}
+            <Tweet {meme} />
+        {/each}
+    </div>
 </div>
-
-<style>
-  :global(body) {
-    background-color: #e3f2fd;
-  }
-</style>

src/lib/components/CreateMeme.svelte

@@ -6,7 +6,7 @@
   import { Image, XCircle, CheckCircle } from "lucide-svelte";
   import { upload } from "$lib/ao/uploader";
   import { Video } from "flowbite-svelte";
-  import mime from 'mime';
+  import mime from "mime";
   export let isOpen = false;
   let quantity = "";
   let amount = "";
@@ -30,14 +30,14 @@
     parent: z.string().nullable().optional(),
   });
 
-  function getExt(name:string) {
+  function getExt(name: string) {
     let mimeType = mime.getType(name);
     let ext = mime.getExtension(mimeType);
-    console.log(name);
-    console.log(mimeType);
-    console.log(ext);
-    return ext
-  };
+    // console.log(name);
+    // console.log(mimeType);
+    // console.log(ext);
+    return ext;
+  }
 
   async function create_meme() {
     try {
@@ -112,7 +112,7 @@
   }
 
   function removeSelectedImage() {
-    selectedImage = null;
+    // selectedImage = null;
     imagePreviewUrl = null;
     if (fileInput) {
       fileInput.value = "";

src/lib/components/Feed.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-  import { onMount } from 'svelte';
-  import Tweet from '$lib/components/Tweet.svelte';
-  import { fetchMemes } from '$lib/ao/mememaker';
+  import { onMount } from "svelte";
+  import Tweet from "$lib/components/Tweet.svelte";
+  import { fetchMemes } from "$lib/ao/mememaker";
   import type { Meme } from "$lib/models/Meme";
-  import Spinner from '$lib/components/Spinner.svelte';
+  import Spinner from "$lib/components/Spinner.svelte";
 
   let memes: Meme[] = [];
   let loading = true;
@@ -12,19 +12,18 @@
     try {
       memes = await fetchMemes("1", "100");
     } catch (error) {
-      console.error('Error fetching memes:', error);
+      console.error("Error fetching memes:", error);
     } finally {
       loading = false;
     }
   });
 </script>
 
-<div class="max-w-4xl mx-auto p-4">
+<div class="max-w-4xl mx-auto p-4 bg-background-500">
   {#if loading}
-  <div>
-    <Spinner />
-  </div>
-
+    <div>
+      <Spinner />
+    </div>
   {:else}
     <div class="space-y-6">
       {#each memes as meme (meme.Pool)}
@@ -35,7 +34,4 @@
 </div>
 
 <style>
-  :global(body) {
-    background-color: #e3f2fd;
-  }
-</style>
+</style>