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) {
Donate — Our Mission
-
-
- Share with
-
- on{' '}
-
- X
-
+
+
+ Share with on{' '}
+ X (Twitter)
-
+
-
-
- Share with
-
- on{' '}
-
- X
-
+
+
+ Share with on{' '}
+ X (Twitter)
-
+
setMenuVisible((v) => !v)}>
{menuVisible ? : }
@@ -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%;