refact: rename Column components to be generic

src/components/MobileHeader/index.tsx

@@ -1,18 +0,0 @@
-import React, { FC } from "react"
-import * as SC from "./styles"
-
-interface IMobileHeaderProps {
-  openMenu: () => void
-}
-
-export const MobileHeader: FC<IMobileHeaderProps> = ({ openMenu }) => {
-  return (
-    <SC.MobileHeaderWrapper>
-      <SC.LogoWrapper>
-        <SC.StyledLogo />
-      </SC.LogoWrapper>
-      Resources
-      <SC.Burger onClick={openMenu} />
-    </SC.MobileHeaderWrapper>
-  )
-}

src/components/MobileHeader/styles.tsx

@@ -1,65 +0,0 @@
-import { transparentize } from "polished"
-import styled from "styled-components"
-import { fontFamily } from "../../design/typography"
-import Logo from "../../images/tph-logo.svg"
-
-export const MobileHeaderWrapper = styled.div`
-  z-index: 50;
-  background: ${props => transparentize(0.2, props.theme.main.background)};
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  padding: 16px 32px;
-  display: none;
-  align-items: center;
-  font-weight: 700;
-  font-family: ${fontFamily.header};
-  font-size: 22px;
-
-  @media screen and (max-width: 767px) {
-    display: flex;
-  }
-`
-
-export const LogoWrapper = styled.div`
-  width: 35px;
-  height: 35px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background: #222;
-  border-radius: 7px;
-  margin-right: 8px;
-`
-
-export const StyledLogo = styled(Logo)`
-  height: 25px;
-`
-
-export const Burger = styled.div`
-  margin-left: auto;
-  width: 16px;
-  height: 9px;
-  padding: 8px;
-  position: relative;
-  cursor: pointer;
-
-  &::before,
-  &::after {
-    position: absolute;
-    content: "";
-    height: 2px;
-    width: 16px;
-    background: ${props => props.theme.main.foreground};
-    margin: 0 auto;
-  }
-
-  &::before {
-    top: 8px;
-  }
-
-  &::after {
-    bottom: 8px;
-  }
-`