diff --git a/fe/src/App.css b/fe/src/App.css index 4aab881..b085c1f 100644 --- a/fe/src/App.css +++ b/fe/src/App.css @@ -99,7 +99,7 @@ h1:hover { flex-direction: column; height: 100%; justify-content: center; - max-width: calc(50% + 15px); + max-width: calc(50% + 20px); input { font-size: 17px; @@ -123,6 +123,10 @@ h1:hover { } } +.search-result-item-type { + font-size: 14px; +} + .search-result-item-year { padding-left: 5px; @@ -135,7 +139,7 @@ h1:hover { .search-result-item-title { flex: 1; - padding-left: 4px; + padding: 0 4px; } .search-result-item-action { diff --git a/fe/src/components/search/SearchResultItem.tsx b/fe/src/components/search/SearchResultItem.tsx index f58d2d2..4678472 100644 --- a/fe/src/components/search/SearchResultItem.tsx +++ b/fe/src/components/search/SearchResultItem.tsx @@ -3,10 +3,15 @@ interface SearchResultItemProps { image: string, imdbId: string, year: string, - type: string, + type: "series" | "movie", clickHandler?: Function, } +const itemTypeIcons = { + movie: "📽", + series: "📺", +} + const itemStatusInLibrary = { available: "✅", requested: "⏳", @@ -32,6 +37,9 @@ const SearchResultItem = ({ > + + {itemTypeIcons[type]} + {year.substring(0, 4)}