From 9f6a7d38b59a8e59d75b48d7d2367cb7870a07bf Mon Sep 17 00:00:00 2001
From: Nikhil Nawgiri <the@realest.ninja>
Date: Sat, 2 Nov 2024 16:18:58 +0100
Subject: [PATCH] Improve styles & Add emoji for item types movie/series

---
 fe/src/App.css                                |  8 ++++++--
 fe/src/components/search/SearchResultItem.tsx | 10 +++++++++-
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/fe/src/App.css b/fe/src/App.css
index 4aab881..b085c1f 100644
--- a/fe/src/App.css
+++ b/fe/src/App.css
@@ -99,7 +99,7 @@ h1:hover {
   flex-direction: column;
   height: 100%;
   justify-content: center;
-  max-width: calc(50% + 15px);
+  max-width: calc(50% + 20px);
 
   input {
     font-size: 17px;
@@ -123,6 +123,10 @@ h1:hover {
   }
 }
 
+.search-result-item-type {
+  font-size: 14px;
+}
+
 .search-result-item-year {
   padding-left: 5px;
 
@@ -135,7 +139,7 @@ h1:hover {
 
 .search-result-item-title {
   flex: 1;
-  padding-left: 4px;
+  padding: 0 4px;
 }
 
 .search-result-item-action {
diff --git a/fe/src/components/search/SearchResultItem.tsx b/fe/src/components/search/SearchResultItem.tsx
index f58d2d2..4678472 100644
--- a/fe/src/components/search/SearchResultItem.tsx
+++ b/fe/src/components/search/SearchResultItem.tsx
@@ -3,10 +3,15 @@ interface SearchResultItemProps {
   image: string,
   imdbId: string,
   year: string,
-  type: string,
+  type: "series" | "movie",
   clickHandler?: Function,
 }
 
+const itemTypeIcons = {
+  movie: "📽",
+  series: "📺",
+}
+
 const itemStatusInLibrary = {
   available: "✅",
   requested: "⏳",
@@ -32,6 +37,9 @@ const SearchResultItem = ({
   >
     <img src={image} alt={title} />
     <section>
+      <div className="search-result-item-type">
+        {itemTypeIcons[type]}
+      </div>
       <div className="search-result-item-year">
         {year.substring(0, 4)}
       </div>