deblan-mirror/iconoir
deblan-mirror/iconoir
1
0
Fork 0
mirror of https://github.com/iconoir-icons/iconoir synced 2024-06-07 16:32:26 +02:00
Code Issues Packages Projects Releases Wiki Activity

Update share button

Browse source
This commit is contained in:
Pascal Jufer 2023-10-29 21:02:39 +01:00
parent 1e659eec9b
commit 4e322c234e
No known key found for this signature in database
2 changed files with 35 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

96
iconoir.com/components/Header.tsx
View file

@ -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 Link from 'next/link';
import React from 'react'; import React from 'react';
import styled, { css } from 'styled-components'; import styled, { css } from 'styled-components';
import { SHARE_LINK } from '../lib/constants';
import { media } from '../lib/responsive';
import { AnimatedSvg } from './AnimatedSvg'; import { AnimatedSvg } from './AnimatedSvg';
import { ResetButton } from './Button'; import { ResetButton } from './Button';
import { SHARE_LINK } from '../lib/constants';
import { CurrentVersion } from './CurrentVersion'; import { CurrentVersion } from './CurrentVersion';
import { NavigationItem } from './NavigationItem'; import { NavigationItem } from './NavigationItem';
import { media } from '../lib/responsive';
import { Text15 } from './Typography'; import { Text15 } from './Typography';
export interface HeaderProps { export interface HeaderProps {
@ -38,47 +39,21 @@ export function Header({ currentVersion }: HeaderProps) {
<NavigationItem href={'/support'} style={{ marginRight: 0 }}> <NavigationItem href={'/support'} style={{ marginRight: 0 }}>
Donate &mdash; Our Mission Donate &mdash; Our Mission
</NavigationItem> </NavigationItem>
<BuiltWith $isMobile> <Share $isMobile>
<a <a href={SHARE_LINK} target={'_blank'} rel={'noreferrer'}>
href={SHARE_LINK} Share with <Heart width={'1em'} height={'1em'} /> on{' '}
target={'_blank'} <span>X (Twitter)</span>
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>
</a> </a>
</BuiltWith> </Share>
</MobileMenuContainer> </MobileMenuContainer>
</HeaderCenter> </HeaderCenter>
<HeaderRight> <HeaderRight>
<BuiltWith> <Share>
<a <a href={SHARE_LINK} target={'_blank'} rel={'noreferrer'}>
href={SHARE_LINK} Share with <Heart width={'1em'} height={'1em'} /> on{' '}
target={'_blank'} <span>X (Twitter)</span>
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>
</a> </a>
</BuiltWith> </Share>
<MobileMenuButton onClick={() => setMenuVisible((v) => !v)}> <MobileMenuButton onClick={() => setMenuVisible((v) => !v)}>
{menuVisible ? <Xmark /> : <Menu />} {menuVisible ? <Xmark /> : <Menu />}
</MobileMenuButton> </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} { ${media.lg} {
display: ${(props) => (props.$isMobile ? 'none' : 'flex')}; display: ${(props) => (props.$isMobile ? 'none' : 'block')};
}
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;
} }
white-space: pre-wrap;
a { a {
color: var(--black); display: inline-flex;
font-weight: 700; align-items: center;
color: unset;
text-decoration: unset;
} }
> :last-child { svg,
margin-right: 0; span {
color: var(--g0);
} }
${media.lg} { a:hover {
justify-content: flex-start; text-decoration: underline;
a {
font-weight: normal;
}
} }
} }
`; `;

2
iconoir.com/components/NavigationItem.tsx
View file

@ -49,7 +49,7 @@ export const NavigationItemContainer = styled(Text15)<{
line-height: 28px; line-height: 28px;
text-decoration: none; text-decoration: none;
white-space: nowrap; white-space: nowrap;
padding: 25px; padding: 24px;
color: var(--black); color: var(--black);
text-align: center; text-align: center;
width: 100%; width: 100%;