New: TMDB Link on Search Results

frontend/src/AddMovie/AddNewMovie/AddNewMovieSearchResult.css

@@ -20,7 +20,12 @@
   height: 250px;
 }
 
+.content {
+  flex: 0 1 100%;
+}
+
 .title {
+  display: flex;
   font-weight: 300;
   font-size: 36px;
 }
@@ -30,6 +35,18 @@
   color: $disabledColor;
 }
 
+.tmdbLink {
+  composes: link from '~Components/Link/Link.css';
+
+  margin-top: -4px;
+  margin-left: auto;
+  color: $textColor;
+}
+
+.tmdbLinkIcon {
+  margin-left: 10px;
+}
+
 .alreadyExistsIcon {
   margin-left: 10px;
   color: #37bc9b;

frontend/src/AddMovie/AddNewMovie/AddNewMovieSearchResult.js

@@ -39,6 +39,10 @@ class AddNewMovieSearchResult extends Component {
     this.setState({ isNewAddMovieModalOpen: false });
   }
 
+  onTMDBLinkPress = (event) => {
+    event.stopPropagation();
+  }
+
   //
   // Render
 
@@ -82,7 +86,7 @@ class AddNewMovieSearchResult extends Component {
               />
           }
 
-          <div>
+          <div className={styles.content}>
             <div className={styles.title}>
               {title}
 
@@ -110,6 +114,18 @@ class AddNewMovieSearchResult extends Component {
                     title="Movie is on Net Import Exclusion List"
                   />
               }
+
+              <Link
+                className={styles.tmdbLink}
+                to={`https://www.themoviedb.org/movie/${tmdbId}`}
+                onPress={this.onTMDBLinkPress}
+              >
+                <Icon
+                  className={styles.tmdbLinkIcon}
+                  name={icons.EXTERNAL_LINK}
+                  size={28}
+                />
+              </Link>
             </div>
 
             <div>

frontend/src/Styles/Variables/colors.js

@@ -1,6 +1,7 @@
 const radarrYellow = '#ffc230';
 
 module.exports = {
+  textColor: '#515253',
   defaultColor: '#333',
   disabledColor: '#999',
   dimColor: '#555',