feat: snjs app groups (#468)

* feat: snjs app groups

* fix: update snjs version to point to wip commit

* wip: account switcher

* feat: rename lock manager to auto lock service

* fix: more relevant sign out copy

* chore(deps): update snjs

* fix: use setTimeout instead of setImmediate

* feat: make account switcher expiremental feature

* chore(deps): upgrade snjs

app/assets/stylesheets/_footer.scss

@@ -31,18 +31,28 @@
     border-bottom: 2px solid var(--sn-stylekit-info-color);
   }
 
-  svg {
+  .ionicon {
     width: 12px;
     height: 12px;
-    fill: var(--sn-stylekit-foreground-color);
+    fill: var(--sn-stylekit-secondary-foreground-color);
 
     &:hover {
-      fill: var(--sn-stylekit-info-color);
+      fill: var(--sn-stylekit-info-color) !important;
+      color: var(--sn-stylekit-info-color) !important;
     }
   }
 }
 
-#account-panel, #sync-resolution-menu {
+#account-switcher-icon {
+  // When this icon is alone in the footer bar, it is displayed with too little
+  // padding on the right, possibly due to the fact it is a raw SVG.
+  &.alone {
+    margin-right: 4px;
+  }
+}
+
+#account-panel,
+#sync-resolution-menu {
   width: 400px;
 }
 

app/assets/stylesheets/_ionicons.scss

@@ -12,22 +12,30 @@
   Modified icons to fit ionicon’s grid from original.
 */
 @font-face {
-  font-family: "Ionicons";
-  src: url("../fonts/ionicons.eot?v=2.0.0");
-  src: url("../fonts/ionicons.eot?v=2.0.1#iefix") format("embedded-opentype"),
-       url("../fonts/ionicons.ttf?v=2.0.1") format("truetype"),
-       url("../fonts/ionicons.woff?v=2.0.1") format("woff"),
-       url("../fonts/ionicons.svg?v=2.0.1#Ionicons") format("svg");
+  font-family: 'Ionicons';
+  src: url('../fonts/ionicons.eot?v=2.0.0');
+  src: url('../fonts/ionicons.eot?v=2.0.1#iefix') format('embedded-opentype'),
+    url('../fonts/ionicons.ttf?v=2.0.1') format('truetype'),
+    url('../fonts/ionicons.woff?v=2.0.1') format('woff'),
+    url('../fonts/ionicons.svg?v=2.0.1#Ionicons') format('svg');
   font-weight: normal;
   font-style: normal;
 }
 
+.ionicon-fill-none {
+  fill: none;
+}
+.ionicon-stroke-width {
+  stroke-width: 32px;
+}
+
+
 .ion,
 .ionicons,
 .ion-locked:before,
 .ion-plus:before {
   display: inline-block;
-  font-family: "Ionicons";
+  font-family: 'Ionicons';
   speak: none;
   font-style: normal;
   font-weight: normal;
@@ -41,11 +49,11 @@
 }
 
 .ion-locked:before {
-  content: "\f200";
+  content: '\f200';
 }
 
 .ion-plus:before {
-  content: "\f218";
+  content: '\f218';
 }
 
 /*# sourceMappingURL=ionicons.css.map */

app/assets/stylesheets/_modals.scss

@@ -25,6 +25,22 @@
   }
 }
 
+#account-switcher {
+  min-width: 400px;
+  max-width: 580px;
+  input, input:disabled {
+    width: 100%;
+    border: none;
+    background-color: transparent !important;
+    color: inherit;
+    margin-left: -2px;
+  }
+
+  input.clickable:hover {
+    cursor: pointer;
+  }
+}
+
 #privileges-modal {
   min-width: 400px;
   max-width: 700px;
@@ -50,7 +66,8 @@
     background-color: var(--sn-stylekit-background-color);
     color: var(--sn-stylekit-contrast-foreground-color);
 
-    th, td {
+    th,
+    td {
       padding: 6px 13px;
       border: 1px solid var(--sn-stylekit-contrast-border-color);
     }
@@ -65,7 +82,7 @@
     font-weight: normal;
   }
 
-  .priv-header  {
+  .priv-header {
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -157,9 +174,9 @@
     padding-bottom: 0;
     min-width: 300px;
 
-    -webkit-box-shadow: 0px 2px 35px 0px rgba(0,0,0,0.19);
-    -moz-box-shadow: 0px 2px 35px 0px rgba(0,0,0,0.19);
-    box-shadow: 0px 2px 35px 0px rgba(0,0,0,0.19);
+    -webkit-box-shadow: 0px 2px 35px 0px rgba(0, 0, 0, 0.19);
+    -moz-box-shadow: 0px 2px 35px 0px rgba(0, 0, 0, 0.19);
+    box-shadow: 0px 2px 35px 0px rgba(0, 0, 0, 0.19);
   }
 }