Improve styles & Add emoji for item types movie/series

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 {

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 = ({
   >
     <img src={image} alt={title} />
     <section>
+      <div className="search-result-item-type">
+        {itemTypeIcons[type]}
+      </div>
       <div className="search-result-item-year">
         {year.substring(0, 4)}
       </div>