diff --git a/iconoir.com/components/AvailableFor.tsx b/iconoir.com/components/AvailableFor.tsx
index 9b3dfb88..70eb3b19 100644
--- a/iconoir.com/components/AvailableFor.tsx
+++ b/iconoir.com/components/AvailableFor.tsx
@@ -108,7 +108,7 @@ const AvailableForOuter = styled.div`
padding: 0 30px;
overflow: hidden;
${media.lg} {
- margin: 120px auto;
+ margin: 80px auto;
padding: 0;
}
`;
diff --git a/iconoir.com/components/Button.tsx b/iconoir.com/components/Button.tsx
index 4368fae1..c20b5648 100644
--- a/iconoir.com/components/Button.tsx
+++ b/iconoir.com/components/Button.tsx
@@ -12,13 +12,18 @@ export const ResetButton = styled.button`
`;
export const LargeButton = styled(ResetButton)`
- background: var(--black);
+ background: var(--white);
height: 75px;
+ border-radius: 10px 50px 50px 50px;
+ border: solid 2px var(--g0);
+
+ box-shadow: 0px 8px 0px 0px var(--g0);
+
display: inline-flex;
align-items: center;
text-decoration: none;
- color: var(--white);
- padding: 0 43px;
+ color: var(--g0);
+ padding: 0 70px;
font-size: 20px;
line-height: 26px;
font-weight: 700;
@@ -31,15 +36,10 @@ export const LargeButton = styled(ResetButton)`
* {
font-weight: 700;
}
- &::after {
- content: ' ';
- display: block;
- position: absolute;
- inset: 0;
- border: solid 3px var(--black);
- opacity: 0;
- transition: inset 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.15s linear;
- z-index: 10;
+ transition: 0.2s;
+ &:hover {
+ box-shadow: 0px 3px 0px 0px var(--g0);
+ transform: translateY(5px);
}
&:focus::after,
&:hover::after {
@@ -64,3 +64,16 @@ export const Button = styled(LargeButton)`
background: var(--darker-gray);
}
`;
+
+export const CopyButton = styled(Button)`
+ text-transform: uppercase;
+ background: var(--white);
+ height: 30px;
+ padding: 0 12px;
+ font-size: 11px;
+ letter-spacing: 0.12em;
+ line-height: 17.6px;
+ font-weight: 700;
+ color: var(--black);
+ font-family: var(--font-family) !important;
+`;
\ No newline at end of file
diff --git a/iconoir.com/components/CategoryRow.tsx b/iconoir.com/components/CategoryRow.tsx
index c388260d..ab12893a 100644
--- a/iconoir.com/components/CategoryRow.tsx
+++ b/iconoir.com/components/CategoryRow.tsx
@@ -43,13 +43,13 @@ const Container = styled.div`
`;
const Title = styled(Text15)`
font-weight: 700;
- color: var(--black);
- background-color: var(--light-gray);
+ color: var(--g0);
+ background-color: var(--g6);
border-radius: 8px;
padding: 6px 10px;
`;
const Separator = styled.div`
height: 1px;
flex: 1;
- background: var(--light-gray);
+ background: var(--g6);
`;
diff --git a/iconoir.com/components/ChangelogEntry.tsx b/iconoir.com/components/ChangelogEntry.tsx
index 4ca0fdb7..fb4677b0 100644
--- a/iconoir.com/components/ChangelogEntry.tsx
+++ b/iconoir.com/components/ChangelogEntry.tsx
@@ -5,7 +5,8 @@ import React from 'react';
import styled from 'styled-components';
import { MDXRemote } from './MDXRemote';
import { media } from '../lib/responsive';
-import { Code, CopyButton, Text15, Text18 } from './Typography';
+import { Code, Text15, Text18 } from './Typography';
+import { CopyButton } from './Button';
const EXPAND_HEIGHT = 400;
@@ -121,7 +122,7 @@ const EntryBody = styled(Code)<{ expanded?: boolean }>`
}
code {
display: inline-block;
- background: var(--gray) !important;
+ background: var(--g5) !important;
color: var(--black);
font-family: var(--font-family) !important;
padding: 0 4px;
diff --git a/iconoir.com/components/CurrentVersion.tsx b/iconoir.com/components/CurrentVersion.tsx
index df80ac2d..f881bd3a 100644
--- a/iconoir.com/components/CurrentVersion.tsx
+++ b/iconoir.com/components/CurrentVersion.tsx
@@ -4,12 +4,11 @@ import { Text13 } from './Typography';
export interface CurrentVersionProps {
version: string;
- color?: string;
}
-export function CurrentVersion({ version, color }: CurrentVersionProps) {
+export function CurrentVersion({ version }: CurrentVersionProps) {
return (
-
+
{version}
@@ -17,9 +16,9 @@ export function CurrentVersion({ version, color }: CurrentVersionProps) {
}
const Container = styled(Text13)`
- color: var(--black);
+ color: var(--g1);
font-weight: 700;
- background: var(--pink);
+ background: var(--g5);
line-height: 1;
padding: 7px 16px;
border-radius: 200px;
diff --git a/iconoir.com/components/CustomizationEditor.tsx b/iconoir.com/components/CustomizationEditor.tsx
index ac751024..e86b76d5 100644
--- a/iconoir.com/components/CustomizationEditor.tsx
+++ b/iconoir.com/components/CustomizationEditor.tsx
@@ -5,6 +5,7 @@ import { DEFAULT_CUSTOMIZATIONS, IconListCustomizations } from './IconList';
import { ColorButton, ColorInput } from './Input';
import { Slider } from './Slider';
import { Text13, Text15 } from './Typography';
+import { media } from '../lib/responsive';
export interface CustomizationEditorProps {
customizations: IconListCustomizations;
@@ -91,18 +92,22 @@ export function CustomizationEditor({
}
const CustomizationBox = styled.div`
- background-color:var(--gray-200);
+ background-color:var(--g7);
width: 84%;
padding: 8%;
border-radius: 10px;
margin-bottom: 30px;
+ display: none;
+ ${media.md} {
+ display: block;
+ }
`;
const Header = styled.div`
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 30px;
- border-bottom: solid 1px var(--light-gray);
+ border-bottom: solid 1px var(--g6);
padding-bottom: 10px;
`;
const Field = styled.div`
diff --git a/iconoir.com/components/DocumentationNavigation.tsx b/iconoir.com/components/DocumentationNavigation.tsx
index 978ced8f..c3509383 100644
--- a/iconoir.com/components/DocumentationNavigation.tsx
+++ b/iconoir.com/components/DocumentationNavigation.tsx
@@ -113,11 +113,9 @@ const ChildrenContainer = styled.div<{ expanded?: boolean }>`
`;
const HeaderItem = styled.div`
padding: 10px 30px;
- text-transform: uppercase;
- font-size: 12px;
+ font-size: 15px;
line-height: 19px;
- color: var(--black);
- letter-spacing: 0.12em;
+ color: var(--g0);
font-weight: 700;
display: flex;
align-items: baseline;
@@ -138,7 +136,7 @@ const NavigationItem = styled.div<{ active?: boolean }>`
font-size: 16px;
line-height: 14.5px;
letter-spacing: -0.02em;
- color: var(--black-60);
+ color: var(--g1);
display: flex;
align-items: center;
text-decoration: none;
@@ -150,8 +148,8 @@ const NavigationItem = styled.div<{ active?: boolean }>`
}
&:hover,
${(props) => (props.active ? '&' : '&.noop')} {
- background: var(--light-gray);
- color: var(--black);
+ color: var(--g0);
+ text-decoration: underline;
}
${(props) => (props.active ? 'span' : '&.noop')} {
font-weight: 700;
@@ -164,12 +162,13 @@ const NavigationItemLabel = styled.span`
display: flex;
align-items: center;
justify-content: center;
- padding: 0 4px;
+ padding: 2px 6px;
+ border-radius: 4px;
font-size: 11px;
line-height: 17.6px;
- font-weight: 700;
+ font-weight: 700 !important;
letter-spacing: 0.12em;
text-transform: uppercase;
- color: var(--white);
- background: var(--black);
+ color: var(--g1);
+ background: var(--g5);
`;
diff --git a/iconoir.com/components/Explore.tsx b/iconoir.com/components/Explore.tsx
index 9e87acd6..9cc5b6ae 100644
--- a/iconoir.com/components/Explore.tsx
+++ b/iconoir.com/components/Explore.tsx
@@ -49,21 +49,29 @@ export function Explore({ allIcons }: ExploreProps) {
const Container = styled.div`
display: flex;
- align-items: flex-start;
- flex-direction: row;
+ flex-direction: column-reverse;
+ ${media.md} {
+ align-items: flex-start;
+ flex-direction: row;
+ }
`;
const Left = styled.div`
flex: 1;
min-height: calc(100vh - 100px);
+ background: white;
+ ${media.md} {
+ background: none;
+ }
`;
const Right = styled.div`
position: sticky;
top: 50px;
width: 275px;
margin-left: 68px;
- display: none;
+ display: block;
+ z-index: -1;
${media.md} {
- display: block;
+ z-index: 1;
}
`;
const FilterContainer = styled.div<{ isMobile?: boolean }>`
@@ -72,6 +80,7 @@ const FilterContainer = styled.div<{ isMobile?: boolean }>`
position: sticky;
top: 20px;
z-index: 100;
+ width: 100%;
${media.md} {
position: relative;
top: 0;
diff --git a/iconoir.com/components/Footer.tsx b/iconoir.com/components/Footer.tsx
index fa1206ef..f51634b8 100644
--- a/iconoir.com/components/Footer.tsx
+++ b/iconoir.com/components/Footer.tsx
@@ -65,14 +65,14 @@ const Container = styled.div`
padding-top: 30px;
margin: 100px -50px -50px -50px; /* not ideal. To fix removing padding from body.*/
padding: 84px 12%;
- background-color: var(--gray-200);
+ background-color: var(--g7);
align-items: center;
> :not(:last-child) {
margin-right: 50px;
}
`;
const FooterEnd = styled.div`
- border-top: 1px solid var(--gray-100);
+ border-top: 1px solid var(--g5);
padding-top: 20px;
margin-top: 74px;
width: 100%;
@@ -92,6 +92,7 @@ const FooterCategoryTitle = styled(Text17)`
margin-bottom: 24px;
font-weight: 600;
display: block;
+ color: var(--g0);
`;
const FooterCategoryLinks = styled.div`
@@ -99,12 +100,12 @@ const FooterCategoryLinks = styled.div`
const FooterCategoryLink = styled.a`
display: block;
font-size: 17px;
- color: #424258;
+ color: var(--g1);
width: fit-content;
margin-bottom: 12px;
text-decoration: none;
&:hover{
text-decoration: underline;
- color: var(--black);
+ color: var(--g0);
}
`;
diff --git a/iconoir.com/components/Header.tsx b/iconoir.com/components/Header.tsx
index f4125980..07236d58 100644
--- a/iconoir.com/components/Header.tsx
+++ b/iconoir.com/components/Header.tsx
@@ -12,9 +12,8 @@ import { Text15 } from './Typography';
export interface HeaderProps {
currentVersion: string;
- currentVersionColor?: string;
}
-export function Header({ currentVersion, currentVersionColor }: HeaderProps) {
+export function Header({ currentVersion }: HeaderProps) {
const [menuVisible, setMenuVisible] = React.useState(false);
return (
@@ -27,7 +26,7 @@ export function Header({ currentVersion, currentVersionColor }: HeaderProps) {
-
+
@@ -149,6 +148,7 @@ const HeaderRight = styled(HeaderItem)`
`;
export const Logo = styled.img`
height: 24px;
+ margin-top: -4px;
color: var(--black);
margin-right: 16px !important;
z-index: 101;
diff --git a/iconoir.com/components/HeaderBackground.tsx b/iconoir.com/components/HeaderBackground.tsx
index 74c8b4ac..143a4519 100644
--- a/iconoir.com/components/HeaderBackground.tsx
+++ b/iconoir.com/components/HeaderBackground.tsx
@@ -1,17 +1,43 @@
import React from 'react';
import styled from 'styled-components';
import { media } from '../lib/responsive';
+import {useRef, useEffect} from 'react';
export interface HeaderBackgroundProps {
children: React.ReactElement;
- src: string;
}
-export function HeaderBackground({ children, src }: HeaderBackgroundProps) {
+export function HeaderBackground({ children }: HeaderBackgroundProps) {
+ const parallaxRef = useRef(null);
+
+ useEffect(() => {
+ if (!parallaxRef.current) return;
+
+ const parallaxElements = parallaxRef.current.querySelectorAll('[data-parallax-factor]');
+
+ const handleMouseMove = (event: MouseEvent) => {
+ const x = event.clientX / window.innerWidth;
+ const y = event.clientY / window.innerHeight;
+ parallaxElements.forEach((el) => {
+ const factor = parseFloat(el.getAttribute('data-parallax-factor') || '1');
+ (el as HTMLElement).style.transform = `translate3d(${x * factor * 40}px, ${y * factor * 80}px, 0)`;
+ });
+ };
+
+ document.addEventListener('mousemove', handleMouseMove);
+
+ return () => {
+ document.removeEventListener('mousemove', handleMouseMove);
+ };
+ }, []);
+
+
return (
-
-
-
-
+
+
+
+
+
+
{children}
);
@@ -19,28 +45,78 @@ export function HeaderBackground({ children, src }: HeaderBackgroundProps) {
const HeaderContainer = styled.div`
position: relative;
+ width: fit-content;
+ margin: auto;
`;
-const ImageContainer = styled.div`
+const FloatingIcon = styled.div`
position: absolute;
- top: -100px;
- bottom: -100px;
- left: -30px;
- right: -30px;
- ${media.lg} {
- left: -100px;
- right: -100px;
- }
+ display: none;
+ background-repeat: no-repeat;
z-index: -1;
pointer-events: none;
- display: flex;
align-items: center;
justify-content: center;
-`;
-const BackgroundImage = styled.img`
- width: 90%;
- max-width: calc(min(1100px, 90vw));
- max-height: 60%;
${media.md} {
- max-height: 100%;
+ display: flex;
+ }
+`;
+const FloatingIconCellar = styled(FloatingIcon)`
+ -webkit-transform: rotate(6deg);
+ -moz-transform: rotate(6deg);
+ top: -120px;
+ right: 0px;
+ width:200px;
+ height:200px;
+ background-image: url(/cellar.gif);
+ background-size:70%;
+ ${media.lg} {
+ }
+`;
+const FloatingIconPay = styled(FloatingIcon)`
+ -webkit-transform: rotate(18deg);
+ -moz-transform: rotate(18deg);
+ top: -50px;
+ right: -100px;
+ width:130px;
+ height:130px;
+ background-image: url(/pay-bitcoin.gif);
+ background-size:70%;
+ ${media.lg} {
+ }
+`;
+const FloatingFaceID = styled(FloatingIcon)`
+ -webkit-transform: rotate(6deg);
+ -moz-transform: rotate(6deg);
+ top: -130px;
+ right: 380px;
+ width:110px;
+ height:110px;
+ background-image: url(/face-id.gif);
+ background-size:70%;
+ ${media.lg} {
+ }
+`;
+const FloatingCommand = styled(FloatingIcon)`
+ -webkit-transform: rotate(-7deg);
+ -moz-transform: rotate(-7deg);
+ top: -94px;
+ left: 150px;
+ width:110px;
+ height:110px;
+ background-image: url(/command.gif);
+ background-size:70%;
+ ${media.lg} {
+ }
+`;
+const FloatingFill = styled(FloatingIcon)`
+ -webkit-transform: rotate(-14deg);
+ -moz-transform: rotate(-14deg);
+ top: -64px;
+ left: -75px;
+ width:110px;
+ height:110px;
+ background-image: url(/fill.gif);
+ background-size:70%;
+ ${media.lg} {
}
`;
diff --git a/iconoir.com/components/HeaderSecondary.tsx b/iconoir.com/components/HeaderSecondary.tsx
new file mode 100644
index 00000000..2199bb94
--- /dev/null
+++ b/iconoir.com/components/HeaderSecondary.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import styled from 'styled-components';
+import { media } from '../lib/responsive';
+import {useRef, useEffect} from 'react';
+
+export interface HeaderSecondaryProps {
+ children: React.ReactElement;
+}
+export function HeaderSecondary({ children }: HeaderSecondaryProps) {
+
+ return (
+
+ {children}
+
+ );
+}
+
+const HeaderContainer = styled.div`
+ position: relative;
+ width: fit-content;
+ margin: auto;
+`;
\ No newline at end of file
diff --git a/iconoir.com/components/Icon.tsx b/iconoir.com/components/Icon.tsx
index 1b1d6b47..fdbfaf2d 100644
--- a/iconoir.com/components/Icon.tsx
+++ b/iconoir.com/components/Icon.tsx
@@ -76,6 +76,10 @@ export function Icon({ iconWidth, icon }: IconProps) {
{supportsClipboard ? (
+
+
+
+
{
if (htmlContentsRef.current) {
@@ -111,6 +115,31 @@ export function Icon({ iconWidth, icon }: IconProps) {
);
}
+const Overlay = styled.div`
+ position: absolute;
+ border-radius: 50%;
+ border: solid 2px var(--g0);
+ background: var(--white);
+ width: 8px;
+ height: 8px;
+`;
+const CornerBR = styled(Overlay)`
+bottom: -6px;
+right: -6px;
+z-index: 999;
+`;
+const CornerTR = styled(Overlay)`
+top: -6px;
+right: -6px;
+`;
+const CornerBL = styled(Overlay)`
+bottom: -6px;
+left: -6px;
+`;
+const CornerTL = styled(Overlay)`
+top: -6px;
+left: -6px;
+`;
const HoverContainer = styled.div<{ supportsCopy?: boolean }>`
position: absolute;
display: ${(props) => (props.supportsCopy ? 'block' : 'none')};
@@ -119,8 +148,7 @@ const HoverContainer = styled.div<{ supportsCopy?: boolean }>`
align-items: stretch;
justify-content: stretch;
flex-direction: column;
- border-radius: 12px;
- overflow: hidden;
+
transform: translateZ(0px); // Safari Fix
transition: opacity 0.1s linear;
opacity: 0;
@@ -130,10 +158,10 @@ const HoverButton = styled(ResetButton)`
display: flex;
align-items: center;
justify-content: center;
- background: var(--light-gray);
- border-radius: 0 !important;
+ background: var(--white);
+ border-radius: 0px !important;
transition: background 0.1s linear;
- color: var(--black);
+ color: var(--g0);
font-size: 14px;
line-height: 23px;
font-weight: 700;
@@ -143,7 +171,8 @@ const HoverButton = styled(ResetButton)`
text-decoration: none;
&:hover,
&:active {
- background: var(--gray);
+ background: var(--g0);
+ color: var(--white);
}
`;
const BorderContainer = styled.div<{ iconWidth: number }>`
@@ -151,13 +180,14 @@ const BorderContainer = styled.div<{ iconWidth: number }>`
box-sizing: border-box;
padding-bottom: 100%;
position: relative;
- border: solid 1px var(--light-gray);
+ border: solid 1px var(--g6);
border-radius: 12px;
margin-bottom: 10px;
@media (hover: hover) {
&:hover ${HoverContainer} {
opacity: 1;
pointer-events: all;
+ border: solid 2px var(--g0);
}
}
`;
diff --git a/iconoir.com/components/IconList.tsx b/iconoir.com/components/IconList.tsx
index b6b4c269..e20ca3ea 100644
--- a/iconoir.com/components/IconList.tsx
+++ b/iconoir.com/components/IconList.tsx
@@ -172,7 +172,7 @@ const Container = styled.div`
width: 100%;
margin-top: -${HEADER_TOP_PADDING}px;
> :first-child {
- overflow: visible;
+ overflow: visible !important;
> :first-child {
-webkit-overflow-scrolling: touch;
}
diff --git a/iconoir.com/components/Input.tsx b/iconoir.com/components/Input.tsx
index 27921d5a..a78b4453 100644
--- a/iconoir.com/components/Input.tsx
+++ b/iconoir.com/components/Input.tsx
@@ -30,13 +30,13 @@ export const Input = styled(ResetInput)`
line-height: 21px;
font-weight: 500;
color: var(--black);
- border: solid 1px var(--light-gray);
+ border: solid 1px var(--g6);
&:hover{
- border: solid 1px var(--dark-gray);
+ border: solid 2px var(--g0);
}
&:focus{
- border: solid 1px var(--dark-gray);
+ border: solid 2px var(--g0);
}
`;
@@ -50,8 +50,9 @@ export const LargeInput = styled(Input)`
width: 100%;
box-sizing: border-box;
outline: none;
+ transition: 0.2s;
&:hover{
- transition: 0.4s;
+ transform: scale(1.02);
}
`;
diff --git a/iconoir.com/components/NavigationItem.tsx b/iconoir.com/components/NavigationItem.tsx
index 836b160e..ade15b1d 100644
--- a/iconoir.com/components/NavigationItem.tsx
+++ b/iconoir.com/components/NavigationItem.tsx
@@ -51,7 +51,7 @@ export const NavigationItemContainer = styled(Text15)<{ isActive?: boolean }>`
line-height: 20px;
font-weight: 500;
padding: 0;
- color: var(--black);
+ color: var(--g0);
width: auto;
border-bottom: none !important;
@@ -69,7 +69,7 @@ export const NavigationItemContainer = styled(Text15)<{ isActive?: boolean }>`
transition: background 0.1s linear;
}
&:hover::before {
- background: var(--light-gray);
+ background: var(--g6);
transition: 0.2s;
top: -16px;
bottom: -16px;
diff --git a/iconoir.com/components/Slider.tsx b/iconoir.com/components/Slider.tsx
index 7f21bf0b..22dbaf98 100644
--- a/iconoir.com/components/Slider.tsx
+++ b/iconoir.com/components/Slider.tsx
@@ -72,7 +72,7 @@ function Thumb({ state, trackRef, index }: ThumbProps) {
backgroundColor: isFocusVisible
? 'var(--accent)'
: state.isThumbDragging(index)
- ? 'var(--black)'
+ ? 'var(--g6)'
: 'var(--white)',
scale: isFocusVisible
? '1.0'
@@ -120,15 +120,13 @@ const TrackBackground = styled.div`
`;
const ThumbContainer = styled.div`
position: absolute;
- top: 4px;
transform: translateX(-50%);
`;
const ThumbInner = styled.div`
width: 24px;
height: 24px;
- outline: solid 2px var(--white);
- -webkit-box-shadow: inset 0px 0px 0px 2px #000000;
- box-shadow: inset 0px 0px 0px 2px #000000;
+ border: solid 2px var(--black);
+ box-shadow: 0px 3px 0px 0px var(--g0);
border-radius: 50%;
cursor: pointer;
&:hover{
diff --git a/iconoir.com/components/Stats.tsx b/iconoir.com/components/Stats.tsx
index f510f6b5..f52707ca 100644
--- a/iconoir.com/components/Stats.tsx
+++ b/iconoir.com/components/Stats.tsx
@@ -19,10 +19,12 @@ const StatText = styled.div`
font-size: 38px;
font-weight: 700;
line-height: 62px;
- color: var(--black);
+ color: var(--g0);
${media.md} {
font-size: 50px;
line-height: 82px;
+ -webkit-text-stroke: 1.5px;
+ text-stroke: 1.5px;
}
`;
const StatContainer = styled.div`
@@ -46,6 +48,6 @@ export const StatsContainer = styled.div`
}
${media.md} {
- margin: 64px auto 120px auto;
+ margin: 60px auto;
}
`;
diff --git a/iconoir.com/components/Table.tsx b/iconoir.com/components/Table.tsx
index cd086775..61c73c58 100644
--- a/iconoir.com/components/Table.tsx
+++ b/iconoir.com/components/Table.tsx
@@ -7,23 +7,23 @@ export const Table = styled.table`
margin: 24px 0;
td,
th {
- border: solid 2px var(--light-gray);
+ border: solid 2px var(--g6);
font-size: 16px;
line-height: 25.6px;
padding: 12px 20px;
- color: var(--black-60);
+ color: var(--g1);
${media.lg} {
padding: 12px 30px 12px 60px;
}
}
thead td,
thead th {
- color: var(--black);
- background: var(--lighter-gray);
+ color: var(--g0);
+ background: var(--g7);
font-weight: 700;
text-align: left;
}
tbody tr:nth-child(even) td {
- background: var(--lighter-gray);
+ background: var(--g7);
}
`;
diff --git a/iconoir.com/components/Typography.tsx b/iconoir.com/components/Typography.tsx
index 102dc180..01f9ccb7 100644
--- a/iconoir.com/components/Typography.tsx
+++ b/iconoir.com/components/Typography.tsx
@@ -1,24 +1,24 @@
import React from 'react';
import styled from 'styled-components';
import { showNotification } from '../lib/showNotification';
-import { Button } from './Button';
+import { CopyButton } from './Button';
import { media } from '../lib/responsive';
export const Text15 = styled.div`
font-size: 15px;
line-height: 24px;
- color: var(--black-60);
+ color: var(--g1);
`;
export const Text14 = styled.div`
font-size: 14px;
line-height: 22px;
- color: var(--black);
+ color: var(--g1);
`;
export const Text13 = styled.div`
font-size: 13px;
- color: var(--dark-gray);
+ color: var(--g1);
line-height: 21px;
font-weight: 500;
`;
@@ -30,7 +30,7 @@ export const Text17 = styled.div`
export const Text18 = styled.div`
font-size: 16px;
line-height: 25px;
- color: var(--black-60);
+ color: var(--g1);
${media.md} {
font-size: 18px;
@@ -41,17 +41,18 @@ export const Text18 = styled.div`
export const Heading2 = styled.h2`
font-size: 24px;
line-height: 40px;
- color: var(--black);
+ color: var(--g0);
letter-spacing: -0.02em;
margin: 24px 0;
font-weight: 700;
`;
export const Code = styled.div`
- background: var(--light-gray) !important;
- border-radius: 0 !important;
+ background: var(--g7) !important;
+ border: solid 1px var(--g6);
+ border-radius: 6px !important;
padding: 26px 32px;
- color: var(--black-60);
+ color: var(--g1);
font-size: 16px;
line-height: 26px;
font-weight: 400;
@@ -78,13 +79,13 @@ export const Code = styled.div`
export const H1 = styled.h1`
font-size: 50px;
- font-weight: 700;
+ font-weight: 500;
line-height: 49px;
letter-spacing: -0.02em;
- color: var(--black);
+ color: var(--g0);
margin-bottom: 40px;
${media.lg} {
- font-size: 90px;
+ font-size: 60px;
line-height: 81px;
letter-spacing: -0.05em;
}
@@ -93,26 +94,26 @@ export const H2 = styled.h2`
font-size: 24px;
line-height: 40px;
font-weight: 700;
- color: var(--black);
+ color: var(--g0);
margin: 24px 0;
`;
export const H3 = styled.h3`
font-size: 20px;
line-height: 36px;
font-weight: 700;
- color: var(--black);
+ color: var(--g0);
margin: 24px 0;
`;
export const Body = styled.p`
font-size: 18px;
- color: var(--black-60);
+ color: var(--g1);
line-height: 30px;
margin: 24px 0;
`;
export const CodeElement = styled.code`
display: inline-block;
padding: 0 4px;
- color: var(--black);
+ color: var(--g0);
`;
const PreContainer = styled(Code)`
@@ -132,23 +133,7 @@ const CopyContainer = styled.div`
top: 16px;
right: 23px;
`;
-export const CopyButton = styled(Button)`
- text-transform: uppercase;
- background: var(--gray);
- height: 30px;
- padding: 0 12px;
- font-size: 11px;
- letter-spacing: 0.12em;
- line-height: 17.6px;
- font-weight: 700;
- color: var(--black);
- transition: background 0.1s linear, color 0.1s linear;
- font-family: var(--font-family) !important;
- &:hover {
- background: var(--black) !important;
- color: var(--white);
- }
-`;
+
export function Pre({ children, ...props }: React.PropsWithChildren) {
const containerRef = React.useRef(null);
const [supportsClipboard, setSupportsClipboard] = React.useState(false);
diff --git a/iconoir.com/pages/docs/[...slug].tsx b/iconoir.com/pages/docs/[...slug].tsx
index a9a889e5..65d85553 100644
--- a/iconoir.com/pages/docs/[...slug].tsx
+++ b/iconoir.com/pages/docs/[...slug].tsx
@@ -35,7 +35,7 @@ export default function DocumentationPage({
return (
-
+
@@ -67,9 +67,9 @@ export const Container = styled.div`
`;
export const NavigationContainer = styled.div`
${media.lg} {
- width: 286px;
+ width: 250px;
margin-right: 30px;
- border-right: solid 2px var(--light-gray);
+ border-right: solid 1px var(--g6);
}
`;
export const ContentContainer = styled.div`
@@ -77,7 +77,7 @@ export const ContentContainer = styled.div`
`;
export const InnerContentContainer = styled.div`
margin: 0 30px;
- max-width: 1168px;
+ max-width: 800px;
${media.lg} {
margin: 0 auto;
}
diff --git a/iconoir.com/pages/docs/changelog.tsx b/iconoir.com/pages/docs/changelog.tsx
index 8f975df7..9c434dbe 100644
--- a/iconoir.com/pages/docs/changelog.tsx
+++ b/iconoir.com/pages/docs/changelog.tsx
@@ -37,7 +37,7 @@ export default function Changelog({
return (
-
+
diff --git a/iconoir.com/pages/index.tsx b/iconoir.com/pages/index.tsx
index a4e2b740..c41d23c6 100644
--- a/iconoir.com/pages/index.tsx
+++ b/iconoir.com/pages/index.tsx
@@ -1,5 +1,4 @@
import { downloads as npmDownloads } from '@nodesecure/npm-registry-sdk';
-import { PeaceHand } from 'iconoir-react';
import type { NextPage } from 'next';
import styled from 'styled-components';
import { AvailableFor } from '../components/AvailableFor';
@@ -11,7 +10,6 @@ import { Header } from '../components/Header';
import { HeaderBackground } from '../components/HeaderBackground';
import { Icon } from '../components/IconList';
import { Layout } from '../components/Layout';
-import { Praise } from '../components/Praise';
import { media } from '../lib/responsive';
import { SEO } from '../components/SEO';
import { Stat, StatsContainer } from '../components/Stats';
@@ -36,8 +34,11 @@ const Home: NextPage = ({
-
- Your new default library.
+
+
+ Say hello
+ to your new icon library.
+
A high-quality selection of free icons. No premium options or sign-ups. Your new alternative to Noun Project, Flaticon, and all Figma resources. Available in SVG,
@@ -81,38 +82,48 @@ const Home: NextPage = ({
target={'_blank'}
rel={'noreferrer'}
>
-
- Support the project
+ Donate
- Iconoir is an open source project built with consistent passion and
- dedication. If you consider this library valuable for you and your
- projects, support Iconoir with a donation to help us sustain costs and
- development time.
+ If you find Iconoir valuable for you, consider making a donation to help us pursuing even bigger goals.
-
-
-
);
};
+export const HeroHead = styled.div`
+ margin: 60px auto 40px auto;
+ ${media.md} {
+ margin: 160px auto 80px auto;
+ }
+`;
export const HeroText = styled.h1`
font-size: 50px;
font-weight: 700;
- letter-spacing: -0.05em;
- line-height: 52px;
+ color: var(--g0);
+ margin: 0 auto;
+ letter-spacing: -0.035em;
+ line-height: 1;
text-align: center;
- margin: 60px auto 40px auto;
-
+ transition: 0.3s;
${media.md} {
font-size: 90px;
- line-height: 1;
- margin: 200px auto 80px auto;
+ padding: 0 20px;
+ letter-spacing: -0.045em;
+ -webkit-text-stroke: 2.5px;
}
+ &:hover {
+ transform:scale(1.04);
+ transition:0.3s;
+ }
+
+`;
+export const HeroTextSecondary = styled(HeroText)`
+ color: var(--g4);
+ max-width: 1000px;
`;
export const HeroDescription = styled(Text18)<{ topMargin?: number }>`
display: block;
@@ -134,16 +145,10 @@ const SupportContainer = styled.div`
}
margin-bottom: 50px;
${media.sm} {
- margin-bottom: 150px;
+ margin-bottom: 110px;
}
`;
-const PraiseContainer = styled.div`
- margin: 50px 0 64px 0;
- ${media.md} {
- margin: 140px 0 150px 0;
- }
- width: 100%;
-`;
+
export default Home;
@@ -171,4 +176,5 @@ export async function getStaticProps() {
numDownloads,
},
};
+
}
diff --git a/iconoir.com/pages/support.tsx b/iconoir.com/pages/support.tsx
index 6bd6b6f0..633b3e8b 100644
--- a/iconoir.com/pages/support.tsx
+++ b/iconoir.com/pages/support.tsx
@@ -1,79 +1,63 @@
-import { ArrowRight } from 'iconoir-react';
+import { ArrowRight, Flash, Discord, Globe, DesignNib } from 'iconoir-react';
import { NextPage } from 'next';
-import Image from 'next/image';
import styled from 'styled-components';
import { HeroText } from '.';
+import { HeroTextSecondary } from '.';
import { LargeButton } from '../components/Button';
import { DISCORD_LINK, SUPPORT_LINK } from '../lib/constants';
import { Footer } from '../components/Footer';
import { Header, HeaderProps } from '../components/Header';
-import { HeaderBackground } from '../components/HeaderBackground';
+import { HeaderSecondary } from '../components/HeaderSecondary';
import { Layout } from '../components/Layout';
import { media } from '../lib/responsive';
import { SEO } from '../components/SEO';
-import { Code, Heading2, Text18 } from '../components/Typography';
+import { Body, Code, Heading2, Text18 } from '../components/Typography';
import { getHeaderProps } from '../lib/getHeaderProps';
+import { Praise } from '../components/Praise';
interface SupportProps extends HeaderProps {}
const Support: NextPage = ({ ...headerProps }) => {
return (
-
-
- Support our open library.
-
+
+
+
+ Our Goal
+ A free, complete, and open icon library.
+
+
-
- Iconoir is an open source project built with consistent passion and
- dedication. There are no pro subscriptions, forced sign-ups, free
- trials or limitations.
- Building an open library is what makes us happy.
-
- Our mission pillars
-
- Free forever. We want to give to developers and users
- high-quality free icons. Hassle-free.
-
-
- Full coverage. We're aiming at having as many unique
- icons as possible.
-
-
- Used everywhere. We'd like to see Iconoir as a point
- of reference for any new and exciting project out there.
-
-
- If you consider this library valuable for you and your projects,
- support Iconoir with a donation to help us sustain costs and
- development time.
-
-
-
-
- Donate with OpenCollective
- We collect donations with transparency.
-
-
-
-
-
-
- Donate
-
-
-
+
+
+
+ Free
+ We want to give to developers and users high-quality free icons. Hassle-free.
+
+
+
+ Complete
+ We’re aiming at having as much unique icons as possible.
+
+
+
+ Ambitious
+ We want to help and be part of as many projects as possible.
+
+
+
+ Become part of the project.
+
+ If you consider this library valuable for you and your projects,
+ support Iconoir with a donation to help us sustain costs and
+ development time.
+
+ Donate
+
+
+ What our friends say
+
+
Join us on Discord
@@ -88,7 +72,7 @@ const Support: NextPage = ({ ...headerProps }) => {
target={'_blank'}
rel={'noreferrer'}
>
- Join
+ Join
@@ -98,25 +82,92 @@ const Support: NextPage = ({ ...headerProps }) => {
);
};
+
+const PillarsContainer = styled.div`
+ display: flex;
+ justify-content: space-between;
+ flex-direction: column;
+ ${media.md} {
+ flex-direction: row;
+ }
+`;
+
+const Pillar = styled.div`
+ height: fit-content;
+ width: 80%;
+ border: 1px solid var(--g6);
+ background: var(--white);
+ border-radius: 12px;
+ display: flex-column;
+ text-align: center;
+ padding: 60px 10%;
+ margin-bottom: 20px;
+ ${media.md} {
+ width: 22%;
+ height: 180px;
+ padding: 60px 5%;
+ margin-bottom: 0;
+ transition: 0.2s;
+ &:hover {
+ transform: scale(1.05);
+ }
+ }
+`;
+
+const PillarTitle = styled(Heading2)`
+ width: 100%;
+ margin: 20px 0 0 0;
+ font-weight: 500;
+ font-size: 20px;
+`;
+
+const PillarDescription = styled(Body)`
+ margin: 0;
+`;
+
+const PillarIcon = styled.span<{ R?: string, G?: string, B?: string }>`
+ font-size: 18px;
+ padding: 20px 11px 6px 11px;
+ color: var(--white);
+ width: 100px;
+ height: 100px;
+ background: rgb(${({ R }) => R}, ${({ G }) => G}, ${({ B }) => B});
+ box-shadow: 2px 6px 20px rgba(${({ R }) => R}, ${({ G }) => G}, ${({ B }) => B}, 0.5);
+ border-radius: 18px;
+`;
+
+export const SupportHead = styled.div`
+ margin: 60px auto 40px auto;
+ ${media.md} {
+ margin: 100px auto 80px auto;
+ }
+`;
+
const PageContainer = styled.div`
max-width: 1336px;
margin: 75px auto 0 auto;
${media.lg} {
- margin: 150px auto 0 auto;
+ margin: 110px auto 0 auto;
}
`;
-const DonateSeparator = styled.div`
- margin-top: 88px;
+const WideSection = styled.div`
+ width: 60%;
+ background: var(--g7);
+ border-radius: 12px;
+ text-align: center;
+ padding: 4% 20% 10% 20%;
+ margin-top: 60px;
+ ${media.md} {
+ padding: 80px 20%;
+ }
+`;
+const PraiseTitle = styled(Heading2)`
+ margin: 100px 0 80px 0;
+ text-align: center;
`;
const DonateLeft = styled.div`
max-width: 800px;
`;
-const DonateImage = styled.div`
- display: none;
- ${media.lg} {
- display: block;
- }
-`;
export const DonateRight = styled.div`
display: flex;
align-items: center;
@@ -133,11 +184,15 @@ export const DonateButton = styled(LargeButton)`
padding: 0 24px;
height: 50px;
`;
+const CallToAction = styled(LargeButton)`
+ margin-top: 40px;
+`;
export const DonateContainer = styled.div`
display: flex;
flex-direction: column;
align-items: stretch;
- background: var(--lighter-gray);
+ border: 1px solid var(--g6);
+ border-radius: 20px;
padding: 30px;
margin-bottom: 24px;
${media.md} {
@@ -149,14 +204,21 @@ export const DonateContainer = styled.div`
`;
export const DonateHeader = styled.div`
font-size: 18px;
- line-height: 27px;
+ color: var(--g0);
letter-spacing: -0.02em;
font-weight: 700;
- margin-bottom: 16px;
+ margin-bottom: 4px;
${media.md} {
- font-size: 30px;
+ font-size: 22px;
}
`;
+const PraiseContainer = styled.div`
+ margin: 50px 0 64px 0;
+ ${media.md} {
+ margin: 140px 0 150px 0;
+ }
+ width: 100%;
+`;
export default Support;
diff --git a/iconoir.com/public/cellar.gif b/iconoir.com/public/cellar.gif
new file mode 100644
index 00000000..f30b112a
Binary files /dev/null and b/iconoir.com/public/cellar.gif differ
diff --git a/iconoir.com/public/command.gif b/iconoir.com/public/command.gif
new file mode 100644
index 00000000..f94bce6f
Binary files /dev/null and b/iconoir.com/public/command.gif differ
diff --git a/iconoir.com/public/face-id.gif b/iconoir.com/public/face-id.gif
new file mode 100644
index 00000000..fe9b6a7d
Binary files /dev/null and b/iconoir.com/public/face-id.gif differ
diff --git a/iconoir.com/public/fill.gif b/iconoir.com/public/fill.gif
new file mode 100644
index 00000000..7d71bd26
Binary files /dev/null and b/iconoir.com/public/fill.gif differ
diff --git a/iconoir.com/public/pay-bitcoin.gif b/iconoir.com/public/pay-bitcoin.gif
new file mode 100644
index 00000000..f08235c9
Binary files /dev/null and b/iconoir.com/public/pay-bitcoin.gif differ
diff --git a/iconoir.com/styles/theme.css b/iconoir.com/styles/theme.css
index 6e5a5d41..08718416 100644
--- a/iconoir.com/styles/theme.css
+++ b/iconoir.com/styles/theme.css
@@ -13,6 +13,12 @@
--gray: #E7E7E7;
--gray-100: #CDCDD3;
--gray-200: #F9F9FA;
+ --g0: #1C2226;
+ --g1: #4F5D69;
+ --g4: #BCC9D2;
+ --g5: #E0E6EB;
+ --g6: #ECF0F4;
+ --g7: #F8FAFD;
--light-gray: #F2F2F2;
--lighter-gray: #F9F9F9;
--super-light-gray: #FBFBFB;
@@ -28,12 +34,12 @@
body {
margin: 0;
padding: 50px 30px;
- background: #FFFFFF;
+ background: var(--white);
overflow-x: hidden;
}
a {
- color: var(--black);
+ color: var(--g0);
text-decoration: underline;
}
@@ -66,7 +72,7 @@ a {
left: 50%;
transform: translateX(-50%);
text-align: center;
- background: var(--black);
+ background: var(--g0);
color: var(--white);
border-radius: 10px;
padding: 15px 30px;
@@ -82,20 +88,20 @@ a {
}
::placeholder {
- color: var(--dark-gray);
+ color: var(--g1);
opacity: 1; /* Firefox */
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
- color: var(--dark-gray);
+ color: var(--g1);
}
::-ms-input-placeholder { /* Microsoft Edge */
- color: var(--dark-gray);
+ color: var(--g1);
}
@media (min-width: 1100px) {
body {
- padding: 50px;
+ padding: 30px 50px 50px 50px;
}
}