Merge pull request #86 from zelfroster/fix-issues

Fix WebUI issues

webui-src/.editorconfig

@@ -8,7 +8,7 @@ root = true
 
 # Change these settings to your own preference
 indent_style = space
-indent_size  = 4
+indent_size  = 2
 
 # We recommend you to keep these unchanged
 end_of_line              = lf

webui-src/app/config/config_network.js

@@ -1,7 +1,7 @@
 const m = require('mithril');
 const rs = require('rswebui');
 
-const util = require('config/config_util'); // for future use
+const util = require('config/config_util');
 
 const SetNwMode = () => {
   const networkModes = [
@@ -124,11 +124,14 @@ const SetNAT = () => {
         'select',
         {
           value: netMode,
-          oninput: (e) => (netMode = e.target.value),
-          onchange: () => {
+          onchange: (e) => {
             rs.rsJsonApiRequest('/rsPeers/setNetworkMode', {
               sslId,
               netMode,
+            }).then((res) => {
+              if (res.body.retval) {
+                netMode = e.target.value;
+              }
             });
           },
         },

webui-src/app/home.js

@@ -84,7 +84,7 @@ const retroshareId = () => {
               document.getElementById('retroId').select();
             },
           },
-          v.attrs.ownCert.substring(31)
+          v.attrs.ownCert
         ),
         m('i.fas.fa-copy', {
           onclick: () => {
@@ -262,7 +262,7 @@ const Certificate = () => {
     rs.rsJsonApiRequest(
       '/rsPeers/GetShortInvite',
       { formatRadix: true },
-      (data) => (ownCert = data.invite)
+      (data) => (ownCert = decodeURIComponent(data.invite).substring(34))
     );
   }
 

webui-src/app/login.js

@@ -84,7 +84,6 @@ function loginComponent() {
 
   const textError = () => m('p.error[id=error]');
   return {
-    oninit: () => verifyLogin(uname, passwd, url, false),
     view: () => {
       return m(
         'form.login-page',

webui-src/app/scss/abstracts/_mixins.scss

@@ -37,6 +37,7 @@
 @mixin blockquote($type) {
   position: relative;
   line-height: 1.2;
+
   @if ($type == 'info') {
     color: transparentize($dark-color, 0.2);
     border: 1px solid transparentize($primary-retro-color, 0.2);
@@ -45,11 +46,13 @@
   } @else if ($type == 'danger') {
     border: 1px solid transparentize($red-color, 0.2);
   }
+
   &::before {
     font-family: 'Font Awesome 5 Free';
     position: absolute;
     top: 0.5rem;
     left: 0.5rem;
+
     @if ($type == 'info') {
       content: '\f05a';
       color: $primary-color;
@@ -62,3 +65,31 @@
     }
   }
 }
+
+@mixin flex($direction: '', $justify: '', $align: '', $gap: 0) {
+  display: flex;
+
+  @if ($direction != '') {
+    flex-direction: $direction;
+  }
+
+  @if ($justify != '') {
+    justify-content: $justify;
+  }
+
+  @if ($align != '') {
+    align-items: $align;
+  }
+
+  @if ($gap !=0) {
+    gap: $gap;
+  }
+}
+
+// Font
+@mixin fontdef-woff($FontPath, $FontName, $FontVersion: '1.0.0', $FontType: 'Regular') {
+  src:
+    url('#{$FontPath}/#{$FontName}-#{$FontType}.woff2') format('woff2'),
+    url('#{$FontPath}/#{$FontName}-#{$FontType}.woff') format('woff'),
+    url('#{$FontPath}/#{$FontName}-#{$FontType}.ttf') format('truetype');
+}

webui-src/app/scss/abstracts/_variables.scss

@@ -1,3 +1,6 @@
 // -----------------------------------------------------------------------------
 // This file contains all application-wide Sass variables.
 // -----------------------------------------------------------------------------
+$FontPath: './webfonts' !default;
+$FontName: 'Roboto' !default;
+$FontVersion: '3.008' !default;

webui-src/app/scss/base/_base.scss

@@ -9,16 +9,16 @@ General site-wide rules
 
 /* Main base div for tabs used by m.route */
 .content {
+  @include flex;
   height: 100%;
-  display: flex;
   overflow: hidden;
 }
 
 /* Main tab content */
 .tab-content {
+  @include flex;
   height: 100%;
   width: 100%;
-  display: flex;
   background-color: $light-color;
   animation: fadein 0.3s;
   overflow: auto;

webui-src/app/scss/base/_reset.scss

@@ -42,7 +42,8 @@ html:focus-within {
 body {
   text-rendering: optimizeSpeed;
   line-height: 1.5;
-  font-family: Arial, Helvetica, sans-serif !important;
+  font-family: 'Roboto', Arial, Helvetica, sans-serif !important;
+  letter-spacing: -0.025ch;
 }
 
 /* A elements that don't have a class get default styles */
@@ -70,6 +71,7 @@ select {
   html:focus-within {
     scroll-behavior: auto;
   }
+
   *,
   *::before,
   *::after {

webui-src/app/scss/components/_media.scss

@@ -1,4 +1,4 @@
-@use '../abstracts/colors' as *;
+@use '../abstracts' as *;
 
 .media-item {
   display: flex;
@@ -8,9 +8,7 @@
   border-radius: 4px;
   &__details {
     flex-basis: 40%;
-    display: flex;
-    align-items: start;
-    gap: 0.5rem;
+    @include flex($align: start, $gap: 0.5rem);
     & img {
       width: 6rem;
       object-fit: contain;

webui-src/app/scss/components/_navbar.scss

@@ -1,21 +1,17 @@
-@use '../abstracts/colors' as *;
+@use '../abstracts' as *;
 
 /* Navbar */
 .nav-menu {
   background-color: $dark-color;
   box-shadow: 0 5px 5px #222;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+  @include flex(column, $align: center);
   height: 100%;
   padding: 0.5rem 0.25rem;
   margin-right: 0rem;
 
   &__logo {
     padding: 1.2rem 0;
-    display: flex;
-    gap: 0.3rem;
-    align-items: center;
+    @include flex($align: center, $gap: 0.3rem);
 
     img {
       width: 1.6rem;
@@ -29,17 +25,14 @@
 
   &__box {
     padding: 2rem 0.125rem;
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
+    @include flex(column, $gap: 0.5rem);
     position: relative;
 
     .item {
       margin: 0;
       padding: 0.675rem 0.5rem;
       width: 10rem;
-      display: flex;
-      align-items: center;
+      @include flex($align: center);
       line-height: 1;
       border-radius: 0.5rem;
       text-decoration: none;
@@ -88,17 +81,20 @@
         display: none;
       }
     }
+
     .nav-menu__box {
       .item {
         padding: 0.675rem 0;
         width: 2.5rem;
         justify-content: center;
         transition: 300ms;
+
         & p {
           display: none;
         }
       }
     }
+
     button i {
       rotate: 180deg;
     }
@@ -113,18 +109,20 @@
 .sidebar {
   width: 13rem;
   background-color: white;
-  display: flex;
-  flex-direction: column;
+  @include flex(column);
+
   & a {
     text-decoration: none;
     text-transform: capitalize;
     padding: 1rem;
     cursor: pointer;
     color: #999;
+
     &:hover {
       color: #222;
     }
   }
+
   & .selected-sidebar-link {
     font-weight: bold;
     color: #222;
@@ -132,20 +130,24 @@
     animation: expand-left-border 0.1s;
   }
 }
+
 .sidebarquickview {
   & > h6 {
     padding: 0.5rem;
   }
+
   & a {
     text-decoration: none;
     text-transform: capitalize;
     padding: 0.5rem 1rem;
     display: block;
     color: #999;
+
     & a:hover {
       color: #222;
     }
   }
+
   & .selected-sidebarquickview-link {
     font-weight: bold;
     color: #222;
@@ -153,6 +155,7 @@
     animation: expand-left-border 0.1s;
   }
 }
+
 /* Content adjacent to sidebar */
 .node-panel {
   width: 100%;
@@ -164,6 +167,7 @@
   from {
     border-left: 0;
   }
+
   to {
     border-left: 5px solid #3ba4d7;
   }

webui-src/app/scss/components/_posts.scss

@@ -1,4 +1,4 @@
-@use '../abstracts/colors' as *;
+@use '../abstracts' as *;
 
 .posts {
   height: 100%;
@@ -6,8 +6,7 @@
   flex-direction: column;
   overflow: auto;
   &__heading {
-    display: flex;
-    justify-content: space-between;
+    @include flex(column, $justify: space-between);
   }
   &-container {
     height: 100%;

webui-src/app/scss/fontface/_Bold.scss

@@ -0,0 +1,18 @@
+@use '../abstracts' as *;
+
+/* BEGIN Bold */
+@font-face {
+  font-family: Roboto;
+  @include fontdef-woff($FontPath, $FontName, $FontVersion, 'Bold');
+  font-weight: 700;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: Roboto;
+  @include fontdef-woff($FontPath, $FontName, $FontVersion, 'Bold');
+  font-weight: bold;
+  font-style: normal;
+}
+
+/* END Bold */

webui-src/app/scss/fontface/_BoldItalic.scss

@@ -0,0 +1,18 @@
+@use '../abstracts' as *;
+
+/* BEGIN Bold Italic */
+@font-face {
+  font-family: Roboto;
+  @include fontdef-woff($FontPath, $FontName, $FontVersion, 'BoldItalic');
+  font-weight: 700;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: Roboto;
+  @include fontdef-woff($FontPath, $FontName, $FontVersion, 'BoldItalic');
+  font-weight: bold;
+  font-style: italic;
+}
+
+/* END Bold Italic */

webui-src/app/scss/fontface/_Italic.scss

@@ -0,0 +1,18 @@
+@use '../abstracts' as *;
+
+/* BEGIN Italic */
+@font-face {
+  font-family: Roboto;
+  @include fontdef-woff($FontPath, $FontName, $FontVersion, 'Italic');
+  font-weight: 400;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: Roboto;
+  @include fontdef-woff($FontPath, $FontName, $FontVersion, 'Italic');
+  font-weight: normal;
+  font-style: italic;
+}
+
+/* END Italic */

webui-src/app/scss/fontface/_Light.scss

@@ -0,0 +1,11 @@
+@use '../abstracts' as *;
+
+/* BEGIN Light */
+@font-face {
+  font-family: Roboto;
+  @include fontdef-woff($FontPath, $FontName, $FontVersion, 'Light');
+  font-weight: 300;
+  font-style: normal;
+}
+
+/* END Light */

webui-src/app/scss/fontface/_LightItalic.scss

@@ -0,0 +1,11 @@
+@use '../abstracts' as *;
+
+/* BEGIN Light Italic */
+@font-face {
+  font-family: Roboto;
+  @include fontdef-woff($FontPath, $FontName, $FontVersion, 'LightItalic');
+  font-weight: 300;
+  font-style: italic;
+}
+
+/* END Light Italic */

webui-src/app/scss/fontface/_Medium.scss

@@ -0,0 +1,11 @@
+@use '../abstracts' as *;
+
+/* BEGIN Medium */
+@font-face {
+  font-family: Roboto;
+  @include fontdef-woff($FontPath, $FontName, $FontVersion, 'Medium');
+  font-weight: 500;
+  font-style: normal;
+}
+
+/* END Medium */

webui-src/app/scss/fontface/_MediumItalic.scss

@@ -0,0 +1,11 @@
+@use '../abstracts' as *;
+
+/* BEGIN Medium Italic */
+@font-face {
+  font-family: Roboto;
+  @include fontdef-woff($FontPath, $FontName, $FontVersion, 'MediumItalic');
+  font-weight: 500;
+  font-style: italic;
+}
+
+/* END Medium Italic */

webui-src/app/scss/fontface/_Regular.scss

@@ -0,0 +1,18 @@
+@use '../abstracts' as *;
+
+/* BEGIN Regular */
+@font-face {
+  font-family: Roboto;
+  @include fontdef-woff($FontPath, $FontName, $FontVersion, 'Regular');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: Roboto;
+  @include fontdef-woff($FontPath, $FontName, $FontVersion, 'Regular');
+  font-weight: normal;
+  font-style: normal;
+}
+
+/* END Regular */

webui-src/app/scss/fontface/_index.scss

@@ -0,0 +1,8 @@
+@forward 'Bold';
+@forward 'BoldItalic';
+@forward 'Medium';
+@forward 'MediumItalic';
+@forward 'Regular';
+@forward 'Italic';
+@forward 'Light';
+@forward 'LightItalic';

webui-src/app/scss/layouts/_modal-container.scss

@@ -1,3 +1,5 @@
+@use '../abstracts/' as *;
+
 #modal-container {
   display: none;
   position: fixed;
@@ -21,8 +23,7 @@
   background-color: white;
   border-radius: 0.5rem;
   animation: fadein 0.5s;
-  display: flex;
-  flex-direction: column;
+  @include flex(column);
   & button:last-child {
     margin-top: auto;
   }

webui-src/app/scss/layouts/_notification-container.scss

@@ -3,6 +3,3 @@
   bottom: 0;
   right: 0;
 }
-#notification-container .notification {
-}
-

webui-src/app/scss/layouts/_widget.scss

@@ -1,34 +1,27 @@
+@use '../abstracts/' as *;
+
 .widget {
   height: 100%;
   padding: 1rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
+  @include flex(column, $gap: 0.5rem);
   background-color: white;
   border-radius: 0.5rem;
   overflow: auto;
   & .top-heading {
-    display: flex;
-    justify-content: space-between;
+    @include flex($justify: space-between);
   }
   &__heading {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
+    @include flex($justify: space-between, $align: center);
     border-bottom: 2px solid #999;
   }
   &__body {
     height: 100%;
-    display: flex;
-    flex-direction: column;
+    @include flex(column);
     overflow: auto;
     &-heading {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
+      @include flex($justify: space-between, $align: center);
       & .action {
-        display: flex;
-        gap: 0.5rem;
+        @include flex($gap: 0.5rem);
       }
     }
     &-content {
@@ -36,9 +29,7 @@
       overflow: auto;
     }
     &-box {
-      display: flex;
-      flex-direction: column;
-      gap: 0.5rem;
+      @include flex(column, $gap: 0.5rem);
     }
   }
   &-half {

webui-src/app/scss/main.scss

@@ -1,20 +1,22 @@
 @charset "UTF-8";
 
 // 1. Configuration and helpers
-@use "abstracts";
+@use 'abstracts';
+
+// 2. Font faces
+@use 'fontface';
 
 // 2. Vendors specific files
-@use "vendors";
+@use 'vendors';
 
 // 3. Base stuff
-@use "base";
+@use 'base';
 
 // 4. Components
-@use "components";
+@use 'components';
 
 // 5. Layout-related sections
-@use "layouts";
+@use 'layouts';
 
 // 6. Page-specific styles
-@use "pages";
-
+@use 'pages';

webui-src/app/scss/pages/_channel.scss

@@ -1,22 +1,17 @@
-@use '../abstracts/colors' as *;
+@use '../abstracts' as *;
 
 .file-section {
   margin-top: 2rem;
-  display: flex;
-  flex-direction: column;
+  @include flex(column);
 }
 
 .comments-section {
   margin-top: 2rem;
-  display: flex;
-  justify-content: space-between;
+  @include flex($justify: space-between);
   &__menu {
-    display: flex;
-    gap: 1rem;
+    @include flex($gap: 1rem);
     &-id {
-      display: flex;
-      gap: 0.25rem;
-      align-items: center;
+      @include flex($gap: 0.25rem, $align: center);
     }
   }
 }

webui-src/app/scss/pages/_config.scss

@@ -1,22 +1,18 @@
-@use '../abstracts/colors' as *;
+@use '../abstracts' as *;
 
 .mail {
   .permission-flag {
     margin-bottom: 1rem;
-    display: flex;
-    gap: 1rem;
+    @include flex($gap: 1rem);
   }
   &-tags {
     padding: 0.5rem;
     border: 1px solid transparentize($dark-color, 0.8);
     border-radius: 6px;
     &__container {
-      display: flex;
-      flex-direction: column;
+      @include flex(column);
       & .tag-item {
-        display: flex;
-        align-items: center;
-        gap: 4px;
+        @include flex($align: center, $gap: 4px);
         border-bottom: 1px solid transparentize($dark-color, 0.9);
         padding: 2px 0;
 
@@ -34,8 +30,7 @@
         &__modify {
           margin-left: auto;
           font-size: 0.75rem;
-          display: flex;
-          gap: 4px;
+          @include flex($gap: 4px);
         }
         &:hover {
           background-color: $light-color;
@@ -67,9 +62,7 @@
 }
 
 .proxy-server {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
+  @include flex(column, $gap: 4px);
   &__tor,
   &__i2p {
     & > h4 {
@@ -94,7 +87,5 @@
 }
 
 .config-files {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
+  @include flex(column, $gap: 1rem);
 }

webui-src/app/scss/pages/_files.scss

@@ -8,21 +8,16 @@
   border: 1px solid #ccc;
   animation: fadein 0.5s;
   &__heading {
-    display: flex;
-    justify-content: space-between;
+    @include flex($justify: space-between);
     margin-bottom: 0.5rem;
     &-chunk {
-      display: flex;
-      gap: 1rem;
+      @include flex($gap: 1rem);
     }
   }
   &__body {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
+    @include flex(column, $gap: 1rem);
     &-details {
-      display: flex;
-      align-items: center;
+      @include flex($align: center);
       &-stat {
         width: 100%;
         display: grid;
@@ -32,9 +27,8 @@
         }
       }
       &-action {
-        display: flex;
+        @include flex($gap: 1rem);
         height: 100%;
-        gap: 1rem;
         & button,
         & button.red {
           padding: 0.25rem 0.75rem;
@@ -76,8 +70,7 @@ table.friendsfiles td:nth-child(2) {
 .file-search-container {
   margin-top: 1rem;
   padding: 8px;
-  display: flex;
-  gap: 8px;
+  @include flex($gap: 8px);
   border: 1px solid transparentize($dark-color, 0.8);
   border-radius: 6px;
   height: 100%;
@@ -89,8 +82,7 @@ table.friendsfiles td:nth-child(2) {
     border-right: 1px solid transparentize($dark-color, 0.9);
 
     & .keywords-container {
-      display: flex;
-      flex-direction: column;
+      @include flex(column);
       border-top: 2.5px solid transparentize($dark-color, 0.92);
       margin-top: 0.125rem;
       padding-top: 0.25rem;
@@ -160,9 +152,7 @@ table.friendsfiles td:nth-child(2) {
             }
             &__download {
               flex-basis: 10%;
-              display: flex;
-              justify-content: start;
-              align-items: center;
+              @include flex($justify: start, $align: center);
             }
           }
         }
@@ -202,9 +192,7 @@ table.friendsfiles td:nth-child(2) {
 }
 
 .share-manager {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
+  @include flex(column, $justify: space-between);
   &__table {
     margin: 1rem 0 auto;
     thead {
@@ -250,17 +238,12 @@ table.friendsfiles td:nth-child(2) {
     }
   }
   &__actions {
-    display: flex;
-    justify-content: space-between;
+    @include flex($justify: space-between);
   }
   &__form {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
+    @include flex(column, $gap: 0.5rem);
     &_input {
-      display: flex;
-      flex-direction: column;
-      gap: 0.5rem;
+      @include flex(column, $gap: 0.5rem);
       input {
         flex-grow: 1;
       }
@@ -294,6 +277,5 @@ table.friendsfiles td:nth-child(2) {
     width: 100%;
     cursor: pointer;
   }
-  display: flex;
-  justify-content: space-between;
+  @include flex($justify: space-between);
 }

webui-src/app/scss/pages/_home.scss

@@ -1,29 +1,20 @@
-@use '../abstracts/colors' as *;
+@use '../abstracts' as *;
 
 .homepage {
   margin: 2rem auto 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 4rem;
+  @include flex(column, $gap: 4rem);
 
   .logo {
-    display: flex;
-    justify-content: center;
-    align-items: center;
+    @include flex($justify: center, $align: center);
     & img {
       width: 90px;
     }
     .retroshareText {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-
+      @include flex(column, $align: center);
       & .retrotext {
         font-size: 36px;
+        font-weight: 600;
         line-height: 1.125;
-        font-weight: 500;
-
         & > span {
           color: $primary-retro-color;
         }
@@ -36,10 +27,7 @@
   }
 
   .certificate {
-    display: flex;
-    flex-direction: column;
-    gap: 4rem;
-
+    @include flex(column, $gap: 4rem);
     &__heading {
       text-align: center;
       & > h1 {
@@ -47,26 +35,21 @@
       }
     }
     &__content {
-      display: flex;
-      flex-direction: column;
-      gap: 2rem;
+      @include flex(column, $gap: 2rem);
       padding: 2rem;
       text-align: center;
       border: 1.5px solid transparentize($primary-retro-color, 0.8);
       border-radius: 6px;
       box-shadow: 0px 0px 8px 2px transparentize($dark-color, 0.95);
-
       .rsId > p {
         margin-bottom: 0.5rem;
         color: $primary-retro-color;
       }
-
       .retroshareID {
-        padding: 0.5rem;
-        display: flex;
+        padding: 0.25rem;
+        @include flex($align: center);
         justify-self: start;
-        align-items: center;
-        font-size: 1.2rem;
+        font-size: 1.25rem;
         border-radius: 4px;
         background: transparentize($dark-color, 0.95);
         & .textArea {
@@ -76,8 +59,6 @@
           font-size: 1rem;
           font-family: monospace;
           background: transparent;
-          font-size: 1.1rem;
-          border-radius: 5px;
           border: none;
           resize: none;
         }
@@ -91,21 +72,17 @@
       }
 
       .webhelp {
+        padding: 0.5rem;
+        background: whitesmoke;
+        @include flex($justify: center, $align: center, $gap: 0.5rem);
+        border-radius: 4px;
+        border: 1px solid transparentize($dark-color, 0.5);
+        width: fit-content;
+        cursor: pointer;
         &-container {
           display: grid;
           place-items: center;
         }
-        background: whitesmoke;
-        border-radius: 5px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        gap: 0.5rem;
-        border-radius: 5px;
-        border: 1px solid transparentize($dark-color, 0.5);
-        padding: 0.5rem;
-        width: fit-content;
-        cursor: pointer;
         &:hover {
           background: $light-color;
           border: 1px solid $dark-color;

webui-src/app/scss/pages/_login.scss

@@ -17,11 +17,7 @@
     max-width: 400px;
     max-height: 500px;
     border-radius: 5px;
-
-    display: flex;
-    align-items: flex-start;
-    flex-direction: column;
-    align-items: center;
+    @include flex(column, $align: center);
 
     & input {
       padding: 0.375rem 0.75rem;

webui-src/app/scss/pages/_mail.scss

@@ -1,8 +1,7 @@
 @use '../abstracts/' as *;
 
 .side-bar {
-  display: flex;
-  flex-direction: column;
+  @include flex(column);
   background: white;
   .mail-compose-btn {
     width: 96%;
@@ -13,33 +12,26 @@
 
 .compose-mail {
   &__from {
+    @include flex($justify: space-between);
     padding-bottom: 0.5rem;
-    display: flex;
-    justify-content: space-between;
     border-bottom: 2px solid $light-color;
   }
   &__recipients {
     padding: 0.5rem 0;
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
+    @include flex(column, $gap: 0.5rem);
     border-bottom: 2px solid $light-color;
     &__container {
-      display: flex;
-      gap: 0.5rem;
+      @include flex($gap: 0.5rem);
       & > label {
         text-transform: capitalize;
       }
       .recipients {
         width: 100%;
-        display: flex;
-        gap: 0.5rem;
+        @include flex($gap: 0.5rem);
         flex-wrap: wrap;
         &__selected {
           padding: 0.125rem 0.5rem;
-          display: flex;
-          gap: 0.5rem;
-          align-items: center;
+          @include flex($align: center, $gap: 0.5rem);
           border: 1px solid $light-color;
           border-radius: 3px;
           cursor: default;
@@ -110,8 +102,7 @@
   &__message {
     margin: 0.5rem 0;
     height: 100%;
-    display: flex;
-    flex-direction: column;
+    @include flex(column);
     overflow: auto;
     &-body {
       height: 100%;
@@ -119,9 +110,7 @@
     }
   }
   &__send-btn {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
+    @include flex($align: center, $gap: 0.5rem);
     & i {
       transform: translateY(-1px);
     }
@@ -130,38 +119,28 @@
 
 .msg-view {
   height: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
+  @include flex(column, $gap: 1rem);
   overflow: auto;
   &-nav {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
+    @include flex($justify: space-between, $align: column);
     &__action {
-      display: flex;
-      gap: 0.5rem;
+      @include flex($gap: 0.5rem);
     }
   }
   &__header {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
+    @include flex(column, $gap: 1rem);
     & > h3 {
       line-height: 1;
     }
     & .msg-details {
-      display: flex;
-      gap: 1rem;
+      @include flex($gap: 1rem);
       &__avatar {
         height: max-content;
       }
       &__info {
-        display: flex;
-        flex-direction: column;
+        @include flex(column);
         &-item {
-          display: flex;
-          gap: 0.5rem;
+          @include flex($gap: 0.5rem);
         }
       }
     }
@@ -174,8 +153,7 @@
   &__attachment {
     height: 50%;
     overflow: auto;
-    display: flex;
-    flex-direction: column;
+    @include flex(column);
     &-items {
       height: 100%;
       overflow: auto;
@@ -191,8 +169,7 @@
   display: flex;
 }
 .msgHeaderDetails {
-  display: flex;
-  flex-direction: column;
+  @include flex(column);
 }
 
 table.mails {
@@ -295,9 +272,8 @@ table.attachment-container {
   }
 
   .attachment-header {
-    display: flex;
     width: 100%;
-    justify-content: space-between;
+    @include flex($justify: space-between);
 
     th {
       text-align: start;
@@ -323,8 +299,7 @@ table.attachment-container {
 
   .attachment {
     width: 100%;
-    display: flex;
-    justify-content: space-between;
+    @include flex($justify: space-between);
     text-align: start;
 
     &__name {
@@ -348,9 +323,7 @@ table.attachment-container {
       flex-basis: 20%;
     }
     & td:nth-child(5) {
-      display: flex;
-      justify-content: center;
-      align-items: center;
+      @include flex($justify: center, $align: center);
       flex-basis: 10%;
 
       & button {

webui-src/app/scss/pages/_network.scss

@@ -1,3 +1,5 @@
+@use '../abstracts' as *;
+
 .friend {
   color: #444;
   font-size: 1.2em;
@@ -31,8 +33,7 @@
     justify-content: start;
   }
   & .brief-info {
-    display: flex;
-    align-items: center;
+    @include flex($align: center);
     justify-self: start;
   }
 

webui-src/index.html

@@ -1,11 +1,11 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>RetroShare</title>
     <link rel="stylesheet" href="styles.css" />
     <link href="images/retroshare.svg" rel="icon" data-n-head="true" type="image/svg" />
+    <title>RetroShare</title>
     <script src="app.js"></script>
   </head>