From d0e133459daffb7271077dbc5936d274fbe789bb Mon Sep 17 00:00:00 2001
From: Dev 1 <dev@siliconpin.com>
Date: Mon, 4 Sep 2023 11:54:57 +0530
Subject: [PATCH] little changes on button desgine

---
 src/pages/drawing/index.astro | 43 ++++++++++++++++++-----------------
 1 file changed, 22 insertions(+), 21 deletions(-)

diff --git a/src/pages/drawing/index.astro b/src/pages/drawing/index.astro
index f139dc0..de261c2 100644
--- a/src/pages/drawing/index.astro
+++ b/src/pages/drawing/index.astro
@@ -6,17 +6,17 @@ import Layout from '../../layouts/Layout.astro';
         <div>
         </div>
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
     </main>
 </Layout>
 <script is:inline>
- const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
-
-const drawingZone = {
-    x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width
-    y: window.innerHeight / 4,
-    width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width
-    height: window.innerHeight / 2,
-};
+    const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
+    const drawingZone = {
+        x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width
+        y: window.innerHeight / 4,
+        width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width
+        height: window.innerHeight / 2,
+    };
     var assetsList = {}
     const params = new URLSearchParams(window.location.search);
     const paramsID = params.get('id');
@@ -143,7 +143,6 @@ const drawingZone = {
 
                     // Add a border or tick mark to indicate the selected color
                     button.style.border = '3px solid #000'; // Add a black border (you can customize this)
-
                     // Update the selectedButton variable to the current button
                     selectedButton = button;
                 });
@@ -167,10 +166,11 @@ const drawingZone = {
 
         // Create the Clear button
         const clearButton = document.createElement('button');
-        clearButton.textContent = 'Clear';
-        clearButton.style.backgroundColor = 'blue';
-        clearButton.style.color = 'white';
-        clearButton.style.padding = '10px 20px';
+        clearButton.innerHTML ='<i class="fa fa-remove" style="font-size:30px"></i>';
+        // clearButton.textContent = 'Clear';
+        clearButton.style.color = 'blue';
+        // clearButton.style.color = 'white';
+        clearButton.style.padding = '5px 10px';
         clearButton.style.fontSize = '16px';
         clearButton.style.fontWeight = 'bold';
         clearButton.style.borderRadius = '50%';
@@ -181,10 +181,11 @@ const drawingZone = {
 
         // Create the Eraser button
         const eraserButton = document.createElement('button');
-        eraserButton.textContent = 'Eraser';
-        eraserButton.style.backgroundColor = 'green';
-        eraserButton.style.color = 'white';
-        eraserButton.style.padding = '10px 20px';
+        // eraserButton.textContent = 'Eraser';
+        eraserButton.innerHTML = '<i class="fa fa-eraser" style="font-size:30px"></i>';
+        eraserButton.style.color = '#7c4c23';
+        // eraserButton.style.color = 'white';
+        eraserButton.style.padding = '5px 5px';
         eraserButton.style.fontSize = '16px';
         eraserButton.style.fontWeight = 'bold';
         eraserButton.style.borderRadius = '50%';
@@ -192,12 +193,12 @@ const drawingZone = {
         eraserButton.addEventListener('click', () => {
             isErasing = !isErasing;
             if (isErasing) {
-                eraserButton.style.backgroundColor = 'red'; // Update eraser button color to indicate erasing mode
-                eraserButton.style.color = 'white';
+                // eraserButton.style.backgroundColor = 'red'; // Update eraser button color to indicate erasing mode
+                eraserButton.style.color = 'red';
             } else {
                 // Return to drawing mode
-                eraserButton.style.backgroundColor = 'green'; // Restore eraser button color
-                eraserButton.style.color = 'white';
+                // eraserButton.style.backgroundColor = 'green'; // Restore eraser button color
+                eraserButton.style.color = '#7c4c23';
             }
         });