5 files changed, 19 insertions, 23 deletions

diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js
index 3b2fe4af4..b358a395f 100644
--- a/src/components/settings/settings/EditSettingsForm.js
+++ b/src/components/settings/settings/EditSettingsForm.js
@@ -366,7 +366,7 @@ class EditSettingsForm extends Component {
               >
                 {intl.formatMessage(messages.headlineAdvanced)}
               </h2>
-              <h2
+              {(isMac || isWindows || process.env.APPIMAGE) && <h2
                 id="updates"
                 className={
                   this.state.activeSetttingsTab === 'updates'
@@ -381,7 +381,7 @@ class EditSettingsForm extends Component {
                 {automaticUpdates && (updateIsReadyToInstall || isUpdateAvailable) && (
                   <span className="update-available">•</span>
                 )}
-              </h2>
+              </h2>}
             </div>
 
             {/* General */}
diff --git a/src/components/ui/Modal/styles.ts b/src/components/ui/Modal/styles.ts
index c2bebf9bb..87ef36f1d 100644
--- a/src/components/ui/Modal/styles.ts
+++ b/src/components/ui/Modal/styles.ts
@@ -1,6 +1,6 @@
 export default theme => ({
   component: {
-    zIndex: 500,
+    zIndex: 9999,
     position: 'absolute',
   },
   overlay: {
diff --git a/src/config.ts b/src/config.ts
index 2079d7cc0..5c9fbaee4 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -113,7 +113,7 @@ export const TODO_APPS = {
   [CUSTOM_TODO_SERVICE]: 'Other service',
 };
 
-export const DEFAULT_TODO_SERVICE = TODO_FRANZ_TODOS_URL;
+export const DEFAULT_TODO_SERVICE = TODO_TODOIST_URL;
 export const DEFAULT_TODO_RECIPE_ID =
   TODO_SERVICE_RECIPE_IDS[DEFAULT_TODO_SERVICE];
 export const DEFAULT_TODO_SERVICE_NAME = TODO_APPS[DEFAULT_TODO_SERVICE];
diff --git a/src/features/appearance/index.ts b/src/features/appearance/index.ts
index 122fa2411..9c0268707 100644
--- a/src/features/appearance/index.ts
+++ b/src/features/appearance/index.ts
@@ -26,11 +26,12 @@ function darkenAbsolute(originalColor, absoluteChange) {
 }
 
 function generateAccentStyle(accentColorStr) {
-  let accentColor = color(DEFAULT_APP_SETTINGS.accentColor);
+  let accentColor;
   try {
     accentColor = color(accentColorStr);
   } catch {
-    // Ignore invalid accent color.
+    accentColorStr = DEFAULT_APP_SETTINGS.accentColor;
+    accentColor = color(accentColorStr);
   }
   const darkerColorStr = darkenAbsolute(accentColor, 5).hex();
   return `
@@ -69,7 +70,8 @@ function generateAccentStyle(accentColorStr) {
     .theme__dark .franz-form__button,
     .franz-form__button,
     .ferdi__fab,
-    .franz-form .franz-form__slider-wrapper .slider::-webkit-slider-thumb {
+    .franz-form .franz-form__slider-wrapper .slider::-webkit-slider-thumb,
+    span.loader div > div > div {
       background: ${accentColorStr};
     }
 
@@ -99,6 +101,10 @@ function generateAccentStyle(accentColorStr) {
       background: ${darkerColorStr};
     }
 
+    .settings__close {
+      border-color: ${darkerColorStr}!important;
+    }
+
     .theme__dark .franz-form__button.franz-form__button--inverted,
     .franz-form__button.franz-form__button--inverted {
       background: none;
diff --git a/src/styles/settings.scss b/src/styles/settings.scss
index 00744df88..3178f718d 100644
--- a/src/styles/settings.scss
+++ b/src/styles/settings.scss
@@ -153,13 +153,11 @@
 
 .settings {
   border-radius: $theme-border-radius;
-  box-shadow: 0 20px 50px rgba($dark-theme-black, 0.5);
   display: flex;
   height: 100%;
   max-height: 720px;
   max-width: 900px;
   min-height: 400px;
-  overflow: hidden;
   position: relative;
   width: 100%;
   z-index: 9999;
@@ -169,7 +167,8 @@
     flex: 1;
     flex-direction: column;
     height: auto;
-    border-radius: 0 $theme-border-radius $theme-border-radius 0;
+    border-radius: $theme-border-radius;
+    box-shadow: 0 20px 50px rgba($dark-theme-black, 0.5);
     overflow: hidden;
     background: #fff;
   }
@@ -273,7 +272,7 @@
 
   .settings__close {
     background: $theme-brand-primary;
-    // border-left: 1px solid darken($theme-brand-primary, 8%);
+    border-left: 1px solid darken($theme-brand-primary, 8%);
     color: #fff;
     font-size: 20px;
     height: 50px;
@@ -283,6 +282,7 @@
     @media (prefers-reduced-motion: no-preference) {
       transition: background $theme-transition-time;
     }
+    border-top-right-radius: $theme-border-radius;
     cursor: pointer;
 
     &::before {
@@ -513,14 +513,14 @@
   flex-direction: column;
   height: auto;
   width: 240px;
-  height: 100%;
+  height: calc(100% - 100px);
   align-self: center;
   border-top-left-radius: $theme-border-radius;
   border-bottom-left-radius: $theme-border-radius;
   overflow: hidden;
+  box-shadow: 0 20px 50px rgba($dark-theme-black, 0.5);
 
   .settings-navigation__link {
-    position: relative;
     align-items: center;
     justify-content: space-between;
     color: $theme-text-color;
@@ -535,18 +535,8 @@
     }
     border-bottom: 1px solid darken($theme-gray-lightest, 3%);
 
-    .badge {
-      background: $theme-gray-light;
-      color: #fff;
-    }
-
     &:hover {
       background: darken($theme-gray-lightest, 8%);
-
-      .badge {
-        background: $theme-gray-light;
-        color: #fff;
-      }
     }
 
     &.is-active {