feat: Modify theme (#98)

src/client/public/manifest.webmanifest

@@ -1,59 +1,23 @@
 {
   "name": "Minigolf Freitag",
   "short_name": "Minigolf Freitag",
-  "theme_color": "#2dd4bf",
-  "background_color": "#1f2937",
+  "theme_color": "#9e48d9",
+  "background_color": "#13276c",
   "display": "standalone",
   "scope": "./",
   "start_url": "./events",
   "icons": [
     {
-      "src": "icons/icon-72x72.png",
-      "sizes": "72x72",
-      "type": "image/png",
-      "purpose": "maskable any"
-    },
-    {
-      "src": "icons/icon-96x96.png",
-      "sizes": "96x96",
-      "type": "image/png",
-      "purpose": "maskable any"
-    },
-    {
-      "src": "icons/icon-128x128.png",
-      "sizes": "128x128",
-      "type": "image/png",
-      "purpose": "maskable any"
-    },
-    {
-      "src": "icons/icon-144x144.png",
-      "sizes": "144x144",
-      "type": "image/png",
-      "purpose": "maskable any"
-    },
-    {
-      "src": "icons/icon-152x152.png",
-      "sizes": "152x152",
-      "type": "image/png",
-      "purpose": "maskable any"
-    },
-    {
-      "src": "icons/icon-192x192.png",
-      "sizes": "192x192",
-      "type": "image/png",
-      "purpose": "maskable any"
-    },
-    {
-      "src": "icons/icon-384x384.png",
-      "sizes": "384x384",
-      "type": "image/png",
-      "purpose": "maskable any"
+      "purpose": "maskable",
+      "sizes": "512x512",
+      "src": "icons/icon512_maskable.png",
+      "type": "image/png"
     },
     {
-      "src": "icons/icon-512x512.png",
+      "purpose": "any",
       "sizes": "512x512",
-      "type": "image/png",
-      "purpose": "maskable any"
+      "src": "icons/icon512_rounded.png",
+      "type": "image/png"
     }
   ]
 }

src/client/src/app/components/app/app.component.html

@@ -1,3 +1,5 @@
+<div class="bg-image pointer-events-none absolute bottom-0"></div>
+
 <header class="p-4">
   <app-menu />
 </header>

src/client/src/app/components/app/footer/footer.component.html

@@ -1,5 +1,5 @@
 <footer
-  class="flex flex-row flex-wrap justify-around gap-x-8 bg-surface-50 px-2 py-1 text-2xs sm:px-4 md:text-xs lg:text-sm"
+  class="flex flex-row flex-wrap justify-around gap-x-8 bg-primary-700 px-2 py-1 text-xs sm:px-4 md:text-xs lg:text-sm"
 >
   <div class="truncate">
     <span>{{ translations.footer_developedBy() }} Marc Schmidt </span>

src/client/src/dark-theme.scss

@@ -1,4 +1,4 @@
-@import 'primeng/resources/themes/lara-dark-teal/theme.css';
+@import 'primeng/resources/themes/lara-dark-indigo/theme.css';
 
 :root {
   font-family:

src/client/src/index.html

@@ -6,78 +6,22 @@
     <base href="/" />
     <meta
       name="viewport"
-      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=yes, viewport-fit=cover"
+      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"
     />
     <link rel="manifest" href="manifest.webmanifest" />
-    <meta name="theme-color" content="#1f2937" />
+    <meta name="theme-color" content="var(--primary-color)" />
 
     <!-- Android  -->
     <meta name="mobile-web-app-capable" content="yes" />
 
     <!-- iOS -->
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
-    <link rel="apple-touch-icon" sizes="57x57" href="icons/icon-57x57.png" />
-    <link rel="apple-touch-icon" sizes="60x60" href="icons/icon-60x60.png" />
-    <link rel="apple-touch-icon" sizes="72x72" href="icons/icon-72x72.png" />
-    <link rel="apple-touch-icon" sizes="76x76" href="icons/icon-76x76.png" />
-    <link rel="apple-touch-icon" sizes="114x114" href="icons/icon-114x114.png" />
-    <link rel="apple-touch-icon" sizes="120x120" href="icons/icon-120x120.png" />
-    <link rel="apple-touch-icon" sizes="144x144" href="icons/icon-144x144.png" />
-    <link rel="apple-touch-icon" sizes="152x152" href="icons/icon-152x152.png" />
-    <link rel="apple-touch-icon" sizes="180x180" href="icons/icon-180x180.png" />
-    <link
-      href="splashscreens/iphone5_splash.png"
-      media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)"
-      rel="apple-touch-startup-image"
-    />
-    <link
-      href="splashscreens/iphone6_splash.png"
-      media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)"
-      rel="apple-touch-startup-image"
-    />
-    <link
-      href="splashscreens/iphoneplus_splash.png"
-      media="(device-width: 621px) and (device-height: 1104px) and (-webkit-device-pixel-ratio: 3)"
-      rel="apple-touch-startup-image"
-    />
-    <link
-      href="splashscreens/iphonex_splash.png"
-      media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)"
-      rel="apple-touch-startup-image"
-    />
-    <link
-      href="splashscreens/iphonexr_splash.png"
-      media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2)"
-      rel="apple-touch-startup-image"
-    />
-    <link
-      href="splashscreens/iphonexsmax_splash.png"
-      media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3)"
-      rel="apple-touch-startup-image"
-    />
-    <link
-      href="splashscreens/ipad_splash.png"
-      media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2)"
-      rel="apple-touch-startup-image"
-    />
-    <link
-      href="splashscreens/ipadpro1_splash.png"
-      media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2)"
-      rel="apple-touch-startup-image"
-    />
-    <link
-      href="splashscreens/ipadpro3_splash.png"
-      media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2)"
-      rel="apple-touch-startup-image"
-    />
+
     <link
-      href="splashscreens/ipadpro2_splash.png"
-      media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)"
-      rel="apple-touch-startup-image"
+      rel="icon"
+      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text x=%22-.2em%22 y=%22.8em%22 font-size=%22105%22>⛳</text></svg>"
     />
-
-    <link rel="icon" type="image/x-icon" href="favicon.ico" />
   </head>
   <body>
     <script>

src/client/src/light-theme.scss

@@ -1,4 +1,4 @@
-@import 'primeng/resources/themes/lara-light-teal/theme.css';
+@import 'primeng/resources/themes/lara-light-purple/theme.css';
 
 :root {
   font-family:

src/client/src/styles.scss

@@ -118,6 +118,27 @@
   a {
     color: inherit;
   }
+
+  .bg-image {
+    background-image: url('/icons/icon512_maskable.png');
+
+    /* Center and scale the image nicely */
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+
+    opacity: 33%;
+
+    /* Add the blur effect */
+    filter: blur(15px);
+    -webkit-filter: blur(15px);
+
+    /* little overshoot to make blur edges invisible */
+    height: 110%;
+    width: 110%;
+    left: -5%;
+    top: -5%;
+  }
 }
 
 @layer adjustments {