From 4e322c234e38f423cd97225d722d9fe80270122a Mon Sep 17 00:00:00 2001
From: Pascal Jufer <pascal-jufer@bluewin.ch>
Date: Sun, 29 Oct 2023 21:02:39 +0100
Subject: [PATCH] Update share button

---
 iconoir.com/components/Header.tsx         | 96 ++++++++---------------
 iconoir.com/components/NavigationItem.tsx |  2 +-
 2 files changed, 35 insertions(+), 63 deletions(-)

diff --git a/iconoir.com/components/Header.tsx b/iconoir.com/components/Header.tsx
index c528be0a..60dafe09 100644
--- a/iconoir.com/components/Header.tsx
+++ b/iconoir.com/components/Header.tsx
@@ -1,13 +1,14 @@
-import { Xmark, Heart, Menu } from 'iconoir-react';
+import { Menu, Xmark } from 'iconoir-react';
+import { Heart } from 'iconoir-react/solid';
 import Link from 'next/link';
 import React from 'react';
 import styled, { css } from 'styled-components';
+import { SHARE_LINK } from '../lib/constants';
+import { media } from '../lib/responsive';
 import { AnimatedSvg } from './AnimatedSvg';
 import { ResetButton } from './Button';
-import { SHARE_LINK } from '../lib/constants';
 import { CurrentVersion } from './CurrentVersion';
 import { NavigationItem } from './NavigationItem';
-import { media } from '../lib/responsive';
 import { Text15 } from './Typography';
 
 export interface HeaderProps {
@@ -38,47 +39,21 @@ export function Header({ currentVersion }: HeaderProps) {
           <NavigationItem href={'/support'} style={{ marginRight: 0 }}>
             Donate &mdash; Our Mission
           </NavigationItem>
-          <BuiltWith $isMobile>
-            <a
-              href={SHARE_LINK}
-              target={'_blank'}
-              rel={'noreferrer'}
-              style={{ textDecoration: 'unset', color: 'unset' }}
-            >
-              Share with
-              <Heart
-                width={'1em'}
-                height={'1em'}
-                style={{ verticalAlign: 'sub' }}
-              />
-              on{' '}
-              <span style={{ textDecoration: 'underline', color: 'var(--g0)' }}>
-                X
-              </span>
+          <Share $isMobile>
+            <a href={SHARE_LINK} target={'_blank'} rel={'noreferrer'}>
+              Share with <Heart width={'1em'} height={'1em'} /> on{' '}
+              <span>X (Twitter)</span>
             </a>
-          </BuiltWith>
+          </Share>
         </MobileMenuContainer>
       </HeaderCenter>
       <HeaderRight>
-        <BuiltWith>
-          <a
-            href={SHARE_LINK}
-            target={'_blank'}
-            rel={'noreferrer'}
-            style={{ textDecoration: 'unset', color: 'unset' }}
-          >
-            Share with
-            <Heart
-              width={'1em'}
-              height={'1em'}
-              style={{ verticalAlign: 'sub' }}
-            />
-            on{' '}
-            <span style={{ textDecoration: 'underline', color: 'var(--g0)' }}>
-              X
-            </span>
+        <Share>
+          <a href={SHARE_LINK} target={'_blank'} rel={'noreferrer'}>
+            Share with <Heart width={'1em'} height={'1em'} /> on{' '}
+            <span>X (Twitter)</span>
           </a>
-        </BuiltWith>
+        </Share>
         <MobileMenuButton onClick={() => setMenuVisible((v) => !v)}>
           {menuVisible ? <Xmark /> : <Menu />}
         </MobileMenuButton>
@@ -203,35 +178,32 @@ export const LogoIcon = styled.div`
   }
 `;
 
-const BuiltWith = styled(Text15)<{ $isMobile?: boolean }>`
+const Share = styled(Text15)<{ $isMobile?: boolean }>`
   &&& {
-    display: ${(props) => (props.$isMobile ? 'flex' : 'none')};
+    display: none;
+    ${(props) =>
+      props.$isMobile &&
+      css`
+        display: flex;
+        justify-content: center;
+        padding: 12px 0;
+      `}
     ${media.lg} {
-      display: ${(props) => (props.$isMobile ? 'none' : 'flex')};
-    }
-    align-items: center;
-    justify-content: center;
-    color: var(--black-60);
-    border-bottom: none;
-    svg {
-      fill: var(--black);
-      margin: 0 0.22em;
-    }
-    > * {
-      margin: 0 0.22em;
+      display: ${(props) => (props.$isMobile ? 'none' : 'block')};
     }
+    white-space: pre-wrap;
     a {
-      color: var(--black);
-      font-weight: 700;
+      display: inline-flex;
+      align-items: center;
+      color: unset;
+      text-decoration: unset;
     }
-    > :last-child {
-      margin-right: 0;
+    svg,
+    span {
+      color: var(--g0);
     }
-    ${media.lg} {
-      justify-content: flex-start;
-      a {
-        font-weight: normal;
-      }
+    a:hover {
+      text-decoration: underline;
     }
   }
 `;
diff --git a/iconoir.com/components/NavigationItem.tsx b/iconoir.com/components/NavigationItem.tsx
index 985a3cc3..20bcee57 100644
--- a/iconoir.com/components/NavigationItem.tsx
+++ b/iconoir.com/components/NavigationItem.tsx
@@ -49,7 +49,7 @@ export const NavigationItemContainer = styled(Text15)<{
     line-height: 28px;
     text-decoration: none;
     white-space: nowrap;
-    padding: 25px;
+    padding: 24px;
     color: var(--black);
     text-align: center;
     width: 100%;