Improve styles - WIP

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;
 }

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>