refactor(console): replace logo with cloud logo in cloud env (#3393)

packages/console/src/assets/images/cloud-logo.svg

@@ -0,0 +1,15 @@
+<svg width="252" height="48" viewBox="0 0 252 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 7.49503C2 6.1159 2 5.42633 2.26742 4.87131C2.50309 4.38219 2.8821 3.96763 3.35931 3.67702C3.90082 3.34726 4.62076 3.24937 6.06063 3.05361L26.5958 0.261598C28.4598 0.00816784 29.3918 -0.118547 30.1161 0.149002C30.7518 0.383867 31.2824 0.81992 31.6179 1.38326C32 2.025 32 2.91768 32 4.70302V43.297C32 45.0823 32 45.975 31.6179 46.6167C31.2824 47.1801 30.7518 47.6161 30.1161 47.851C29.3918 48.1185 28.4598 47.9918 26.5959 47.7384H26.5959H26.5958L6.06063 44.9464L6.06057 44.9464C4.62074 44.7506 3.90081 44.6527 3.35931 44.323C2.8821 44.0324 2.50309 43.6178 2.26742 43.1287C2 42.5737 2 41.8841 2 40.505V7.49503ZM24 20.5078C24 20.0879 24 19.8779 24.0705 19.7119C24.1326 19.5657 24.2323 19.4436 24.3567 19.3611C24.4979 19.2674 24.6847 19.2484 25.0583 19.2104L26.731 19.0402C27.1712 18.9954 27.3912 18.973 27.5611 19.0552C27.7104 19.1273 27.8338 19.2535 27.9115 19.4134C28 19.5954 28 19.8428 28 20.3376V27.6624C28 28.1572 28 28.4046 27.9115 28.5866C27.8338 28.7465 27.7104 28.8727 27.5611 28.9448C27.3912 29.027 27.1712 29.0046 26.731 28.9598L25.0583 28.7896C24.6847 28.7516 24.4979 28.7326 24.3567 28.6389C24.2323 28.5564 24.1326 28.4343 24.0705 28.2881C24 28.1221 24 27.9121 24 27.4922V20.5078ZM37.6444 5H35V44H37.6444C39.169 44 39.9313 44 40.5136 43.7024C41.0259 43.4407 41.4423 43.0231 41.7033 42.5094C42 41.9254 42 41.1609 42 39.632V9.368C42 7.83906 42 7.07458 41.7033 6.49061C41.4423 5.97692 41.0259 5.55929 40.5136 5.29755C39.9313 5 39.169 5 37.6444 5Z" fill="url(#paint0_linear_6659_96702)"/>
+<path d="M83.1407 36.8004C81.0859 36.8004 79.3113 36.3734 77.8168 35.5195C76.3224 34.6655 75.1749 33.478 74.3743 31.9569C73.5738 30.4091 73.1735 28.6211 73.1735 26.593C73.1735 24.5115 73.5871 22.7102 74.4144 21.1891C75.2416 19.668 76.4025 18.4804 77.8969 17.6265C79.418 16.7725 81.1926 16.3456 83.2207 16.3456C85.2756 16.3456 87.0368 16.7725 88.5046 17.6265C89.999 18.4804 91.1598 19.668 91.9871 21.1891C92.8144 22.7102 93.228 24.4981 93.228 26.553C93.228 28.5811 92.801 30.3691 91.9471 31.9168C91.1198 33.4646 89.959 34.6655 88.4646 35.5195C86.9701 36.3467 85.1955 36.7737 83.1407 36.8004ZM83.1807 32.9176C84.3015 32.9176 85.2622 32.6374 86.0628 32.077C86.8634 31.5166 87.4772 30.756 87.9041 29.7953C88.3578 28.8346 88.5846 27.7538 88.5846 26.553C88.5846 25.3254 88.3712 24.2313 87.9442 23.2706C87.5172 22.3099 86.9034 21.5627 86.1028 21.0289C85.3023 20.4685 84.3416 20.1883 83.2207 20.1883C82.1533 20.1883 81.206 20.4685 80.3787 21.0289C79.5514 21.5894 78.911 22.3499 78.4573 23.3106C78.0303 24.2713 77.8035 25.3521 77.7768 26.553C77.7768 27.7805 77.9903 28.8746 78.4173 29.8353C78.8442 30.796 79.4714 31.5566 80.2986 32.117C81.1259 32.6507 82.0866 32.9176 83.1807 32.9176Z" fill="currentColor"/>
+<path d="M129.061 17.0726C129.061 16.9572 128.967 16.8637 128.852 16.8637H124.386C124.271 16.8637 124.177 16.7702 124.177 16.6549V11.1265C124.177 11.0111 124.084 10.9177 123.968 10.9177H119.903C119.788 10.9177 119.694 11.0111 119.694 11.1265V16.6549C119.694 16.7702 119.601 16.8637 119.485 16.8637H116.765C116.649 16.8637 116.555 16.9586 116.557 17.0748L116.592 20.4599C116.593 20.5743 116.687 20.6665 116.801 20.6665H119.485C119.601 20.6665 119.694 20.76 119.694 20.8753V30.2449C119.694 31.6593 119.974 32.8602 120.535 33.8475C121.122 34.8082 121.922 35.5421 122.936 36.0491C123.95 36.5562 125.178 36.8097 126.619 36.8097C127.019 36.8097 127.446 36.7563 127.9 36.6496C128.38 36.5428 128.844 36.4305 129.245 36.2703C129.602 36.1363 130.298 35.787 130.653 35.5812C130.748 35.5264 130.777 35.4071 130.724 35.3119L129.072 32.3998C129.02 32.3074 128.907 32.2688 128.808 32.3066C128.541 32.4084 128.265 32.4922 127.98 32.5579C127.633 32.638 127.286 32.678 126.939 32.678C126.005 32.678 125.311 32.58 124.858 31.9662C124.404 31.3257 124.177 30.5118 124.177 29.5244V20.8753C124.177 20.76 124.271 20.6665 124.386 20.6665H128.852C128.967 20.6665 129.061 20.573 129.061 20.4577V17.0726Z" fill="currentColor"/>
+<path d="M140.912 36.7904C138.858 36.7904 137.083 36.3634 135.589 35.5095C134.094 34.6555 132.947 33.468 132.146 31.9469C131.345 30.3991 130.945 28.6112 130.945 26.583C130.945 24.5015 131.359 22.7002 132.186 21.1791C133.013 19.658 134.174 18.4705 135.669 17.6165C137.19 16.7626 138.964 16.3356 140.992 16.3356C143.047 16.3356 144.809 16.7626 146.276 17.6165C147.771 18.4705 148.932 19.658 149.759 21.1791C150.586 22.7002 151 24.4882 151 26.543C151 28.5711 150.573 30.3591 149.719 31.9069C148.892 33.4547 147.731 34.6555 146.236 35.5095C144.742 36.3368 142.967 36.7637 140.912 36.7904ZM140.952 32.9076C142.073 32.9076 143.034 32.6274 143.835 32.067C144.635 31.5066 145.249 30.746 145.676 29.7853C146.13 28.8246 146.356 27.7439 146.356 26.543C146.356 25.3154 146.143 24.2213 145.716 23.2606C145.289 22.2999 144.675 21.5527 143.875 21.019C143.074 20.4586 142.113 20.1784 140.992 20.1784C139.925 20.1784 138.978 20.4586 138.15 21.019C137.323 21.5794 136.683 22.3399 136.229 23.3006C135.802 24.2613 135.575 25.3421 135.549 26.543C135.549 27.7705 135.762 28.8647 136.189 29.8254C136.616 30.7861 137.243 31.5466 138.07 32.107C138.898 32.6407 139.858 32.9076 140.952 32.9076Z" fill="currentColor"/>
+<path d="M71.6634 32.7575C71.6634 32.6421 71.5699 32.5486 71.4546 32.5486H60.652C60.5367 32.5486 60.4432 32.4551 60.4432 32.3398V10.2078C60.4432 10.0925 60.3497 9.99902 60.2344 9.99902H56.2088C56.0935 9.99902 56 10.0925 56 10.2078L56 36.5916C56 36.7069 56.0935 36.8004 56.2088 36.8004H71.4546C71.5699 36.8004 71.6634 36.7069 71.6634 36.5916V32.7575Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M109.491 35.0155C109.491 34.971 109.437 34.9486 109.405 34.9794C108.093 36.242 106.515 36.8004 104.853 36.8004C102.851 36.8004 101.472 36.3734 100.005 35.5195C98.5637 34.6655 97.4562 33.478 96.6823 31.9569C95.9084 30.4091 95.5215 28.5945 95.5215 26.5129C95.5215 24.4848 95.9084 22.7102 96.6823 21.1891C97.4829 19.668 98.6171 18.4805 100.085 17.6265C101.553 16.7726 103.023 16.3456 104.853 16.3456C106.55 16.3456 108.165 16.9704 109.409 17.9723C109.442 17.9989 109.491 17.9756 109.491 17.9332V17.0748C109.491 16.9595 109.585 16.866 109.7 16.866H113.806C113.921 16.866 114.015 16.9595 114.015 17.0748V37.601C114.015 39.2288 113.614 40.6298 112.814 41.804C112.04 42.9782 110.919 43.8855 109.451 44.526C108.01 45.1665 106.276 45.4867 104.248 45.4867C103.847 45.4867 103.217 45.4759 102.55 45.3958C101.91 45.3158 101.165 45.1599 100.445 44.9731C99.751 44.813 99.0705 44.5995 98.4034 44.3326C97.8006 44.0915 97.2741 43.8178 96.8238 43.5113C96.7408 43.4548 96.713 43.3462 96.7556 43.2553L98.2314 40.1098C98.2816 40.0028 98.4105 39.9588 98.5163 40.0117C99.4875 40.4968 100.419 40.8646 101.27 41.1149C102.177 41.4085 103.204 41.5059 104.298 41.5326C105.872 41.5059 106.983 41.2616 107.97 40.5144C108.984 39.7672 109.491 38.9219 109.491 37.561V35.0155ZM109.491 31.1917C108.323 32.2309 106.928 32.9176 105.289 32.9176C104.221 32.9176 103.287 32.6507 102.487 32.117C101.713 31.5566 101.126 30.796 100.725 29.8354C100.325 28.8747 100.125 27.7672 100.125 26.5129C100.125 25.3121 100.325 24.2446 100.725 23.3106C101.126 22.3499 101.713 21.5894 102.487 21.029C103.287 20.4686 104.234 20.1884 105.329 20.1884C107.065 20.1884 108.383 20.9473 109.491 22.1026V31.1917Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M246.528 35.0031C246.56 34.97 246.617 34.9921 246.617 35.0378L246.617 36.234C246.617 36.3444 246.706 36.434 246.817 36.434H250.807C250.918 36.434 251.007 36.3444 251.007 36.234V10.199C251.007 10.0886 250.918 9.99902 250.807 9.99902H246.817C246.706 9.99902 246.617 10.0886 246.617 10.199L246.616 17.9267C246.616 17.9742 246.555 17.9956 246.525 17.9594C245.564 16.8342 243.891 16.3367 242.388 16.3367C240.559 16.3367 239.088 16.7637 237.62 17.6177C236.153 18.4716 235.019 19.6591 234.218 21.1802C233.444 22.7014 233.057 24.476 233.057 26.5041C233.057 28.5856 233.444 30.4003 234.218 31.9481C234.992 33.4692 236.099 34.6567 237.54 35.5106C239.008 36.3646 240.387 36.7916 242.388 36.7916C243.873 36.7916 245.498 36.0804 246.528 35.0031ZM246.617 21.7825C246.617 21.7261 246.593 21.6722 246.551 21.6348C245.543 20.7417 244.359 20.1795 242.864 20.1795C241.77 20.1795 240.823 20.4597 240.022 21.0201C239.248 21.5805 238.661 22.3411 238.261 23.3018C237.861 24.2358 237.661 25.3032 237.661 26.5041C237.661 27.7584 237.861 28.8658 238.261 29.8265C238.661 30.7872 239.248 31.5478 240.022 32.1082C240.823 32.6419 241.757 32.9088 242.824 32.9088C244.242 32.9088 245.476 32.3955 246.54 31.585C246.589 31.5477 246.617 31.4895 246.617 31.4279V21.7825ZM184.37 10.2C184.37 10.0895 184.459 10 184.57 10H188.641C188.751 10 188.841 10.0895 188.841 10.2V36.2252C188.841 36.3357 188.751 36.4252 188.641 36.4252H184.57C184.459 36.4252 184.37 36.3357 184.37 36.2252V10.2ZM200.97 36.7916C198.915 36.7916 197.14 36.3646 195.646 35.5106C194.151 34.6567 193.004 33.4692 192.203 31.948C191.403 30.4003 191.002 28.6123 191.002 26.5842C191.002 24.5026 191.416 22.7013 192.243 21.1802C193.071 19.6591 194.231 18.4716 195.726 17.6177C197.247 16.7637 199.022 16.3367 201.05 16.3367C203.105 16.3367 204.866 16.7637 206.334 17.6177C207.828 18.4716 208.989 19.6591 209.816 21.1802C210.643 22.7013 211.057 24.4893 211.057 26.5441C211.057 28.5723 210.63 30.3602 209.776 31.908C208.949 33.4558 207.788 34.6567 206.294 35.5106C204.799 36.3379 203.024 36.7649 200.97 36.7916ZM201.01 32.9087C202.131 32.9087 203.091 32.6285 203.892 32.0681C204.692 31.5077 205.306 30.7472 205.733 29.7865C206.187 28.8258 206.414 27.745 206.414 26.5441C206.414 25.3166 206.2 24.2224 205.773 23.2617C205.346 22.3011 204.732 21.5538 203.932 21.0201C203.131 20.4597 202.171 20.1795 201.05 20.1795C199.982 20.1795 199.035 20.4597 198.208 21.0201C197.38 21.5805 196.74 22.3411 196.286 23.3018C195.859 24.2625 195.632 25.3433 195.606 26.5441C195.606 27.7717 195.819 28.8658 196.246 29.8265C196.673 30.7872 197.3 31.5478 198.128 32.1082C198.955 32.6419 199.916 32.9087 201.01 32.9087ZM231.057 36.234C231.057 36.3444 230.968 36.434 230.857 36.434H226.742C226.632 36.434 226.542 36.3444 226.542 36.234V35.0238C226.542 34.9929 226.517 34.9679 226.486 34.9679C226.47 34.9679 226.454 34.975 226.444 34.9873C225.176 36.439 223.599 37.0008 221.033 37.0008C216.552 37.0008 213.296 33.5728 213.296 29.1465V17.2008C213.296 17.0903 213.385 17.0008 213.496 17.0008H217.629C217.739 17.0008 217.829 17.0903 217.829 17.2008V27.77C217.829 30.708 218.931 32.9522 221.609 32.9522C224.985 32.9522 226.542 30.8035 226.542 27.6891V17.2003C226.542 17.0898 226.632 17.0008 226.742 17.0008H230.857C230.968 17.0008 231.057 17.0903 231.057 17.2008V36.234ZM172.883 36.8143C176.311 36.8143 179.679 35.2386 181.749 32.4214C181.758 32.4084 181.757 32.3905 181.745 32.3791L179.331 29.9647C179.247 29.8811 179.11 29.888 179.032 29.9771C178.718 30.3376 178.382 30.6566 178.083 30.8989C176.669 32.0457 175.022 32.9587 172.883 32.9587C170.03 32.9587 167.556 31.2903 166.429 28.7054C165.841 27.3453 165.547 25.7431 165.547 23.8989V23.8816C165.547 22.0258 165.841 20.4294 166.429 19.0924C167.554 16.5114 170.039 14.8564 172.883 14.8564C174.777 14.8564 176.938 15.2209 178.579 16.862C178.67 16.9532 178.762 17.0481 178.853 17.1464C178.931 17.2309 179.064 17.235 179.146 17.1536L181.337 14.9622C181.411 14.8884 181.415 14.7696 181.347 14.6912C178.976 11.9926 176.117 11.0008 172.883 11.0008C168.541 11.0008 164.403 13.0579 162.435 17.0176C161.478 18.9425 161 21.2305 161 23.8816V23.8989C161 26.55 161.473 28.8437 162.418 30.7802C164.393 34.7535 168.524 36.8143 172.883 36.8143Z" fill="currentColor"/>
+<defs>
+<linearGradient id="paint0_linear_6659_96702" x1="-10.381" y1="33.1953" x2="38.8896" y2="13.0537" gradientUnits="userSpaceOnUse">
+<stop stop-color="#4B2EFB"/>
+<stop offset="1" stop-color="#E65FFC"/>
+</linearGradient>
+</defs>
+</svg>

packages/console/src/containers/AppContent/components/Topbar/index.module.scss

@@ -8,7 +8,7 @@
   align-items: center;
 
   .logo {
-    width: 94px;
+    width: auto;
     height: 30px;
     color: var(--color-text);
   }

packages/console/src/containers/AppContent/components/Topbar/index.tsx

@@ -1,6 +1,7 @@
 import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
 
+import CloudLogo from '@/assets/images/cloud-logo.svg';
 import Logo from '@/assets/images/logo.svg';
 import Spacer from '@/components/Spacer';
 import { isCloud } from '@/consts/cloud';
@@ -11,26 +12,26 @@ import UserInfo from '../UserInfo';
 import * as styles from './index.module.scss';
 
 type Props = {
-  isLogoOnly?: boolean;
   className?: string;
 };
 
-const Topbar = ({ isLogoOnly = false, className }: Props) => {
+const Topbar = ({ className }: Props) => {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+  const LogtoLogo = isCloud ? CloudLogo : Logo;
 
   return (
     <div className={classNames(styles.topbar, className)}>
-      <Logo className={styles.logo} />
+      <LogtoLogo className={styles.logo} />
-      <div className={styles.line} />
+      {!isCloud && (
-      <div className={styles.text}>{t('title')}</div>
-      <Spacer />
-      {!isLogoOnly && (
         <>
-          <GetStartedProgress />
+          <div className={styles.line} />
-          {isCloud && <EarlyBirdGift />}
+          <div className={styles.text}>{t('title')}</div>
-          <UserInfo />
         </>
       )}
+      <Spacer />
+      <GetStartedProgress />
+      {isCloud && <EarlyBirdGift />}
+      <UserInfo />
     </div>
   );
 };

packages/console/src/onboarding/components/Topbar/index.module.scss

@@ -0,0 +1,15 @@
+@use '@/scss/underscore' as _;
+
+.topbar {
+  flex: 0 0 64px;
+  width: 100%;
+  padding: 0 _.unit(6);
+  display: flex;
+  align-items: center;
+
+  .logo {
+    width: auto;
+    height: 30px;
+    color: var(--color-text);
+  }
+}

packages/console/src/onboarding/components/Topbar/index.tsx

@@ -0,0 +1,11 @@
+import CloudLogo from '@/assets/images/cloud-logo.svg';
+
+import * as styles from './index.module.scss';
+
+const Topbar = () => (
+  <div className={styles.topbar}>
+    <CloudLogo className={styles.logo} />
+  </div>
+);
+
+export default Topbar;

packages/console/src/onboarding/containers/AppContent/index.tsx

@@ -1,12 +1,12 @@
 import { Outlet } from 'react-router-dom';
 
-import Topbar from '@/containers/AppContent/components/Topbar';
+import Topbar from '@/onboarding/components/Topbar';
 
 import * as styles from './index.module.scss';
 
 const AppContent = () => (
   <div className={styles.app}>
-    <Topbar isLogoOnly />
+    <Topbar />
     <div className={styles.content}>
       <Outlet />
     </div>