From 8f496090f0dc93a2f66dbf21dede7d700563a6a2 Mon Sep 17 00:00:00 2001
From: 0xshora <112358132134.fibon@gmail.com>
Date: Thu, 4 Jul 2024 16:37:31 +0200
Subject: [PATCH 1/4] chore: adjust sizes about proposa-list popup

---
 src/App.module.css                                              | 2 +-
 .../NewProposalPopupForMain/NewProposalPopupForMain.tsx         | 2 +-
 src/components/NewProposalPopupForMain/ProposalListForMain.tsx  | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/App.module.css b/src/App.module.css
index 63e637e..bc4ba5f 100644
--- a/src/App.module.css
+++ b/src/App.module.css
@@ -107,7 +107,7 @@ body {
     top: 64px;
     left: 10px;
     width: 450px;
-    max-height: calc(100vh - 64px);
+    max-height: calc(100vh - 160px);
     background: rgba(31, 41, 55, 0.95);
     border-radius: 8px;
     overflow-y: hidden;
diff --git a/src/components/NewProposalPopupForMain/NewProposalPopupForMain.tsx b/src/components/NewProposalPopupForMain/NewProposalPopupForMain.tsx
index 4766535..6a62a80 100644
--- a/src/components/NewProposalPopupForMain/NewProposalPopupForMain.tsx
+++ b/src/components/NewProposalPopupForMain/NewProposalPopupForMain.tsx
@@ -144,7 +144,7 @@ const NewProposalPopupForMain: React.FC = () => {
     <div>
       {!isCreatingNewProposal && (
         <button onClick={() => setIsCreatingNewProposal(true)} className='bg-blue-600 text-white w-full px-10 py-3 rounded-md text-sm font-semibold shadow-lg hover:bg-blue-500 transition duration-300'>
-          Create A New Proposal
+          Create A New Proposal(5PX)
         </button>
       )}
 
diff --git a/src/components/NewProposalPopupForMain/ProposalListForMain.tsx b/src/components/NewProposalPopupForMain/ProposalListForMain.tsx
index 0b2f3b7..c8dd00d 100644
--- a/src/components/NewProposalPopupForMain/ProposalListForMain.tsx
+++ b/src/components/NewProposalPopupForMain/ProposalListForMain.tsx
@@ -127,7 +127,7 @@ const ProposalListForMain: React.FC<ProposalListForMainProps> = ({ headerHeight,
           </Link>
         </div>
       </div> */}
-      <div className={`overflow-y-auto px-2`} style={{ height: `calc(100vh - ${headerHeight}px - 170px)` }}>
+      <div className={`overflow-y-auto px-2`} style={{ height: `calc(100vh - ${headerHeight}px - 30vh)` }}>
         <div className='space-y-4'>
           {proposalArray.map((proposal) => {
             return <ProposalItem proposal={proposal} key={proposal.index} onStartVote={handleVote} filter={statusFilter} searchTerm={searchTerm} />

From 1331a822619c41aa7b0dd0e1788c99ea22372cd7 Mon Sep 17 00:00:00 2001
From: 0xshora <112358132134.fibon@gmail.com>
Date: Thu, 4 Jul 2024 17:07:34 +0200
Subject: [PATCH 2/4] chore: px=0 -> stand out

---
 src/components/MenuBar/MenuBar.module.css | 9 ++++++++-
 src/components/MenuBar/PxCounter.tsx      | 3 ++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/MenuBar/MenuBar.module.css b/src/components/MenuBar/MenuBar.module.css
index 6ae76c3..9eb67d9 100644
--- a/src/components/MenuBar/MenuBar.module.css
+++ b/src/components/MenuBar/MenuBar.module.css
@@ -48,7 +48,7 @@
 
 .pxChange {
     position: absolute;
-    top: 20px; /* 調整可能 */
+    top: 20px;
     left: 70%;
     transform: translateX(-10%);
     background-color: rgba(0, 0, 0, 0.8);
@@ -75,3 +75,10 @@
         transform: translate(-50%, -10px);
     }
 }
+
+.zeroPx {
+    background-color: rgba(255, 0, 0, 0.1); 
+    color: #ff0000;
+    border: 1px solid #ff0000;
+    box-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
+}
\ No newline at end of file
diff --git a/src/components/MenuBar/PxCounter.tsx b/src/components/MenuBar/PxCounter.tsx
index d6a32a1..ec00182 100644
--- a/src/components/MenuBar/PxCounter.tsx
+++ b/src/components/MenuBar/PxCounter.tsx
@@ -20,6 +20,7 @@ const PxCounter = () => {
     const [currentPx, setCurrentPx] = React.useState(playerPx);
     const [lastDate, setLastDate] = React.useState(playerLastDate);
     const [pxChange, setPxChange] = React.useState(0);
+
     React.useEffect(() => {
         if (lastDate === playerLastDate) return;
         const currentSeconds = Math.floor(Date.now() / 1_000);
@@ -51,7 +52,7 @@ const PxCounter = () => {
     }, [pxChange]);
 
     return (
-        <div className={styles.addressContainer}>
+        <div className={`${styles.addressContainer} ${currentPx === 0 ? styles.zeroPx : ''}`}>
             {currentPx}/{maxPx} PX
             {pxChange !== 0 && (
                 <div className={styles.pxChange}>

From a6da43c52fbdd621a4f43646fdc1478ed75de571 Mon Sep 17 00:00:00 2001
From: 0xshora <112358132134.fibon@gmail.com>
Date: Thu, 4 Jul 2024 18:49:15 +0200
Subject: [PATCH 3/4] chore: update pixel hover

---
 .../components/Viewport/drawPixels.ts         | 28 +++++++++++++++++--
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/src/webtools/components/Viewport/drawPixels.ts b/src/webtools/components/Viewport/drawPixels.ts
index bed1a4a..4bdfbd3 100644
--- a/src/webtools/components/Viewport/drawPixels.ts
+++ b/src/webtools/components/Viewport/drawPixels.ts
@@ -27,7 +27,7 @@ export function drawPixels(
     ]
 
     // console.log("p", cellSize)
-    const drawPixel = (cellX: number, cellY: number, sizeAdjustment: number = 0) => {
+    const drawPixel = (cellX: number, cellY: number, sizeAdjustment: number = 0, isHovered: boolean = false) => {
         const worldCoords = applyWorldOffset(worldTranslation, [cellX, cellY])
 
         const pixel = getPixel(worldCoords);
@@ -37,18 +37,40 @@ export function drawPixels(
 
         const [x, y, w, h] = getRect(offsets, cellX, cellY, cellSize, doBorder, sizeAdjustment)
 
+        if (isHovered) {
+            // Shadow
+            context.shadowColor = 'rgba(0, 0, 0, 0.5)';
+            context.shadowBlur = 10;
+            context.shadowOffsetX = 5;
+            context.shadowOffsetY = 5;
+
+            // Border
+            context.strokeStyle = 'yellow';
+            context.lineWidth = 2;
+        } else {
+            // Reset shadow
+            context.shadowColor = 'transparent';
+            context.shadowBlur = 0;
+            context.shadowOffsetX = 0;
+            context.shadowOffsetY = 0;
+
+            // Reset border
+            context.strokeStyle = 'transparent';
+            context.lineWidth = 0;
+        }
+
         context.fillRect(x, y, w, h);
     };
 
     for (let x = 0; x <= gridDimensions[0]; x++) {
         for (let y = 0; y <= gridDimensions[1]; y++) {
-            drawPixel(x, y);
+            drawPixel(x, y, 0, false);
         }
     }
 
 
     if (hoveredCell && zoom > ZOOM_TILEMODE) {
-        drawPixel(hoveredCell[0], hoveredCell[1], 8); // having a shadow/outline or transition animation.
+        drawPixel(hoveredCell[0], hoveredCell[1], 8, true); // having a shadow/outline or transition animation.
     }
 }
 

From e10d935f2377c9e10fb0c15679122b9efe18175c Mon Sep 17 00:00:00 2001
From: 0xshora <112358132134.fibon@gmail.com>
Date: Thu, 4 Jul 2024 19:00:19 +0200
Subject: [PATCH 4/4] add stroke

---
 src/webtools/components/Viewport/drawPixels.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/webtools/components/Viewport/drawPixels.ts b/src/webtools/components/Viewport/drawPixels.ts
index 4bdfbd3..8bff6df 100644
--- a/src/webtools/components/Viewport/drawPixels.ts
+++ b/src/webtools/components/Viewport/drawPixels.ts
@@ -46,7 +46,7 @@ export function drawPixels(
 
             // Border
             context.strokeStyle = 'yellow';
-            context.lineWidth = 2;
+            context.lineWidth = 4;
         } else {
             // Reset shadow
             context.shadowColor = 'transparent';
@@ -60,6 +60,10 @@ export function drawPixels(
         }
 
         context.fillRect(x, y, w, h);
+        if (isHovered) {
+            context.strokeRect(x, y, w, h);
+            context.fillRect(x, y, w, h);
+        }
     };
 
     for (let x = 0; x <= gridDimensions[0]; x++) {