From f90f2d18ff61eb71c4b9e5ea0b41ddf8bb6915cc Mon Sep 17 00:00:00 2001
From: sacr3dc0w <mshettles@gmail.com>
Date: Sun, 10 Jun 2018 20:06:35 -0700
Subject: [PATCH] Fix arrow placement on currency selector dropdown

---
 CHANGELOG.md                                    |  1 +
 .../components/stencil/navUser/_navUser.scss    | 17 ++++++++++++++++-
 .../components/common/currency-selector.html    |  2 +-
 3 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 574aafd3cd..19e95f8dc1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,7 @@
 - Fix use case that prevented retail/sale prices from displaying on product details page [#1262](https://github.com/bigcommerce/cornerstone/pull/1262)
 - Fix svg arrows missing on AMP product pages. [#1258](https://github.com/bigcommerce/cornerstone/pull/1258)
 - Fix for Changing Menu Colors In Theme Editor Not Respected In Mobile View [#1266](https://github.com/bigcommerce/cornerstone/pull/1266)
+- Fix arrow placement on currency dropdown menu [#1267](https://github.com/bigcommerce/cornerstone/pull/1267)
 
 ## 2.1.0 (2018-06-01)
 - Add Newsletter summary section to subscription form. [#1248](https://github.com/bigcommerce/cornerstone/pull/1248)
diff --git a/assets/scss/components/stencil/navUser/_navUser.scss b/assets/scss/components/stencil/navUser/_navUser.scss
index cd9f760aa8..614f04c07e 100644
--- a/assets/scss/components/stencil/navUser/_navUser.scss
+++ b/assets/scss/components/stencil/navUser/_navUser.scss
@@ -5,9 +5,10 @@
 // 1. Corrects the spacing added by .navUser-or
 // 2. Can't use top: 50% because its container `.header` changes its height to
 //    100% when mobile menu is expanded
-// 3. Make the triangle for dropdown centered
+// 3. Make the triangle for store credit dropdown centered
 // 4. Needs to be 100% so its dropdown can take full width in mobile viewport
 // 5. Needs to be lower than logo zIndex, otherwise, logo is not clickable
+// 6. Make the triangle for currency dropdown right aligned
 //
 // -----------------------------------------------------------------------------
 
@@ -92,6 +93,20 @@
     }
 }
 
+.navUser-action--currencySelector + .dropdown-menu {
+    &:before {
+        // scss-lint:disable ImportantRule
+        left: auto !important; // 6
+        right: spacing("half"); // 6
+    }
+
+    &:after {
+        // scss-lint:disable ImportantRule
+        left: auto !important; // 6
+        right: spacing("half") + remCalc(2px); // 6
+    }
+}
+
 .navUser-action--storeCredit + .dropdown-menu {
     max-width: remCalc(300px);
     padding: spacing("single");
diff --git a/templates/components/common/currency-selector.html b/templates/components/common/currency-selector.html
index 476983d98e..be5a7bd94d 100644
--- a/templates/components/common/currency-selector.html
+++ b/templates/components/common/currency-selector.html
@@ -1,7 +1,7 @@
 {{#if currency_selector.currencies.length '>' 1}}
 <ul class="navUser-section">
     <li class="navUser-item">
-        <a class="navUser-action has-dropdown" href="#" data-dropdown="currencySelection" aria-controls="currencySelection" aria-expanded="false">{{lang 'common.currency' code=currency_selector.active_currency_code}} <i class="icon" aria-hidden="true"><svg><use xlink:href="#icon-chevron-down" /></svg></i></a>
+        <a class="navUser-action navUser-action--currencySelector has-dropdown" href="#" data-dropdown="currencySelection" aria-controls="currencySelection" aria-expanded="false">{{lang 'common.currency' code=currency_selector.active_currency_code}} <i class="icon" aria-hidden="true"><svg><use xlink:href="#icon-chevron-down" /></svg></i></a>
         <ul class="dropdown-menu" id="currencySelection" data-dropdown-content aria-hidden="true" tabindex="-1">
             {{#each currency_selector.currencies}}
             <li class="dropdown-menu-item">