new styles added for GifPlayer component.

Signed-off-by: Michael Valdron <[email protected]>
Signed-off-by: Michael Valdron <[email protected]>

Author: michael-valdron

src/components/GifPlayer/GifPlayer.module.css

@@ -0,0 +1,21 @@
+.container {
+  display: block;
+  margin-right: auto;
+  margin-left: auto;
+  width: 50%;
+  height: 50%;
+}
+
+@media only screen and (max-width: 1080px) {
+  .container {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+@media only screen and (max-width: 1280px) {
+  .container {
+    width: 75%;
+    height: 75%;
+  }
+}

src/components/GifPlayer/GifPlayer.tsx

@@ -1,4 +1,6 @@
 import React from 'react';
+import { Card } from '@patternfly/react-core';
+import styles from './GifPlayer.module.css';
 
 export interface GifPlayerProps
   extends React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement> {
@@ -14,4 +16,8 @@ export const GifPlayer: React.FC<GifPlayerProps> = ({
   className = '',
   alt = 'loading...',
   ...props
-}: GifPlayerProps) => <img {...props} className={className} src={src} alt={alt} />;
+}: GifPlayerProps) => (
+  <Card className={styles.container}>
+    <img {...props} className={className} src={src} alt={alt} />
+  </Card>
+);