fix: small layout issues

includes/version.php

@@ -1,3 +1,3 @@
 <?php
-    $version = "v1.21.0";
+    $version = "v1.21.1";
 ?>

index.php

@@ -351,9 +351,9 @@
           </div>
 
           <div class="buttons">
-                <input type="button" value="<?= translate('delete', $i18n) ?>" class="warning-button left" id="deletesub" style="display: none">
+                <input type="button" value="<?= translate('delete', $i18n) ?>" class="warning-button left thin" id="deletesub" style="display: none">
-                <input type="button" value="<?= translate('cancel', $i18n) ?>" class="secondary-button" onClick="closeAddSubscription()">
+                <input type="button" value="<?= translate('cancel', $i18n) ?>" class="secondary-button thin" onClick="closeAddSubscription()">
-                <input type="submit" value="<?= translate('save', $i18n) ?>" id="save-button">
+                <input type="submit" value="<?= translate('save', $i18n) ?>" class="thin" id="save-button">
           </div>
         </form>
       </section>

scripts/settings.js

@@ -1102,6 +1102,9 @@ function setTheme(themeColor) {
 }
 
 function resetCustomColors() {
+  const button = document.getElementById("reset-colors");
+  button.disabled = true;
+
   fetch('endpoints/settings/resettheme.php', {
       method: 'DELETE',
   })
@@ -1110,7 +1113,9 @@ function resetCustomColors() {
     if (data.success) {
       showSuccessMessage(data.message);
       const custom_theme_colors = document.getElementById('custom_theme_colors');
-      custom_theme_colors.remove();
+      if (custom_theme_colors) {
+        custom_theme_colors.remove();
+      }
       document.documentElement.style.removeProperty('--main-color');
       document.documentElement.style.removeProperty('--accent-color');
       document.documentElement.style.removeProperty('--hover-color');
@@ -1120,13 +1125,18 @@ function resetCustomColors() {
     } else {
       showErrorMessage(data.message);
     }
+    button.disabled = false;
   })
   .catch(error => {
     showErrorMessage(translate('unknown_error'));
+    button.disabled = false;
   });
 }
 
 function saveCustomColors() {
+  const button = document.getElementById("save-colors");
+  button.disabled = true;
+
   const mainColor = document.getElementById("mainColor").value;
   const accentColor = document.getElementById("accentColor").value;
   const hoverColor = document.getElementById("hoverColor").value;
@@ -1148,9 +1158,11 @@ function saveCustomColors() {
     } else {
       showErrorMessage(data.message);
     }
+    button.disabled = false;
   })
   .catch(error => {
     showErrorMessage(translate('unknown_error'));
+    button.disabled = false;
   });
 
 }

settings.php

@@ -104,7 +104,7 @@
                         </div>  
                     </div>
                     <div class="buttons">
-                        <input type="submit" value="<?= translate('save', $i18n) ?>" id="userSubmit"/>
+                        <input type="submit" value="<?= translate('save', $i18n) ?>" id="userSubmit" class="thin"/>
                     </div>
                 </div>
             </form>
@@ -170,7 +170,7 @@
                 <p>
             </div>
             <div class="buttons">
-                <input type="submit" value="<?= translate('add', $i18n) ?>" id="addMember" onClick="addMemberButton()"/>
+                <input type="submit" value="<?= translate('add', $i18n) ?>" id="addMember" onClick="addMemberButton()" class="thin"/>
             </div>
         </div>
     </section>
@@ -248,8 +248,8 @@
                 <p>
             </div>
             <div class="buttons">
-                <input type="button" class="secondary-button" value="<?= translate('test', $i18n) ?>" id="testNotifications" onClick="testNotificationButton()"/>
+                <input type="button" class="secondary-button thin" value="<?= translate('test', $i18n) ?>" id="testNotifications" onClick="testNotificationButton()"/>
-                <input type="submit" value="<?= translate('save', $i18n) ?>" id="saveNotifications" onClick="saveNotificationsButton()"/>
+                <input type="submit" value="<?= translate('save', $i18n) ?>" id="saveNotifications" onClick="saveNotificationsButton()" class="thin"/>
             </div>
         </div>
     </section>
