Merge pull request #150 from flextremedev/add-logo

Add logo

Author: Pascal Wegner

packages/pwa/src/components/Counter/Counter.tsx

@@ -1,9 +1,18 @@
 import { getMinutes, getSeconds } from 'date-fns';
+import dynamic from 'next/dynamic';
 import * as React from 'react';
 
 import { Arc } from '../Arc/Arc';
 import { DurationInput } from '../DurationInput/DurationInput';
-import { ThemeToggle } from '../ThemeToggle/ThemeToggle';
+import { Logo } from '../Logo/Logo';
+
+const ThemeToggle = dynamic(
+  () =>
+    import('../ThemeToggle/ThemeToggle').then((module) => module.ThemeToggle),
+  {
+    ssr: false,
+  }
+);
 
 const SECONDS_PER_MINUTE = 60;
 
@@ -36,7 +45,8 @@ export function Counter({
   const counterDesktop = (
     <div className="h-full w-full lg:max-w-screen-xl hidden lg:flex justify-between flex-col items-center">
       <div className="w-full flex">
-        <div className="h-20 w-full flex justify-end items-center px-6">
+        <div className="h-20 w-full flex justify-between items-center px-6">
+          <Logo />
           <ThemeToggle />
         </div>
       </div>
@@ -72,7 +82,8 @@ export function Counter({
   const counterMobile = (
     <div className="h-full w-full flex lg:hidden justify-center flex-col items-center">
       <div className="flex-[0.75] w-full flex">
-        <div className="h-20 w-full flex justify-end items-center px-6">
+        <div className="h-20 w-full flex justify-between items-center px-6">
+          <Logo />
           <ThemeToggle />
         </div>
       </div>

packages/pwa/src/components/Form/Form.tsx

@@ -1,5 +1,15 @@
+import dynamic from 'next/dynamic';
+
 import { FormFields } from '../FormFields/FormFields';
-import { ThemeToggle } from '../ThemeToggle/ThemeToggle';
+import { Logo } from '../Logo/Logo';
+
+const ThemeToggle = dynamic(
+  () =>
+    import('../ThemeToggle/ThemeToggle').then((module) => module.ThemeToggle),
+  {
+    ssr: false,
+  }
+);
 
 type FormProps = {
   rounds: number;
@@ -23,7 +33,8 @@ export const Form = ({
   return (
     <div className="h-full w-full flex max-w-screen-xl justify-center flex-col items-center">
       <div className="flex-[0.75] w-full flex">
-        <div className="h-20 w-full flex justify-end items-center px-6">
+        <div className="h-20 w-full flex justify-between items-center px-6">
+          <Logo />
           <ThemeToggle />
         </div>
       </div>

packages/pwa/src/components/Logo/Logo.tsx

@@ -0,0 +1,3 @@
+export const Logo = () => (
+  <h1 className="text-2xl tracking-wide">Flextreme Interval Timer</h1>
+);

packages/pwa/src/components/ThemeToggle/ThemeToggle.tsx

@@ -44,7 +44,11 @@ export const ThemeToggle = () => {
     setTheme(theme === 'light' ? 'dark' : 'light');
   };
   return (
-    <button aria-label="theme-toggle" className="" onClick={toggleTheme}>
+    <button
+      aria-label="theme-toggle"
+      style={{ WebkitTapHighlightColor: 'transparent' }}
+      onClick={toggleTheme}
+    >
       {theme === 'light' ? <MoonIcon /> : <SunIcon />}
     </button>
   );

yarn.lock

@@ -7876,7 +7876,7 @@ end-of-stream@^1.0.0, end-of-stream@^1.1.0:
   dependencies:
     once "^1.4.0"
 
-enhanced-resolve@^4.1.0, enhanced-resolve@^4.3.0:
+enhanced-resolve@^4.3.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-4.5.0.tgz#2f3cfd84dbe3b487f18f2db2ef1e064a571ca5ec"
   integrity sha512-Nv9m36S/vxpsI+Hc4/ZGRs0n9mXqSWGGq49zxb/cJfPAQMbUtttJAlNPS4AQzaBdw/pKskw5bMbekT/Y7W/Wlg==
@@ -15763,7 +15763,7 @@ react-devtools-core@^4.6.0:
     shell-quote "^1.6.1"
     ws "^7"
 
-react-dom@^17.0.2:
+react-dom@^17.0.0, react-dom@^17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
   integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==
@@ -15968,7 +15968,7 @@ react-timer-mixin@^0.13.4:
   resolved "https://registry.yarnpkg.com/react-timer-mixin/-/react-timer-mixin-0.13.4.tgz#75a00c3c94c13abe29b43d63b4c65a88fc8264d3"
   integrity sha512-4+ow23tp/Tv7hBM5Az5/Be/eKKF7DIvJ09voz5LyHGQaqqz9WV8YMs31eFvcYQs7d451LSg7kDJV70XYN/Ug/Q==
 
-react@^17.0.2:
+react@^17.0.0, react@^17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
   integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
@@ -18602,7 +18602,7 @@ watchpack-chokidar2@^2.0.1:
   dependencies:
     chokidar "^2.1.8"
 
-watchpack@^1.6.1, watchpack@^1.7.4:
+watchpack@^1.7.4:
   version "1.7.5"
   resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.7.5.tgz#1267e6c55e0b9b5be44c2023aed5437a2c26c453"
   integrity sha512-9P3MWk6SrKjHsGkLT2KHXdQ/9SNkyoJbabxnKOoJepsvJjJG8uYTR3yTPxPQvNDI3w4Nz1xnE0TLHK4RIVe/MQ==
@@ -18732,36 +18732,7 @@ webpack-sources@^1.1.0, webpack-sources@^1.3.0, webpack-sources@^1.4.0, webpack-
     source-list-map "^2.0.0"
     source-map "~0.6.1"
 
-webpack@4.43.0:
-  version "4.43.0"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.43.0.tgz#c48547b11d563224c561dad1172c8aa0b8a678e6"
-  integrity sha512-GW1LjnPipFW2Y78OOab8NJlCflB7EFskMih2AHdvjbpKMeDJqEgSx24cXXXiPS65+WSwVyxtDsJH6jGX2czy+g==
-  dependencies:
-    "@webassemblyjs/ast" "1.9.0"
-    "@webassemblyjs/helper-module-context" "1.9.0"
-    "@webassemblyjs/wasm-edit" "1.9.0"
-    "@webassemblyjs/wasm-parser" "1.9.0"
-    acorn "^6.4.1"
-    ajv "^6.10.2"
-    ajv-keywords "^3.4.1"
-    chrome-trace-event "^1.0.2"
-    enhanced-resolve "^4.1.0"
-    eslint-scope "^4.0.3"
-    json-parse-better-errors "^1.0.2"
-    loader-runner "^2.4.0"
-    loader-utils "^1.2.3"
-    memory-fs "^0.4.1"
-    micromatch "^3.1.10"
-    mkdirp "^0.5.3"
-    neo-async "^2.6.1"
-    node-libs-browser "^2.2.1"
-    schema-utils "^1.0.0"
-    tapable "^1.1.3"
-    terser-webpack-plugin "^1.4.3"
-    watchpack "^1.6.1"
-    webpack-sources "^1.4.1"
-
-webpack@4.44.2:
+webpack@4.43.0, webpack@4.44.2, webpack@~4.44.0:
   version "4.44.2"
   resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.44.2.tgz#6bfe2b0af055c8b2d1e90ed2cd9363f841266b72"
   integrity sha512-6KJVGlCxYdISyurpQ0IPTklv+DULv05rs2hseIXer6D7KrUicRDLFb4IUM1S6LUAKypPM/nSiVSuv8jHu1m3/Q==