updated pannels

app/src/styles/components/tools.scss

@@ -4,7 +4,7 @@
 .tools-container {
   @include flex-center;
   position: fixed;
-  bottom: 32px;
+  bottom: 50px;
   left: 50%;
   transform: translate(-50%, 0);
   padding: 8px;
@@ -14,12 +14,14 @@
   width: fit-content;
   transition: width 0.2s;
   background-color: var(--background-color);
+
   .split {
     height: 20px;
     width: 2px;
     border-radius: 2px;
     background: var(--highlight-accent-color);
   }
+
   .draw-tools,
   .general-options,
   .activeDropicon {
@@ -29,42 +31,46 @@
     width: 0;
     opacity: 0;
     animation: expandWidth 0.2s ease-in-out forwards;
+
     .tool-button {
       @include flex-center;
       height: 28px;
       width: 28px;
       cursor: pointer;
       border-radius: #{$border-radius-small};
+
       &:hover {
-        background: color-mix(
-          in srgb,
-          var(--highlight-accent-color) 60%,
-          transparent
-        );
+        background: color-mix(in srgb,
+            var(--highlight-accent-color) 60%,
+            transparent);
       }
     }
+
     .active {
       background-color: var(--accent-color);
+
       &:hover {
         background-color: var(--accent-color);
       }
     }
   }
+
   .activeDropicon {
     gap: 2px;
+
     .drop-down-option-button {
       @include flex-center;
       height: 28px;
       cursor: pointer;
       border-radius: #{$border-radius-small};
       position: relative;
+
       &:hover {
-        background: color-mix(
-          in srgb,
-          var(--highlight-accent-color) 60%,
-          transparent
-        );
+        background: color-mix(in srgb,
+            var(--highlight-accent-color) 60%,
+            transparent);
       }
+
       .drop-down-container {
         position: absolute;
         bottom: 40px;
@@ -72,6 +78,7 @@
         box-shadow: #{$box-shadow-medium};
         padding: 8px;
         border-radius: #{$border-radius-large};
+
         .option-list {
           margin: 4px 0;
           display: flex;
@@ -80,18 +87,22 @@
           border-radius: #{$border-radius-medium};
           gap: 6px;
           padding: 4px;
+
           &:hover {
             background-color: var(--highlight-accent-color);
             color: var(--accent-color);
+
             path {
               stroke: var(--accent-color);
             }
           }
+
           .active-option {
             height: 12px;
             width: 12px;
             @include flex-center;
           }
+
           .option {
             color: inherit;
           }
@@ -99,6 +110,7 @@
       }
     }
   }
+
   .toggle-threed-button {
     @include flex-center;
     padding: 3px;
@@ -106,12 +118,14 @@
     background-color: var(--highlight-accent-color);
     gap: 2px;
     position: relative;
+
     .toggle-option {
       font-size: var(--font-size-small);
       padding: 2px;
       z-index: 1;
       transition: all 0.2s;
     }
+
     &::after {
       content: "";
       position: absolute;
@@ -123,15 +137,38 @@
       border-radius: #{$border-radius-small};
       transition: all 0.2s;
     }
+
     .active {
       color: var(--highlight-accent-color);
     }
   }
+
   .toggled {
     &::after {
       left: 24px;
     }
   }
+
+  .exitPlay {
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    background-color: var(--accent-color);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    position: relative;
+    transition: background-color 0.3s, transform 0.3s;
+    color: var(--background-color);
+  }
+
+
+  .exitPlay:hover {
+    background-color: var(--accent-color);
+    transform: scale(1.1);
+  }
+
 }
 
 @keyframes expandWidth {
@@ -139,8 +176,9 @@
     width: 0;
     opacity: 0;
   }
+
   to {
     width: fit-content;
     opacity: 1;
   }
-}
+}