Merge remote-tracking branch 'upstream/develop' into mobile-back

* upstream/develop: (142 commits)
  fix timeago font
  added hide_network option, fixed properties naming
  Fix fetching new users, add storing local users in usersObjects with their screen_name as well as id, so that they could be fetched zero-state with screen-name link.
  improve notification subscription
  Fix typo that prevented scope copy from working.
  added check for activatePanel is function or not
  addressed PR comments
  activate panel on user screen click
  added not preload check so hidden toggles asap
  removed counters from left panel
  added router-links to all relavent links
  added activatePanel onclick for timeago button
  added PR comments
  add checkbox to disable web push
  removed brackets from condition
  resolved lint issue
  renamed config to preload images and add ident to config
  added config for preload and made attachment responsive to it
  preload nsfw image
  fix
  ...

1 files changed, 139 insertions, 53 deletions

diff --git a/src/App.scss b/src/App.scss
index fcab3b1c..871f193f 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -34,10 +34,11 @@ h4 {
 
 body {
   font-family: sans-serif;
+  font-family: var(--interfaceFont, sans-serif);
   font-size: 14px;
   margin: 0;
-  color: $fallback--fg;
-  color: var(--fg, $fallback--fg);
+  color: $fallback--text;
+  color: var(--text, $fallback--text);
   max-width: 100vw;
   overflow-x: hidden;
 }
@@ -50,19 +51,24 @@ a {
 
 button {
   user-select: none;
-  color: $fallback--fg;
-  color: var(--fg, $fallback--fg);
-  background-color: $fallback--btn;
-  background-color: var(--btn, $fallback--btn);
+  color: $fallback--text;
+  color: var(--btnText, $fallback--text);
+  background-color: $fallback--fg;
+  background-color: var(--btn, $fallback--fg);
   border: none;
   border-radius: $fallback--btnRadius;
   border-radius: var(--btnRadius, $fallback--btnRadius);
   cursor: pointer;
-  border-top: 1px solid rgba(255, 255, 255, 0.2);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
-  box-shadow: 0px 0px 2px black;
+  box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 1), 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px -1px 0px 0px rgba(0, 0, 0, 0.2) inset;
+  box-shadow: var(--buttonShadow);
   font-size: 14px;
   font-family: sans-serif;
+  font-family: var(--interfaceFont, sans-serif);
+
+  i[class*=icon-] {
+    color: $fallback--text;
+    color: var(--btnText, $fallback--text);
+  }
 
   &::-moz-focus-inner {
     border: none;
@@ -70,11 +76,12 @@ button {
 
   &:hover {
     box-shadow: 0px 0px 4px rgba(255, 255, 255, 0.3);
+    box-shadow: var(--buttonHoverShadow);
   }
 
   &:active {
-    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
-    border-top: 1px solid rgba(0, 0, 0, 0.2);
+    box-shadow: 0px 0px 4px 0px rgba(255, 255, 255, 0.3), 0px 1px 0px 0px rgba(0, 0, 0, 0.2) inset, 0px -1px 0px 0px rgba(255, 255, 255, 0.2) inset;
+    box-shadow: var(--buttonPressedShadow);
   }
 
   &:disabled {
@@ -99,32 +106,37 @@ input, textarea, .select {
   border: none;
   border-radius: $fallback--inputRadius;
   border-radius: var(--inputRadius, $fallback--inputRadius);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
-  border-top: 1px solid rgba(0, 0, 0, 0.2);
-  box-shadow: 0px 0px 2px black inset;
-  background-color: $fallback--input;
-  background-color: var(--input, $fallback--input);
-  color: $fallback--lightFg;
-  color: var(--lightFg, $fallback--lightFg);
+  box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2) inset, 0px -1px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px 0px 2px 0px rgba(0, 0, 0, 1) inset;
+  box-shadow: var(--inputShadow);
+  background-color: $fallback--fg;
+  background-color: var(--input, $fallback--fg);
+  color: $fallback--lightText;
+  color: var(--inputText, $fallback--lightText);
   font-family: sans-serif;
+  font-family: var(--inputFont, sans-serif);
   font-size: 14px;
-  padding: 8px 7px;
+  padding: 8px .5em;
   box-sizing: border-box;
   display: inline-block;
   position: relative;
-  height: 29px;
+  height: 28px;
   line-height: 16px;
   hyphens: none;
 
+  &:disabled, &[disabled=disabled] {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
   .icon-down-open {
     position: absolute;
     top: 0;
     bottom: 0;
     right: 5px;
     height: 100%;
-    color: $fallback--fg;
-    color: var(--fg, $fallback--fg);
-    line-height: 29px;
+    color: $fallback--text;
+    color: var(--text, $fallback--text);
+    line-height: 28px;
     z-index: 0;
     pointer-events: none;
   }
@@ -135,22 +147,33 @@ input, textarea, .select {
     appearance: none;
     background: transparent;
     border: none;
+    color: $fallback--text;
+    color: var(--text, $fallback--text);
     margin: 0;
-    color: $fallback--fg;
-    color: var(--fg, $fallback--fg);
-    padding: 4px 2em 3px 3px;
+    padding: 0 2em 0 .2em;
+    font-family: sans-serif;
+    font-family: var(--inputFont, sans-serif);
+    font-size: 14px;
     width: 100%;
     z-index: 1;
-    height: 29px;
+    height: 28px;
     line-height: 16px;
   }
 
+  &[type=range] {
+    background: none;
+    border: none;
+    margin: 0;
+    box-shadow: none;
+    flex: 1;
+  }
+
   &[type=radio],
   &[type=checkbox] {
     display: none;
     &:checked + label::before {
-      color: $fallback--fg;
-      color: var(--fg, $fallback--fg);
+      color: $fallback--text;
+      color: var(--text, $fallback--text);
     }
     &:disabled,
     {
@@ -166,14 +189,13 @@ input, textarea, .select {
       transition: color 200ms;
       width: 1.1em;
       height: 1.1em;
-      border-radius: $fallback--checkBoxRadius;
-      border-radius: var(--checkBoxRadius, $fallback--checkBoxRadius);
-      border-bottom: 1px solid rgba(255, 255, 255, 0.2);
-      border-top: 1px solid rgba(0, 0, 0, 0.2);
+      border-radius: $fallback--checkboxRadius;
+      border-radius: var(--checkboxRadius, $fallback--checkboxRadius);
       box-shadow: 0px 0px 2px black inset;
+      box-shadow: var(--inputShadow);
       margin-right: .5em;
-      background-color: $fallback--input;
-      background-color: var(--input, $fallback--input);
+      background-color: $fallback--fg;
+      background-color: var(--input, $fallback--fg);
       vertical-align: top;
       text-align: center;
       line-height: 1.1em;
@@ -187,8 +209,8 @@ input, textarea, .select {
 }
 
 option {
-  color: $fallback--fg;
-  color: var(--fg, $fallback--fg);
+  color: $fallback--text;
+  color: var(--text, $fallback--text);
   background-color: $fallback--bg;
   background-color: var(--bg, $fallback--bg);
 }
@@ -253,7 +275,7 @@ nav {
       mask-position: center;
       mask-size: contain;
       background-color: $fallback--fg;
-      background-color: var(--fg, $fallback--fg);
+      background-color: var(--topBarText, $fallback--fg);
       position: absolute;
       top: 0;
       bottom: 0;
@@ -276,9 +298,9 @@ nav {
     margin: auto;
     height: 50px;
 
-    a i {
+    a, a i {
       color: $fallback--link;
-      color: var(--link, $fallback--link);
+      color: var(--topBarLink, $fallback--link);
     }
   }
 }
@@ -301,15 +323,33 @@ main-router {
 
 .panel {
   display: flex;
+  position: relative;
+
   flex-direction: column;
   margin: 0.5em;
 
   background-color: $fallback--bg;
   background-color: var(--bg, $fallback--bg);
 
-  border-radius: $fallback--panelRadius;
-  border-radius: var(--panelRadius, $fallback--panelRadius);
-  box-shadow: 1px 1px 4px rgba(0,0,0,.6);
+  &::after, & {
+    border-radius: $fallback--panelRadius;
+    border-radius: var(--panelRadius, $fallback--panelRadius);
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+
+    pointer-events: none;
+
+    box-shadow: 1px 1px 4px rgba(0,0,0,.6);
+    box-shadow: var(--panelShadow);
+  }
 }
 
 .panel-body:empty::before {
@@ -327,15 +367,23 @@ main-router {
   padding: .6em .6em;
   text-align: left;
   line-height: 28px;
-  background-color: $fallback--btn;
-  background-color: var(--btn, $fallback--btn);
+  color: var(--panelText);
+  background-color: $fallback--fg;
+  background-color: var(--panel, $fallback--fg);
   align-items: baseline;
+  box-shadow: var(--panelHeaderShadow);
 
   .title {
     flex: 1 0 auto;
     font-size: 1.3em;
   }
 
+  .faint {
+    background-color: transparent;
+    color: $fallback--faint;
+    color: var(--panelFaint, $fallback--faint);
+  }
+
   .alert {
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -356,6 +404,11 @@ main-router {
     min-width: 1px;
     align-self: stretch;
   }
+
+  a {
+    color: $fallback--link;
+    color: var(--panelLink, $fallback--link)
+  }
 }
 
 .panel-heading.stub {
@@ -366,6 +419,11 @@ main-router {
 .panel-footer {
   border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
   border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
+
+  a {
+    color: $fallback--link;
+    color: var(--panelLink, $fallback--link)
+  }
 }
 
 .panel-body > p {
@@ -384,11 +442,13 @@ main-router {
 
 nav {
   z-index: 1000;
-  background-color: $fallback--btn;
-  background-color: var(--btn, $fallback--btn);
+  color: var(--topBarText);
+  background-color: $fallback--fg;
+  background-color: var(--topBar, $fallback--fg);
   color: $fallback--faint;
   color: var(--faint, $fallback--faint);
   box-shadow: 0px 0px 4px rgba(0,0,0,.6);
+  box-shadow: var(--topBarShadow);
 
   .back-button {
     display: block;
@@ -490,20 +550,46 @@ nav {
     flex-grow: 0;
   }
 }
+.badge {
+  display: inline-block;
+  border-radius: 99px;
+  min-width: 22px;
+  max-width: 22px;
+  min-height: 22px;
+  max-height: 22px;
+  font-size: 15px;
+  line-height: 22px;
+  text-align: center;
+  vertical-align: middle;
+  white-space: nowrap;
+  padding: 0;
+
+  &.badge-notification {
+    background-color: $fallback--cRed;
+    background-color: var(--badgeNotification, $fallback--cRed);
+    color: white;
+    color: var(--badgeNotificationText, white);
+  }
+}
 
 .alert {
   margin: 0.35em;
   padding: 0.25em;
   border-radius: $fallback--tooltipRadius;
   border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
-  color: $fallback--faint;
-  color: var(--faint, $fallback--faint);
   min-height: 28px;
   line-height: 28px;
 
   &.error {
-    background-color: $fallback--cAlertRed;
-    background-color: var(--cAlertRed, $fallback--cAlertRed);
+    background-color: $fallback--alertError;
+    background-color: var(--alertError, $fallback--alertError);
+    color: $fallback--text;
+    color: var(--alertErrorText, $fallback--text);
+
+    .panel-heading & {
+      color: $fallback--text;
+      color: var(--alertErrorPanelText, $fallback--text);
+    }
   }
 }
 
@@ -536,8 +622,8 @@ nav {
   cursor: pointer;
 
   .selected {
-    color: $fallback--lightFg;
-    color: var(--lightFg, $fallback--lightFg);
+    color: $fallback--lightText;
+    color: var(--lightText, $fallback--lightText);
   }
 
   .text-format {