set PEL design to UI

src/app/index.tsx

@@ -3,7 +3,6 @@ import { RouteConfig, renderRoutes } from "react-router-config"
 import { Helmet } from "react-helmet"
 import { ToastContainer } from "react-toastify"
 
-import logo from "../static/logo.svg"
 import config from "../config"
 // Import your global styles here
 import "normalize.css/normalize.css"
@@ -15,15 +14,20 @@ interface Route {
 }
 
 const App = ({ route }: Route): JSX.Element => (
-    <div className={styles.app}>
-        <Helmet {...config.APP} />
-        <Link to="/" className={styles.header}>
-            <img src={logo} alt="Logo" role="presentation" />
-            <h1>
-                <em>{config.APP.title}</em>
+    <div>
+        <Helmet {...config.APP}>
+            <meta
+                name="viewport"
+                content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
+            />
+        </Helmet>
+        <header className={styles.header}>
+            <div className={styles.logo} />
+            <h1 className={styles.siteName}>
+                <Link to="/">{config.APP.title}</Link>
             </h1>
-        </Link>
-        <hr />
+            <div className={styles.siteDescription}>{config.APP.description}</div>
+        </header>
         {/* Child routes won't render without this */}
         {renderRoutes(route.routes)}
         <ToastContainer />

src/app/styles.module.scss

@@ -1,26 +1,60 @@
 @import "../theme/variables";
+@import "../theme/mixins";
+@import "../theme/main";
 
-body {
-    background-color: $color-dark-gray;
-    font-family: "Helvetica-Light", Helvetica, Arial, sans-serif;
+.header {
+    position: relative;
+    margin: 10px 0 20px;
+    padding: 4px 0 4px 125px;
+    background-color: $color-white;
+    border-top: $border-large;
+    border-bottom: $border-large;
+
+    @include desktop {
+        margin: 20px 0 35px;
+        padding: 10px 0 10px 220px;
+    }
 }
 
-.app {
-    color: $color-white;
+.logo {
+    position: absolute;
+    top: -10px;
+    left: 10px;
+    width: 100px;
+    height: 60px;
+    background: url("../app/img/logo-mini.png") no-repeat center center;
+    background-size: cover;
 
-    img {
-        float: left;
-        height: 70px;
-        margin-right: 1em;
+    @include desktop {
+        width: 181px;
+        height: 118px;
+        background: url("../app/img/logo.png") no-repeat;
+    }
+}
+
+.siteName {
+    margin: 0;
+    padding: 0;
+    font-family: $font-pel;
+    font-size: 1.8em;
+
+    @include desktop {
+        font-size: 2em;
     }
 
-    hr {
-        margin-bottom: 0;
-        margin-top: 0;
-        opacity: 0.15;
+    a {
+        font-weight: 400;
+        text-decoration: none;
+        color: $color-orange;
+        text-shadow: 2px 2px 2px black;
     }
 }
 
+.siteDescription {
+    font-size: 14px;
+    color: #555;
+}
+
 .header {
     color: inherit;
     display: block;