From 818d13fade33e77ba3da6cbf4221df53d05554e9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Mon, 8 Apr 2024 21:17:59 -0500
Subject: [PATCH] feat: watermark

---
 src/app/tools/compare/page.tsx          | 80 +++++++++++++------------
 src/icons/BlitzkriegButtonWatermark.tsx | 38 ++++++++++++
 2 files changed, 80 insertions(+), 38 deletions(-)
 create mode 100644 src/icons/BlitzkriegButtonWatermark.tsx

diff --git a/src/app/tools/compare/page.tsx b/src/app/tools/compare/page.tsx
index 92fbf5b7d..a5cd4a860 100644
--- a/src/app/tools/compare/page.tsx
+++ b/src/app/tools/compare/page.tsx
@@ -43,6 +43,7 @@ import {
 } from '../../../core/blitzkrieg/tankDefinitions';
 import { tankIcon } from '../../../core/blitzkrieg/tankIcon';
 import { tankToCompareMember } from '../../../core/blitzkrieg/tankToCompareMember';
+import { BlitzkriegButtonWatermark } from '../../../icons/BlitzkriegButtonWatermark';
 import { theme } from '../../../stitches.config';
 import {
   DeltaMode,
@@ -449,7 +450,18 @@ export default function Page() {
           <Table.Root variant="surface" style={{ maxWidth: '100%' }}>
             <Table.Header>
               <Table.Row>
-                <Table.ColumnHeaderCell width="0" />
+                <Table.ColumnHeaderCell width="0">
+                  <Flex
+                    style={{
+                      width: '100%',
+                      height: '100%',
+                    }}
+                    align="center"
+                    justify="center"
+                  >
+                    <BlitzkriegButtonWatermark width={64} height={64} />
+                  </Flex>
+                </Table.ColumnHeaderCell>
 
                 {members.map(({ tank, key }, index) => {
                   return <TankCard index={index} key={key} tank={tank} />;
@@ -472,45 +484,37 @@ export default function Page() {
                       <Popover.Trigger>
                         <Button variant="ghost" radius="large">
                           <Flex
-                            gap="1"
-                            align="center"
-                            justify="center"
                             direction="column"
+                            style={{
+                              gap: 2,
+                            }}
                           >
-                            Skills
-                            <Flex
-                              direction="column"
-                              style={{
-                                gap: 2,
-                              }}
-                            >
-                              {Object.entries(
-                                awaitedSkillDefinitions.classes,
-                              ).map(([tankClass, skills]) => (
-                                <Flex
-                                  key={tankClass}
-                                  style={{
-                                    gap: 2,
-                                  }}
-                                >
-                                  {skills.map((skill) => (
-                                    <div
-                                      key={skill}
-                                      style={{
-                                        width: 6,
-                                        height: 6,
-                                        borderRadius: 2,
-                                        backgroundColor:
-                                          crewSkills[skill] === 0
-                                            ? theme.colors.textLowContrast
-                                            : theme.colors
-                                                .textLowContrast_crimson,
-                                      }}
-                                    />
-                                  ))}
-                                </Flex>
-                              ))}
-                            </Flex>
+                            {Object.entries(
+                              awaitedSkillDefinitions.classes,
+                            ).map(([tankClass, skills]) => (
+                              <Flex
+                                key={tankClass}
+                                style={{
+                                  gap: 2,
+                                }}
+                              >
+                                {skills.map((skill) => (
+                                  <div
+                                    key={skill}
+                                    style={{
+                                      width: 6,
+                                      height: 6,
+                                      borderRadius: 2,
+                                      backgroundColor:
+                                        crewSkills[skill] === 0
+                                          ? theme.colors.textLowContrast
+                                          : theme.colors
+                                              .textLowContrast_crimson,
+                                    }}
+                                  />
+                                ))}
+                              </Flex>
+                            ))}
                           </Flex>
                         </Button>
                       </Popover.Trigger>
diff --git a/src/icons/BlitzkriegButtonWatermark.tsx b/src/icons/BlitzkriegButtonWatermark.tsx
new file mode 100644
index 000000000..a24ea0000
--- /dev/null
+++ b/src/icons/BlitzkriegButtonWatermark.tsx
@@ -0,0 +1,38 @@
+import { ComponentProps } from 'react';
+
+export function BlitzkriegButtonWatermark(props: ComponentProps<'svg'>) {
+  return (
+    <svg
+      color="#ffffff"
+      opacity={1 / 16}
+      width="426"
+      height="426"
+      viewBox="0 0 426 426"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <g clip-path="url(#clip0_478_230)">
+        <path
+          d="M253.802 170.741C259.515 174.783 265.336 177.243 271.264 178.12C277.14 178.96 282.553 177.629 287.502 174.127C290.784 171.805 292.637 169.134 293.059 166.116C293.482 163.097 292.968 160.374 291.517 157.947L269.391 142.292C265.752 141.192 261.826 140.81 257.612 141.146C253.449 141.445 249.701 142.774 246.367 145.133C241.47 148.598 239.667 152.446 240.958 156.677C242.249 160.908 245.725 165.027 251.387 169.032L253.802 170.741Z"
+          fill="currentColor"
+        />
+        <path
+          d="M186.616 242.201C182.454 242.5 178.58 242.154 174.992 241.164L152.555 225.289C151.104 222.788 150.59 220.065 151.012 217.12C151.487 214.138 153.418 211.449 156.804 209.053C161.701 205.588 167.036 204.276 172.808 205.116C178.581 205.883 184.323 208.287 190.036 212.33L192.374 213.983C198.087 218.026 201.667 222.217 203.114 226.559C204.561 230.827 202.993 234.582 198.408 237.826C194.709 240.444 190.778 241.902 186.616 242.201Z"
+          fill="currentColor"
+        />
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M235.625 52.6262L416.628 180.603C422.876 185.02 426 190.81 426 196.6V229C426 234.79 422.876 240.58 416.628 244.997L235.625 372.974C223.13 381.809 202.87 381.809 190.375 372.974L9.37173 244.997C3.1239 240.58 -3.95076e-06 234.79 0 229V196.6C0 190.81 3.12391 185.02 9.37173 180.603L190.375 52.6262C202.87 43.7913 223.13 43.7913 235.625 52.6262ZM323.986 189.104C322.987 194 319.935 198.254 314.829 201.866L191.273 289.287L208.958 301.8L336.968 211.228C349.42 202.418 355.761 192.897 355.991 182.665C356.274 172.469 349.715 162.631 336.315 153.15L269.393 105.8L243.995 123.77L253.265 130.551L253.031 130.716C247.831 129.912 242.108 130.25 235.863 131.729C229.617 133.208 223.994 135.717 218.992 139.255C209.302 146.112 205.228 153.919 206.769 162.677C208.311 171.361 214.535 179.562 225.442 187.279L227.935 189.043C238.842 196.76 250.511 201.072 262.941 201.978C275.371 202.811 286.223 199.947 295.497 193.386C301.488 189.147 305.321 185.039 306.994 181.062C308.667 177.085 309.04 173.183 308.112 169.357L314.812 174.097C321.979 179.168 325.037 184.171 323.986 189.104ZM60 196.406L174.835 277.657L200.155 259.742L191.897 253.788L192.053 253.678C197.201 254.371 202.638 253.942 208.364 252.39C214.089 250.838 219.531 248.237 224.688 244.588C234.066 237.953 238.089 229.999 236.756 220.725C235.424 211.452 229.33 202.975 218.475 195.295L215.982 193.531C205.179 185.887 193.458 181.686 180.82 180.927C168.129 180.131 157.095 183.05 147.717 189.686C142.559 193.335 139.066 197.166 137.236 201.18C135.355 205.157 134.8 209.188 135.572 213.272L85.8668 178.104L60 196.406Z"
+          fill="currentColor"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_478_230">
+          <rect width="426" height="426" fill="currentColor" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}