Rearrange item children

fe/src/App.css

@@ -123,8 +123,11 @@ h1:hover {
   }
 }
 
-.search-result-item-type {
+.search-result-item-icons {
   font-size: 14px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
 }
 
 .search-result-item-year {
@@ -143,9 +146,12 @@ h1:hover {
 }
 
 .search-result-item-action {
-  width: 48px;
-  height: 48px;
-  font-size: 38px;
-  text-align: center;
-  line-height: 1.2;
+    width: 50px;
+    height: 48px;
+    font-size: 16px;
+    text-align: center;
+    background: linear-gradient(310deg, var(--jf-gradient-color-primary-dark), var(--jf-gradient-color-secondary-dark));
+    padding: 0 6px;
+    color: white;
+    border: 1px solid white;
 }

fe/src/components/search/SearchResultItem.tsx

@@ -15,7 +15,7 @@ const itemTypeIcons = {
 const itemStatusInLibrary = {
   available: "✅",
   requested: "⏳",
-  missing: "📩",
+  missing: " ",
 }
 
 // todo add link to movie if available
@@ -37,8 +37,13 @@ const SearchResultItem = ({
   >
     <img src={image} alt={title} />
     <section>
-      <div className="search-result-item-type">
-        {itemTypeIcons[type]}
+      <div className="search-result-item-icons">
+        <div>
+          {itemTypeIcons[type]}
+        </div>
+        <div>
+          {Object.values(itemStatusInLibrary)[Math.floor(Math.random() * Object.values(itemStatusInLibrary).length)]}
+        </div>
       </div>
       <div className="search-result-item-year">
         {year.substring(0, 4)}
@@ -46,9 +51,9 @@ const SearchResultItem = ({
       <div className="search-result-item-title">
         {title.length > 40 ? `${title.substring(0, 40)}...` : title}
       </div>
-      <div className="search-result-item-action">
-        {Object.values(itemStatusInLibrary)[Math.floor(Math.random() * Object.values(itemStatusInLibrary).length)]}
-      </div>
+      <button className="search-result-item-action">
+        Wish
+      </button>
     </section>
   </div>
 );