From dfdeda1ff9aebe9317446b33f94d19af3b1705ab Mon Sep 17 00:00:00 2001
From: Mario <mario.sarcevic@iota.org>
Date: Fri, 6 Sep 2024 17:56:56 +0200
Subject: [PATCH] refactor(tooling-explorer): Rebrand homepage footer (#2282)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 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 <balvarez@boxfish.studio>
Co-authored-by: cpl121 <100352899+cpl121@users.noreply.github.com>
---
 apps/explorer/src/components/Icon.tsx         | 22 --------------
 .../explorer/src/components/footer/Footer.tsx | 28 ++++-------------
 .../src/components/footer/FooterIcon.tsx      |  9 ------
 apps/explorer/src/components/footer/Legal.tsx |  2 +-
 apps/explorer/src/components/footer/index.ts  |  1 -
 apps/explorer/src/components/index.ts         |  1 -
 .../src/lib/constants/footer.constants.ts     | 30 +++++++------------
 7 files changed, 18 insertions(+), 75 deletions(-)
 delete mode 100644 apps/explorer/src/components/Icon.tsx
 delete mode 100644 apps/explorer/src/components/footer/FooterIcon.tsx

diff --git a/apps/explorer/src/components/Icon.tsx b/apps/explorer/src/components/Icon.tsx
deleted file mode 100644
index debb400b139..00000000000
--- a/apps/explorer/src/components/Icon.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-// Copyright (c) 2024 IOTA Stiftung
-// SPDX-License-Identifier: Apache-2.0
-
-interface IconProps {
-    icon: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
-    width?: string;
-    height?: string;
-    fill?: string;
-}
-
-function Icon({
-    icon,
-    width = '24px',
-    height = '24px',
-    fill = 'currentColor',
-}: IconProps): JSX.Element {
-    const IconComponent = icon;
-
-    return <IconComponent width={width} height={height} fill={fill} />;
-}
-
-export default Icon;
diff --git a/apps/explorer/src/components/footer/Footer.tsx b/apps/explorer/src/components/footer/Footer.tsx
index 70e1d262896..16911f0d4fc 100644
--- 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
deleted file mode 100644
index 7361a718845..00000000000
--- a/apps/explorer/src/components/footer/FooterIcon.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-// Copyright (c) Mysten Labs, Inc.
-// Modifications Copyright (c) 2024 IOTA Stiftung
-// SPDX-License-Identifier: Apache-2.0
-
-import { type PropsWithChildren } from 'react';
-
-export function FooterIcon({ children }: PropsWithChildren): JSX.Element {
-    return <div className="flex items-center text-steel-darker">{children}</div>;
-}
diff --git a/apps/explorer/src/components/footer/Legal.tsx b/apps/explorer/src/components/footer/Legal.tsx
index 02783bf5bab..140355f62fa 100644
--- 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
index 0d6e56596de..28a15cc3bce 100644
--- 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
index 4932963d16a..ccc65ad6880 100644
--- 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
index 9469da1c2e6..ad141e37829 100644
--- 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/',
     },
 ];