More responsive CSS units

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;

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 {

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 {

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 => {
       </svg>
     );
   }
-  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<IconProps> = ({ link, name, onClick }) => {
   const elem = nameToIcon(name);
   if (link) {
     return (
-      <SomeIcon
+      <a
         href={link}
         onClick={onClick}
       >
         {elem}
-      </SomeIcon>
+      </a>
     );
   }
 
   return (
-    <NormalIcon role="img" onClick={onClick}>
+    <span role="img" onClick={onClick}>
       {elem}
-    </NormalIcon>
+    </span>
   );
 }
 

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};

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 {

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;
     }

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};