Feat website footer (#241)

* add: new footer and logo hover effect * fix: footer links * Fix: Footer privacy url, header links and animations, small additional changes * Update iconoir.com/components/Footer.tsx Co-authored-by: Sam Marks <sam@sammarks.me> * fix: fixes on pull-request --------- Co-authored-by: Sam Marks <sam@sammarks.me>
2024-06-04 15:02:34 +02:00 · 2023-01-30 22:38:12 +01:00 · 2023-01-30 22:38:12 +01:00 · 75effa75c8
parent 8ec9a33978
commit 75effa75c8
10 changed files with 159 additions and 53 deletions
--- a/iconoir.com/components/AvailableFor.tsx
+++ b/iconoir.com/components/AvailableFor.tsx
@ -139,6 +139,11 @@ const AvailableForContainer = styled.div<{ contentWidth: number }>`
 const AvailableForImage = styled.img`
  height: 40px;
  display: block;
+  transition: 0.2s;
+  &:hover {
+    scale: 1.2;
+    transition: 0.2s;
+  }
  ${media.lg} {
    height: 50px;
  }
--- a/iconoir.com/components/CategoryRow.tsx
+++ b/iconoir.com/components/CategoryRow.tsx
@ -44,6 +44,9 @@ const Container = styled.div`
 const Title = styled(Text15)`
  font-weight: 700;
  color: var(--black);
+  background-color: var(--light-gray);
+  border-radius: 8px;
+  padding: 6px 10px;
 `;
 const Separator = styled.div`
  height: 1px;
--- a/iconoir.com/components/Footer.tsx
+++ b/iconoir.com/components/Footer.tsx
@ -3,7 +3,24 @@ import styled from 'styled-components';
 import { LICENSE_LINK } from '../lib/constants';
 import { Logo, LogoContainer, LogoIcon } from './Header';
 import { NavigationItemContainer } from './NavigationItem';
+import { Text13, Text17 } from './Typography';

+export interface FooterCategoryProps {
+  category: string;
+  links: [{ name: string, url: string }];
+}
+function FooterCategory({ category, links }: FooterCategoryProps) {
+  return (
+    <FooterCategoryContainer>
+      <FooterCategoryTitle>{category}</FooterCategoryTitle>
+      <FooterCategoryLinks>
+        {links.map((link) => (
+          <FooterCategoryLink href={link.url}>{link.name}</FooterCategoryLink>
+        ))}
+      </FooterCategoryLinks>
+    </FooterCategoryContainer>
+  );
+}
 export function Footer() {
  return (
    <Container>
@ -13,29 +30,81 @@ export function Footer() {
        </LogoIcon>
        <Logo src={'/iconoir-logo.svg'} alt={'Iconoir Logo'} />
      </LogoContainer>
-      <FooterNavigationItem
-        as={'a'}
-        href={LICENSE_LINK}
-        target={'_blank'}
-        rel={'noreferrer'}
-      >
-        License
-      </FooterNavigationItem>
+      <FooterCategories>
+        <FooterCategory category={'Project'} links={[
+          { name: 'Our Mission', url:'/support' },
+          {name: 'Contribute',url:'/docs/contributing'},
+          {name: 'Donate',url:'https://opencollective.com/iconoir/donate'}
+        ]} />
+        <FooterCategory category={'Support'} links={[
+          {name: 'License',url:'https://github.com/iconoir-icons/iconoir/blob/main/LICENSE'},
+          {name: 'GitHub Repository',url:'https://github.com/iconoir-icons/iconoir'},
+          {name: 'File a Request',url:'https://github.com/iconoir-icons/iconoir/issues/new/choose'}
+        ]} />
+        <FooterCategory category={'Developers'} links={[
+          {name: 'Changelog',url:'/docs/changelog'},
+          {name: 'React and React Native',url:'/docs/libraries/iconoir-react'},
+          {name: 'Flutter',url:'/docs/libraries/flutter'},
+          {name: 'Framer and Figma',url:'/docs/libraries/framer'},
+          {name: 'CSS',url:'/docs/libraries/css'}
+        ]} />
+        
+        
+      </FooterCategories>
+      <FooterEnd>
+        <Text13 style={{ fontWeight: 400 }}>Parts of this content are &copy;2020-2023 by individual Iconoir contributors. Content available under a <a href={'https://github.com/iconoir-icons/iconoir/blob/main/LICENSE'} target={'_blank'} rel={'noreferrer'}>MIT License</a>.</Text13>
+        <Text13 style={{ fontWeight: 400 }}><a href={'https://www.freeprivacypolicy.com/live/ba00d743-a0cd-44f8-8cb5-6f58911db0fb'} target={'_blank'} rel={'noreferrer'}>Privacy</a></Text13>
+      </FooterEnd>
    </Container>
  );
 }

 const Container = styled.div`
-  margin-top: 100px;
+  display: block;
+  margin-top: 110px;
  padding-top: 30px;
-  border-top: solid 2px var(--light-gray);
-  display: flex;
+  margin: 100px -50px -50px -50px; /* not ideal. To fix removing padding from body.*/
+  padding: 84px 12%;
+  background-color: var(--gray-200);
  align-items: center;
  > :not(:last-child) {
    margin-right: 50px;
  }
 `;
-
-const FooterNavigationItem = styled(NavigationItemContainer)`
-  color: var(--black);
+const FooterEnd = styled.div`
+  border-top: 1px solid var(--gray-100);
+  padding-top: 20px;
+  margin-top: 74px;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+`;
+const FooterCategories = styled.div`
+  width: 100%;
+  margin-top: 54px;
+  display: flex;
+`;
+const FooterCategoryContainer = styled.div`
+  width: 28%;
+  margin-right: 20px;
+`;
+const FooterCategoryTitle = styled(Text17)`
+  margin-bottom: 24px;
+  font-weight: 600;
+  display: block;
+`;
+const FooterCategoryLinks = styled.div`
+
+`;
+const FooterCategoryLink = styled.a`
+  display: block;
+  font-size: 17px;
+  color: #424258;
+  width: fit-content;
+  margin-bottom: 12px;
+  text-decoration: none;
+  &:hover{
+    text-decoration: underline;
+    color: var(--black);
+  }
 `;
--- a/iconoir.com/components/Header.tsx
+++ b/iconoir.com/components/Header.tsx
@ -4,10 +4,11 @@ import React from 'react';
 import styled from 'styled-components';
 import { AnimatedSvg } from './AnimatedSvg';
 import { ResetButton } from './Button';
-import { AUTHOR_LINKS } from '../lib/constants';
+import { SHARE_LINK } from '../lib/constants';
 import { CurrentVersion } from './CurrentVersion';
 import { NavigationItem, NavigationItemContainer } from './NavigationItem';
 import { media } from '../lib/responsive';
+import { Text15 } from './Typography';

 export interface HeaderProps {
  currentVersion: string;
@ -36,27 +37,19 @@ export function Header({ currentVersion, currentVersionColor }: HeaderProps) {
            Donate &mdash; Our Mission
          </NavigationItem>
          <BuiltWith isMobile>
-            Made with <Heart width={'1em'} height={'1em'} /> by{' '}
-            <a href={AUTHOR_LINKS.Luca} target={'_blank'} rel={'noreferrer'}>
-              Luca
+            Share with <Heart width={'1em'} height={'1em'} /> on{' '}
+            <a href={SHARE_LINK} target={'_blank'} rel={'noreferrer'}>
+              Twitter
            </a>{' '}
-            &amp;{' '}
-            <a href={AUTHOR_LINKS.Sam} target={'_blank'} rel={'noreferrer'}>
-              Sam
-            </a>
          </BuiltWith>
        </MobileMenuContainer>
      </HeaderCenter>
      <HeaderRight>
        <BuiltWith>
-          Designed and built with <Heart width={'1em'} height={'1em'} /> by{' '}
-          <a href={AUTHOR_LINKS.Luca} target={'_blank'} rel={'noreferrer'}>
-            Luca
+          Share with <Heart width={'1em'} height={'1em'} /> on{' '}
+          <a href={SHARE_LINK} target={'_blank'} rel={'noreferrer'}>
+            Twitter
          </a>{' '}
-          &amp;{' '}
-          <a href={AUTHOR_LINKS.Sam} target={'_blank'} rel={'noreferrer'}>
-            Sam
-          </a>
        </BuiltWith>
        <MobileMenuButton onClick={() => setMenuVisible((v) => !v)}>
          {menuVisible ? <Cancel /> : <Menu />}
@ -71,6 +64,11 @@ export const LogoContainer = styled.div`
  z-index: 101;
  display: inline-flex;
  align-items: center;
+  transition: 0.1s;
+  &:hover{
+    scale: 1.1;
+    transition: 0.2s;
+  }
 `;
 const MobileMenuButton = styled(ResetButton)`
  z-index: 101;
@ -163,7 +161,7 @@ export const LogoIcon = styled.div`
    height: 36px;
  }
 `;
-const BuiltWith = styled(NavigationItemContainer)<{ isMobile?: boolean }>`
+const BuiltWith = styled(Text15)<{ isMobile?: boolean }>`
  display: ${(props) => (props.isMobile ? 'flex' : 'none')};
  ${media.lg} {
    display: ${(props) => (props.isMobile ? 'none' : 'flex')};
--- a/iconoir.com/components/Input.tsx
+++ b/iconoir.com/components/Input.tsx
@ -50,18 +50,9 @@ export const LargeInput = styled(Input)`
  width: 100%;
  box-sizing: border-box;
  outline: none;
-`;
-
-export const ColorInput = styled.input`
-  padding: 0px;
-  border: none;
-  cursor: pointer;
-  &::-webkit-color-swatch,
-  &::-moz-color-swatch {
-    border: none;
+  &:hover{
+    transition: 0.4s;
  }
-  background-color: var(--gray-200);
-  opacity:0;
 `;

 export const ColorButton = styled.div`
@ -73,4 +64,27 @@ export const ColorButton = styled.div`
  right: 20px;
  position: absolute;
  pointer-events: none;
+  &:hover{
+    transition: 0.2s;
+    scale: 1.2;
+  }
+`;
+
+export const ColorInput = styled.input`
+  padding: 0px;
+  border: none;
+  cursor: pointer;
+  width: 30px;
+  height: 30px;
+  &::-webkit-color-swatch,
+  &::-moz-color-swatch {
+    border: none;
+  }
+  background-color: var(--gray-200);
+  opacity:0;
+  transition: 0.2s;
+  &:hover + ${ColorButton} {
+    transition: 0.2s;
+    scale: 1.3;
+  }
 `;
--- a/iconoir.com/components/NavigationItem.tsx
+++ b/iconoir.com/components/NavigationItem.tsx
@ -51,29 +51,31 @@ export const NavigationItemContainer = styled(Text15)<{ isActive?: boolean }>`
    line-height: 20px;
    font-weight: 500;
    padding: 0;
-    color: var(--black-60);
+    color: var(--black);
    width: auto;
    border-bottom: none !important;
+      
+    transition: 0.2s;
    &::before {
      position: absolute;
      z-index: -1;
      content: '';
      display: block;
-      top: -18px;
-      bottom: -18px;
-      left: -24px;
-      right: -24px;
+      top: -12px;
+      bottom: -12px;
+      left: -16px;
+      right: -16px;
+      border-radius: 10px;
      transition: background 0.1s linear;
    }
    &:hover::before {
      background: var(--light-gray);
+      transition: 0.2s;
+      top: -16px;
+      bottom: -16px;
+      left: -20px;
+      right: -20px;
    }
-    ${(props) => (props.isActive ? '&' : '&.noop')} {
-      color: var(--white);
-      &::before,
-      &:hover::before {
-        background: var(--black);
-      }
-    }
+    
  }
 `;
--- a/iconoir.com/components/Slider.tsx
+++ b/iconoir.com/components/Slider.tsx
@ -131,4 +131,8 @@ const ThumbInner = styled.div`
  box-shadow: inset 0px 0px 0px 2px #000000;
  border-radius: 50%;
  cursor: pointer;
+  &:hover{
+    transition: 0.2s;
+    scale: 1.2;
+  }
 `;
--- a/iconoir.com/components/Typography.tsx
+++ b/iconoir.com/components/Typography.tsx
@ -23,6 +23,10 @@ export const Text13 = styled.div`
  font-weight: 500;
 `;

+export const Text17 = styled.div`
+  font-size: 17px;
+`;
+  
 export const Text18 = styled.div`
  font-size: 16px;
  line-height: 25px;
--- a/iconoir.com/lib/constants.ts
+++ b/iconoir.com/lib/constants.ts
@ -2,6 +2,7 @@ export const REPO = {
  owner: 'iconoir-icons',
  repo: 'iconoir',
 };
+export const SHARE_LINK = 'https://twitter.com/intent/tweet?text=Check%20out%20Iconoir%20by%20%40burgioluca%20and%20the%20amazing%20team%20with%20%40therealsammarks%20%F0%9F%94%A5&url=https%3A%2F%2Ficonoir.com';
 export const GITHUB_LINK = `https://github.com/${REPO.owner}/${REPO.repo}`;
 export const SUGGEST_ICON_LINK = `${GITHUB_LINK}/issues/new?assignees=lucaburgio&labels=icon+request&template=icon_request.md&title=%5BICON%5D`;
 export const SUPPORT_LINK = 'https://opencollective.com/iconoir/donate';
@ -27,3 +28,4 @@ export const AUTHOR_LINKS = {
  Luca: 'https://twitter.com/burgioluca',
  Sam: 'https://twitter.com/therealsammarks',
 };
+
--- a/iconoir.com/styles/theme.css
+++ b/iconoir.com/styles/theme.css
@ -11,6 +11,7 @@
  --blue: #E4F9FF;
  --green: #E4FFE4;
  --gray: #E7E7E7;
+  --gray-100: #CDCDD3;
  --gray-200: #F9F9FA;
  --light-gray: #F2F2F2;
  --lighter-gray: #F9F9F9;
@ -76,6 +77,10 @@ a {
  z-index: 2000;
 }

+.carbon-img img{
+  border-radius: 10px;
+}
+
 ::placeholder {
  color: var(--dark-gray);
  opacity: 1; /* Firefox */