From 8e4fbc2aa8786b00a004282260c52986e1cd2430 Mon Sep 17 00:00:00 2001
From: woothu <32914662+woothu@users.noreply.github.com>
Date: Mon, 8 Jun 2020 13:58:51 +0200
Subject: [PATCH] refactor: update icons to version 2, rtl fixes

---
 package-lock.json                             | 20 ++++----
 package.json                                  |  6 +--
 src/assets/icons/index.js                     |  4 +-
 src/containers/TheFooter.js                   |  2 +-
 src/containers/TheHeaderDropdown.js           | 50 +++++++++++++++----
 .../buttons/brand-buttons/BrandButtons.js     | 12 ++---
 6 files changed, 63 insertions(+), 31 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index a4726eb..9e0eda7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1199,26 +1199,26 @@
       "integrity": "sha512-/phj0z2DhbJ955bVCjoRbGG0qt0KdjUAG6erdLF14FPV410QbaW3J4PIe9kAZUz86CJ/lXUMzKSYYR3gr7dOAQ=="
     },
     "@coreui/icons": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@coreui/icons/-/icons-1.0.1.tgz",
-      "integrity": "sha512-DAlvdHRC+HHecdy52vskbNzNKEpu6wHDvSlsHGrwOqNxQl1YLhGEtqAW4sKpyVE3GgysNCywUWZGFlLp8I3LgA=="
+      "version": "2.0.0-beta.4",
+      "resolved": "https://registry.npmjs.org/@coreui/icons/-/icons-2.0.0-beta.4.tgz",
+      "integrity": "sha512-4BDmZYqcfGgoLRFgqJaOSsypoFykq8jFAmOHy9lyn2PB4lwrdAAuOMLLe6gjm6QFxZJLPXHcPRYZeEz7vsV4VQ=="
     },
     "@coreui/icons-react": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@coreui/icons-react/-/icons-react-1.0.0.tgz",
-      "integrity": "sha512-rcd/Ezld2Eb8aBdzZ/mv+0lNZ5V0h5bp5ccxuF2jKsw/V77BXH6HP+8uxFwTDNODBovyD5vKNcSjPDk2xyhtqQ==",
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@coreui/icons-react/-/icons-react-1.0.1.tgz",
+      "integrity": "sha512-oEEey/BUoT8KMx5K2TDgCDvjv0/QzNzFAiNSokSomPvY4u1dymXK0H+8X4KOa4fv17DUfE4aQ0W6pa+SyTLN9Q==",
       "requires": {
         "classnames": "^2.2.6",
         "prop-types": "^15.7.2"
       }
     },
     "@coreui/react": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@coreui/react/-/react-3.0.0.tgz",
