Fix module issues, fix styling, add conditions to when the background removal and edit controls are shown

src/components/sidebar/Sidebar.jsx

@@ -3,6 +3,7 @@ import { UploadTab } from './UploadTab';
 import { StickersTab } from './StickersTab';
 import { TextTab } from './TextTab';
 import { TemplatesTab } from './TemplatesTab';
+import '../../styles/Sidebar.css';
 
 const TABS = [
   { id: 'upload', label: 'Upload', icon: '📁' },
@@ -26,21 +27,16 @@ export function Sidebar({ onAddImage, onAddSticker, onAddText, onAddTemplate, on
 
   return (
     <div className="sidebar">
-      <div style={{ display: 'flex', borderBottom: '1px solid var(--border)', background: 'var(--bg-primary)' }}>
+      <div className="sidebar-tabs">
         {TABS.map((tab) => (
           <button key={tab.id} onClick={() => setActiveTab(tab.id)}
-            style={{
-              flex: 1, padding: '12px 8px', border: 'none', background: 'transparent', cursor: 'pointer',
-              fontSize: '11px', fontWeight: activeTab === tab.id ? '600' : '400',
-              color: activeTab === tab.id ? 'var(--accent)' : 'var(--text-secondary)',
-              borderBottom: activeTab === tab.id ? '2px solid var(--accent)' : '2px solid transparent',
-            }}>
-            <div style={{ fontSize: '16px', marginBottom: '2px' }}>{tab.icon}</div>
+            className={`sidebar-tab-btn${activeTab === tab.id ? ' active' : ''}`}>
+            <div className="sidebar-tab-icon">{tab.icon}</div>
             {tab.label}
           </button>
         ))}
       </div>
-      <div style={{ flex: 1, overflow: 'auto', padding: '1rem' }}>{renderTabContent()}</div>
+      <div className="sidebar-content">{renderTabContent()}</div>
     </div>
   );
 }