From b42c9f18336d9324b7d64bea971785245bba5abc Mon Sep 17 00:00:00 2001
From: Nikhil Nawgiri <the@realest.ninja>
Date: Sun, 27 Oct 2024 13:36:15 +0100
Subject: [PATCH] Improve styles - WIP

---
 fe/src/App.css                                | 19 +++++++++-----
 fe/src/components/search/SearchResultItem.tsx | 26 ++++++++++---------
 2 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/fe/src/App.css b/fe/src/App.css
index a12c01b..b99faa8 100644
--- a/fe/src/App.css
+++ b/fe/src/App.css
@@ -111,22 +111,27 @@ h1:hover {
   margin-bottom: 10px;
 
   img {
-    max-height: 50px;
+    height: 48px;
   }
 
   section {
     flex: 1;
-    padding-left: 8px;
+    padding: 8px 0 0 8px;
     display: flex;
-    flex-direction: column;
     justify-content: space-evenly;text-align: left;
   }
 }
 
-.search-result-item-meta {
-  display: flex;
+.search-result-item-interaction {
+  min-width: 20px;
 }
 
-.search-result-item-year {
-  flex-basis: 45px;
+.search-result-item-text {
+  flex: 1;
+  padding-left: 5px;
+}
+
+.search-result-item-action {
+  width: 48px;
+  height: 48px;
 }
diff --git a/fe/src/components/search/SearchResultItem.tsx b/fe/src/components/search/SearchResultItem.tsx
index f79f1df..2fe7aaf 100644
--- a/fe/src/components/search/SearchResultItem.tsx
+++ b/fe/src/components/search/SearchResultItem.tsx
@@ -7,6 +7,13 @@ interface SearchResultItemProps {
   clickHandler?: Function,
 }
 
+const itemStatusInLibrary = {
+  available: "✅",
+  requested: "⏳",
+  missing: " ",
+}
+
+// todo add link to movie if available
 const SearchResultItem = ({
   title,
   image,
@@ -25,19 +32,14 @@ const SearchResultItem = ({
   >
     <img src={image} alt={title} />
     <section>
-      <div className="search-result-item-meta">
-        <span className="search-result-item-year">
-          {year.substring(0, 4)}
-        </span>
-        &nbsp;
-        -
-        &nbsp;
-        <span className="search-result-item-title">
-          {title}
-        </span>
-      </div>
       <div className="search-result-item-interaction">
-        ✅
+        {Object.values(itemStatusInLibrary)[Math.floor(Math.random() * Object.values(itemStatusInLibrary).length)]}
+      </div>
+      <span className="search-result-item-text">
+        {year.substring(0, 4)} - {title}
+      </span>
+      <div className="search-result-item-action">
+        🔗
       </div>
     </section>
   </div>