From b47caaacabfe031bf942e0c1a19a201f11117cf5 Mon Sep 17 00:00:00 2001
From: ingawei <ingawei@gmail.com>
Date: Tue, 30 Jul 2024 23:21:52 -0400
Subject: [PATCH] make coins flat

---
 web/components/twomba/twomba-toggle.tsx       |  9 ++---
 web/components/widgets/manaCoinNumber.tsx     |  2 +-
 web/public/SweepiesFlat.svg                   |  1 +
 web/public/custom-components/manaFlatCoin.tsx | 19 ++++++++++
 .../custom-components/sweepiesFlatCoin.tsx    | 19 ++++++++++
 web/public/manaFlat.svg                       | 38 +++++++++++++++++++
 6 files changed, 82 insertions(+), 6 deletions(-)
 create mode 100644 web/public/SweepiesFlat.svg
 create mode 100644 web/public/custom-components/manaFlatCoin.tsx
 create mode 100644 web/public/custom-components/sweepiesFlatCoin.tsx
 create mode 100644 web/public/manaFlat.svg

diff --git a/web/components/twomba/twomba-toggle.tsx b/web/components/twomba/twomba-toggle.tsx
index a54b54513b..66ae25beed 100644
--- a/web/components/twomba/twomba-toggle.tsx
+++ b/web/components/twomba/twomba-toggle.tsx
@@ -1,7 +1,6 @@
-import { SweepiesCoin } from 'web/public/custom-components/sweepiesCoin'
-import { Row } from '../layout/row'
-import { ManaCoin } from 'web/public/custom-components/manaCoin'
 import clsx from 'clsx'
+import { ManaFlatCoin } from 'web/public/custom-components/manaFlatCoin'
+import { SweepiesFlatCoin } from 'web/public/custom-components/sweepiesFlatCoin'
 
 export type TWOMBA_MODE_TYPE = 'sweepies' | 'mana'
 
@@ -22,13 +21,13 @@ export function TwombaToggle(props: {
           mode === 'sweepies' ? 'left-0' : 'left-[calc(100%-2.3rem)]'
         )}
       /> */}
-      <SweepiesCoin
+      <SweepiesFlatCoin
         className={clsx(
           'z-10 h-8 transition-opacity',
           mode === 'sweepies' ? 'opacity-100' : 'opacity-20'
         )}
       />
