diff --git a/iconoir.com/components/Footer.tsx b/iconoir.com/components/Footer.tsx index cba755e9..6872b44f 100644 --- a/iconoir.com/components/Footer.tsx +++ b/iconoir.com/components/Footer.tsx @@ -103,7 +103,7 @@ const Container = styled.div` display: block; margin-top: 110px; padding-top: 30px; - margin: 100px -50px -50px -50px; /* not ideal. To fix removing padding from body.*/ + margin-top: 100px; padding: 84px 12%; background-color: var(--g7); align-items: center; diff --git a/iconoir.com/components/Layout.tsx b/iconoir.com/components/Layout.tsx index 03484a7e..c25ba14f 100644 --- a/iconoir.com/components/Layout.tsx +++ b/iconoir.com/components/Layout.tsx @@ -1,12 +1,21 @@ import React from 'react'; +import styled from 'styled-components'; +import { media } from '../lib/responsive'; import { GA } from './GA'; export interface LayoutProps {} export function Layout({ children }: React.PropsWithChildren) { return ( -
+ {children} -
+ ); } + +const Container = styled.div` + padding: 50px 30px; + ${media.lg} { + padding: 30px 50px 50px 50px; + } +`; diff --git a/iconoir.com/components/NavigationItem.tsx b/iconoir.com/components/NavigationItem.tsx index 45c0834b..63993588 100644 --- a/iconoir.com/components/NavigationItem.tsx +++ b/iconoir.com/components/NavigationItem.tsx @@ -1,4 +1,5 @@ import Link from 'next/link'; +import { useRouter } from 'next/router'; import React from 'react'; import styled from 'styled-components'; import { media } from '../lib/responsive'; @@ -10,18 +11,27 @@ export interface NavigationItemProps { style?: any; } export function NavigationItem({ href, children, style }: NavigationItemProps) { + const router = useRouter(); return ( - + {children} ); } -export const NavigationItemContainer = styled(Text15)` +export const NavigationItemContainer = styled(Text15)<{ $isActive?: boolean }>` &&& { - font-weight: 700; + font-weight: ${(props) => (props.$isActive ? '700' : '500')}; font-size: 18px; line-height: 28px; text-decoration: none; @@ -40,7 +50,7 @@ export const NavigationItemContainer = styled(Text15)` ${media.lg} { font-size: 15px; line-height: 20px; - font-weight: 500; + font-weight: ${(props) => (props.$isActive ? '600' : '500')}; padding: 0; color: var(--g0); width: auto; diff --git a/iconoir.com/package.json b/iconoir.com/package.json index 2a6fca52..f972b629 100644 --- a/iconoir.com/package.json +++ b/iconoir.com/package.json @@ -20,7 +20,7 @@ "@react-types/slider": "^3.6.1", "@types/animejs": "^3.1.8", "@types/lodash": "^4.14.199", - "@types/node": "^20.6.5", + "@types/node": "^20.7.0", "@types/react": "^18.2.22", "@types/react-dom": "^18.2.7", "@types/react-window": "^1.8.5", @@ -28,11 +28,11 @@ "case": "^1.6.3", "csvtojson": "^2.0.10", "eslint": "^8.50.0", - "eslint-config-next": "^13.5.2", + "eslint-config-next": "^13.5.3", "iconoir-react": "workspace:*", "lodash": "^4.17.21", "moment": "^2.29.4", - "next": "^13.5.2", + "next": "^13.5.3", "next-mdx-remote": "^4.4.1", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/iconoir.com/pages/index.tsx b/iconoir.com/pages/index.tsx index 545b54c0..1be5f3ca 100644 --- a/iconoir.com/pages/index.tsx +++ b/iconoir.com/pages/index.tsx @@ -31,68 +31,71 @@ const Home: NextPage = ({ numDownloads, }) => { return ( - - -
- - - 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, Font, React, React Native, Flutter, Figma and Framer. - - - - - - - - - - - Donate - - - If you find Iconoir valuable for you, consider making a donation to - help us pursuing even bigger goals. - - - + <> + + +
+ + + 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, Font, React, React Native, Flutter, + Figma and Framer. + + + + + + + + + + + Donate + + + If you find Iconoir valuable for you, consider making a donation to + help us pursuing even bigger goals. + + + +