refactor(tooling-explorer): Rebrand homepage footer (#2282)

* fix(tooling-explorer): Rebrand homepage footer * fix(tooling-explorer): Add container css to footer * refactor: remove unnecessary legal text * fix: footer background color --------- Co-authored-by: Begoña Alvarez <[email protected]> Co-authored-by: cpl121 <[email protected]>
iotaledger · Sep 6, 2024 · dfdeda1 · dfdeda1
1 parent dd89906
commit dfdeda1
Show file tree

Hide file tree

Showing 7 changed files with 18 additions and 75 deletions.
diff --git a/apps/explorer/src/components/Icon.tsx b/apps/explorer/src/components/Icon.tsx
diff --git a/apps/explorer/src/components/footer/Footer.tsx b/apps/explorer/src/components/footer/Footer.tsx
@@ -5,11 +5,9 @@
 import { Text } from '@iota/ui';
 
 import { LegalLinks, LegalText } from './Legal';
-import { FooterIcon } from './FooterIcon';
-import { ReactComponent as IotaFoundationRed } from '../../assets/mysten_labs_red.svg';
+import { IotaLogoWeb } from '@iota/ui-icons';
 import { Link } from '~/components/ui';
-import { FOOTER_LINKS, SOCIAL_LINKS } from '~/lib/constants';
-import Icon from '../Icon';
+import { FOOTER_LINKS } from '~/lib/constants';
 
 function FooterLinks(): JSX.Element {
     return (
@@ -25,31 +23,17 @@ function FooterLinks(): JSX.Element {
                     </li>
                 ))}
             </ul>
-
-            <ul className="flex justify-center gap-6">
-                {SOCIAL_LINKS.map(({ icon, href }) => (
-                    <li key={href}>
-                        <Link variant="text" color="steel-darker" href={href}>
-                            <div className="mt-2">
-                                <FooterIcon>
-                                    <Icon icon={icon} width="16" height="16" />
-                                </FooterIcon>
-                            </div>
-                        </Link>
-                    </li>
-                ))}
-            </ul>
         </div>
     );
 }
 
 function Footer(): JSX.Element {
     return (
-        <footer className="sticky top-[100%] bg-gray-40 px-5 py-10 md:px-10 md:py-14">
-            <nav className="flex flex-col justify-center gap-4 divide-y divide-solid divide-gray-45 md:gap-7.5">
+        <footer className="sticky top-[100%] bg-neutral-96 px-5 py-10 md:px-10 md:py-14">
+            <nav className="container flex flex-col justify-center gap-4 divide-y divide-solid divide-gray-45 md:gap-7.5">
                 <div className="flex flex-col-reverse items-center gap-7.5 md:flex-row md:justify-between ">
                     <div className="hidden self-center text-hero-dark md:flex md:self-start">
-                        <IotaFoundationRed />
+                        <IotaLogoWeb width={137} height={36} />
                     </div>
                     <div>
                         <FooterLinks />
@@ -61,7 +45,7 @@ function Footer(): JSX.Element {
                 </div>
             </nav>
             <div className="mt-4 flex justify-center border-t border-solid border-gray-45 pt-5 text-hero-dark md:hidden md:self-start">
-                <IotaFoundationRed />
+                <IotaLogoWeb width={137} height={36} />
             </div>
         </footer>
     );

diff --git a/apps/explorer/src/components/footer/FooterIcon.tsx b/apps/explorer/src/components/footer/FooterIcon.tsx
diff --git a/apps/explorer/src/components/footer/Legal.tsx b/apps/explorer/src/components/footer/Legal.tsx
@@ -13,7 +13,7 @@ export function LegalText(): JSX.Element {
         <div className="flex justify-center md:justify-start">
             <Text color="steel-darker" variant="pSubtitleSmall/medium">
                 &copy;
-                {`${new Date().getFullYear()} IOTA Stiftung. The explorer is adapted from the Sui Explorer, ©2024 by Mysten Labs, licensed under Apache License 2.0. All rights reserved.`}
+                {`${new Date().getFullYear()} IOTA Stiftung. All rights reserved.`}
             </Text>
         </div>
     );

diff --git a/apps/explorer/src/components/footer/index.ts b/apps/explorer/src/components/footer/index.ts
@@ -2,5 +2,4 @@
 // SPDX-License-Identifier: Apache-2.0
 
 export * from './Footer';
-export * from './FooterIcon';
 export * from './Legal';
diff --git a/apps/explorer/src/components/index.ts b/apps/explorer/src/components/index.ts
@@ -29,6 +29,5 @@ export * from './validator-map';
 export * from './AddressesCardGraph';
 export * from './AreaGraph';
 export * from './GraphTooltipContent';
-export * from './Icon';
 export * from './IotaTokenCard';
 export * from './TransactionsCardGraph';
diff --git a/apps/explorer/src/lib/constants/footer.constants.ts b/apps/explorer/src/lib/constants/footer.constants.ts
@@ -2,33 +2,25 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { SocialDiscord24, SocialLinkedin24, SocialTwitter24 } from '@iota/icons';
-
 export const FOOTER_LINKS = [
-    { title: 'Blog', href: 'https://blog.iota.org' },
+    { title: 'Youtube', href: 'https://www.youtube.com/c/iotafoundation' },
+    { title: 'Github', href: 'https://github.com/iotaledger' },
+    { title: 'Discord', href: 'https://discord.iota.org/' },
     {
-        title: 'Docs',
-        href: 'https://wiki.iota.org',
+        title: 'Twitter',
+        href: 'https://twitter.com/iota',
     },
     {
-        title: 'GitHub',
-        href: 'https://github.com/iotaledger',
+        title: 'Reddit',
+        href: 'https://www.reddit.com/r/Iota/',
     },
-    { title: 'Press', href: 'https://iota.org/connect/contact' },
-];
-
-export const SOCIAL_LINKS = [
     {
-        icon: SocialDiscord24,
-        href: 'https://discord.iota.org',
-    },
-    {
-        icon: SocialTwitter24,
-        href: 'https://x.com/iota',
+        title: 'LinkedIn',
+        href: 'https://www.linkedin.com/company/iotafoundation/',
     },
     {
-        icon: SocialLinkedin24,
-        href: 'https://www.linkedin.com/company/iotafoundation/',
+        title: 'Instagram',
+        href: 'https://www.instagram.com/iotafoundation/',
     },
 ];