@@ -316,7 +316,7 @@
             ?>
             </div>
             <div class="buttons">
-                <input type="submit" value="<?= translate('add', $i18n) ?>" id="addCategory" onClick="addCategoryButton()"/>
+                <input type="submit" value="<?= translate('add', $i18n) ?>" id="addCategory" onClick="addCategoryButton()" class="thin"/>
             </div>
         </div>
     </section>
@@ -400,7 +400,7 @@
             ?>
             </div>
             <div class="buttons">
-                <input type="submit" value="<?= translate('add', $i18n) ?>" id="addCurrency" onClick="addCurrencyButton()"/>
+                <input type="submit" value="<?= translate('add', $i18n) ?>" id="addCurrency" onClick="addCurrencyButton()" class="thin"/>
             </div>
             <div class="settings-notes">
                 <p>
@@ -478,7 +478,7 @@
                 </p>
             </div>
             <div class="buttons">
-                <input type="submit" value="<?= translate('save', $i18n) ?>" id="addFixerKey" onClick="addFixerKeyButton()"/>
+                <input type="submit" value="<?= translate('save', $i18n) ?>" id="addFixerKey" onClick="addFixerKeyButton()" class="thin"/>
             </div>
         </div>
     </section>
@@ -621,14 +621,14 @@
                         <input type="color" id="hoverColor" name="hoverColor" value="<?= isset($settings['customColors']['hover_color']) ? $settings['customColors']['hover_color'] : '#FFFFFF' ?>" class="color-picker fa-solid fa-eye-dropper">
                     </div>
                     <div class="color-picker-wrapper wrap">
-                        <input type="button" value="<?= translate('reset', $i18n) ?>" onClick="resetCustomColors()" class="secondary-button">
+                        <input type="button" value="<?= translate('reset', $i18n) ?>" onClick="resetCustomColors()" class="secondary-button thin" id="reset-colors">
-                        <input type="button" value="<?= translate('save', $i18n) ?>" onClick="saveCustomColors()" class="buton">
+                        <input type="button" value="<?= translate('save', $i18n) ?>" onClick="saveCustomColors()" class="buton thin" id="save-colors">
                     </div>    
                 </div>
             </div>
             <h2><?= translate('dark_theme', $i18n) ?></h2>
             <div>
-                <input id="switchTheme" type="button" value="<?= translate('switch_theme', $i18n) ?>" onClick="switchTheme()" class="button">
+                <input id="switchTheme" type="button" value="<?= translate('switch_theme', $i18n) ?>" onClick="switchTheme()" class="button thin">
             </div>
         </div>
     </section>
@@ -678,7 +678,7 @@
             <h2><?= translate('export_subscriptions', $i18n) ?></h2>
         </header>
         <div>
-            <input type="button" class="button" value="<?= translate('export_to_json', $i18n) ?>" id="exportToJson" onClick="exportToJson()"/>
+            <input type="button" class="button thin" value="<?= translate('export_to_json', $i18n) ?>" id="exportToJson" onClick="exportToJson()"/>
         <div>        
     </section>
 

styles/styles.css

@@ -885,7 +885,7 @@ input[type="text"].short {
 input[type="submit"],
 input[type="button"],
 button.button {
-  padding: 12px 30px;
+  padding: 15px 30px;
   font-size: 16px;
   background-color: var(--main-color);
   color: #fff;
@@ -896,6 +896,12 @@ button.button {
   border: 2px solid var(--main-color);
 }
 
+input[type="submit"].thin,
+input[type="button"].thin,
+button.button.thin {
+  padding: 13px 30px;
+}
+
 input[type="button"].secondary-button,
 button.button.secondary-button {
   background-color: #FFFFFF;
@@ -1146,6 +1152,7 @@ input[type="text"]:disabled {
   display: block;
   cursor: pointer;
   overflow: hidden;
+  flex-shrink: 0;
 }
 
 .icon-preview:after {