Improve styling - WIP

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

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>