custom shortcut support in popup

interface/src/components/ColorPicker.tsx

@@ -22,18 +22,20 @@ const Picker = ({ color, onChange }: ColorPickerProps) => {
   }, [showPicker]);
 
   return (
-    <div className="">
+    <>
       <button
         onClick={() => setShowPicker(!showPicker)}
         style={{ background: color }}
         className="w-16 h-8 rounded-md"
       ></button>
       {showPicker && (
-        <div ref={ref} className="fixed top-0 left-0 z-50 p-4 bg-white border rounded-lg shadow-lg border-zinc-00">
-          <ColorPicker value={color} onChange={onChange} />
+        <div className="absolute top-0 left-0 w-full h-full bg-black/20">
+          <div ref={ref} className="fixed top-0 left-0 z-50 p-4 bg-white border rounded-lg shadow-lg border-zinc-00">
+            <ColorPicker value={color} onChange={onChange} />
+          </div>
         </div>
       )}
-    </div>
+    </>
   );
 };
 

interface/src/components/TabbedContainer.tsx

@@ -1,13 +1,15 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { motion } from 'framer-motion';
 import type { TabbedContainerProps } from '../types/TabbedContainerProps';
+import { useSettingsContext } from '../SettingsContext';
 
-const TabbedContainer: React.FC<TabbedContainerProps> = ({ tabs, themeColor }) => {
+const TabbedContainer: React.FC<TabbedContainerProps> = ({ tabs }) => {
   const [activeTab, setActiveTab] = useState(0);
   const [hoveredTab, setHoveredTab] = useState<number | null>(null);
   const [tabWidth, setTabWidth] = useState(0);
   const [position, setPosition] = useState(0);
   const positionRef = useRef(position);
+  const themeColor = useSettingsContext().settingsState.customThemeColor;
 
   useEffect(() => {
     const newPosition = -activeTab * 100;
@@ -59,24 +61,22 @@ const TabbedContainer: React.FC<TabbedContainerProps> = ({ tabs, themeColor }) =
       </div>
     </div>
     <div className="h-full px-4 overflow-y-scroll overflow-x-clip">
-      <div className="-mt-4">
-        <motion.div
-          initial={false}
-          animate={{ x: `${position}%` }}
-          transition={springTransition}
-        >
-          <div className="absolute flex w-full" style={{ left: `${-position}%` }}>
-            {tabs.map((tab, index) => (
-              <div
-                key={index}
-                className={`w-full ${activeTab === index ? '' : 'hidden'}`}
-              >
-                {tab.content}
-              </div>
-            ))}
-          </div>
-        </motion.div>
-      </div>
+      <motion.div
+        initial={false}
+        animate={{ x: `${position}%` }}
+        transition={springTransition}
+      >
+        <div className="absolute flex w-full" style={{ left: `${-position}%` }}>
+          {tabs.map((tab, index) => (
+            <div
+              key={index}
+              className={`w-full ${activeTab === index ? '' : 'hidden'}`}
+            >
+              {tab.content}
+            </div>
+          ))}
+        </div>
+      </motion.div>
     </div>
     </>
   );