fixed reviews in item detail

src/ItemDetail.svelte

@@ -230,12 +230,12 @@ import AdvancedSearch from "./AdvancedSearch.svelte";
         {/if}
   
         {#if item.creators}
-        <div class="flex flex-col justify-between items-center gap-1 border border-gray-200 py-5">
+        <div class="flex flex-col justify-between items-center gap-1 border border-neutral_dark py-5 px-2">
           <div class="flex flex-col items-center">
             <h3 class="uppercase text-xs ">Creator</h3>
             <span></span>
           </div>
-          <span class="text-xs">{item.creators}</span>
+          <span class="text-xs text-center font-bold">{item.creators}</span>
         </div>
         {/if}
   
@@ -266,7 +266,7 @@ import AdvancedSearch from "./AdvancedSearch.svelte";
           <h2 class="text-base font-bold">Reviews</h2>
         </div>
         
-        <div class="flex flex-col md:flex-row md:overflow-x-auto md:pb-5 mt-3 gap-2 scroll">
+        <div class="grid grid-cols-1 md:grid-cols-2 md:overflow-x-auto md:pb-5 mt-3 gap-3 scroll">
         {#each reviews as review}
           <Review {review}/>
         {/each}

src/Review.svelte

@@ -10,11 +10,13 @@
     overflow: hidden;
   }
 </style>
-<article class="px-3 py-4 bg-neutral_light text-neutral_dark rounded-lg text-xs w-48 max-w-sm shrink-0">
+<article class="px-3 py-4 bg-neutral_light text-neutral_dark rounded-lg text-xs w-48 max-w-sm shrink-0 md:w-full">
     <h3 class="font-semibold">{review.blurb.toString().slice(0,10)}...</h3>
     <p class="mt-2 line-clamp">{review.blurb}</p>
-    <div class="mt-3">
-        <sl-rating value={review.rating}></sl-rating>
-        <span class="ml-2">...{review.by}</span>
+    <div class="mt-3 flex flex-col">
+        {#if review.rating}
+        <sl-rating readonly value={review.rating}></sl-rating>
+        {/if}
+        <span class="font-bold">{review.by}</span>
     </div>
 </article>

templates/index.html

@@ -12,7 +12,7 @@
 
 							primary: '#1e3a8a', //blue-900
 							primary_light: '#FAFAFA', //neutral-50
-							neutral_light: '#737373', // neutral-400
+							neutral_light: '#e5e5e5', // neutral-200
 							neutral_dark: '#262626', // neutral-800
 							secondary: '#6B21A8', // purple-800
 							// primary_medium: '#60A5FA', //blue-400
@@ -42,7 +42,7 @@
 		function lightmode(){
       tailwind.config.theme.extend.colors.primary = '#1E3A8A';
       tailwind.config.theme.extend.colors.primary_light = '#FAFAFA';
-      tailwind.config.theme.extend.colors.neutral_light = '#737373';
+      tailwind.config.theme.extend.colors.neutral_light = '#e5e5e5';
       tailwind.config.theme.extend.colors.neutral_dark = '#262626';
       tailwind.config.theme.extend.colors.secondary = '#6B21A8';
       tailwind.config.theme.extend.colors.gradOne = '#DBEAFE';