new preview style

src/elements/Preview/Preview.module.css

@@ -1,9 +1,19 @@
-.previewtitle {
-    font-size: smaller;
+.previewText {
+    font-size: 15px;
     font-weight: bold;
-    height: 20px;
-    max-width: 266px;
+    height: 42px;
+    width: 100%;
     text-align: center;
+    position: absolute;
+    bottom: 0;
+    background-color: rgba(60, 61, 72, 0.7);
+    color: white;
+    border-bottom-left-radius: 20px;
+    border-bottom-right-radius: 20px;
+
+    border-top-width: 1px;
+    border-top-color: #3c3d48;
+    border-top-style: solid;
 }
 
 .previewpic {
@@ -12,6 +22,8 @@
     min-width: 266px;
     overflow: hidden;
     text-align: center;
+
+    border-radius: 20px;
 }
 
 .loadAnimation {
@@ -38,6 +50,7 @@
     margin-left: 25px;
     margin-top: 25px;
     opacity: 0.85;
+    position: relative;
 }
 
 .videopreview:hover {

src/elements/Preview/Preview.tsx

@@ -42,9 +42,16 @@ class Preview extends React.Component<PreviewProps, PreviewState> {
         return (
             <Link to={'/player/' + this.props.movieId}>
                 <div className={style.videopreview + ' ' + themeStyle.secbackground + ' ' + themeStyle.preview}>
-                    <div className={style.previewtitle + ' ' + themeStyle.lighttextcolor}>{this.props.name}</div>
-                    <div className={style.previewpic}>
-                        {this.state.previewpicture === '' ? (
+                    <div className={style.previewpic}>{this.renderPic()}</div>
+                    <div className={style.previewText + ' ' + themeStyle.lighttextcolor}>{this.props.name}</div>
+                </div>
+            </Link>
+        );
+    }
+
+    private renderPic(): JSX.Element {
+        if (this.state.previewpicture === '') {
+            return (
                 <FontAwesomeIcon
                     style={{
                         color: 'white',
@@ -53,18 +60,16 @@ class Preview extends React.Component<PreviewProps, PreviewState> {
                     icon={faPhotoVideo}
                     size='5x'
                 />
-                        ) : this.state.previewpicture === null ? (
+            );
+        } else if (this.state.previewpicture === null) {
+            return (
                 <span className={style.loadAnimation}>
                     <Spinner animation='border' />
                 </span>
-                        ) : (
-                            <img className={style.previewimage} src={this.state.previewpicture} alt='Pic loading.' />
-                        )}
-                    </div>
-                    <div className={style.previewbottom} />
-                </div>
-            </Link>
             );
+        } else {
+            return <img className={style.previewimage} src={this.state.previewpicture} alt='Pic loading.' />;
+        }
     }
 }