From be1e5a2f7fde110a644318e7310baca97829fbea Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Sat, 4 Aug 2018 00:32:26 +0200
Subject: [PATCH] Add margin, move elevation to theme, use colors from theme

---
 .../PermalinkButton/PermalinkButton.css       |  1 -
 .../client/ui/components/Popover/Popover.css  | 28 +++++++++++--------
 .../client/ui/components/Popover/Popover.tsx  | 14 +++++++---
 src/core/client/ui/theme/variables.ts         |  3 ++
 4 files changed, 30 insertions(+), 16 deletions(-)

diff --git a/src/core/client/stream/components/PermalinkButton/PermalinkButton.css b/src/core/client/stream/components/PermalinkButton/PermalinkButton.css
index b79c5939d..b303f61b6 100644
--- a/src/core/client/stream/components/PermalinkButton/PermalinkButton.css
+++ b/src/core/client/stream/components/PermalinkButton/PermalinkButton.css
@@ -1,5 +1,4 @@
 .popover {
   width: 350px;
   max-width: 80%;
-  margin-bottom: calc(0.5 * var(--spacing-unit));
 }
diff --git a/src/core/client/ui/components/Popover/Popover.css b/src/core/client/ui/components/Popover/Popover.css
index a47f820a4..559b6efbc 100644
--- a/src/core/client/ui/components/Popover/Popover.css
+++ b/src/core/client/ui/components/Popover/Popover.css
@@ -1,15 +1,21 @@
 .root {
-  background: #ffffff;
-  border: 1px solid #c9cacb;
+  background: var(--palette-common-white);
+  border: 1px solid var(--palette-grey-light);
   box-sizing: border-box;
-  box-shadow: 1px 0px 4px rgba(0, 0, 0, 0.25);
-  border-radius: 1px;
-  color: #222;
-  display: flex;
+  box-shadow: var(--elevation-main);
+  border-radius: var(--round-corners);
   padding: calc(0.5 * var(--spacing-unit));
-
-  &:after,
-  &::before {
-    border-top-color: transparent;
-  }
+}
+
+.top {
+  margin-bottom: calc(0.5 * var(--spacing-unit));
+}
+.left {
+  margin-right: calc(0.5 * var(--spacing-unit));
+}
+.right {
+  margin-left: calc(0.5 * var(--spacing-unit));
+}
+.bottom {
+  margin-top: calc(0.5 * var(--spacing-unit));
 }
diff --git a/src/core/client/ui/components/Popover/Popover.tsx b/src/core/client/ui/components/Popover/Popover.tsx
index 3123422ee..7708b86aa 100644
--- a/src/core/client/ui/components/Popover/Popover.tsx
+++ b/src/core/client/ui/components/Popover/Popover.tsx
@@ -11,9 +11,6 @@ import AriaInfo from "../AriaInfo";
 import * as styles from "./Popover.css";
 
 type Placement =
-  | "auto-start"
-  | "auto"
-  | "auto-end"
   | "top-start"
   | "top"
   | "top-end"
@@ -53,6 +50,9 @@ interface State {
 }
 
 class Popover extends React.Component<PopoverProps> {
+  public static defaultProps = {
+    placement: "top",
+  };
   public state: State = {
     visible: false,
   };
@@ -95,6 +95,12 @@ class Popover extends React.Component<PopoverProps> {
     } = this.props;
 
     const { visible } = this.state;
+    const popoverClassName = cn(styles.root, className, {
+      [styles.top]: placement!.startsWith("top"),
+      [styles.left]: placement!.startsWith("left"),
+      [styles.right]: placement!.startsWith("right"),
+      [styles.bottom]: placement!.startsWith("bottom"),
+    });
 
     return (
       <Manager>
@@ -119,7 +125,7 @@ class Popover extends React.Component<PopoverProps> {
               {visible && (
                 <div
                   style={props.style}
-                  className={cn(styles.root, className)}
+                  className={popoverClassName}
                   ref={props.ref}
                 >
                   {typeof body === "function"
diff --git a/src/core/client/ui/theme/variables.ts b/src/core/client/ui/theme/variables.ts
index 415a5c32f..a5ae14893 100644
--- a/src/core/client/ui/theme/variables.ts
+++ b/src/core/client/ui/theme/variables.ts
@@ -4,6 +4,9 @@
  */
 
 const variables = {
+  elevation: {
+    main: "1px 0px 4px rgba(0, 0, 0, 0.25)",
+  },
   palette: {
     /* Primary colors */
     primary: {