diff --git a/fe/src/App.css b/fe/src/App.css index b085c1f..d66a4d9 100644 --- a/fe/src/App.css +++ b/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; } diff --git a/fe/src/components/search/SearchResultItem.tsx b/fe/src/components/search/SearchResultItem.tsx index 9377b7f..f4097ab 100644 --- a/fe/src/components/search/SearchResultItem.tsx +++ b/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 = ({ > {title}
-
- {itemTypeIcons[type]} +
+
+ {itemTypeIcons[type]} +
+
+ {Object.values(itemStatusInLibrary)[Math.floor(Math.random() * Object.values(itemStatusInLibrary).length)]} +
{year.substring(0, 4)} @@ -46,9 +51,9 @@ const SearchResultItem = ({
{title.length > 40 ? `${title.substring(0, 40)}...` : title}
-
- {Object.values(itemStatusInLibrary)[Math.floor(Math.random() * Object.values(itemStatusInLibrary).length)]} -
+
);