From 2cbb4d21a015ce79bf80e881ec2ddf2d62f22764 Mon Sep 17 00:00:00 2001
From: Amy <minds10@hotmail.com>
Date: Mon, 23 Aug 2021 02:14:59 -0400
Subject: [PATCH] Add our supporters page shapes background

---
 components/ShapesBackground.tsx      | 32 ++++++++++++++++++++++++++++
 pages/about/our-supporters.tsx       | 12 +++++++++++
 public/images/shapes/triangleBig.svg |  3 +++
 3 files changed, 47 insertions(+)
 create mode 100644 public/images/shapes/triangleBig.svg

diff --git a/components/ShapesBackground.tsx b/components/ShapesBackground.tsx
index f36e1f16..4dd8766c 100644
--- a/components/ShapesBackground.tsx
+++ b/components/ShapesBackground.tsx
@@ -41,6 +41,7 @@ export type ShapeType =
   | "plus"
   | "ring"
   | "triangle"
+  | "triangleBig"
   | "waves"
   | "waveBig";
 
@@ -60,6 +61,7 @@ function Shape(props: { type: ShapeType; style: CSSProperties }) {
   );
 }
 
+// Used for most mobile pages
 export const mobileShapesConfig = {
   dots: [
     {
@@ -87,3 +89,33 @@ export const mobileShapesConfig = {
     },
   ],
 };
+
+// Used for Constitution, Code of Conduct, and Our Supporters desktop pages
+export const aboutShapesConfig = {
+  cross: [
+    {
+      top: "calc(400rem / 16)",
+      right: "90vw",
+      width: "calc(225rem / 16)",
+      height: "calc(225rem / 16)",
+      transform: "rotate(30deg)",
+    },
+  ],
+  triangleBig: [
+    {
+      bottom: "calc(120rem / 16)",
+      left: "91vw",
+      width: "calc(138rem / 16)",
+      height: "calc(138rem / 16)",
+      transform: "rotate(-25deg)",
+    },
+  ],
+  wavesBig: [
+    {
+      top: "calc(-32rem / 16)",
+      left: "88vw",
+      width: "calc(296rem / 16)",
+      height: "calc(254rem / 16)",
+    },
+  ],
+};
diff --git a/pages/about/our-supporters.tsx b/pages/about/our-supporters.tsx
index e7b31442..3451ab1b 100644
--- a/pages/about/our-supporters.tsx
+++ b/pages/about/our-supporters.tsx
@@ -1,6 +1,11 @@
 import React from "react";
 
 import { Image } from "@/components/Image";
+import {
+  GetShapesConfig,
+  aboutShapesConfig,
+  mobileShapesConfig,
+} from "@/components/ShapesBackground";
 
 import Content from "../../content/about/our-supporters.mdx";
 
@@ -19,3 +24,10 @@ export default function OurSupporters() {
     </>
   );
 }
+
+OurSupporters.getShapesConfig = (() => {
+  if (window.innerWidth <= 768) {
+    return mobileShapesConfig;
+  }
+  return aboutShapesConfig;
+}) as GetShapesConfig;
diff --git a/public/images/shapes/triangleBig.svg b/public/images/shapes/triangleBig.svg
new file mode 100644
index 00000000..e7eb21f8
--- /dev/null
+++ b/public/images/shapes/triangleBig.svg
@@ -0,0 +1,3 @@
+<svg width="129" height="112" viewBox="0 0 129 112" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.02026 109.35L64.8232 5.76872L124.626 109.35L5.02026 109.35Z" stroke="black" stroke-width="5.04411"/>
+</svg>