From 455f41373e5f74ca17c2d036f70937408dbb8e09 Mon Sep 17 00:00:00 2001
From: Utsavladia <utsavladia@gmail.com>
Date: Wed, 31 Jul 2024 22:53:23 +0530
Subject: [PATCH] fixed the sizing for tablet screen size

---
 package-lock.json                   | 43 ++++++++++++++++++++++++-----
 package.json                        |  1 +
 src/components/Home.jsx             |  6 ++--
 src/components/Menu.jsx             |  2 +-
 src/components/Team/Contributor.jsx |  3 +-
 5 files changed, 42 insertions(+), 13 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index feedd55..04947ec 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "draw-it-out",
       "version": "0.0.0",
       "dependencies": {
+        "axios": "^1.7.2",
         "fabric": "^5.3.0",
         "gapi-script": "^1.2.0",
         "jspdf": "^2.5.1",
@@ -1288,8 +1289,7 @@
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
       "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
-      "license": "MIT",
-      "optional": true
+      "license": "MIT"
     },
     "node_modules/atob": {
       "version": "2.1.2",
@@ -1353,6 +1353,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/axios": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.2.tgz",
+      "integrity": "sha512-2A8QhOMrbomlDuiLeK9XibIBzuHeRcqqNOHp0Cyp5EoJ1IFDh+XZH3A6BkXtv0K4gFGCI0Y4BM7B1wOEi0Rmgw==",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/babel-plugin-styled-components": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.1.4.tgz",
@@ -1658,7 +1668,6 @@
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
       "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
       "license": "MIT",
-      "optional": true,
       "dependencies": {
         "delayed-stream": "~1.0.0"
       },
@@ -1917,7 +1926,6 @@
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
       "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
       "license": "MIT",
-      "optional": true,
       "engines": {
         "node": ">=0.4.0"
       }
@@ -2631,6 +2639,25 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.6",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
+      "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/for-each": {
       "version": "0.3.3",
       "dev": true,
@@ -2659,7 +2686,6 @@
       "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
       "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
       "license": "MIT",
-      "optional": true,
       "dependencies": {
         "asynckit": "^0.4.0",
         "combined-stream": "^1.0.8",
@@ -3811,7 +3837,6 @@
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
       "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
       "license": "MIT",
-      "optional": true,
       "engines": {
         "node": ">= 0.6"
       }
@@ -3821,7 +3846,6 @@
       "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
       "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
       "license": "MIT",
-      "optional": true,
       "dependencies": {
         "mime-db": "1.52.0"
       },
@@ -4511,6 +4535,11 @@
         "react-is": "^16.13.1"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/psl": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
diff --git a/package.json b/package.json
index 36e4917..238d925 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
     "start": "npm run dev"
   },
   "dependencies": {
+    "axios": "^1.7.2",
     "fabric": "^5.3.0",
     "gapi-script": "^1.2.0",
     "jspdf": "^2.5.1",
diff --git a/src/components/Home.jsx b/src/components/Home.jsx
index 2bba8d0..e1445df 100644
--- a/src/components/Home.jsx
+++ b/src/components/Home.jsx
@@ -137,7 +137,7 @@ function Home() {
                 <div className="flex flex-col min-w-full justify-center gsm:flex-column">
                     <div className="relative flex flex-col justify-between mt-[0.5vh] items-center font-primary">
                         {/* Drawing Toolbar */}
-                        <div className="flex flex-col md:flex-row justify-between lg:justify-center items-center gap-10 w-full">
+                        <div className="flex flex-col md:flex-row justify-between md:justify-start lg:justify-center items-center lg:gap-10 md:gap-4 gap-10 w-full">
                             {showMenuAndBgColor && (
                                 <Menu
                                     isDrawing={isDrawing}
@@ -155,7 +155,7 @@ function Home() {
                                 />
                             )}
                             {/* Toolbar right menu section */}
-                            <div className="flex flex-row justify-center align-center items-center md:absolute top-0 md:right-4 right-2">
+                            <div className="flex flex-row justify-center align-center items-center md:absolute top-2 md:right-2 right-2">
                                 {/* Eye button */}
                                 <div
                                     className={`bg-[#CBCCCF] scale-[0.7] p-[1rem] text-[1.5rem] w-80% rounded-[50%] shadow-black shadow-md transform transition duration-300 ease-in-out text-black hover:bg-gray-400 cursor-pointer dark:bg-slate-800 dark:text-[#ffffff] hover:md:scale-[0.8] ${!showMenuAndBgColor && "mt-10"
@@ -213,7 +213,7 @@ function Home() {
                         <div className="flex justify-center items-center w-full h-full flex-grow">
                             <canvas
                                 id="draw"
-                                className={`whiteboard bg-slate-950 mt-[4vh] rounded-[0.6rem] shadow-md shadow-black dark:shadow-black dark:shadow-lg ${isDrawing
+                                className={`whiteboard bg-slate-950 max-w-full mt-[4vh] rounded-[0.6rem] shadow-md shadow-black dark:shadow-black dark:shadow-lg ${isDrawing
                                     ? "cursor-pointer"
                                     : "cursor-default pointer-events-none"
                                     }`}
diff --git a/src/components/Menu.jsx b/src/components/Menu.jsx
index c0acada..acfcaef 100644
--- a/src/components/Menu.jsx
+++ b/src/components/Menu.jsx
@@ -171,7 +171,7 @@ const Menu = ({
 
   return (
     <>
-      <div id="toolbar" className="scale-[0.8] max-w-[100%] bg-[#CBCCCF] shadow-mdm dark:bg-[#111111] flex flex-row justify-center items-center gap-[1rem] px-[1rem] pt-2 pb-2 rounded-[0.6rem] flex-wrap">
+      <div id="toolbar" className="md:scale-[0.7] lg:scale-[0.8] scale-[0.8] max-w-[100%] bg-[#CBCCCF] shadow-mdm dark:bg-[#111111] flex flex-row justify-center md:justify-start lg:justify-center items-center gap-[1rem] px-[1rem] pt-2 pb-2 rounded-[0.6rem] flex-wrap">
         <Brush
           isDropdownOpen={isDropdownOpen}
           toggleDropdown={toggleDropdown}
diff --git a/src/components/Team/Contributor.jsx b/src/components/Team/Contributor.jsx
index 7ddda93..2800cd2 100644
--- a/src/components/Team/Contributor.jsx
+++ b/src/components/Team/Contributor.jsx
@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import axios from 'axios';
-
+import axios from 'axios'
 // Replace these with the actual repository owner and name
 const REPO_OWNER = 'singodiyashubham87';
 const REPO_NAME = 'Draw-it-out';