side-tray-styles-patch

app/web/src/components/IdeSideBar/IdeSideBar.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { getActiveClasses } from 'get-active-classes'
 import Svg from 'src/components/Svg/Svg'
 import {
   sidebarTopConfig,
@@ -10,9 +10,11 @@ import { useIdeContext } from 'src/helpers/hooks/useIdeContext'
 function TabToggle({ item, className = '', active, onChange, onClick }) {
   return (
     <label
-      className={`tabToggle${item.disabled ? ' disabled' : ''}${
+      className={getActiveClasses({
-        active ? ' active' : ''
+        'bg-ch-pink-800 text-ch-pink-300 bg-opacity-30': active,
-      } ${className}`}
+        'text-ch-gray-550 cursor-not-allowed': item.disabled,
+        [`text-ch-gray-300 p-3 mb-1 flex justify-center ${className}`]: true,
+      })}
     >
       <input
         name="sidebar-tabs"

app/web/src/index.css

@@ -32,19 +32,6 @@
 
 }
 
-@layer components {
-  .tabToggle {
-    @apply text-ch-gray-300 p-3 mb-1 flex justify-center;
-  }
-  .tabToggle.active {
-    @apply bg-ch-pink-800 text-ch-pink-300 bg-opacity-30;
-  }
-  .tabToggle.disabled {
-    @apply text-ch-gray-550 cursor-not-allowed;
-
-  }
-}
-
 .three-debug-panel-1 {
   position: fixed;
   padding-top: 300px;