-      <ManaCoin
+      <ManaFlatCoin
         className={clsx(
           'z-10 h-8 transition-opacity',
           mode === 'mana' ? 'opacity-100' : 'opacity-20'
diff --git a/web/components/widgets/manaCoinNumber.tsx b/web/components/widgets/manaCoinNumber.tsx
index 3a7f0134e2..5fca9f9cf3 100644
--- a/web/components/widgets/manaCoinNumber.tsx
+++ b/web/components/widgets/manaCoinNumber.tsx
@@ -6,7 +6,7 @@ import { animated } from '@react-spring/web'
 import clsx from 'clsx'
 import { shortenNumber } from 'web/lib/util/formatNumber'
 import { SpiceCoin } from 'web/public/custom-components/spiceCoin'
-import { SweepiesCoin } from 'web/public/custom-components/sweepiesCoin'
+import { SweepiesCoin } from 'web/public/custom-components/sweepiesFlatCoin'
 
 export function CoinNumber(props: {
   amount?: number
diff --git a/web/public/SweepiesFlat.svg b/web/public/SweepiesFlat.svg
new file mode 100644
index 0000000000..4182d05706
--- /dev/null
+++ b/web/public/SweepiesFlat.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="Layer_3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1500 1500"><defs><style>.cls-1{fill:#4d7c0f;}.cls-2{fill:#d9f99d;}</style></defs><circle class="cls-2" cx="750" cy="750" r="740.77"/><circle class="cls-1" cx="750" cy="750" r="595.86"/><path class="cls-2" d="M757.87,1203.63c-45.96,0-87.95-5.44-125.96-16.28-38.01-10.86-71.43-25.9-100.25-45.12-28.82-19.21-52.63-40.73-71.43-64.53-18.8-23.81-31.95-48.66-39.46-74.56l142.85-43.86c10.84,30.92,32.16,58.07,63.9,81.45,31.75,23.4,71,35.51,117.8,36.35,54.29,0,97.32-11.27,129.07-33.83,31.75-22.56,47.62-52.22,47.62-88.98,0-33.42-13.38-60.77-40.11-82.08-26.73-21.29-62.65-37.8-107.76-49.5l-107.77-27.57c-40.95-10.84-77.91-26.72-110.9-47.6-32.99-20.88-58.89-47.21-77.69-78.95-18.8-31.75-28.19-69.34-28.19-112.79,0-81.86,26.72-145.57,80.18-191.11,53.47-45.53,129.91-68.3,229.33-68.3,55.96,0,105.04,8.57,147.23,25.69,42.18,17.14,77.05,40.52,104.63,70.18s48.05,63.29,61.42,100.88l-140.36,45.1c-12.54-33.4-34.26-60.98-65.17-82.7-30.91-21.72-69.34-32.58-115.28-32.58s-85.01,11.29-112.15,33.83c-27.16,22.56-40.73,53.9-40.73,93.99,0,32.58,10.64,57.85,31.95,75.81,21.29,17.96,50.32,31.54,87.09,40.73l107.77,26.32c78.53,19.23,139.5,52.22,182.95,99,43.44,46.78,65.17,98.57,65.17,155.37,0,50.13-12.13,94.42-36.35,132.83-24.22,38.43-59.93,68.5-107.14,90.22-47.21,21.72-104.63,32.58-172.29,32.58Z"/></svg>
\ No newline at end of file
diff --git a/web/public/custom-components/manaFlatCoin.tsx b/web/public/custom-components/manaFlatCoin.tsx
new file mode 100644
index 0000000000..852e8a36d5
--- /dev/null
+++ b/web/public/custom-components/manaFlatCoin.tsx
@@ -0,0 +1,19 @@
+import clsx from 'clsx'
+import { ENV_CONFIG } from 'common/envs/constants'
+import Image from 'next/image'
+
+export function ManaFlatCoin(props: { className?: string }) {
+  const { className } = props
+  return (
+    <img
+      src="/manaFlat.svg"
+      alt={ENV_CONFIG.moneyMoniker}
+      className={clsx('inline-block', className)}
+      style={{
+        width: '1em',
+        height: '1em',
+        marginRight: '0.1em',
+      }}
+    />
+  )
+}
diff --git a/web/public/custom-components/sweepiesFlatCoin.tsx b/web/public/custom-components/sweepiesFlatCoin.tsx
new file mode 100644
index 0000000000..550b0b3521
--- /dev/null
+++ b/web/public/custom-components/sweepiesFlatCoin.tsx
@@ -0,0 +1,19 @@
+import clsx from 'clsx'
+import { ENV_CONFIG } from 'common/envs/constants'
+import Image from 'next/image'
+
+export function SweepiesFlatCoin(props: { className?: string }) {
+  const { className } = props
+  return (
+    <img
+      src="/sweepiesFlat.svg"
+      alt={ENV_CONFIG.moneyMoniker}
+      className={clsx('inline-block', className)}
+      style={{
+        width: '1em',
+        height: '1em',
+        marginRight: '0.1em',
+      }}
+    />
+  )
+}
diff --git a/web/public/manaFlat.svg b/web/public/manaFlat.svg
new file mode 100644
index 0000000000..49dc7d6f61
--- /dev/null
+++ b/web/public/manaFlat.svg
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8"?><svg
+  id="Layer_3"
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 1500 1500"
+>
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #a5b4fc;
+      }
+      .cls-2 {
+        fill: #4338ca;
+      }
+    </style>
+  </defs>
+  <circle class="cls-1" cx="748.91" cy="752.76" r="740.77" />
+  <circle class="cls-2" cx="748.91" cy="752.76" r="595.86" />
+  <polygon
+    class="cls-1"
+    points="1122.69 371.9 1122.69 1133.61 996.46 1133.61 996.46 572.26 748.35 937.74 501.35 575.36 501.35 1133.61 375.12 1133.61 375.12 371.9 510.05 371.9 749.22 724.63 986.67 371.9 1122.69 371.9"
+  />
+  <rect
+    class="cls-1"
+    x="715.72"
+    y="400.13"
+    width="66.37"
+    height="935.1"
+    transform="translate(-118.82 1616.52) rotate(-90)"
+  />
+  <rect
+    class="cls-1"
+    x="715.72"
+    y="540.21"
+    width="66.37"
+    height="935.1"
+    transform="translate(-258.91 1756.59) rotate(-90)"
+  />
+</svg>