Fix order of css rules

since v1.77.7 the behaviour of compiling css from nested rules changed:
https://sass-lang.com/documentation/breaking-changes/mixed-decls/

To avoid warnings and keep the old structure of the compiled css
all properties should occur before nested rules

scss/chat/_chat-list-item.scss

@@ -8,6 +8,29 @@
   padding: 0px 10px;
   align-items: center;
 
+  .status-icon {
+    flex-shrink: 0;
+    margin-top: 2px;
+    margin-bottom: 2px;
+  }
+
+  .fresh-message-counter {
+    color: var(--unreadCountLabel);
+    background-color: var(--unreadCountBg);
+    text-align: center;
+
+    // For alignment with the message text
+    margin-top: 1px;
+
+    font-size: 9pt;
+    margin-left: 5px;
+    height: 20px;
+    padding: 0 5pt;
+    line-height: 20px;
+    border-radius: 10px;
+    font-weight: bold;
+  }
+
   & > .content {
     flex-grow: 1;
     margin-left: 10px;
@@ -115,28 +138,6 @@
       margin-left: 2px;
     }
   }
-  .status-icon {
-    flex-shrink: 0;
-    margin-top: 2px;
-    margin-bottom: 2px;
-  }
-
-  .fresh-message-counter {
-    color: var(--unreadCountLabel);
-    background-color: var(--unreadCountBg);
-    text-align: center;
-
-    // For alignment with the message text
-    margin-top: 1px;
-
-    font-size: 9pt;
-    margin-left: 5px;
-    height: 20px;
-    padding: 0 5pt;
-    line-height: 20px;
-    border-radius: 10px;
-    font-weight: bold;
-  }
 
   &:hover,
   &.context-menu-active {
@@ -145,13 +146,13 @@
 }
 
 .pseudo-chat-list-item.message-search-result {
+  height: 72px;
   &:hover .avatars {
     .small.avatar > .content {
       outline-color: var(--chatListItemBgHover);
     }
   }
 
-  height: 72px;
   .avatars {
     position: relative;
     height: 48px /** avatar-size + margin * 2 **/;

scss/dialogs/_audit_log.scss

@@ -30,14 +30,14 @@
   ul {
     list-style: none;
     li.time {
+      padding-bottom: 11px;
       div {
         text-transform: capitalize;
         border-bottom: 2px solid var(--globalText);
         font-size: 15px;
         font-weight: bold;
         display: inline-block;
       }
-      padding-bottom: 11px;
     }
 
     li.info {

scss/dialogs/_qr-import.scss

@@ -1,5 +1,6 @@
 div.import-qr-code-dialog {
   text-align: center;
+  z-index: $z-index-new-local-scope; // needed for .scan-qr-description
   .qr-image-loader {
     max-height: 0px;
     overflow: hidden;
@@ -20,7 +21,6 @@ div.import-qr-code-dialog {
     margin: 10px;
   }
 
-  z-index: $z-index-new-local-scope; // needed for .scan-qr-description
 }
 
 .qr-data {

scss/gallery/_attachment-view.scss

@@ -45,12 +45,12 @@
         '../images/download.svg',
         var(--fullScreenMediaButtons)
       );
+      cursor: pointer;
+      margin-right: 5px;
 
       &:hover {
         background-color: var(--fullScreenMediaButtons);
       }
-      cursor: pointer;
-      margin-right: 5px;
     }
 
     .bp4-icon-cross {

scss/gallery/_media-attachment.scss

@@ -89,7 +89,12 @@
   flex-direction: row;
   width: calc(100% - 5px);
   padding: 5px;
+  align-items: center;
+  position: relative;
 
+  $size_width: 70px;
+  $date_width: 120px;
+
   &:hover {
     background: var(--galleryFileRowHover);
     border-radius: 5px;
@@ -128,11 +133,6 @@
     }
   }
 
-  align-items: center;
-  position: relative;
-
-  $size_width: 70px;
-  $date_width: 120px;
 
   & > .name {
     flex-grow: 1;

scss/misc/_context_menu.scss

@@ -6,13 +6,13 @@
   background-color: transparent;
   pointer-events: none;
 
-  &.active {
-    pointer-events: all;
-  }
-
   // prevent double context menu on macOS
   // (when using touchpad it sometimes selects the text in the context menu, and then show a native context menu on top)
   user-select: none;
+
+  &.active {
+    pointer-events: all;
+  }
 }
 
 .dc-context-menu {

src/renderer/components/QrReader/styles.module.scss

@@ -90,15 +90,7 @@
 }
 
 .qrReaderScanLine {
-  @keyframes pulsating {
-    from {
-      opacity: 1;
-    }
-    to {
-      opacity: 0;
-    }
-  }
-
+
   animation-direction: alternate;
   animation-duration: 0.6s;
   animation-iteration-count: infinite;
@@ -111,6 +103,15 @@
   position: absolute;
   right: 50px;
   top: 50%;
+
+  @keyframes pulsating {
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
+  }
 }
 
 .qrReaderFileInput {

src/renderer/components/message/styles.module.scss

@@ -1,16 +1,17 @@
 $reaction-transition-duration: 100ms;
 
 .message {
+  transition: margin-bottom ease-out $reaction-transition-duration;
   &.withReactions {
     margin-bottom: 10px;
   }
-  transition: margin-bottom ease-out $reaction-transition-duration;
 }
 
 .messageFooter {
   display: flex;
   flex-direction: row-reverse;
   justify-content: space-between;
+  transition: margin-bottom ease-out $reaction-transition-duration;
 
   &.onlyMedia {
     bottom: 0;
@@ -20,7 +21,6 @@ $reaction-transition-duration: 100ms;
     right: 0;
   }
 
-  transition: margin-bottom ease-out $reaction-transition-duration;
   &.withReactionsNoText {
     margin-bottom: 10px;
   }

src/renderer/components/screens/WelcomeScreen/OnboardingScreen.tsx

@@ -38,8 +38,12 @@ export default function OnboardingScreen(props: Props) {
         props.selectedAccountId
       )
       if (acInfo.kind === 'Unconfigured') {
-        await props.onUnSelectAccount()
-        await EffectfulBackendActions.removeAccount(props.selectedAccountId)
+        try {
+          await props.onUnSelectAccount()
+          EffectfulBackendActions.removeAccount(props.selectedAccountId)
+        } catch (error) {
+          log.error('error on removeAccount', error)
+        }
       }
 
       props.onExitWelcomeScreen()

themes/dev_rocket.scss

@@ -481,6 +481,7 @@ div.group-image-wrapper div.group-image-edit-button {
 
 .message {
   .msg-container {
+    display: flex;
     .msg-body {
       display: flex;
       flex-direction: column;
@@ -510,8 +511,6 @@ div.group-image-wrapper div.group-image-edit-button {
         display: none;
       }
     }
-
-    display: flex;
   }
 
   &.incoming {
@@ -527,11 +526,10 @@ div.group-image-wrapper div.group-image-edit-button {
   }
 
   &.outgoing {
+    margin-left: 0;
     .author-wrapper .author {
       background-color: black;
     }
-
-    margin-left: 0;
   }
 
   .author-wrapper {