add calendar

package-lock.json

@@ -18,6 +18,7 @@
         "ua-parser-js": "^1.0.37"
       },
       "devDependencies": {
+        "@internationalized/date": "^3.5.5",
         "@playwright/test": "^1.43.1",
         "@rollup/plugin-dynamic-import-vars": "^2.1.2",
         "@sveltejs/adapter-vercel": "^5.3.0",
@@ -1744,10 +1745,11 @@
       }
     },
     "node_modules/@internationalized/date": {
-      "version": "3.5.4",
+      "version": "3.5.5",
-      "resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.5.4.tgz",
+      "resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.5.5.tgz",
-      "integrity": "sha512-qoVJVro+O0rBaw+8HPjUB1iH8Ihf8oziEnqMnvhJUSuVIrHOuZ6eNLHNvzXJKUvAtaDiqMnRlg8Z2mgh09BlUw==",
+      "integrity": "sha512-H+CfYvOZ0LTJeeLOqm19E3uj/4YjrmOFtBufDHPfvtI80hFAMqtrp7oCACpe4Cil5l8S0Qu/9dYfZc/5lY8WQQ==",
       "dev": true,
+      "license": "Apache-2.0",
       "dependencies": {
         "@swc/helpers": "^0.5.0"
       }

package.json

@@ -18,6 +18,7 @@
     "test:safari": "npx playwright test --headed --project=safari"
   },
   "devDependencies": {
+    "@internationalized/date": "^3.5.5",
     "@playwright/test": "^1.43.1",
     "@rollup/plugin-dynamic-import-vars": "^2.1.2",
     "@sveltejs/adapter-vercel": "^5.3.0",

src/lib/components/shadcn/calendar/calendar-cell.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = CalendarPrimitive.CellProps;
+
+	export let date: $$Props["date"];
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.Cell
+	{date}
+	class={cn(
+		"[&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-month])]:bg-accent/50 relative h-9 w-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md",
+		className
+	)}
+	{...$$restProps}
+>
+	<slot />
+</CalendarPrimitive.Cell>

src/lib/components/shadcn/calendar/calendar-day.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { buttonVariants } from "$lib/components/shadcn/button/index.js";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = CalendarPrimitive.DayProps;
+	type $$Events = CalendarPrimitive.DayEvents;
+
+	export let date: $$Props["date"];
+	export let month: $$Props["month"];
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.Day
+	on:click
+	{date}
+	{month}
+	class={cn(
+		buttonVariants({ variant: "ghost" }),
+		"h-9 w-9 p-0 font-normal ",
+		"[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground",
+		// Selected
+		"data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground data-[selected]:opacity-100",
+		// Disabled
+		"data-[disabled]:text-muted-foreground data-[disabled]:opacity-50",
+		// Unavailable
+		"data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through",
+		// Outside months
+		"data-[outside-month]:text-muted-foreground [&[data-outside-month][data-selected]]:bg-accent/50 [&[data-outside-month][data-selected]]:text-muted-foreground data-[outside-month]:pointer-events-none data-[outside-month]:opacity-50 [&[data-outside-month][data-selected]]:opacity-30",
+		className
+	)}
+	{...$$restProps}
+	let:selected
+	let:disabled
+	let:unavailable
+	let:builder
+>
+	<slot {selected} {disabled} {unavailable} {builder}>
+		{date.day}
+	</slot>
+</CalendarPrimitive.Day>

src/lib/components/shadcn/calendar/calendar-grid-body.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = CalendarPrimitive.GridBodyProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.GridBody class={cn(className)} {...$$restProps}>
+	<slot />
+</CalendarPrimitive.GridBody>

src/lib/components/shadcn/calendar/calendar-grid-head.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = CalendarPrimitive.GridHeadProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.GridHead class={cn(className)} {...$$restProps}>
+	<slot />
+</CalendarPrimitive.GridHead>

src/lib/components/shadcn/calendar/calendar-grid-row.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = CalendarPrimitive.GridRowProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.GridRow class={cn("flex", className)} {...$$restProps}>
+	<slot />
+</CalendarPrimitive.GridRow>

src/lib/components/shadcn/calendar/calendar-grid.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = CalendarPrimitive.GridProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.Grid class={cn("w-full border-none space-y-1", className)} {...$$restProps}>
+	<slot />
+</CalendarPrimitive.Grid>

src/lib/components/shadcn/calendar/calendar-head-cell.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = CalendarPrimitive.HeadCellProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.HeadCell
+	class={cn("text-white w-9 rounded-md text-[0.8rem] font-normal", className)}
+	{...$$restProps}
+>
+	<slot />
+</CalendarPrimitive.HeadCell>

src/lib/components/shadcn/calendar/calendar-header.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = CalendarPrimitive.HeaderProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.Header
+	class={cn("relative flex w-full items-center justify-between pt-1", className)}
+	{...$$restProps}
+>
+	<slot />
+</CalendarPrimitive.Header>

src/lib/components/shadcn/calendar/calendar-heading.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = CalendarPrimitive.HeadingProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.Heading
+	let:headingValue
+	class={cn("text-sm font-medium", className)}
+	{...$$restProps}
+>
+	<slot {headingValue}>
+		{headingValue}
+	</slot>
+</CalendarPrimitive.Heading>

src/lib/components/shadcn/calendar/calendar-months.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<div
+	class={cn("mt-4 text-white flex flex-col space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0", className)}
+	{...$$restProps}
+>
+	<slot />
+</div>

src/lib/components/shadcn/calendar/calendar-next-button.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import ChevronRight from "lucide-svelte/icons/chevron-right";
+	import { buttonVariants } from "$lib/components/shadcn/button/index.js";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = CalendarPrimitive.NextButtonProps;
+	type $$Events = CalendarPrimitive.NextButtonEvents;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.NextButton
+	on:click
+	class={cn(
+		buttonVariants({ variant: "outline" }),
+		"h-7 w-7 bg-transparent p-0 opacity-80 hover:opacity-100",
+		className
+	)}
+	{...$$restProps}
+	let:builder
+>
+	<slot {builder}>
+		<ChevronRight class="h-4 w-4" />
+	</slot>
+</CalendarPrimitive.NextButton>

src/lib/components/shadcn/calendar/calendar-prev-button.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import ChevronLeft from "lucide-svelte/icons/chevron-left";
+	import { buttonVariants } from "$lib/components/shadcn/button/index.js";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = CalendarPrimitive.PrevButtonProps;
+	type $$Events = CalendarPrimitive.PrevButtonEvents;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.PrevButton
+	on:click
+	class={cn(
+		buttonVariants({ variant: "outline" }),
+		"h-7 w-7 bg-transparent p-0 opacity-80 hover:opacity-100",
+		className
+	)}
+	{...$$restProps}
+	let:builder
+>
+	<slot {builder}>
+		<ChevronLeft class="h-4 w-4" />
+	</slot>
+</CalendarPrimitive.PrevButton>

src/lib/components/shadcn/calendar/calendar.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import * as Calendar from "./index.js";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = CalendarPrimitive.Props;
+
+	type $$Events = CalendarPrimitive.Events;
+
+	export let value: $$Props["value"] = undefined;
+	export let placeholder: $$Props["placeholder"] = undefined;
+	export let weekdayFormat: $$Props["weekdayFormat"] = "short";
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<CalendarPrimitive.Root
+	bind:value
+	bind:placeholder
+	{weekdayFormat}
+	class={cn("p-3", className)}
+	{...$$restProps}
+	on:keydown
+	let:months
+	let:weekdays
+>
+	<Calendar.Header>
+		<Calendar.PrevButton />
+		<Calendar.Heading />
+		<Calendar.NextButton />
+	</Calendar.Header>
+	<Calendar.Months >
+		{#each months as month}
+			<Calendar.Grid>
+				<Calendar.GridHead >
+					<Calendar.GridRow class="flex">
+						{#each weekdays as weekday}
+							<Calendar.HeadCell class="text-white">
+								{weekday.slice(0, 2)}
+							</Calendar.HeadCell>
+						{/each}
+					</Calendar.GridRow>
+				</Calendar.GridHead>
+				<Calendar.GridBody>
+					{#each month.weeks as weekDates}
+						<Calendar.GridRow class="mt-2 w-full">
+							{#each weekDates as date}
+								<Calendar.Cell {date}>
+									<Calendar.Day {date} month={month.value} />
+								</Calendar.Cell>
+							{/each}
+						</Calendar.GridRow>
+					{/each}
+				</Calendar.GridBody>
+			</Calendar.Grid>
+		{/each}
+	</Calendar.Months>
+</CalendarPrimitive.Root>

src/lib/components/shadcn/calendar/index.ts

@@ -0,0 +1,30 @@
+import Root from "./calendar.svelte";
+import Cell from "./calendar-cell.svelte";
+import Day from "./calendar-day.svelte";
+import Grid from "./calendar-grid.svelte";
+import Header from "./calendar-header.svelte";
+import Months from "./calendar-months.svelte";
+import GridRow from "./calendar-grid-row.svelte";
+import Heading from "./calendar-heading.svelte";
+import GridBody from "./calendar-grid-body.svelte";
+import GridHead from "./calendar-grid-head.svelte";
+import HeadCell from "./calendar-head-cell.svelte";
+import NextButton from "./calendar-next-button.svelte";
+import PrevButton from "./calendar-prev-button.svelte";
+
+export {
+	Day,
+	Cell,
+	Grid,
+	Header,
+	Months,
+	GridRow,
+	Heading,
+	GridBody,
+	GridHead,
+	HeadCell,
+	NextButton,
+	PrevButton,
+	//
+	Root as Calendar,
+};

src/routes/options-flow/+page.svelte

@@ -3,11 +3,19 @@
   import { screenWidth, numberOfUnreadNotification, etfTicker, stockTicker, isOpen } from '$lib/store';
   import notifySound from '$lib/audio/options-flow-reader.mp3';
   //import UpgradeToPro from '$lib/components/UpgradeToPro.svelte';
-  import { abbreviateNumber } from '$lib/utils';
+  import { abbreviateNumber,cn } from '$lib/utils';
   import { onMount, onDestroy } from 'svelte';
   import toast from 'svelte-french-toast';
+  import {
+    DateFormatter,
+    type DateValue,
+  } from "@internationalized/date";
   import * as DropdownMenu from "$lib/components/shadcn/dropdown-menu/index.js";
+  import * as Popover from "$lib/components/shadcn/popover/index.js";
   import { Button } from "$lib/components/shadcn/button/index.js";
+  import { Calendar } from "$lib/components/shadcn/calendar/index.js";
+  import CalendarIcon from "lucide-svelte/icons/calendar";
+  
   import VirtualList from 'svelte-tiny-virtual-list';
   import { writable } from 'svelte/store';
 
@@ -34,6 +42,13 @@
   let showFilters = true;
   let filteredRows = [];
   let shouldLoadWorker = writable(false);
+  const df = new DateFormatter("en-US", {
+      day: "2-digit",
+      month: "short",
+      year: "numeric"
+    });
+  
+  let selectedDate: DateValue | undefined = undefined;
 
 const allRules = {
   volume: { label: 'Volume', step: ['100K','10K','1K'],  defaultCondition: 'over', defaultValue: 'any' },
@@ -737,7 +752,7 @@ $: {
       
 
 
-         <div class="rounded-lg border border-gray-700 bg-[#262626] p-2">
+         <div class="rounded-md border border-gray-700 bg-[#262626] p-2">
               <div class="flex flex-col sm:flex-row items-center pt-3 sm:pt-1 pb-3 sm:border-b sm:border-gray-600">
                 <div class="flex flex-row items-center justify-center sm:justify-start">
                   <label data-tip="Audio Preference" on:click={() => muted = !muted} class="xl:tooltip xl:tooltip-bottom flex flex-col items-center mr-3 cursor-pointer">
@@ -772,12 +787,32 @@ $: {
 
                 <div class="sm:ml-auto w-full sm:w-fit pt-5">
                     <div class="relative flex flex-col sm:flex-row items-center">
-                        <div class="relative w-full sm:w-fit pl-3 py-2 sm:py-1.5 sm:mr-5 mb-4 sm:mb-0 flex-auto text-center bg-[#313131] rounded-lg border border-gray-600">
+
+                     <Popover.Root>
+                        <Popover.Trigger asChild let:builder>
+                          <Button
+                            class={cn(
+                              "w-fit mr-3 py-2 bg-[#000] sm:hover:bg-[#000] sm:hover:text-white text-white justify-start text-left font-normal border-none rounded-md",
+                              !selectedDate && "text-gray-300"
+                            )}
+                            builders={[builder]}
+                          >
+                            <CalendarIcon class="mr-2 h-4 w-4" />
+                            {selectedDate ? df.format(selectedDate?.toDate()) : "Pick a date"}
+                          </Button>
+                        </Popover.Trigger>
+                        <Popover.Content class="w-auto p-0 border-gray-500">
+                          <Calendar class="bg-[#09090B] text-white" bind:value={selectedDate} initialFocus />
+                        </Popover.Content>
+                      </Popover.Root>
+
+
+                        <div class="relative w-full sm:w-fit pl-3  sm:mr-5 mb-4 sm:mb-0 flex-auto text-center bg-[#313131] rounded-md border border-gray-600">
                           <label class="flex flex-row items-center ">
                             <input 
                             id="modal-search"
                               type="search" 
-                              class="text-white sm:ml-2 text-[1rem] placeholder-gray-300 border-transparent focus:border-transparent focus:ring-0 flex items-center justify-center w-full px-0 py-1 bg-inherit"
+                              class="text-white sm:ml-2 text-[1rem] placeholder-gray-300 border-transparent focus:border-transparent focus:ring-0 flex items-center justify-center w-full px-0 py-1.5 bg-inherit"
                               placeholder="Find by Symbol"
                               bind:value={filterQuery}
                               on:input={debouncedHandleInput}
@@ -842,7 +877,7 @@ $: {
                             <div on:click={() => ruleName = row?.rule}>
                               <DropdownMenu.Root>
                                 <DropdownMenu.Trigger asChild let:builder>
-                                  <Button builders={[builder]}  class="bg-[#000] h-[40px] flex flex-row justify-between items-center w-[150px] xs:w-[140px] sm:w-[150px] px-3 text-white rounded-lg truncate">
+                                  <Button builders={[builder]}  class="bg-[#000] h-[40px] flex flex-row justify-between items-center w-[150px] xs:w-[140px] sm:w-[150px] px-3 text-white rounded-md truncate">
                                     <span class="truncate ml-2 text-sm sm:text-[1rem]">
                                       {#if valueMappings[row?.rule] === 'any'} 
                                       Any
@@ -931,7 +966,7 @@ $: {
 
               
               <!--Start Flow Sentiment-->  
-              <div class="flex flex-row items-center flex-wrap w-full px-5 bg-[#262626] shadow-lg rounded-lg h-20">
+              <div class="flex flex-row items-center flex-wrap w-full px-5 bg-[#262626] shadow-lg rounded-md h-20">
                   <div class="flex flex-col items-start">
                       <span class="font-semibold text-gray-200 text-sm sm:text-[1rem] ">Flow Sentiment</span>
                       <span class="text-start text-[1rem] font-semibold {flowSentiment === 'Bullish' ? 'text-[#00FC50]' : flowSentiment === 'Bearish' ? 'text-[#FC2120]' : flowSentiment === 'Neutral' ? 'text-[#FBCE3C]' : 'text-white'}">{flowSentiment}</span>
@@ -940,7 +975,7 @@ $: {
               </div>
               <!--End Flow Sentiment-->
                <!--Start Put/Call-->  
-               <div class="flex flex-row items-center flex-wrap w-full px-5 bg-[#262626] shadow-lg rounded-lg h-20">
+               <div class="flex flex-row items-center flex-wrap w-full px-5 bg-[#262626] shadow-lg rounded-md h-20">
                 <div class="flex flex-col items-start">
                     <span class="font-semibold text-gray-200 text-sm sm:text-[1rem] ">Put/Call</span>
                     <span class="text-start text-[1rem] font-semibold text-white">
@@ -967,7 +1002,7 @@ $: {
             </div>
             <!--End Put/Call-->
              <!--Start Call Flow-->  
-             <div class="flex flex-row items-center flex-wrap w-full px-5 bg-[#262626] shadow-lg rounded-lg h-20">
+             <div class="flex flex-row items-center flex-wrap w-full px-5 bg-[#262626] shadow-lg rounded-md h-20">
               <div class="flex flex-col items-start">
                   <span class="font-semibold text-gray-200 text-sm sm:text-[1rem] ">Call Flow</span>
                   <span class="text-start text-[1rem] font-semibold text-white">
@@ -996,7 +1031,7 @@ $: {
             </div>
             <!--End Call Flow-->
             <!--Start Put Flow-->  
-            <div class="flex flex-row items-center flex-wrap w-full px-5 bg-[#262626] shadow-lg rounded-lg h-20">
+            <div class="flex flex-row items-center flex-wrap w-full px-5 bg-[#262626] shadow-lg rounded-md h-20">
               <div class="flex flex-col items-start">
                   <span class="font-semibold text-gray-200 text-sm sm:text-[1rem] ">Put Flow</span>
                   <span class="text-start text-[1rem] font-semibold text-white">
@@ -1027,7 +1062,7 @@ $: {
             <!--
             {#if showMore}
 
-            <div class="flex flex-row items-center flex-wrap w-full px-5 bg-[#262626] shadow-lg rounded-lg h-20">
+            <div class="flex flex-row items-center flex-wrap w-full px-5 bg-[#262626] shadow-lg rounded-md h-20">
               <div class="flex flex-col items-start">
                   <span class="font-semibold text-gray-200 text-sm sm:text-[1rem] ">Most Traded Option</span>
                   <span class="text-start text-[1rem] font-semibold text-white mt-0.5">
@@ -1042,7 +1077,7 @@ $: {
               </div>
             </div>
 
-             <div class="flex flex-row items-center flex-wrap w-full px-5 bg-[#262626] shadow-lg rounded-lg h-20">
+             <div class="flex flex-row items-center flex-wrap w-full px-5 bg-[#262626] shadow-lg rounded-md h-20">
               <div class="flex flex-col items-start">
                   <span class="font-semibold text-gray-200 text-sm sm:text-[1rem] ">Highest Premium</span>
                   <span class="text-start text-[1rem] font-semibold text-white mt-0.5">
@@ -1058,7 +1093,7 @@ $: {
             </div>
 
             
-            <div class="flex flex-row items-center flex-wrap w-full px-5 bg-[#262626] shadow-lg rounded-lg h-20">
+            <div class="flex flex-row items-center flex-wrap w-full px-5 bg-[#262626] shadow-lg rounded-md h-20">
               <div class="flex flex-col items-start">
                   <span class="font-semibold text-gray-200 text-sm sm:text-[1rem] ">Highest Volume</span>
                   <span class="text-start text-[1rem] font-semibold text-white mt-0.5">
@@ -1074,7 +1109,7 @@ $: {
             </div>
 
             
-             <div class="flex flex-row items-center flex-wrap w-full px-5 bg-[#262626] shadow-lg rounded-lg h-20">
+             <div class="flex flex-row items-center flex-wrap w-full px-5 bg-[#262626] shadow-lg rounded-md h-20">
               <div class="flex flex-col items-start">
                   <span class="font-semibold text-gray-200 text-sm sm:text-[1rem] ">Highest Open Interest</span>
                   <span class="text-start text-[1rem] font-semibold text-white mt-0.5">
@@ -1204,7 +1239,7 @@ $: {
                 </div>
               </div>
               {:else}
-              <div class="text-white text-center p-3 sm:p-5 mb-10 mt-5 rounded-lg sm:flex sm:flex-row sm:items-center border border-slate-800 text-sm sm:text-[1rem]">      
+              <div class="text-white text-center p-3 sm:p-5 mb-10 mt-5 rounded-md sm:flex sm:flex-row sm:items-center border border-slate-800 text-sm sm:text-[1rem]">      
                   <svg class="w-6 h-6 flex-shrink-0 inline-block sm:mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg>
                   Looks like your taste is one-of-a-kind! No matches found... yet!
               </div>
@@ -1273,7 +1308,7 @@ $: {
               autocomplete="off"
               type="search"
               id="search"
-              class="placeholder-gray-300 block w-full p-2 ps-10 text-sm text-gray-200 border border-gray-300 rounded-lg bg-[#404040] border border-blue-500"
+              class="placeholder-gray-300 block w-full p-2 ps-10 text-sm text-gray-200 border border-gray-300 rounded-md bg-[#404040] border border-blue-500"
               placeholder="Search {allRows?.length} filters..."
               bind:value={searchTerm}
               />
@@ -1281,7 +1316,7 @@ $: {
       </form>
       <!-- End Search bar-->
 
-      <div class="text-white text-sm bg-[#141417] overflow-y-scroll  pt-3 rounded-lg max-h-[500px] sm:max-h-[420px] md:max-h-[540px] lg:max-h-[600px]">
+      <div class="text-white text-sm bg-[#141417] overflow-y-scroll  pt-3 rounded-md max-h-[500px] sm:max-h-[420px] md:max-h-[540px] lg:max-h-[600px]">
 
         <div class="text-white relative">