diff --git a/src/components/ContactCard.tsx b/src/components/ContactCard.tsx index c1fa8ca..d4c8c14 100644 --- a/src/components/ContactCard.tsx +++ b/src/components/ContactCard.tsx @@ -12,7 +12,7 @@ const Card = styled.article` `; const ImageContainer = styled.div` - padding: 15px; + padding: 1rem; display: flex; flex-shrink: 0; justify-content: center; diff --git a/src/components/DropDownBox.tsx b/src/components/DropDownBox.tsx index f27eb1b..0194294 100644 --- a/src/components/DropDownBox.tsx +++ b/src/components/DropDownBox.tsx @@ -13,7 +13,7 @@ const Box = styled.div` margin-top: 0.8rem; position: absolute; left: 0; - top: 30px; + top: 2.5rem; z-index: 20; a { diff --git a/src/components/Footer/FooterContent.tsx b/src/components/Footer/FooterContent.tsx index d46d395..038d1f2 100644 --- a/src/components/Footer/FooterContent.tsx +++ b/src/components/Footer/FooterContent.tsx @@ -16,17 +16,17 @@ const Content = styled.div` display: flex; & > div:first-of-type { - padding: 48px 0; + padding: 3rem 0; flex: 2 1; & > * { - padding: 0 24px; + padding: 0 1.5rem; } } h4 { color: ${colors.lightBlue}; - padding: 24px 0; + padding: 1.5rem 0; } a { diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx index 9ed3539..fc92b95 100644 --- a/src/components/Icon.tsx +++ b/src/components/Icon.tsx @@ -1,5 +1,4 @@ import React from "react"; -import styled from "styled-components"; export enum IconType { Facebook, @@ -58,48 +57,32 @@ const nameToIcon = (name: IconType): JSX.Element | string => { ); } - if (name == IconType.FinlandFlag) { + if (name === IconType.FinlandFlag) { return "🇫🇮"; } - if (name == IconType.GBFlag) { + if (name === IconType.GBFlag) { return "🇬🇧"; } return null; }; -const SomeIcon = styled.a` - display: flex; - flex-flow: row nowrap; - justify-content: center; - margin: 1em; - - svg { - width: 20px; - height: 20px; - } -`; - -const NormalIcon = styled.span` -/* stylelint-disable-next-line no-empty-source */ -`; - const Icon: React.FC = ({ link, name, onClick }) => { const elem = nameToIcon(name); if (link) { return ( - {elem} - + ); } return ( - + {elem} - + ); } diff --git a/src/components/NavbarDropdownLink.tsx b/src/components/NavbarDropdownLink.tsx index f00e1b0..0f2053a 100644 --- a/src/components/NavbarDropdownLink.tsx +++ b/src/components/NavbarDropdownLink.tsx @@ -12,7 +12,7 @@ const Container = styled.div` &::after { content: ""; position: absolute; - bottom: 5px; + bottom: 0.4rem; left: 0; width: 100%; border-bottom: 4px solid ${colors.lightBlue}; diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx index 83ae005..a459955 100644 --- a/src/components/Navigation.tsx +++ b/src/components/Navigation.tsx @@ -51,6 +51,14 @@ const Nav = styled.div` justify-content: center; margin-left: 0; } + + svg { + width: 1.5rem; + height: 1.5rem; + + fill: ${colors.white}; + color: ${colors.white}; + } `; const DesktopContainer = styled.div` @@ -69,8 +77,10 @@ const SomeContainer = styled.div` flex-flow: row nowrap; a { - fill: ${colors.white}; - color: ${colors.white}; + display: flex; + flex-flow: row nowrap; + justify-content: center; + margin: 1rem; } `; @@ -90,13 +100,6 @@ const MobileMenu = styled.div` @media screen and (max-width: ${breakpoints.mobile}) { margin-left: 3rem; } - - svg { - width: 26px; - height: 26px; - fill: ${colors.white}; - color: ${colors.white}; - } `; interface NavigationProps { diff --git a/src/components/Sections/TextSection.tsx b/src/components/Sections/TextSection.tsx index 023dc26..3f9b01e 100644 --- a/src/components/Sections/TextSection.tsx +++ b/src/components/Sections/TextSection.tsx @@ -58,7 +58,7 @@ const StyledSection = styled.section` align-items: center; max-width: unset; margin-left: unset; - margin-top: 48px; + margin-top: 3rem; * { flex: 1; @@ -68,14 +68,14 @@ const StyledSection = styled.section` & > aside:first-of-type { grid-area: rightaside; - padding-left: 24px; + padding-left: 1.5rem; @media screen and (max-width: ${breakpoints.mobile}) { padding-left: 0; } } & > aside:nth-of-type(2) { grid-area: leftaside; - padding-right: 24px; + padding-right: 1.5rem; @media screen and (max-width: ${breakpoints.mobile}) { padding-left: 0; } diff --git a/src/views/EventPage/EventPageView.tsx b/src/views/EventPage/EventPageView.tsx index 3795c0c..6ec9a5b 100644 --- a/src/views/EventPage/EventPageView.tsx +++ b/src/views/EventPage/EventPageView.tsx @@ -36,7 +36,7 @@ const SignupButtons = styled.div` `; const Content = styled.div` - margin-top: 24px; + margin-top: 1.5rem; p { color: ${colors.black};