new preview style

src/elements/Preview/Preview.module.css

@@ -1,9 +1,19 @@
-.previewtitle {
+.previewText {
-    font-size: smaller;
+    font-size: 15px;
     font-weight: bold;
-    height: 20px;
+    height: 42px;
-    max-width: 266px;
+    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,30 +42,35 @@ 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.renderPic()}</div>
-                    <div className={style.previewpic}>
+                    <div className={style.previewText + ' ' + themeStyle.lighttextcolor}>{this.props.name}</div>
-                        {this.state.previewpicture === '' ? (
-                            <FontAwesomeIcon
-                                style={{
-                                    color: 'white',
-                                    marginTop: '55px'
-                                }}
-                                icon={faPhotoVideo}
-                                size='5x'
-                            />
-                        ) : this.state.previewpicture === null ? (
-                            <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>
         );
     }
+
+    private renderPic(): JSX.Element {
+        if (this.state.previewpicture === '') {
+            return (
+                <FontAwesomeIcon
+                    style={{
+                        color: 'white',
+                        marginTop: '55px'
+                    }}
+                    icon={faPhotoVideo}
+                    size='5x'
+                />
+            );
+        } else if (this.state.previewpicture === null) {
+            return (
+                <span className={style.loadAnimation}>
+                    <Spinner animation='border' />
+                </span>
+            );
+        } else {
+            return <img className={style.previewimage} src={this.state.previewpicture} alt='Pic loading.' />;
+        }
+    }
 }
 
 /**