making bg and fg seperatte

mstarongithub · Apr 26, 2024 · 9650156 · 9650156
1 parent cb67f7e
commit 9650156
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 8 deletions.
diff --git a/frontend/src/lib/PluginListing.svelte b/frontend/src/lib/PluginListing.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+ import Icon from '@iconify/svelte';
+
  export let pluginName: string = 'Pronoun Plugin';
  export let shortDesc: string = 'Easily see everyones pronouns when you are looking at a post';
  export let tags: string[] = ['Plugin', 'Quality Of Life'];
@@ -8,18 +10,31 @@
  };
  export let isNew: boolean = false;
 
+ export let showExtraOptions: boolean = false;
+
  export let className = '';
 </script>
 
-<div class="card w-96 bg-base-100 shadow-xl {className}">
+<div class="card w-96 bg-base-200 shadow-xl {className}">
  <figure>
  <img src={imageData.imageURL} alt={imageData.alt} />
  </figure>
  <div class="card-body">
  <h2 class="card-title">
- {pluginName}
- {#if isNew}
- <div class="badge badge-secondary">NEW</div>
+ <p>
+ {pluginName}
+ {#if isNew}
+ <div class="badge badge-secondary">NEW</div>
+ {/if}
+ </p>
+
+ {#if showExtraOptions}
+ <details class="dropdown dropdown-end">
+ <summary class="m-1 btn"><Icon icon="charm:menu-meatball" /></summary>
+ <ul class="p-2 shadow menu dropdown-content z-[1] bg-base-100 rounded-box w-52">
+ <li><button>Edit</button></li>
+ </ul>
+ </details>
  {/if}
  </h2>
  <p>{shortDesc}</p>

diff --git a/frontend/src/lib/components/TagField.svelte b/frontend/src/lib/components/TagField.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
- let cachedTags = ['Testing', 'One', 'Two', 'Three', 'Fun', 'Tool'] as string[];
+ let cachedTags = ['Fun', 'Tool'] as string[];
  export let tags: string[] = [];
 
  let hasFocus = false;

diff --git a/frontend/src/routes/plugin/+page.svelte b/frontend/src/routes/plugin/+page.svelte
@@ -83,19 +83,20 @@
 
 <Navbar></Navbar>
 
-<div class="flex flex-col gap-2 justify-center items-center">
+<div class="flex flex-col gap-4 justify-center items-center">
  <!-- grid-cols-3 -->
  {#if selectedPluginData}
  <PluginListing
  className="lg:card-side !w-10/12 !h-3/4"
  pluginName={selectedPluginData.name}
  shortDesc={selectedPluginData.summary_long}
  tags={selectedPluginData.tags}
+ showExtraOptions={true}
  ></PluginListing>
  {/if}
 
  <div
- class="card flex flex-row items-center justify-between !w-10/12 !h-3/4 bg-base-100 shadow-xl overflow-clip p-4"
+ class="card flex flex-row items-center justify-between !w-10/12 !h-3/4 bg-base-200 shadow-xl overflow-clip p-4"
  >
  <div class="flex flex-row items-center">
  <select
@@ -136,7 +137,7 @@
  </div>
  {/if}
 
- <div class="card !w-10/12 !h-3/4 bg-base-100 shadow-xl overflow-clip">
+ <div class="card !w-10/12 !h-3/4 bg-base-200 shadow-xl overflow-clip">
  <PluginCode bind:code></PluginCode>
  </div>
 </div>