diff --git a/fe/src/App.css b/fe/src/App.css index a12c01b..b99faa8 100644 --- a/fe/src/App.css +++ b/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; } diff --git a/fe/src/components/search/SearchResultItem.tsx b/fe/src/components/search/SearchResultItem.tsx index f79f1df..2fe7aaf 100644 --- a/fe/src/components/search/SearchResultItem.tsx +++ b/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 = ({ > - - - {year.substring(0, 4)} - - - - - - - {title} - - - ✅ + {Object.values(itemStatusInLibrary)[Math.floor(Math.random() * Object.values(itemStatusInLibrary).length)]} + + + {year.substring(0, 4)} - {title} + + + 🔗