From d08b54d14a237eb60e382ea759b2e36ff2c87053 Mon Sep 17 00:00:00 2001
From: Nikhil Nawgiri <the@realest.ninja>
Date: Sat, 2 Nov 2024 16:05:49 +0100
Subject: [PATCH] Improve styling - WIP

---
 fe/src/App.css                                | 22 ++++++++++++++-----
 fe/src/components/search/SearchResultItem.tsx | 14 ++++++------
 2 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/fe/src/App.css b/fe/src/App.css
index b99faa8..4aab881 100644
--- a/fe/src/App.css
+++ b/fe/src/App.css
@@ -116,22 +116,32 @@ h1:hover {
 
   section {
     flex: 1;
-    padding: 8px 0 0 8px;
+    margin-left: 8px;
     display: flex;
-    justify-content: space-evenly;text-align: left;
+    justify-content: space-evenly;
+    text-align: left;
   }
 }
 
-.search-result-item-interaction {
-  min-width: 20px;
+.search-result-item-year {
+  padding-left: 5px;
+
+  &:after {
+    margin-left: 4px;
+    content: "-";
+    display: inline-block;
+  }
 }
 
-.search-result-item-text {
+.search-result-item-title {
   flex: 1;
-  padding-left: 5px;
+  padding-left: 4px;
 }
 
 .search-result-item-action {
   width: 48px;
   height: 48px;
+  font-size: 38px;
+  text-align: center;
+  line-height: 1.2;
 }
diff --git a/fe/src/components/search/SearchResultItem.tsx b/fe/src/components/search/SearchResultItem.tsx
index 2fe7aaf..f58d2d2 100644
--- a/fe/src/components/search/SearchResultItem.tsx
+++ b/fe/src/components/search/SearchResultItem.tsx
@@ -10,7 +10,7 @@ interface SearchResultItemProps {
 const itemStatusInLibrary = {
   available: "✅",
   requested: "⏳",
-  missing: " ",
+  missing: "📩",
 }
 
 // todo add link to movie if available
@@ -32,14 +32,14 @@ const SearchResultItem = ({
   >
     <img src={image} alt={title} />
     <section>
-      <div className="search-result-item-interaction">
-        {Object.values(itemStatusInLibrary)[Math.floor(Math.random() * Object.values(itemStatusInLibrary).length)]}
+      <div className="search-result-item-year">
+        {year.substring(0, 4)}
+      </div>
+      <div className="search-result-item-title">
+         {title}
       </div>
-      <span className="search-result-item-text">
-        {year.substring(0, 4)} - {title}
-      </span>
       <div className="search-result-item-action">
-        🔗
+        {Object.values(itemStatusInLibrary)[Math.floor(Math.random() * Object.values(itemStatusInLibrary).length)]}
       </div>
     </section>
   </div>