Add margin, move elevation to theme, use colors from theme

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));
 }

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));
 }

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"

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: {