feat: add purple theme

fix: file name on ics export for subscriptions with non-ascii characters

includes/header.php

@@ -52,6 +52,7 @@
   <link rel="stylesheet" href="styles/themes/red.css?<?= $version ?>" id="red-theme" <?= $colorTheme != "red" ? "disabled" : "" ?>>
   <link rel="stylesheet" href="styles/themes/green.css?<?= $version ?>" id="green-theme" <?= $colorTheme != "green" ? "disabled" : "" ?>>
   <link rel="stylesheet" href="styles/themes/yellow.css?<?= $version ?>" id="yellow-theme" <?= $colorTheme != "yellow" ? "disabled" : "" ?>>
+  <link rel="stylesheet" href="styles/themes/purple.css?<?= $version ?>" id="purple-theme" <?= $colorTheme != "purple" ? "disabled" : "" ?>>
   <link rel="stylesheet" href="styles/barlow.css">
   <link rel="stylesheet" href="styles/font-awesome.min.css">
   <link rel="stylesheet" href="styles/brands.css">

includes/version.php

@@ -1,3 +1,3 @@
 <?php
-$version = "v2.9.0";
+$version = "v2.10.0";
 ?>

login.php

@@ -192,6 +192,7 @@
     <link rel="stylesheet" href="styles/themes/red.css?<?= $version ?>" id="red-theme" <?= $colorTheme != "red" ? "disabled" : "" ?>>
     <link rel="stylesheet" href="styles/themes/green.css?<?= $version ?>" id="green-theme" <?= $colorTheme != "green" ? "disabled" : "" ?>>
     <link rel="stylesheet" href="styles/themes/yellow.css?<?= $version ?>" id="yellow-theme" <?= $colorTheme != "yellow" ? "disabled" : "" ?>>
+    <link rel="stylesheet" href="styles/themes/purple.css?<?= $version ?>" id="purple-theme" <?= $colorTheme != "purple" ? "disabled" : "" ?>>
     <link rel="stylesheet" href="styles/font-awesome.min.css">
     <link rel="stylesheet" href="styles/barlow.css">
     <link rel="stylesheet" href="styles/login-dark-theme.css?<?= $version ?>" id="dark-theme" <?= $theme == "light" ? "disabled" : "" ?>>

passwordreset.php

@@ -118,6 +118,7 @@
     <link rel="stylesheet" href="styles/themes/red.css?<?= $version ?>" id="red-theme" <?= $colorTheme != "red" ? "disabled" : "" ?>>
     <link rel="stylesheet" href="styles/themes/green.css?<?= $version ?>" id="green-theme" <?= $colorTheme != "green" ? "disabled" : "" ?>>
     <link rel="stylesheet" href="styles/themes/yellow.css?<?= $version ?>" id="yellow-theme" <?= $colorTheme != "yellow" ? "disabled" : "" ?>>
+    <link rel="stylesheet" href="styles/themes/purple.css?<?= $version ?>" id="purple-theme" <?= $colorTheme != "purple" ? "disabled" : "" ?>>
     <link rel="stylesheet" href="styles/font-awesome.min.css">
     <link rel="stylesheet" href="styles/barlow.css">
     <link rel="stylesheet" href="styles/login-dark-theme.css?<?= $version ?>" id="dark-theme" <?= $theme == "light" ? "disabled" : "" ?>>

registration.php

@@ -312,6 +312,7 @@ function validate($value)
     <link rel="stylesheet" href="styles/themes/red.css?<?= $version ?>" id="red-theme" <?= $colorTheme != "red" ? "disabled" : "" ?>>
     <link rel="stylesheet" href="styles/themes/green.css?<?= $version ?>" id="green-theme" <?= $colorTheme != "green" ? "disabled" : "" ?>>
     <link rel="stylesheet" href="styles/themes/yellow.css?<?= $version ?>" id="yellow-theme" <?= $colorTheme != "yellow" ? "disabled" : "" ?>>
+    <link rel="stylesheet" href="styles/themes/purple.css?<?= $version ?>" id="purple-theme" <?= $colorTheme != "purple" ? "disabled" : "" ?>>
     <link rel="stylesheet" href="styles/login-dark-theme.css?<?= $version ?>" id="dark-theme" <?= $theme == "light" ? "disabled" : "" ?>>
     <link rel="stylesheet" href="styles/font-awesome.min.css">
     <link rel="stylesheet" href="styles/barlow.css">

scripts/calendar.js

