Merge branch 'main' of github.com:whitep4nth3r/theclaw.team

tdrayson · Jan 31, 2022 · 65c7da9 · 65c7da9
2 parents 727ed41 + 39da727
commit 65c7da9
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 2 deletions.
diff --git a/components/SquareStreamerProfileImage/index.js b/components/SquareStreamerProfileImage/index.js
@@ -0,0 +1,18 @@
+import styles from "@styles/SquareStreamerProfileImage.module.css";
+import CheckMark from "@components/Svg/CheckMark";
+
+export default function SquareStreamerProfileImage({ imageUrl, isPartner}) {
+    return (
+    <div className={styles.avatar}>
+        <img
+            className={styles.avatar__img}
+            src={imageUrl}
+        />
+        {isPartner && (
+            <span className={styles.avatar__status}>
+                <CheckMark />
+            </span>
+        )}
+    </div>
+    );
+}
diff --git a/pages/backstage/overlays/whos-next.js b/pages/backstage/overlays/whos-next.js
@@ -2,7 +2,7 @@ import { useSession, getSession, signIn } from "next-auth/client";
 import styles from "@styles/Overlays.module.css";
 import { motion } from "framer-motion";
 import TeamData from "@utils/TeamData";
-import StreamerProfileImage from "@components/StreamerProfileImage";
+import SquareStreamerProfileImage from "@components/SquareStreamerProfileImage";
 import { getTimeRemaining } from "@utils/Date";
 import Countdown from "react-countdown";
 
@@ -41,7 +41,7 @@ export default function OverlayWhosNext({ nextUp, avatar, isPartner }) {
             <p>Up Next</p>
           </motion.div>
           <div className={styles.overlay__whosNext__avatar}>
-            <StreamerProfileImage imageUrl={avatar} isPartner={isPartner} />
+            <SquareStreamerProfileImage imageUrl={avatar} isPartner={isPartner} />
           </div>
           <div className={styles.overlay__whosNext__details}>
             <p className={styles.overlay__whosNext__details__streamer}>

diff --git a/styles/SquareStreamerProfileImage.module.css b/styles/SquareStreamerProfileImage.module.css
@@ -0,0 +1,29 @@
+.avatar {
+  position: relative;
+  margin-bottom: 2rem;
+  overflow: hidden;
+  background-color: var(--black);
+  box-shadow: 0.5rem 0.5rem 0 0 var(--purple);
+  border: 0.25rem solid var(--white);
+}
+
+.avatar__img {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.avatar__status {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  bottom: 0;
+  right: 0;
+  position: absolute;
+  background-color: var(--white);
+  border-radius: 1rem;
+  height: 1.5rem;
+  width: 1.5rem;
+  display: inline-block;
+}