Merge pull request #864 from Lemoncode/fix/#863-toolbar-button-background-color

Fix/#863 toolbar button background color on hover

Author: manudous

apps/web/src/pods/toolbar/toolbar.pod.module.css

@@ -56,6 +56,11 @@
   color: var(--pure-white);
 }
 
+.vscode .button:hover {
+  background-color: var(--primary-700);
+  color: var(--primary-200);
+}
+
 .button:disabled {
   color: var(--primary-300);
   cursor: not-allowed;
@@ -64,3 +69,7 @@
 .button:disabled:hover {
   background-color: inherit;
 }
+
+.vscode .button:disabled:hover {
+  color: var(--text-color);
+}

apps/web/src/pods/toolbar/toolbar.pod.tsx

@@ -21,7 +21,9 @@ export const ToolbarPod: React.FC = () => {
   const isEditMode = interactionMode === 'edit';
   const isVSCode = isVSCodeEnv();
   return (
-    <header className={classes.container}>
+    <header
+      className={`${classes.container} ${isVSCode ? classes.vscode : ''}`}
+    >
       {(isEditMode || !isVSCode) && (
         <ul className={classes.buttonGroup}>
           {isEditMode && (