chore: use Table component from ui package

packages/frontend/src/lib/NavPage.svelte

@@ -13,7 +13,7 @@ export let contentBackground = '';
 export let lastPage: TinroBreadcrumb | undefined = undefined;
 </script>
 
-<div class="flex flex-col w-full h-full shadow-pageheader bg-charcoal-600">
+<div class="flex flex-col w-full h-full shadow-pageheader bg-charcoal-700">
   <div class="flex flex-col w-full h-full pt-4" role="region" aria-label="{title}">
     <div class="flex pb-2 px-5" role="region" aria-label="header">
       <div class="flex flex-col w-full">

packages/frontend/src/lib/RecipeCard.svelte

@@ -3,7 +3,7 @@ import { getIcon } from '/@/utils/categoriesUtils.js';
 import Card from '/@/lib/Card.svelte';
 import type { Recipe } from '@shared/src/models/IRecipe';
 
-export let background: string = 'bg-charcoal-700';
+export let background: string = 'bg-charcoal-600';
 export let backgroundHover: string = 'hover:bg-charcoal-500';
 
 export let recipe: Recipe;

packages/frontend/src/lib/RecipeDetails.svelte

@@ -81,7 +81,7 @@ const deleteLocalClone = () => {
 };
 </script>
 
-<div class="w-full bg-charcoal-600 rounded-md p-4">
+<div class="w-full bg-charcoal-700 rounded-md p-4">
   <div class="flex flex-row items-center">
     {#if appState && appState.pod}
       <div class="grow flex overflow-hidden whitespace-nowrap items-center" aria-label="app-status">
@@ -116,7 +116,7 @@ const deleteLocalClone = () => {
     </div>
   {/if}
 </div>
-<div class="flex flex-col w-full space-y-4 rounded-md bg-charcoal-600 p-4">
+<div class="flex flex-col w-full space-y-4 rounded-md bg-charcoal-700 p-4">
   {#if model}
     <div class="flex flex-col space-y-2">
       <div class="flex flex-row justify-between">