From 2720cccb2b6f4f17888dbd34df4fdb0b75d6862e Mon Sep 17 00:00:00 2001 From: Luca Burgio Date: Sun, 19 Mar 2023 21:23:43 +0100 Subject: [PATCH] feat: new website (#261) * add: website redesign and optimization * fix: additional improvements in home, support, and doc * fix: typography and spacing * fix: moved praise to support page * fix: redesigned support page * feat: added new pillars and paragraphs * fix: changed table colors * fix: shortened home * fix: small improvements to support page * fix: optimized mobile version * feat: added Ad on mobile * Remove outdated color prop from CurrentVersion * Small format fixes * fix: removed prefixes in Slider.tsx Co-authored-by: Pascal Jufer * fix: removed prefixes in Button.tsx Co-authored-by: Pascal Jufer * fix: removed unused const Co-authored-by: Pascal Jufer * fix: correctly renamed const Overlay Co-authored-by: Pascal Jufer * fix: applied same button style to the Copy button Co-authored-by: Pascal Jufer * fix: Removed unnecessary prefix properties, fixed transition Co-authored-by: Pascal Jufer * fix: Added non prefixed property in Stats.tsx Co-authored-by: Pascal Jufer * fix: Added transition effect on mouse out as well Co-authored-by: Pascal Jufer * fix: Removed a repeated property in Input.tsx Co-authored-by: Pascal Jufer * fix: Changed home title Co-authored-by: Pascal Jufer * fix: Changed icons to icon Co-authored-by: Pascal Jufer --------- Co-authored-by: Pascal Jufer --- iconoir.com/components/AvailableFor.tsx | 2 +- iconoir.com/components/Button.tsx | 37 +++- iconoir.com/components/CategoryRow.tsx | 6 +- iconoir.com/components/ChangelogEntry.tsx | 5 +- iconoir.com/components/CurrentVersion.tsx | 9 +- .../components/CustomizationEditor.tsx | 9 +- .../components/DocumentationNavigation.tsx | 21 +- iconoir.com/components/Explore.tsx | 17 +- iconoir.com/components/Footer.tsx | 9 +- iconoir.com/components/Header.tsx | 6 +- iconoir.com/components/HeaderBackground.tsx | 120 ++++++++-- iconoir.com/components/HeaderSecondary.tsx | 22 ++ iconoir.com/components/Icon.tsx | 44 +++- iconoir.com/components/IconList.tsx | 2 +- iconoir.com/components/Input.tsx | 9 +- iconoir.com/components/NavigationItem.tsx | 4 +- iconoir.com/components/Slider.tsx | 8 +- iconoir.com/components/Stats.tsx | 6 +- iconoir.com/components/Table.tsx | 10 +- iconoir.com/components/Typography.tsx | 51 ++--- iconoir.com/pages/docs/[...slug].tsx | 8 +- iconoir.com/pages/docs/changelog.tsx | 2 +- iconoir.com/pages/index.tsx | 60 ++--- iconoir.com/pages/support.tsx | 206 ++++++++++++------ iconoir.com/public/cellar.gif | Bin 0 -> 334752 bytes iconoir.com/public/command.gif | Bin 0 -> 103422 bytes iconoir.com/public/face-id.gif | Bin 0 -> 39646 bytes iconoir.com/public/fill.gif | Bin 0 -> 191125 bytes iconoir.com/public/pay-bitcoin.gif | Bin 0 -> 124302 bytes iconoir.com/styles/theme.css | 20 +- 30 files changed, 454 insertions(+), 239 deletions(-) create mode 100644 iconoir.com/components/HeaderSecondary.tsx create mode 100644 iconoir.com/public/cellar.gif create mode 100644 iconoir.com/public/command.gif create mode 100644 iconoir.com/public/face-id.gif create mode 100644 iconoir.com/public/fill.gif create mode 100644 iconoir.com/public/pay-bitcoin.gif 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. - - -