toolbar style change part-1

rohanjulka19 · Jan 30, 2024 · 53e09be · 53e09be
1 parent 0524c3c
commit 53e09be
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 15 deletions.
diff --git a/client/assets/edit_black_36dp.svg b/client/assets/edit_black_36dp.svg
diff --git a/client/index.html b/client/index.html
@@ -5,14 +5,15 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>QuickDoodle</title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet">
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
     <canvas id="canvas" data-cy="canvas"></canvas>
     <div id="toolbar" class="toolbar">
         <div id="tools" class="options">
-            <a id="eraser" class="tool" data-cy="eraser-btn"><i class="fa-solid fa-eraser"></i></a>
-            <a id="pen" class="tool" data-cy="pen-btn"><i class="fa-solid fa-pen"></i></a>
+            <a id="eraser" class="tool" data-cy="eraser-btn"><span class="material-icons-outlined primary-tools">dock</span></a>
+            <a id="pen" class="tool" data-cy="pen-btn"><span class="material-icons-outlined primary-tools"> edit </span></a>
         </div>
 
         <div id="pen-color-options" class="options pen-options" data-cy="color-btn-section">

diff --git a/client/style.css b/client/style.css
@@ -12,6 +12,7 @@ body {
     display: grid;
     place-items: center;
     height: 100vh;
+    background: #F9F9FA;
 }
 
 canvas {
@@ -23,11 +24,9 @@ canvas {
     position: absolute;
     left: 5%;
     top: 10%;
-    background: white;
-    border: 1px solid var(--black);
-    box-shadow: 0px 0px 5px 1px #f4f0ec;
-    border-radius: 5px;
-    min-width: 10%;
+    background: rgb(255,255,255);
+    box-shadow: 0px 0px 10px 2px rgb(224,225,230);
+    border-radius: 7px;
     display: flex;
     justify-content: flex-start;
     align-items: center;
@@ -39,26 +38,19 @@ canvas {
     cursor: pointer;
     min-width: 10%;
     border-radius: 10%;
-    border: 1px solid var(--black);
-    box-shadow: 0px 0px 1px 0px var(--box-shadow);
-    /* box-shadow: none; */
     padding: 0.7rem;
     text-align: center;
 }
 
 .toolbar .tool:hover {
     box-shadow: 0px 0px 10px 0px var(--box-shadow);
     border: 2px solid black;
-
-    /* background-color: rgba(255,99,71, 0.5); */
-
 }
 
 .options {
     display: grid;
-    grid-template-columns: 1fr 1fr;
+    grid-template-columns: 1fr;
     gap: 0.75rem;
-    padding: 1rem;
     width: 100%;
 }
 
@@ -82,6 +74,19 @@ a.tool.line-width > hr {
     display: none;
 }
 
+.pen-options {
+    display: none;
+}
+
+.pen-options {
+    display: none;
+}
+
+.primary-tools {
+    color: rgb(98,95,111);
+    font-size: 36px;
+}
+
 .eraser-radius {
     padding: 0.5rem 0.3rem;
     display: grid;