Addressing coobooks styles issues

Author: Max Shkutnyk

fern/assets/input.css

@@ -265,6 +265,12 @@ button[class^="Sidebar-link-buttonWrapper"] {
     color: #ebebf8;
     white-space: nowrap;
   }
+  /*
+      Styles for cookbooks
+  */
+  .dark-theme-text-color {
+      color: var(--body-text);
+  }
 }
 
 .small-tag-container {
@@ -649,3 +655,4 @@ button[class^="Sidebar-link-buttonWrapper"] {
 :is(.dark) .simple-card-container {
     --divider-border-color: #2c2c2c;
 }
+

fern/components/cookbooks/CookbooksPage.tsx

@@ -2,10 +2,10 @@ import React from 'react';
 import { Cookbooks } from './Cookbooks';
 
 export const CookbookPage: React.FC = () => (
-  <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+  <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 dark:dark-theme-text-color">
     <div className="max-w-3xl">
       <h1 className="text-3xl font-bold mb-4">Cookbooks</h1>
-      <p className="text-gray-600 mb-8">
+      <p className="text-gray-600 mb-8 dark:dark-theme-text-color">
         Explore what you can build on Cohere's generative AI platform with our new interface. 
         Search and filter cookbooks by title, description, or tags to find exactly what you need.
       </p>

fern/components/cookbooks/SearchBar.tsx

@@ -12,7 +12,7 @@ export const SearchBar: React.FC<SearchBarProps> = ({ searchQuery, setSearchQuer
       placeholder="Search"
       value={searchQuery}
       onChange={(e) => setSearchQuery(e.target.value)}
-      className="w-full px-4 py-2 pl-10 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+      className="w-full px-4 py-2 pl-10 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-black"
     />
     <div className="absolute left-3 top-1/2 transform -translate-y-1/2">
       <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="text-gray-400" viewBox="0 0 16 16">

fern/components/cookbooks/TagButton.tsx

@@ -8,7 +8,7 @@ interface TagButtonProps {
 
 const tagButtonClass = "px-2 py-1 text-[12px] rounded-full transition-colors cursor-pointer font-normal";
 const selectedTagClass = "bg-[#333293] text-white hover:bg-[#333293]/90";
-const unselectedTagClass = "bg-white text-[#666666] border border-[#E5E5E5] hover:bg-gray-50";
+const unselectedTagClass = "bg-white text-[#666666] shadow-[0_0_0_1px_#E5E5E5] outline outline-1 outline-[#E5E5E5] hover:bg-gray-50";
 
 export const TagButton: React.FC<TagButtonProps> = ({ tag, isSelected, onClick }) => (
   <button