fix: file button styles

chore: fix color ref chore: whitespace
dhis2 · Nov 18, 2021 · 67213b1 · 67213b1
1 parent 4cc6b09
commit 67213b1
Showing 1 changed file with 14 additions and 4 deletions.
diff --git a/src/components/FileMenu/FileMenu.styles.js b/src/components/FileMenu/FileMenu.styles.js
@@ -7,10 +7,11 @@ export const fileMenuStyles = css`
         position: relative;
         align-items: center;
         justify-content: center;
-        font-size: 15px;
+        font-size: 14px;
         font-weight: 400;
         text-transform: none;
         padding: 6px 8px;
+        border-radius: 3px;
         color: ${colors.grey900};
         min-width: 64px;
         box-sizing: border-box;
@@ -22,14 +23,23 @@ export const fileMenuStyles = css`
     }
 
     .menu-toggle:hover:enabled {
-        background-color: ${colors.grey300};
-        opacity: 0.8;
+        background-color: ${colors.grey200};
     }
 
     .menu-toggle:disabled {
         color: ${colors.grey400};
+        cursor: not-allowed;
+    }
+
+    .menu-toggle:active {
+        background-color: ${colors.grey300};
     }
-    .menu-toggle:focus {
+
+    .menuButton:focus {
+        outline: 2px solid ${colors.blue600};
+    }
+
+    .menuButton:focus:not(:focus-visible) {
         outline: none;
     }
 `