Replace old cj logo with new logo

Author: Hoberg, Kyle

packages/visual-stack/src/components/CJLogo.css

@@ -1,3 +1,7 @@
 .vs-cj-logo {
   fill: #151c23;
 }
+
+.vs-cj-logo-padded {
+  padding: 4px;
+}

packages/visual-stack/src/components/CJLogo.js

@@ -2,14 +2,19 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import SVG from 'react-inlinesvg';
 import classNames from 'classnames';
-import logoSvg from '../../src/images/ui-kit/new-cj-logo-icon.svg';
+import logoSvg from '../images/ui-kit/cj-logo-2021.svg';
 import './CJLogo.css';
 
-const CJLogo = ({ className, ...restProps }) => (
+const CJLogo = ({ className, useStandardPadding = true, ...restProps }) => (
   <SVG
     {...restProps}
     src={logoSvg}
-    className={classNames('vs-cj-logo', 'vs-cj-logo-svg', className)}
+    className={classNames(
+      'vs-cj-logo',
+      'vs-cj-logo-svg',
+      className,
+      useStandardPadding && 'vs-cj-logo-padded'
+    )}
   />
 );
 

packages/visual-stack/src/components/Icons/index.js

@@ -6,6 +6,8 @@ import Account from 'mdi-react/AccountCircleIcon';
 import Logout from 'mdi-react/LogoutIcon';
 import Settings from 'mdi-react/SettingsIcon';
 import Product from 'mdi-react/PackageVariantClosedIcon';
+import CJLogo from '../CJLogo';
+import classNames from 'classnames';
 
 export const AccountIcon = Account;
 export const LogoutIcon = Logout;
@@ -205,11 +207,10 @@ export const IssueIcon = props => (
   </Icon>
 );
 
-export const CJIcon = props => (
-  <Icon {...props}>
-    <path
-      className="cj-logo"
-      d="M12,1.5627907 C13.4093023,1.5627907 14.7767442,1.83906977 16.0632558,2.38325581 C17.3051163,2.90790698 18.4213953,3.66139535 19.3813953,4.62139535 C20.3413953,5.58139535 21.092093,6.69767442 21.6195349,7.93953488 C22.1637209,9.22604651 22.44,10.5906977 22.44,12.0027907 C22.44,13.4148837 22.1637209,14.7795349 21.6195349,16.0660465 C21.0948837,17.307907 20.3413953,18.424186 19.3813953,19.384186 C18.4213953,20.344186 17.3051163,21.0948837 16.0632558,21.6223256 C14.7767442,22.1665116 13.412093,22.4427907 12,22.4427907 C10.587907,22.4427907 9.22325581,22.1665116 7.93674419,21.6223256 C6.69488372,21.0976744 5.57860465,20.344186 4.61860465,19.384186 C3.65860465,18.424186 2.90790698,17.307907 2.38046512,16.0660465 C1.83906977,14.7767442 1.5627907,13.4093023 1.5627907,12 C1.5627907,10.5906977 1.83906977,9.22325581 2.38325581,7.93674419 C2.90790698,6.69488372 3.66139535,5.57860465 4.62139535,4.61860465 C5.58139535,3.65860465 6.69767442,2.90790698 7.93953488,2.38046512 C9.22325581,1.83906977 10.5906977,1.5627907 12,1.5627907 L12,1.5627907 Z M12,0 C5.37209302,0 0,5.37209302 0,12 C0,18.627907 5.37209302,24 12,24 C18.627907,24 24,18.627907 24,12 C24,5.37209302 18.627907,0 12,0 L12,0 Z M14.7823256,11.2213953 C14.6372093,11.9693023 14.5088372,12.655814 14.3693023,13.3423256 C14.2297674,14.0288372 14.0874419,14.7153488 13.9367442,15.4018605 C13.7330233,16.3395349 13.2502326,16.7330233 12.3013953,16.735814 C11.4362791,16.7386047 10.5683721,16.7302326 9.70046512,16.744186 C9.56651163,16.7469767 9.33488372,16.8223256 9.31534884,16.9060465 C9.15348837,17.5646512 9.02790698,18.2316279 8.8827907,18.9432558 C9.98511628,18.9432558 11.0260465,18.9432558 12.0669767,18.9432558 C14.1767442,18.9432558 16.024186,17.5255814 16.5209302,15.4744186 C16.8139535,14.2660465 17.0372093,13.0437209 17.2911628,11.8269767 C17.4865116,10.9004651 17.6790698,9.96837209 17.88,9.01395349 C15.5386047,9.01395349 13.2530233,9.01395349 10.9562791,9.01395349 C10.8055814,9.75627907 10.6660465,10.4623256 10.5125581,11.224186 C11.28,11.224186 11.9665116,11.224186 12.6530233,11.224186 C13.3451163,11.2213953 14.0372093,11.2213953 14.7823256,11.2213953 Z M12.7283721,12.8706977 C11.8018605,12.8706977 10.9032558,12.8762791 10.0074419,12.8706977 C9.00837209,12.8651163 8.53116279,12.2651163 8.73767442,11.307907 C8.91906977,10.467907 9.10325581,9.62790698 9.27906977,8.78511628 C9.49674419,7.73023256 9.98790698,7.3255814 11.0706977,7.32 C11.8911628,7.3172093 12.7060465,7.33395349 13.5265116,7.31162791 C13.68,7.30883721 13.9311628,7.18883721 13.9590698,7.0772093 C14.1181395,6.43534884 14.2269767,5.78232558 14.3469767,5.16 C13.144186,5.16 11.9916279,5.09581395 10.8474419,5.17395349 C8.70697674,5.32465116 7.14697674,6.70883721 6.68093023,8.78511628 C6.45767442,9.78139535 6.19534884,10.7693023 6.05023256,11.7739535 C5.81860465,13.3786047 6.53860465,14.7990698 8.32465116,14.9776744 C9.54697674,15.0976744 10.7888372,15.064186 12.0195349,15.0753488 C12.1311628,15.0753488 12.3125581,14.8995349 12.3404651,14.7767442 C12.4911628,14.1572093 12.5972093,13.532093 12.7283721,12.8706977 Z"
-    />
-  </Icon>
+export const CJIcon = ({ className, ...props }) => (
+  <CJLogo
+    className={classNames('vs-cj-icon', className)}
+    props={props}
+    useStandardPadding={false}
+  />
 );

packages/visual-stack/src/components/Icons/style.css

@@ -3,3 +3,8 @@
   fill: currentColor;
   width: 22px;
 }
+
+.vs-cj-icon {
+  height: 24px;
+  width: 24px;
+}