From 6ae4002484b0b4d89764896e7430dea71e62c9e8 Mon Sep 17 00:00:00 2001
From: Brandon Rosage <brandonrosage@github.com>
Date: Mon, 6 Nov 2017 17:48:47 -0600
Subject: [PATCH] Addresses @broccolini's feedback

---
 modules/primer-popover/README.md        |  4 ++--
 modules/primer-popover/lib/popover.scss | 26 ++++++++++++-------------
 2 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/modules/primer-popover/README.md b/modules/primer-popover/README.md
index 78dacae3..77d398b7 100644
--- a/modules/primer-popover/README.md
+++ b/modules/primer-popover/README.md
@@ -61,7 +61,7 @@ Each of these modifiers also support a syntax for adjusting the positioning the
 - `.Popover-message--bottom--left`
 - `.Popover-message--left--bottom`
 
-Lastly, there is an added `.Popover-message--lg` modifer, which Assumes a slightly wider popover message.
+Lastly, there is an added `.Popover-message--large` modifier, which assumes a slightly wider popover message on screens wider than 544px.
 
 ### Notes
 
@@ -92,7 +92,7 @@ Defaults to caret oriented top-center.
 <div class="position-relative text-center">
   <button class="btn btn-primary">UI</button>
   <div class="Popover right-0 left-0">
-    <div class="Popover-message Popover-message--lg text-left p-4 mt-2 Box box-shadow-large">
+    <div class="Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large">
       <h4 class="mb-2">Popover heading</h4>
       <p>Message about this particular piece of UI.</p>
       <button type="submit" class="btn btn-outline mt-2 text-bold">Got it!</button>
diff --git a/modules/primer-popover/lib/popover.scss b/modules/primer-popover/lib/popover.scss
index 22e682b8..57543e8a 100644
--- a/modules/primer-popover/lib/popover.scss
+++ b/modules/primer-popover/lib/popover.scss
@@ -5,7 +5,7 @@
 
 .Popover-message {
   position: relative;
-  width: 235px;
+  width: 232px;
   margin-right: auto;
   margin-left: auto;
 
@@ -22,7 +22,7 @@
     top: -16px;
     margin-left: -9px;
     border: $spacer-2 $border-style transparent;
-    border-bottom-color: rgba(0, 0, 0, 0.15);
+    border-bottom-color: $border-black-fade;
   }
 
   &::after {
@@ -44,8 +44,8 @@
   }
 
   &::before {
-    bottom: -16px;
-    border-top-color: rgba(0, 0, 0, 0.15);
+    bottom: -$spacer-3;
+    border-top-color: $border-black-fade;
   }
 
   &::after {
@@ -83,7 +83,7 @@
 
   &::before,
   &::after {
-    left: 20px;
+    left: $spacer-4;
     margin-left: 0;
   }
 
@@ -121,8 +121,8 @@
 .Popover-message--right--top,
 .Popover-message--right--bottom {
   &::before {
-    right: -16px;
-    border-left-color: rgba(0, 0, 0, 0.15);
+    right: -$spacer-3;
+    border-left-color: $border-black-fade;
   }
 
   &::after {
@@ -136,8 +136,8 @@
 .Popover-message--left--top,
 .Popover-message--left--bottom {
   &::before {
-    left: -16px;
-    border-right-color: rgba(0, 0, 0, 0.15);
+    left: -$spacer-3;
+    border-right-color: $border-black-fade;
   }
 
   &::after {
@@ -151,7 +151,7 @@
 .Popover-message--left--top {
   &::before,
   &::after {
-    top: 20px;
+    top: $spacer-4;
   }
 }
 
@@ -164,7 +164,7 @@
   }
 
   &::before {
-    bottom: 20px;
+    bottom: $spacer-4;
   }
 
   &::after {
@@ -172,9 +172,9 @@
   }
 }
 
-.Popover-message--lg {
+.Popover-message--large {
 
   @include breakpoint(sm) {
-    min-width: 330px;
+    min-width: 320px;
   }
 }