fixed menu Button active style hover issue, minor style change on WindowHeader

Author: arturbien

src/components/Button/Button.js

@@ -38,12 +38,13 @@ const StyledButton = styled.button`
           ${createBoxStyles()};
           border: 2px solid transparent;
           &:hover {
-            ${({ isDisabled }) => !isDisabled && createWellBorderStyles(false)}
+            ${({ isDisabled, active }) =>
+              !isDisabled && !active && createWellBorderStyles(false)}
           }
           &:active {
             ${({ isDisabled }) => !isDisabled && createWellBorderStyles(true)}
           }
-          ${({ active }) => active && createBorderStyles(true)}
+          ${({ active }) => active && createWellBorderStyles(true)}
           ${({ isDisabled }) => isDisabled && createDisabledTextStyles()}
         `
       : css`

src/components/Button/Button.stories.js

@@ -3,13 +3,23 @@ import { withInfo } from "@storybook/addon-info";
 import { storiesOf } from "@storybook/react";
 import { action } from "@storybook/addon-actions";
 
-import styled, {ThemeProvider} from "styled-components";
+import styled, { ThemeProvider } from "styled-components";
 
-import { Button, Window, WindowContent, Cutout, Toolbar } from "../";
+import {
+  Button,
+  Window,
+  WindowHeader,
+  WindowContent,
+  List,
+  ListItem,
+  Divider,
+  Cutout,
+  Toolbar
+} from "../";
 export const actions = { onClick: action("onClick") };
 
 const StyledCutout = styled(Cutout)`
-  background: ${({theme})=>theme.canvas};
+  background: ${({ theme }) => theme.canvas};
 `;
 
 storiesOf("Button", module)
@@ -49,17 +59,11 @@ storiesOf("Button", module)
       💖
     </Button>
   ))
-  .add("menu button", () => (
-    <Button {...actions} variant="menu" size="sm" accent>
-      File
-    </Button>
-  ))
+  .add("menu button", () => <MenuButtonExample />)
   .add("flat button", () => (
     <Window>
       <WindowContent>
-        <StyledCutout
-          style={{ padding: "1rem", width: "300px" }}
-        >
+        <StyledCutout style={{ padding: "1rem", width: "300px" }}>
           <p style={{ lineHeight: 1.3 }}>
             When you want to use Buttons on a light background (like scrollable
             content), just use the flat variant:
@@ -82,3 +86,68 @@ storiesOf("Button", module)
       </WindowContent>
     </Window>
   ));
+
+function MenuButtonExample() {
+  const [open, setOpen] = React.useState(false);
+
+  function handleClick() {
+    setOpen(!open);
+  }
+
+  function handleClose() {
+    setOpen(false);
+  }
+
+  return (
+    <Window style={{ maxWidth: "250px" }}>
+      <WindowHeader>🥝 Kiwi.app</WindowHeader>
+      <Toolbar noPadding>
+        <Button variant="menu" disabled>
+          Upload
+        </Button>
+        <Button variant="menu" disabled>
+          Save
+        </Button>
+        <div
+          style={{
+            position: "relative",
+            display: "inline-block",
+            alignSelf: "left"
+          }}
+        >
+          {open && (
+            <List
+              style={{ zIndex: "9999" }}
+              horizontalAlign="right"
+              verticalAlign="bottom"
+              open={open}
+              onClick={handleClose}
+            >
+              <ListItem size="sm">Copy link</ListItem>
+              <Divider />
+              <ListItem size="sm">Facebook</ListItem>
+              <ListItem size="sm">Twitter</ListItem>
+              <ListItem size="sm">Instagram</ListItem>
+              <Divider />
+              <ListItem size="sm" disabled>
+                MySpace
+              </ListItem>
+            </List>
+          )}
+          <Button variant="menu" onClick={handleClick} size="sm" active={open}>
+            Share
+          </Button>
+        </div>
+      </Toolbar>
+      <WindowContent style={{ padding: "0.25rem" }}>
+        <Cutout>
+          <img
+            style={{ width: "100%", height: "1uto", display: "block" }}
+            src="https://image.freepik.com/foto-gratuito/la-frutta-fresca-del-kiwi-tagliata-a-meta-con-la-decorazione-completa-del-pezzo-e-bella-sulla-tavola-di-legno_47436-1.jpg"
+            alt="kiwi"
+          />
+        </Cutout>
+      </WindowContent>
+    </Window>
+  );
+}

src/components/WindowHeader/WindowHeader.js

@@ -9,6 +9,7 @@ const SlyledWindowHeader = styled.div`
   line-height: 33px;
   padding: 0 ${padding.sm};
   margin-right: 2px;
+  margin-bottom: 4px;
 
   font-weight: bold;
   color: ${({ theme }) => theme.textInvert};