switch icons and add variant

src/pages/editor/components/LayersPanel.tsx

@@ -92,17 +92,20 @@ const LayersPanel = ({ isOpen, setIsOpen }: LayersPanelProps) => {
   return (
     <div className="fixed left-4 top-[100px] bottom-4 z-30 flex flex-col">
       <div className="bg-white rounded-l-4xl w-16 h-full flex flex-col items-center gap-4 p-4">
+
         <button
           onClick={() => {
             setActiveTab('pages')
           }}
+
           className={clx(
             'w-10 h-10 flex items-center justify-center rounded-lg transition-colors',
             activeTab === 'pages' ? 'bg-white' : 'hover:bg-gray-200'
           )}
         >
-          <DocumentText size={24} color="black" />
+          <Layer variant={activeTab === 'pages' ? 'Bold' : 'Outline'} size={24} color="black" />
         </button>
+
         <button
           onClick={() => {
             setActiveTab('layers')
@@ -112,7 +115,7 @@ const LayersPanel = ({ isOpen, setIsOpen }: LayersPanelProps) => {
             activeTab === 'layers' ? 'bg-white' : 'hover:bg-gray-200'
           )}
         >
-          <Layer size={24} color="black" />
+          <DocumentText variant={activeTab === 'layers' ? 'Bold' : 'Outline'} size={24} color="black" />
         </button>
       </div>