editor menu color scheme fixes for some themes

editor's tab layout fix
FE selection color fixed for several themes

apps/remix-ide/src/assets/css/themes/bootstrap-cyborg.min.css

@@ -25,7 +25,7 @@
     --gray:#555;
     --gray-dark:#222;
     --primary:#2a9fd6;
-    --secondary:#555;
+    --secondary:#3c3939;
     --success:#77b300;
     --info:#93c;
     --warning:#f80;
@@ -5595,7 +5595,7 @@ a.bg-primary:focus,a.bg-primary:hover,button.bg-primary:focus,button.bg-primary:
     background-color:#2180ac!important
 }
 .bg-secondary {
-    background-color:#555!important
+    background-color:#3c3939!important
 }
 a.bg-secondary:focus,a.bg-secondary:hover,button.bg-secondary:focus,button.bg-secondary:hover {
     background-color:#3c3c3c!important
@@ -8358,7 +8358,7 @@ a.text-warning:focus,a.text-warning:hover {
     color:#b35f00!important
 }
 .text-danger {
-    color:#c00!important
+    color:#ff4242!important
 }
 a.text-danger:focus,a.text-danger:hover {
     color:maroon!important
@@ -8594,7 +8594,7 @@ legend {
     color:#555
 }
 .nav-pills .nav-link.active,.nav-tabs .nav-link.active {
-    background-color:#2a9fd6
+    background-color:#034767
 }
 .breadcrumb a {
     color:#fff

apps/remix-ide/src/assets/css/themes/bootstrap-flatly.min.css

@@ -24,7 +24,7 @@
 	--gray:#95a5a6;
 	--gray-dark:#343a40;
 	--primary:#2c3e50;
-	--secondary:#95a5a6;
+	--secondary:#dadfe0;
 	--success:#18bc9c;
 	--info:#3498db;
 	--warning:#f39c12;
@@ -4460,7 +4460,7 @@ a.bg-primary:focus,a.bg-primary:hover,button.bg-primary:focus,button.bg-primary:
 	background-color:#1a252f!important
 }
 .bg-secondary {
-	background-color:#95a5a6!important
+	background-color:#dadfe0!important
 }
 a.bg-secondary:focus,a.bg-secondary:hover,button.bg-secondary:focus,button.bg-secondary:hover {
 	background-color:#798d8f!important

apps/remix-ide/src/assets/css/themes/bootstrap-spacelab.min.css

@@ -25,7 +25,7 @@
     --gray:#777;
     --gray-dark:#333;
     --primary:#446e9b;
-    --secondary:#999;
+    --secondary:#dadfe0;
     --success:#3cb521;
     --info:#3399f3;
     --warning:#d47500;
@@ -5596,7 +5596,7 @@ a.bg-primary:focus,a.bg-primary:hover,button.bg-primary:focus,button.bg-primary:
     background-color:#345578!important
 }
 .bg-secondary {
-    background-color:#999!important
+    background-color:#dadfe0!important
 }
 a.bg-secondary:focus,a.bg-secondary:hover,button.bg-secondary:focus,button.bg-secondary:hover {
     background-color:gray!important

apps/remix-ide/src/assets/css/themes/remix-dark_tvx1s2.css

@@ -3641,7 +3641,7 @@ input[type="submit"].btn-block {
 .nav-tabs .nav-item.show .nav-link,
 .nav-tabs .nav-link.active {
   color: #fff;
-  background-color: var(--body-bg);
+  background-color: #2a2c3f;
   border-color: #3f4455;
 }
 .nav-tabs .dropdown-menu {

libs/remix-ui/editor/src/lib/remix-ui-editor.tsx

@@ -158,6 +158,7 @@ export const EditorUI = (props: EditorUIProps) => {
     const infoColor = formatColor('--info')
     const darkColor = formatColor('--dark')
     const secondaryColor = formatColor('--secondary')
+    const primaryColor = formatColor('--primary')
     const textColor = formatColor('--text') || darkColor
     const textbackground = formatColor('--text-background') || lightColor
 
@@ -266,7 +267,8 @@ export const EditorUI = (props: EditorUIProps) => {
         'editorSuggestWidget.background': lightColor,
         'editorSuggestWidget.selectedBackground': secondaryColor,
         'editorSuggestWidget.selectedForeground': textColor,
-        'editorSuggestWidget.highlightForeground': infoColor,
+        'editorSuggestWidget.highlightForeground': primaryColor,
+        'editorSuggestWidget.focusHighlightForeground': infoColor,
         'editor.lineHighlightBorder': secondaryColor,
         'editor.lineHighlightBackground': textbackground === darkColor ? lightColor : secondaryColor,
         'editorGutter.background': lightColor,

libs/remix-ui/tabs/src/lib/remix-ui-tabs.tsx

@@ -186,7 +186,7 @@ export const TabsUI = (props: TabsUIProps) => {
           }}
         >
           <TabList className="d-flex flex-row align-items-center">
-            {props.tabs.map((tab, i) => <Tab className="py-1" key={tab.name}>{renderTab(tab, i)}</Tab>)}
+            {props.tabs.map((tab, i) => <Tab className="" key={tab.name}>{renderTab(tab, i)}</Tab>)}
           </TabList>
           {props.tabs.map((tab) => <TabPanel key={tab.name} ></TabPanel>)}
         </Tabs>