feat(sidebar): implement new design [EE-3447] (#7118)

app/react/sidebar/Footer.tsx

@@ -1,7 +1,6 @@
 import { useQuery } from 'react-query';
 import clsx from 'clsx';
 
-import smallLogo from '@/assets/images/logo_small.png';
 import { getStatus } from '@/portainer/services/api/status.service';
 
 import { UpdateNotification } from './UpdateNotifications';
@@ -17,22 +16,23 @@ export function Footer() {
   const { Edition, Version } = statusQuery.data;
 
   return (
-    <div className={styles.root}>
+    <div className={clsx(styles.root, 'text-center')}>
       {process.env.PORTAINER_EDITION === 'CE' && <UpdateNotification />}
-      <div>
-        <img
-          src={smallLogo}
-          className={clsx('img-responsive', styles.logo)}
-          alt="Portainer"
-        />
-        <span
-          className={styles.version}
-          data-cy="portainerSidebar-versionNumber"
-        >
-          {Version}
-        </span>
-        {process.env.PORTAINER_EDITION !== 'CE' && (
-          <div className={styles.editionVersion}>{Edition}</div>
+      <div className="text-xs space-x-1 text-gray-5 be:text-gray-6">
+        <span>&copy;</span>
+        <span>Portainer {Edition}</span>
+
+        <span data-cy="portainerSidebar-versionNumber">{Version}</span>
+
+        {process.env.PORTAINER_EDITION === 'CE' && (
+          <a
+            href="https://www.portainer.io/install-BE-now"
+            className="text-blue-6 font-medium"
+            target="_blank"
+            rel="noreferrer"
+          >
+            Upgrade
+          </a>
         )}
       </div>
     </div>