@@ -89,7 +89,7 @@ function exportCalendar(subscriptionId) {
       const a = document.createElement('a');
       a.href = url;
       // Use the subscription name for the file name, replacing any characters that are invalid in file names
-      a.download = `${data.name.replace(/[^a-z0-9]/gi, '_').toLowerCase()}.ics`;
+      a.download = `${data.name.replace(/[\/\\:*?"<>|]/g, '_').toLowerCase()}.ics`;
       document.body.appendChild(a);
       a.click();
       window.URL.revokeObjectURL(url);

scripts/settings.js

@@ -1049,7 +1049,7 @@ var sortable = Sortable.create(el, {
 
 function setTheme(themeColor) {
   var currentTheme = 'blue';
-  var themeIds = ['red-theme', 'green-theme', 'yellow-theme'];
+  var themeIds = ['red-theme', 'green-theme', 'yellow-theme', 'purple-theme'];
 
   themeIds.forEach(function(id) {
     var themeStylesheet = document.getElementById(id);

service-worker.js

@@ -21,6 +21,7 @@ self.addEventListener('install', function(event) {
                 'styles/themes/red.css',
                 'styles/themes/green.css',
                 'styles/themes/yellow.css',
+                'styles/themes/purple.css',
                 'webfonts/fa-solid-900.woff2',
                 'webfonts/fa-solid-900.ttf',
                 'webfonts/fa-brands-400.woff2',
@@ -66,6 +67,8 @@ self.addEventListener('install', function(event) {
                 'images/siteicons/red/walloswhite.png',
                 'images/siteicons/yellow/wallos.png',
                 'images/siteicons/yellow/walloswhite.png',
+                'images/siteicons/purple/wallos.png',
+                'images/siteicons/purple/walloswhite.png',
                 'images/siteimages/empty.png',
                 'images/avatars/1.svg',
                 'images/avatars/2.svg',
@@ -116,6 +119,16 @@ self.addEventListener('install', function(event) {
                 'images/siteicons/yellow/subscription.png',
                 'images/siteicons/yellow/web.png',
                 'images/siteicons/yellow/websearch.png',
+                'images/siteicons/purple/category.png',
+                'images/siteicons/purple/check.png',
+                'images/siteicons/purple/delete.png',
+                'images/siteicons/purple/edit.png',
+                'images/siteicons/purple/notes.png',
+                'images/siteicons/purple/payment.png',
+                'images/siteicons/purple/save.png',
+                'images/siteicons/purple/subscription.png',
+                'images/siteicons/purple/web.png',
+                'images/siteicons/purple/websearch.png',
                 'images/siteicons/pwa/stats.png',
                 'images/siteicons/pwa/settings.png',
                 'images/siteicons/pwa/about.png',

settings.php

@@ -1067,7 +1067,7 @@ class="hidden-input">
         </header>
         <div class="account-settings-theme">
             <div>
-                <div class="theme-selector">
+                <form class="theme-selector">
                     <div class="theme">
                         <label for="theme-blue"
                             class="theme-preview blue <?= $settings['color_theme'] == 'blue' ? 'is-selected' : '' ?>">
@@ -1108,7 +1108,17 @@ class="theme-preview yellow <?= $settings['color_theme'] == 'yellow' ? 'is-selec
                             <span class="hover-color"></span>
                         </label>
                     </div>
-                </div>
+                    <div class="theme">
+                        <label for="theme-purple"
+                            class="theme-preview purple <?= $settings['color_theme'] == 'purple' ? 'is-selected' : '' ?>">
+                            <input type="radio" name="theme" id="theme-purple" value="purple"
+                                onClick="setTheme('purple')" <?= $settings['color_theme'] == 'purple' ? 'checked' : '' ?>>
+                            <span class="main-color"></span>
+                            <span class="accent-color"></span>
+                            <span class="hover-color"></span>
+                        </label>
+                    </div>
+                </form>
             </div>
             <div>
                 <h2><?= translate('custom_colors', $i18n) ?></h2>

styles/styles.css

@@ -1899,6 +1899,18 @@ textarea.thin {
   background-color: #cd930c;
 }
 
+.theme-preview.purple > .main-color {
+  background-color: #6d4aff;
+}
+
+.theme-preview.purple > .accent-color {
+  background-color: #b086ff;
+}
+
+.theme-preview.purple > .hover-color {
+  background-color: #5e42cd;
+}
+
 .color-picker-wrapper {
   display: flex;
   flex-direction: row;

styles/themes/purple.css

@@ -0,0 +1,21 @@
+:root {
+    --main-color: #6d4aff;
+    --main-color-rgb: 109, 74, 255;
+    --accent-color: #b086ff;
+    --accent-color-rgb: 176, 134, 255;
+    --hover-color: #5e42cd;
+    --hover-color-rgb: 50, 48, 108;
+}
+
+header .logo .logo-image {
+    background-image: url("../../images/siteicons/purple/wallos.png");
+}
+
+.dark header .logo .logo-image {
+    background-image: url("../../images/siteicons/purple/walloswhite.png");
+}
+
+.sort-options > ul > li.selected,
+.filtermenu-content .filter-item.selected {
+    background-image: url("../../images/siteicons/purple/check.png");
+}

verifyemail.php

@@ -86,6 +86,7 @@
     <link rel="stylesheet" href="styles/themes/red.css?<?= $version ?>" id="red-theme" <?= $colorTheme != "red" ? "disabled" : "" ?>>
     <link rel="stylesheet" href="styles/themes/green.css?<?= $version ?>" id="green-theme" <?= $colorTheme != "green" ? "disabled" : "" ?>>
     <link rel="stylesheet" href="styles/themes/yellow.css?<?= $version ?>" id="yellow-theme" <?= $colorTheme != "yellow" ? "disabled" : "" ?>>
+    <link rel="stylesheet" href="styles/themes/purple.css?<?= $version ?>" id="purple-theme" <?= $colorTheme != "purple" ? "disabled" : "" ?>>
     <link rel="stylesheet" href="styles/font-awesome.min.css">
     <link rel="stylesheet" href="styles/barlow.css">
     <link rel="stylesheet" href="styles/login-dark-theme.css?<?= $version ?>" id="dark-theme" <?= $theme == "light" ? "disabled" : "" ?>>