tweak upcoming design, use bgpig on event pages

web/src/components/general/BgPig.tsx

@@ -15,6 +15,7 @@ import { useInView } from "react-intersection-observer";
 
 export const BgPig = ({
   type,
+  color,
 }: {
   type:
     | "logo"
@@ -28,11 +29,16 @@ export const BgPig = ({
     | "key"
     | "chill"
     | "peek";
+  color: "neufPink" | "white" | "goldenBeige";
 }) => {
   const { ref: observer, inView: IsInView } = useInView({ triggerOnce: false });
   return (
     <div className={styles.bgPigWrapper}>
-      <div className={`${styles.pig} ${styles.bgPig}`} data-inview={IsInView}>
+      <div
+        className={`${styles.pig} ${styles.bgPig}`}
+        style={{ "--color-pig": color }}
+        data-inview={IsInView}
+      >
         {type === "logo" && <LogoPig />}
         {type === "music" && <MusicPig />}
         {type === "drink" && <DrinkPig />}

web/src/components/general/pig.module.scss

@@ -7,13 +7,16 @@
   }
 }
 
+.bgPigWrapper {
+  --color-pig: var(--color-neufPink);
+}
+
 .bgPig {
   position: fixed;
   bottom: 0;
   right: 0;
   transform: translate(1vw, 20%);
-  z-index: 600;
-  --color-pig: var(--color-neufPink);
+  z-index: 1;
   transition: opacity .6s ease;
 
   &[data-inview=true] {
@@ -23,6 +26,5 @@
 
 .observer {
   position: absolute;
-  bottom: -5rem;
   right: 0;
 }