Rewrite AdminHeader

src/components/AdminHeader/AdminHeader.scss

@@ -1,32 +0,0 @@
-@import "../../assets/scss/globals";
-
-.admin-header {
-  margin-bottom: 0.5rem;
-
-  .heading {
-    margin: 0 2rem;
-    font-weight: 500;
-    font-size: 24px;
-
-    @media screen and (max-width: 600px - 1px) {
-      display: none;
-    }
-  }
-
-  a {
-    max-width: 100%;
-    display: flex;
-    flex-flow: column nowrap;
-    align-items: center;
-
-    img {
-      margin: 1rem 0.5rem;
-
-      @media screen and (max-width: 600px - 1px) {
-        max-width: 300px !important;
-        width: 100%;
-        margin: 1rem auto;
-      }
-    }
-  }
-}

src/components/AdminHeader/AdminHeader.tsx

@@ -1,24 +1,31 @@
 import React from "react";
+import styled from "styled-components";
 import { Link } from "react-router-dom";
 import TitleImage from "@assets/img/SIK_RGB_W_side.png";
-import "./AdminHeader.scss";
 
-export interface AdminHeaderProps { }
-export interface AdminHeaderState { }
+const Header = styled.header`
+  margin: 0.5rem;
 
-class AdminHeader extends React.Component<AdminHeaderProps, AdminHeaderState> {
-  render() {
-    return (
-      <React.Fragment>
-        <header className="header admin-header">
-          <Link to="/">
-            <img src={TitleImage} />
-          </Link>
-          <div className="heading">Admin panel</div>
-        </header>
-      </React.Fragment>
-    );
+  a {
+    max-width: 100%;
+    display: flex;
+    flex-flow: column nowrap;
+    align-items: center;
+
+    img {
+      padding: 2rem;
+      width: 100%;
+      max-width: 800px;
+    }
   }
-}
+`;
+
+const AdminHeader: React.FC = () => (
+  <Header className="header admin-header">
+    <Link to="/">
+      <img src={TitleImage} />
+    </Link>
+  </Header>
+);
 
 export default AdminHeader;