Mostly ready for release

app/components/ColorSchemeCard.tsx

@@ -10,9 +10,10 @@ interface ColorSchemeCardProps {
   onLike: () => void;
   onDislike: () => void;
   index: number;
+  isDarkMode: boolean;
 }
 
-const ColorSchemeCard: React.FC<ColorSchemeCardProps> = ({ scheme, onLike, onDislike, index }) => {
+const ColorSchemeCard: React.FC<ColorSchemeCardProps> = ({ scheme, onLike, onDislike, index, isDarkMode }) => {
   const [overlayColor, setOverlayColor] = useState('rgba(0, 0, 0, 0)');
   const controls = useAnimation();
 
@@ -97,7 +98,7 @@ fetchData().then(data => console.log(data)); `;
             className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors duration-300"
             onClick={handleDownload}
           >
-            <Image src="/download-icon.svg" alt="Download" width={24} height={24} />
+            <Image src={isDarkMode ? "/download-icon-dark.svg" : "/download-icon-light.svg"} alt="Download" width={24} height={24} />
           </button>
         </div>
         <div className="bg-gray-100 dark:bg-gray-700 rounded-md mb-4 flex-grow overflow-hidden z-10 shadow-md">
@@ -144,13 +145,13 @@ fetchData().then(data => console.log(data)); `;
             className="bg-red-500 text-white p-3 rounded-full shadow-lg hover:bg-red-600 transition-colors duration-300"
             onClick={handleDislike}
           >
-            <Image src="/cross-icon.svg" alt="Dislike" width={28} height={28} />
+            <Image src={isDarkMode ? "/cross-icon-dark.svg" : "/cross-icon-light.svg"} alt="Dislike" width={28} height={28} />
           </button>
           <button 
             className="bg-green-500 text-white p-3 rounded-full shadow-lg hover:bg-green-600 transition-colors duration-300"
             onClick={handleLike}
           >
-            <Image src="/heart-icon.svg" alt="Like" width={28} height={28} />
+            <Image src={isDarkMode ? "/heart-icon-dark.svg" : "/heart-icon-light.svg"} alt="Like" width={28} height={28} />
           </button>
         </div>
       </div>

app/globals.css

@@ -18,6 +18,7 @@ body {
   color: var(--foreground);
   background: var(--background);
   font-family: var(--font-geist-sans), Arial, sans-serif;
+  overflow: hidden;
 }
 
 @layer utilities {

app/page.tsx

@@ -1,16 +1,14 @@
 'use client';
 
 import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
 import ColorSchemeCard from "./components/ColorSchemeCard";
-import SettingsIcon from "./components/SettingsIcon";
-import Settings from "./components/Settings";
 import { ColorScheme, knownSchemes, generateRandomScheme, generateSchemeFromGeneticAlgorithm } from './utils/colorSchemes';
 import { AnimatePresence } from 'framer-motion';
 
 export default function Home() {
   const [schemes, setSchemes] = useState<ColorScheme[]>([]);
   const [isDarkMode, setIsDarkMode] = useState(false);
-  const [isSettingsOpen, setIsSettingsOpen] = useState(false);
   const [likedSchemes, setLikedSchemes] = useState<ColorScheme[]>([]);
   const [dislikedSchemes, setDislikedSchemes] = useState<ColorScheme[]>([]);
 
@@ -40,20 +38,28 @@ export default function Home() {
   }, [dislikedSchemes]);
 
   const generateNewSchemes = (count: number) => {
-    const knownCount = Math.floor(count / 2);
+    const newSchemes = Array(count).fill(null).map(() => {
-    const generatedCount = count - knownCount;
+      const schemeType = Math.random();
+      if (schemeType < 0.25) {
+        // 25% chance of known scheme
+        return knownSchemes[Math.floor(Math.random() * knownSchemes.length)];
+      } else if (schemeType < 0.5) {
+        // 25% chance of random scheme
+        return generateRandomScheme();
+      } else if (likedSchemes.length > 2 && dislikedSchemes.length > 2) {
+        // 50% chance of genetic scheme if there are more than 2 liked and disliked schemes
+        return generateSchemeFromGeneticAlgorithm(likedSchemes, dislikedSchemes);
+      } else {
+        // 30% known, 20% random for other cases
+        if (Math.random() < 0.3) {
+          return generateRandomScheme();
+        } else {
+          return knownSchemes[Math.floor(Math.random() * knownSchemes.length)];
+        }
+      }
+    });
 
-    const newSchemes = [
+    setSchemes(prevSchemes => [...prevSchemes, ...newSchemes]);
-      ...knownSchemes.sort(() => 0.5 - Math.random()).slice(0, knownCount),
-      ...Array(generatedCount).fill(null).map(() => 
-        likedSchemes.length > 0 ? generateSchemeFromGeneticAlgorithm(likedSchemes, dislikedSchemes) : generateRandomScheme()
-      )
-    ];
-
-    // Shuffle the new schemes
-    const shuffledSchemes = newSchemes.sort(() => 0.5 - Math.random());
-
-    setSchemes(prevSchemes => [...prevSchemes, ...shuffledSchemes]);
   };
 
   const handleLike = (scheme: ColorScheme) => {
@@ -81,12 +87,11 @@ export default function Home() {
   };
 
   return (
-    <div className="min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)] dark:bg-gray-900 dark:text-white transition-colors duration-300">
+    <div className="h-screen w-screen overflow-hidden p-8 font-[family-name:var(--font-geist-sans)] dark:bg-gray-900 dark:text-white transition-colors duration-300">
-      <header className="flex justify-between items-center mb-8">
+      <header className="flex items-center mb-8">
-        <h1 className="text-2xl font-bold">Terminal Color Scheme Generator</h1>
+        <Image src="/app-icon.svg" alt="App Icon" width={40} height={40} />
-        <SettingsIcon onClick={() => setIsSettingsOpen(true)} />
       </header>
-      <main className="flex flex-col items-center justify-center h-[calc(100vh-200px)] relative">
+      <main className="flex flex-col items-center justify-center h-[calc(100vh-100px)]">
         <AnimatePresence>
           {schemes.slice(0, 3).map((scheme, index) => (
             <ColorSchemeCard
@@ -95,16 +100,11 @@ export default function Home() {
               onLike={() => handleLike(scheme)}
               onDislike={() => handleDislike(scheme)}
               index={index}
+              isDarkMode={isDarkMode}
             />
           ))}
         </AnimatePresence>
       </main>
-      <Settings
-        isDarkMode={isDarkMode}
-        onToggleDarkMode={toggleDarkMode}
-        isOpen={isSettingsOpen}
-        onClose={() => setIsSettingsOpen(false)}
-      />
     </div>
   );
 }

app/utils/colorSchemes.ts

@@ -30,7 +30,7 @@ function generateCreativeName(): string {
 
 function generateRandomScheme(): ColorScheme {
   let x = {
-    name: generateCreativeName(),
+    name: generateCreativeName() + "rand",
     colors: {
       primary: { background: generateRandomColor(), foreground: generateRandomColor() },
       normal: {
@@ -58,45 +58,6 @@ function crossTitles(title1: string, title2: string): string {
   return `${firstWord} ${secondWord}`;
 }
 
-function crossSchemes(scheme1: ColorScheme, scheme2: ColorScheme): ColorScheme {
-  const crossColor = (color1: Color, color2: Color): Color => {
-    const r = Math.round((parseInt(color1.slice(1, 3), 16) + parseInt(color2.slice(1, 3), 16)) / 2);
-    const g = Math.round((parseInt(color1.slice(3, 5), 16) + parseInt(color2.slice(3, 5), 16)) / 2);
-    const b = Math.round((parseInt(color1.slice(5, 7), 16) + parseInt(color2.slice(5, 7), 16)) / 2);
-    return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
-  };
-
-  return {
-    name: crossTitles(scheme1.name, scheme2.name),
-    colors: {
-      primary: {
-        background: crossColor(scheme1.colors.primary.background, scheme2.colors.primary.background),
-        foreground: crossColor(scheme1.colors.primary.foreground, scheme2.colors.primary.foreground)
-      },
-      normal: {
-        black: crossColor(scheme1.colors.normal.black, scheme2.colors.normal.black),
-        red: crossColor(scheme1.colors.normal.red, scheme2.colors.normal.red),
-        green: crossColor(scheme1.colors.normal.green, scheme2.colors.normal.green),
-        yellow: crossColor(scheme1.colors.normal.yellow, scheme2.colors.normal.yellow),
-        blue: crossColor(scheme1.colors.normal.blue, scheme2.colors.normal.blue),
-        magenta: crossColor(scheme1.colors.normal.magenta, scheme2.colors.normal.magenta),
-        cyan: crossColor(scheme1.colors.normal.cyan, scheme2.colors.normal.cyan),
-        white: crossColor(scheme1.colors.normal.white, scheme2.colors.normal.white)
-      },
-      bright: {
-        black: crossColor(scheme1.colors.bright.black, scheme2.colors.bright.black),
-        red: crossColor(scheme1.colors.bright.red, scheme2.colors.bright.red),
-        green: crossColor(scheme1.colors.bright.green, scheme2.colors.bright.green),
-        yellow: crossColor(scheme1.colors.bright.yellow, scheme2.colors.bright.yellow),
-        blue: crossColor(scheme1.colors.bright.blue, scheme2.colors.bright.blue),
-        magenta: crossColor(scheme1.colors.bright.magenta, scheme2.colors.bright.magenta),
-        cyan: crossColor(scheme1.colors.bright.cyan, scheme2.colors.bright.cyan),
-        white: crossColor(scheme1.colors.bright.white, scheme2.colors.bright.white)
-      }
-    }
-  };
-}
-
 function mutateColor(color: Color): Color {
   const r = parseInt(color.slice(1, 3), 16);
   const g = parseInt(color.slice(3, 5), 16);
@@ -142,9 +103,9 @@ function generateSchemeFromGeneticAlgorithm(likedSchemes: ColorScheme[], dislike
     });
   });
 
-  newScheme.name = generateCreativeName();
+  newScheme.name = generateCreativeName() + "gen";
   return newScheme;
 }
 
 export type { ColorScheme };
-export { knownSchemes, generateRandomScheme, crossSchemes, generateSchemeFromGeneticAlgorithm };
+export { knownSchemes, generateRandomScheme, generateSchemeFromGeneticAlgorithm };

public/app-icon.svg

@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg viewBox="35.479 5 414.17 489.256" xmlns="http://www.w3.org/2000/svg">
+  <rect x="149.52" y="470.326" width="195.224" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(141, 161, 1);"/>
+  <rect x="108.079" y="433.571" width="61.527" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(52, 63, 68);"/>
+  <rect x="180.037" y="433.573" width="105.807" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(223, 221, 200);"/>
+  <rect x="296.705" y="433.571" width="105.807" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(223, 160, 0);"/>
+  <rect x="86.575" y="397.804" width="31.895" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(58, 148, 197);"/>
+  <rect x="133.439" y="397.806" width="130.903" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(248, 85, 82);"/>
+  <rect x="331.134" y="397.804" width="83.132" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(58, 148, 197);"/>
+  <rect x="57.622" y="362.039" width="94.852" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(53, 167, 124);"/>
+  <rect x="167.671" y="362.04" width="67.718" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(223, 160, 0);"/>
+  <rect x="246.25" y="362.039" width="52.339" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(52, 63, 68);"/>
+  <rect x="42.293" y="325.419" width="171.985" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(223, 160, 0);"/>
+  <rect x="227.572" y="325.419" width="51.93" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(248, 85, 82);"/>
+  <rect y="289.651" width="61.527" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(58, 148, 197);" x="35.479"/>
+  <rect x="107.747" y="289.653" width="43.708" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(248, 85, 82);"/>
+  <rect x="165.557" y="289.651" width="84.265" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(223, 105, 186);"/>
+  <rect x="84.895" y="253.035" width="130.724" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(141, 161, 1);"/>
+  <rect x="227.515" y="253.032" width="78.622" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(58, 148, 197);"/>
+  <rect x="47.404" y="214.712" width="82.816" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(52, 63, 68);"/>
+  <rect x="144.91" y="214.715" width="61.527" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(53, 167, 124);"/>
+  <rect x="221.047" y="214.712" width="54.82" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(248, 85, 82);"/>
+  <rect x="75.292" y="176.391" width="42.789" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(223, 160, 0);"/>
+  <rect x="110.207" y="138.922" width="34.274" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(141, 161, 1);"/>
+  <rect x="135.1" y="176.391" width="24.909" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(58, 148, 197);"/>
+  <rect x="288.845" y="214.758" width="98.152" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(52, 63, 68);"/>
+  <rect x="400.706" y="214.976" width="46.104" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(141, 161, 1);"/>
+  <rect x="264.6" y="289.735" width="75.84" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(223, 221, 200);"/>
+  <rect x="352.572" y="289.735" width="75.84" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(141, 161, 1);"/>
+  <rect x="199.859" y="179.045" width="31.786" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(223, 221, 200);"/>
+  <rect x="242.922" y="179.093" width="82.514" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(223, 160, 0);"/>
+  <rect x="338.005" y="179.309" width="87.62" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(248, 85, 82);"/>
+  <rect x="236.382" y="144.662" width="108.958" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(223, 105, 186);"/>
+  <rect x="357.65" y="144.596" width="78.522" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(52, 63, 68);"/>
+  <rect x="249.74" y="109.491" width="168.1" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(58, 148, 197);"/>
+  <rect x="264.038" y="74.295" width="31.786" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(53, 167, 124);"/>
+  <rect x="317.144" y="74.342" width="59.427" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(223, 160, 0);"/>
+  <rect x="272.322" y="38.562" width="50.955" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(141, 161, 1);"/>
+  <rect x="259.611" width="24.267" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(58, 148, 197);" y="5"/>
+  <rect x="276.856" y="397.902" width="43.225" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(223, 105, 186);"/>
+  <rect x="375.633" y="362.085" width="21.939" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(141, 161, 1);"/>
+  <rect x="409.398" y="362.081" width="40.251" height="23.93" style="stroke: rgb(0, 0, 0); stroke-miterlimit: 1; stroke-linejoin: round; stroke-width: 4px; fill: rgb(223, 105, 186);"/>
+</svg>

public/cross-icon-dark.svg

@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
<g id="SVGRepo_iconCarrier"> <path d="M6 6L18 18M18 6L6 18" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </g>
+
</svg>

public/cross-icon-light.svg

@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
<g id="SVGRepo_iconCarrier"> <path d="M6 6L18 18M18 6L6 18" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </g>
+
</svg>

public/download-icon-dark.svg

@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
<g id="SVGRepo_iconCarrier"> <path d="M12 16V4M12 16L9 13M12 16L15 13M7 9H6.2C5.0799 9 4.51984 9 4.09202 9.21799C3.71569 9.40973 3.40973 9.71569 3.21799 10.092C3 10.5198 3 11.0799 3 12.2V16.8C3 17.9201 3 18.4802 3.21799 18.908C3.40973 19.2843 3.71569 19.5903 4.09202 19.782C4.51984 20 5.0799 20 6.2 20H17.8C18.9201 20 19.4802 20 19.908 19.782C20.2843 19.5903 20.5903 19.2843 20.782 18.908C21 18.4802 21 17.9201 21 16.8V12.2C21 11.0799 21 10.5198 20.782 10.092C20.5903 9.71569 20.2843 9.40973 19.908 9.21799C19.4802 9 18.9201 9 17.8 9H17" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </g>
+
</svg>

public/download-icon-light.svg

@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
<g id="SVGRepo_iconCarrier"> <path d="M12 16V4M12 16L9 13M12 16L15 13M7 9H6.2C5.0799 9 4.51984 9 4.09202 9.21799C3.71569 9.40973 3.40973 9.71569 3.21799 10.092C3 10.5198 3 11.0799 3 12.2V16.8C3 17.9201 3 18.4802 3.21799 18.908C3.40973 19.2843 3.71569 19.5903 4.09202 19.782C4.51984 20 5.0799 20 6.2 20H17.8C18.9201 20 19.4802 20 19.908 19.782C20.2843 19.5903 20.5903 19.2843 20.782 18.908C21 18.4802 21 17.9201 21 16.8V12.2C21 11.0799 21 10.5198 20.782 10.092C20.5903 9.71569 20.2843 9.40973 19.908 9.21799C19.4802 9 18.9201 9 17.8 9H17" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </g>
+
</svg>

public/heart-icon-dark.svg

@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#000000">
+
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
<g id="SVGRepo_iconCarrier"> <path fill-rule="evenodd" clip-rule="evenodd" d="M12 6.00019C10.2006 3.90317 7.19377 3.2551 4.93923 5.17534C2.68468 7.09558 2.36727 10.3061 4.13778 12.5772C5.60984 14.4654 10.0648 18.4479 11.5249 19.7369C11.6882 19.8811 11.7699 19.9532 11.8652 19.9815C11.9483 20.0062 12.0393 20.0062 12.1225 19.9815C12.2178 19.9532 12.2994 19.8811 12.4628 19.7369C13.9229 18.4479 18.3778 14.4654 19.8499 12.5772C21.6204 10.3061 21.3417 7.07538 19.0484 5.17534C16.7551 3.2753 13.7994 3.90317 12 6.00019Z" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </g>
+
</svg>

public/heart-icon-light.svg

@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
<g id="SVGRepo_iconCarrier"> <path fill-rule="evenodd" clip-rule="evenodd" d="M12 6.00019C10.2006 3.90317 7.19377 3.2551 4.93923 5.17534C2.68468 7.09558 2.36727 10.3061 4.13778 12.5772C5.60984 14.4654 10.0648 18.4479 11.5249 19.7369C11.6882 19.8811 11.7699 19.9532 11.8652 19.9815C11.9483 20.0062 12.0393 20.0062 12.1225 19.9815C12.2178 19.9532 12.2994 19.8811 12.4628 19.7369C13.9229 18.4479 18.3778 14.4654 19.8499 12.5772C21.6204 10.3061 21.3417 7.07538 19.0484 5.17534C16.7551 3.2753 13.7994 3.90317 12 6.00019Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </g>
+
</svg>