-      "integrity": "sha512-5VwE8qL+6Jn86HFj+FpnPfD5RcjAEgkK7nXl91hwZhvlWV5zkKRPvaoKYM/nXxSDG6tqU6NSjkFLM87vrQqOXw==",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@coreui/react/-/react-3.0.1.tgz",
+      "integrity": "sha512-ckqTBvaRLZVsjV5ncE2Mz8SDxa4+iiBCm/uCbsmuQL2PMhgzofKmS4i52WWTTtkc//OQJ8ahBZRbKCFiOmW4VQ==",
       "requires": {
         "@coreui/icons": "2.0.0-beta.3",
-        "@coreui/icons-react": "^1.0.0",
+        "@coreui/icons-react": "^1.0.1",
         "@coreui/utils": "~1.3.1",
         "@popperjs/core": "~2.4.0",
         "classnames": "~2.2.6",
diff --git a/package.json b/package.json
index 74444c0..2c72b92 100644
--- a/package.json
+++ b/package.json
@@ -25,9 +25,9 @@
   "dependencies": {
     "@coreui/chartjs": "^2.0.0",
     "@coreui/coreui": "^3.2.0",
-    "@coreui/icons": "^1.0.1",
-    "@coreui/icons-react": "^1.0.0",
-    "@coreui/react": "^3.0.0",
+    "@coreui/icons": "2.0.0-beta.4",
+    "@coreui/icons-react": "^1.0.1",
+    "@coreui/react": "^3.0.1",
     "@coreui/react-chartjs": "^1.0.0",
     "@coreui/utils": "^1.3.1",
     "classnames": "^2.2.6",
diff --git a/src/assets/icons/index.js b/src/assets/icons/index.js
index b268b23..8b016f5 100644
--- a/src/assets/icons/index.js
+++ b/src/assets/icons/index.js
@@ -11,7 +11,7 @@ import {
   cibTumblr,
   cibXing,
   cibGithub,
-  cibStackOverflow,
+  cibStackoverflow,
   cibYoutube,
   cibDribbble,
   cibInstagram,
@@ -242,7 +242,7 @@ export const icons = Object.assign({}, {
   cibTumblr,
   cibXing,
   cibGithub,
-  cibStackOverflow,
+  cibStackoverflow,
   cibYoutube,
   cibDribbble,
   cibInstagram,
diff --git a/src/containers/TheFooter.js b/src/containers/TheFooter.js
index 0ea2e21..b7fb4ef 100644
--- a/src/containers/TheFooter.js
+++ b/src/containers/TheFooter.js
@@ -8,7 +8,7 @@ const TheFooter = () => {
         <a href="https://coreui.io" target="_blank" rel="noopener noreferrer">CoreUI</a>
         <span className="ml-1">&copy; 2020 creativeLabs.</span>
       </div>
-      <div className="ml-auto">
+      <div className="mfs-auto">
         <span className="mr-1">Powered by</span>
         <a href="https://coreui.io/react" target="_blank" rel="noopener noreferrer">CoreUI for React</a>
       </div>
diff --git a/src/containers/TheHeaderDropdown.js b/src/containers/TheHeaderDropdown.js
index 7905080..3527f11 100644
--- a/src/containers/TheHeaderDropdown.js
+++ b/src/containers/TheHeaderDropdown.js
@@ -34,10 +34,26 @@ const TheHeaderDropdown = () => {
         >
           <strong>Account</strong>
         </CDropdownItem>
-        <CDropdownItem><CIcon name="cil-bell" className="mr-2" /> Updates<CBadge color="info" className="ml-auto">42</CBadge></CDropdownItem>
-        <CDropdownItem><CIcon name="cil-envelope-open" className="mr-2" /> Messages<CBadge color="success" className="ml-auto">42</CBadge></CDropdownItem>
-        <CDropdownItem><CIcon name="cil-task" className="mr-2" /> Tasks<CBadge color="danger" className="ml-auto">42</CBadge></CDropdownItem>
-        <CDropdownItem><CIcon name="cil-comment-square" className="mr-2" /> Comments<CBadge color="warning" className="ml-auto">42</CBadge></CDropdownItem>
+        <CDropdownItem>
+          <CIcon name="cil-bell" className="mfe-2" /> 
+          Updates
+          <CBadge color="info" className="mfs-auto">42</CBadge>
+        </CDropdownItem>
+        <CDropdownItem>
+          <CIcon name="cil-envelope-open" className="mfe-2" /> 
+          Messages
+          <CBadge color="success" className="mfs-auto">42</CBadge>
+        </CDropdownItem>
+        <CDropdownItem>
+          <CIcon name="cil-task" className="mfe-2" /> 
+          Tasks
+          <CBadge color="danger" className="mfs-auto">42</CBadge>
+        </CDropdownItem>
+        <CDropdownItem>
+          <CIcon name="cil-comment-square" className="mfe-2" /> 
+          Comments
+          <CBadge color="warning" className="mfs-auto">42</CBadge>
+        </CDropdownItem>
         <CDropdownItem
           header
           tag="div"
@@ -46,12 +62,28 @@ const TheHeaderDropdown = () => {
         >
           <strong>Settings</strong>
         </CDropdownItem>
-        <CDropdownItem><CIcon name="cil-user" className="mr-2" /> Profile</CDropdownItem>
-        <CDropdownItem><CIcon name="cil-settings" className="mr-2" /> Settings</CDropdownItem>
-        <CDropdownItem><CIcon name="cil-credit-card" className="mr-2" /> Payments<CBadge color="secondary" className="ml-auto">42</CBadge></CDropdownItem>
-        <CDropdownItem><CIcon name="cil-file" className="mr-2" /> Projects<CBadge color="primary" className="ml-auto">42</CBadge></CDropdownItem>
+        <CDropdownItem>
+          <CIcon name="cil-user" className="mfe-2" />Profile
+        </CDropdownItem>
+        <CDropdownItem>
+          <CIcon name="cil-settings" className="mfe-2" /> 
+          Settings
+        </CDropdownItem>
+        <CDropdownItem>
+          <CIcon name="cil-credit-card" className="mfe-2" /> 
+          Payments
+          <CBadge color="secondary" className="mfs-auto">42</CBadge>
+        </CDropdownItem>
+        <CDropdownItem>
+          <CIcon name="cil-file" className="mfe-2" /> 
+          Projects
+          <CBadge color="primary" className="mfs-auto">42</CBadge>
+        </CDropdownItem>
         <CDropdownItem divider />
-        <CDropdownItem><CIcon name="cil-lock-locked" className="mr-2" /> Lock Account</CDropdownItem>
+        <CDropdownItem>
+          <CIcon name="cil-lock-locked" className="mfe-2" /> 
+          Lock Account
+        </CDropdownItem>
       </CDropdownMenu>
     </CDropdown>
   )
diff --git a/src/views/buttons/brand-buttons/BrandButtons.js b/src/views/buttons/brand-buttons/BrandButtons.js
index 58327d5..0805822 100644
--- a/src/views/buttons/brand-buttons/BrandButtons.js
+++ b/src/views/buttons/brand-buttons/BrandButtons.js
@@ -29,7 +29,7 @@ const BrandButtons = () => {
               <CButton size="sm" className="btn-tumblr btn-brand mr-1 mb-1"><CIcon name="cib-tumblr" /><span>Tumblr</span></CButton>
               <CButton size="sm" className="btn-xing btn-brand mr-1 mb-1"><CIcon name="cib-xing" /><span>Xing</span></CButton>
               <CButton size="sm" className="btn-github btn-brand mr-1 mb-1"><CIcon name="cib-github" /><span>Github</span></CButton>
-              <CButton size="sm" className="btn-stack-overflow btn-brand mr-1 mb-1"><CIcon name="cib-stack-overflow" /><span>StackOverflow</span></CButton>
+              <CButton size="sm" className="btn-stack-overflow btn-brand mr-1 mb-1"><CIcon name="cib-stackoverflow" /><span>StackOverflow</span></CButton>
               <CButton size="sm" className="btn-youtube btn-brand mr-1 mb-1"><CIcon name="cib-youtube" /><span>YouTube</span></CButton>
               <CButton size="sm" className="btn-dribbble btn-brand mr-1 mb-1"><CIcon name="cib-dribbble" /><span>Dribbble</span></CButton>
               <CButton size="sm" className="btn-instagram btn-brand mr-1 mb-1"><CIcon name="cib-instagram" /><span>Instagram</span></CButton>
@@ -49,7 +49,7 @@ const BrandButtons = () => {
               <CButton className="btn-tumblr btn-brand mr-1 mb-1"><CIcon name="cib-tumblr" /><span>Tumblr</span></CButton>
               <CButton className="btn-xing btn-brand mr-1 mb-1"><CIcon name="cib-xing" /><span>Xing</span></CButton>
               <CButton className="btn-github btn-brand mr-1 mb-1"><CIcon name="cib-github" /><span>Github</span></CButton>
-              <CButton className="btn-stack-overflow btn-brand mr-1 mb-1"><CIcon name="cib-stack-overflow" /><span>StackOverflow</span></CButton>
+              <CButton className="btn-stack-overflow btn-brand mr-1 mb-1"><CIcon name="cib-stackoverflow" /><span>StackOverflow</span></CButton>
               <CButton className="btn-youtube btn-brand mr-1 mb-1"><CIcon name="cib-youtube" /><span>YouTube</span></CButton>
               <CButton className="btn-dribbble btn-brand mr-1 mb-1"><CIcon name="cib-dribbble" /><span>Dribbble</span></CButton>
               <CButton className="btn-instagram btn-brand mr-1 mb-1"><CIcon name="cib-instagram" /><span>Instagram</span></CButton>
@@ -71,7 +71,7 @@ const BrandButtons = () => {
               <CButton size="lg" className="btn-tumblr btn-brand mr-1 mb-1"><CIcon name="cib-tumblr" /><span>Tumblr</span></CButton>
               <CButton size="lg" className="btn-xing btn-brand mr-1 mb-1"><CIcon name="cib-xing" /><span>Xing</span></CButton>
               <CButton size="lg" className="btn-github btn-brand mr-1 mb-1"><CIcon name="cib-github" /><span>Github</span></CButton>
-              <CButton size="lg" className="btn-stack-overflow btn-brand mr-1 mb-1"><CIcon name="cib-stack-overflow" /><span>StackOverflow</span></CButton>
+              <CButton size="lg" className="btn-stack-overflow btn-brand mr-1 mb-1"><CIcon name="cib-stackoverflow" /><span>StackOverflow</span></CButton>
               <CButton size="lg" className="btn-youtube btn-brand mr-1 mb-1"><CIcon name="cib-youtube" /><span>YouTube</span></CButton>
               <CButton size="lg" className="btn-dribbble btn-brand mr-1 mb-1"><CIcon name="cib-dribbble" /><span>Dribbble</span></CButton>
               <CButton size="lg" className="btn-instagram btn-brand mr-1 mb-1"><CIcon name="cib-instagram" /><span>Instagram</span></CButton>
@@ -104,7 +104,7 @@ const BrandButtons = () => {
               <CButton size="sm" className="btn-tumblr btn-brand mr-1 mb-1"><CIcon name="cib-tumblr" /></CButton>
               <CButton size="sm" className="btn-xing btn-brand mr-1 mb-1"><CIcon name="cib-xing" /></CButton>
               <CButton size="sm" className="btn-github btn-brand mr-1 mb-1"><CIcon name="cib-github" /></CButton>
-              <CButton size="sm" className="btn-stack-overflow btn-brand mr-1 mb-1"><CIcon name="cib-stack-overflow" /></CButton>
+              <CButton size="sm" className="btn-stack-overflow btn-brand mr-1 mb-1"><CIcon name="cib-stackoverflow" /></CButton>
               <CButton size="sm" className="btn-youtube btn-brand mr-1 mb-1"><CIcon name="cib-youtube" /></CButton>
               <CButton size="sm" className="btn-dribbble btn-brand mr-1 mb-1"><CIcon name="cib-dribbble" /></CButton>
               <CButton size="sm" className="btn-instagram btn-brand mr-1 mb-1"><CIcon name="cib-instagram" /></CButton>
@@ -124,7 +124,7 @@ const BrandButtons = () => {
               <CButton className="btn-tumblr btn-brand mr-1 mb-1"><CIcon name="cib-tumblr" /></CButton>
               <CButton className="btn-xing btn-brand mr-1 mb-1"><CIcon name="cib-xing" /></CButton>
               <CButton className="btn-github btn-brand mr-1 mb-1"><CIcon name="cib-github" /></CButton>
-              <CButton className="btn-stack-overflow btn-brand mr-1 mb-1"><CIcon name="cib-stack-overflow" /></CButton>
+              <CButton className="btn-stack-overflow btn-brand mr-1 mb-1"><CIcon name="cib-stackoverflow" /></CButton>
               <CButton className="btn-youtube btn-brand mr-1 mb-1"><CIcon name="cib-youtube" /></CButton>
               <CButton className="btn-dribbble btn-brand mr-1 mb-1"><CIcon name="cib-dribbble" /></CButton>
               <CButton className="btn-instagram btn-brand mr-1 mb-1"><CIcon name="cib-instagram" /></CButton>
@@ -146,7 +146,7 @@ const BrandButtons = () => {
               <CButton size="lg" className="btn-tumblr btn-brand mr-1 mb-1"><CIcon name="cib-tumblr" /></CButton>
               <CButton size="lg" className="btn-xing btn-brand mr-1 mb-1"><CIcon name="cib-xing" /></CButton>
               <CButton size="lg" className="btn-github btn-brand mr-1 mb-1"><CIcon name="cib-github" /></CButton>
-              <CButton size="lg" className="btn-stack-overflow btn-brand mr-1 mb-1"><CIcon name="cib-stack-overflow" /></CButton>
+              <CButton size="lg" className="btn-stack-overflow btn-brand mr-1 mb-1"><CIcon name="cib-stackoverflow" /></CButton>
               <CButton size="lg" className="btn-youtube btn-brand mr-1 mb-1"><CIcon name="cib-youtube" /></CButton>
               <CButton size="lg" className="btn-dribbble btn-brand mr-1 mb-1"><CIcon name="cib-dribbble" /></CButton>
               <CButton size="lg" className="btn-instagram btn-brand mr-1 mb-1"><CIcon name="cib-instagram" /></CButton>