5 files changed, 14 insertions, 11 deletions

diff --git a/client/src/app/shared/shared-main/buttons/button.component.scss b/client/src/app/shared/shared-main/buttons/button.component.scss
index 22b24c853..25a979ac9 100644
--- a/client/src/app/shared/shared-main/buttons/button.component.scss
+++ b/client/src/app/shared/shared-main/buttons/button.component.scss
@@ -24,7 +24,7 @@ my-small-loader ::ng-deep .root {
 a[class$=-button],
 span[class$=-button] {
   > span {
-    margin-left: 5px;
+    @include margin-left(5px);
   }
 }
 
diff --git a/client/src/app/shared/shared-main/misc/help.component.scss b/client/src/app/shared/shared-main/misc/help.component.scss
index 68d7ad48f..51a105498 100644
--- a/client/src/app/shared/shared-main/misc/help.component.scss
+++ b/client/src/app/shared/shared-main/misc/help.component.scss
@@ -24,7 +24,7 @@
 
     .popover-body {
       font-family: $main-fonts;
-      text-align: left;
+      text-align: start;
       padding: 10px;
       font-size: 13px;
       background-color: pvar(--mainBackgroundColor);
@@ -36,7 +36,7 @@
       }
 
       ul {
-        padding-left: 20px;
+        @include padding-left(20px);
         margin-bottom: 0;
       }
     }
diff --git a/client/src/app/shared/shared-main/misc/simple-search-input.component.scss b/client/src/app/shared/shared-main/misc/simple-search-input.component.scss
index 5ae48f81b..be712979b 100644
--- a/client/src/app/shared/shared-main/misc/simple-search-input.component.scss
+++ b/client/src/app/shared/shared-main/misc/simple-search-input.component.scss
@@ -6,9 +6,10 @@
 }
 
 my-global-icon {
+  @include margin-left(10px);
+
   height: 28px;
   width: 28px;
-  margin-left: 10px;
   cursor: pointer;
 
   &:hover {
diff --git a/client/src/app/shared/shared-main/users/user-notifications.component.scss b/client/src/app/shared/shared-main/users/user-notifications.component.scss
index b69d4b5d6..58dc88c38 100644
--- a/client/src/app/shared/shared-main/users/user-notifications.component.scss
+++ b/client/src/app/shared/shared-main/users/user-notifications.component.scss
@@ -22,19 +22,20 @@
 
   my-global-icon {
     @include apply-svg-color(#333);
+    @include margin-right(11px);
+    @include margin-left(3px);
 
     width: 24px;
-    margin-right: 11px;
-    margin-left: 3px;
   }
 
   .avatar {
+    @include margin-right(10px);
+
     width: 30px;
     height: 30px;
     min-width: 30px;
     min-height: 30px;
     border-radius: 5px;
-    margin-right: 10px;
   }
 
   .message {
@@ -46,11 +47,12 @@
   }
 
   .from-date {
+    @include padding-left(5px);
+    @include margin-left(auto);
+
     font-size: 0.85em;
     color: pvar(--greyForegroundColor);
-    padding-left: 5px;
     min-width: 70px;
-    text-align: right;
-    margin-left: auto;
+    text-align: end;
   }
 }
diff --git a/client/src/app/shared/shared-main/users/user-quota.component.scss b/client/src/app/shared/shared-main/users/user-quota.component.scss
index c06cafe29..3ca611b9f 100644
--- a/client/src/app/shared/shared-main/users/user-quota.component.scss
+++ b/client/src/app/shared/shared-main/users/user-quota.component.scss
@@ -8,7 +8,7 @@ label {
 
 .user-quota {
   label {
-    margin-right: 5px;
+    @include margin-right(5px);
   }
 
   &,