chore: update paragon version (#382)

update alert style in Paragon.
update Paragon version in this repo.
update email suggestion alert style.

VAN-558

package-lock.json

@@ -3937,9 +3937,9 @@
       }
     },
     "@edx/paragon": {
-      "version": "14.16.10",
-      "resolved": "https://registry.npmjs.org/@edx/paragon/-/paragon-14.16.10.tgz",
-      "integrity": "sha512-pIftyWuZ77FfJpjkTxDPt7e0AGzzwCa+KRH4EiEG+aNCEoUdwBvmfbE3eW0Ijm85WFlr/6Zod3BnWhD2bhj8Hg==",
+      "version": "15.2.1",
+      "resolved": "https://registry.npmjs.org/@edx/paragon/-/paragon-15.2.1.tgz",
+      "integrity": "sha512-4+Uz0Z5a4eIiNkJz2MKcBb2iVFBO0RCI8jPlteCG0xH3cjOvkw1Kdjq+AyJVBwmk313/xm3ASN6JxsHZvpnosw==",
       "requires": {
         "@fortawesome/fontawesome-svg-core": "^1.2.30",
         "@fortawesome/free-solid-svg-icons": "^5.14.0",
@@ -3950,6 +3950,7 @@
         "classnames": "^2.2.6",
         "email-prop-type": "^3.0.0",
         "font-awesome": "^4.7.0",
+        "lodash.uniqby": "^4.7.0",
         "mailto-link": "^1.0.0",
         "prop-types": "^15.7.2",
         "react-bootstrap": "^1.3.0",
@@ -17643,6 +17644,11 @@
       "integrity": "sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=",
       "dev": true
     },
+    "lodash.uniqby": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/lodash.uniqby/-/lodash.uniqby-4.7.0.tgz",
+      "integrity": "sha1-2ZwHpmnp5tJOE2Lf4mbGdhavEwI="
+    },
     "logalot": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/logalot/-/logalot-2.1.0.tgz",

package.json

@@ -38,7 +38,7 @@
     "@edx/frontend-component-cookie-policy-banner": "2.1.12",
     "@edx/frontend-component-header": "2.2.5",
     "@edx/frontend-platform": "1.8.4",
-    "@edx/paragon": "14.16.10",
+    "@edx/paragon": "15.2.1",
     "@fortawesome/fontawesome-svg-core": "1.2.32",
     "@fortawesome/free-brands-svg-icons": "5.15.1",
     "@fortawesome/free-regular-svg-icons": "5.15.1",

src/redesign/_style.scss

@@ -631,18 +631,22 @@ select.form-control {
   padding: 0.5rem 1rem;
 
   .alert-icon {
-    margin-top: 4px;
+    margin-top: 3px;
   }
 
   .alert-close {
     float: right;
-    margin-top: 3px;
 
     &:hover {
       cursor: pointer;
     }
   }
 
+  .alert-text {
+    font-size: 0.75rem;
+    line-height: 1.25rem;
+  }
+
   .alert-link {
     color: $primary !important;
 

src/redesign/register/RegistrationPage.jsx

@@ -392,7 +392,7 @@ class RegistrationPage extends React.Component {
     if (this.state.emailErrorSuggestion) {
       return (
         <Alert variant="danger" className="email-error-alert" icon={Error}>
-          <span className="small">
+          <span className="alert-text">
             {this.props.intl.formatMessage(messages['did.you.mean.alert.text'])}{' '}
             <Alert.Link
               href="#"