feat: display warning banner when using the app with no account

app/assets/stylesheets/_ionicons.scss

@@ -16,8 +16,7 @@
   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');
+    url('../fonts/ionicons.woff?v=2.0.1') format('woff');
   font-weight: normal;
   font-style: normal;
 }

app/assets/stylesheets/_notes.scss

@@ -30,13 +30,14 @@
   #notes-title-bar {
     padding-top: 16px;
     font-weight: normal;
-    font-size: var(--sn-stylekit-font-size-h1);
 
     .section-title-bar-header .title {
-      font-size: var(--sn-stylekit-font-size-h3);
-      font-weight: 600;
       width: calc(90% - 45px);
     }
+
+    p {
+      font-size: var(--sn-stylekit-font-size-p);
+    }
   }
 
   #notes-menu-bar {
@@ -80,7 +81,8 @@
       line-height: 17px;
       text-align: center;
       position: absolute;
-      top: 8px;
+      top: 50%;
+      transform: translateY(-50%);
       right: 8px;
 
       transition: background-color 0.15s linear;

app/assets/stylesheets/_sn.scss

@@ -0,0 +1,14 @@
+/* Generic UI controls that have yet to be extracted in Stylekit  */
+
+.sn-btn {
+  @extend .text-sm;
+  @extend .font-bold;
+  @extend .py-2;
+  @extend .px-3;
+  @extend .bg-main;
+  @extend .text-info-contrast;
+  @extend .border-0;
+  @extend .rounded;
+  @extend .cursor-pointer;
+  @extend .hover\:brightness-130;
+}

app/assets/stylesheets/_ui.scss

@@ -57,35 +57,6 @@ $screen-md-max:              ($screen-lg-min - 1) !default;
   }
 }
 
-.selectable {
-  user-select: text !important;
-  cursor: text;
-}
-
-.mt-5 {
-  margin-top: 5px !important;
-}
-
-.mt-10 {
-  margin-top: 10px !important;
-}
-
-.mr-5 {
-  margin-right: 5px !important;
-}
-
-.mr-8 {
-  margin-right: 8px !important;
-}
-
-.faded {
-  opacity: 0.5;
-}
-
-.center-align {
-  text-align: center !important;
-}
-
 .block {
   display: block !important;
 }
@@ -94,19 +65,6 @@ $screen-md-max:              ($screen-lg-min - 1) !default;
   display: inline-block;
 }
 
-.wrap {
-  word-wrap: break-word;
-  word-break: break-all;
-}
-
-.medium-padding {
-  padding: 10px !important;
-}
-
-.bold {
-  font-weight: bold !important;
-}
-
 .normal {
   font-weight: normal !important;
 }
@@ -118,3 +76,137 @@ $screen-md-max:              ($screen-lg-min - 1) !default;
 .medium-text {
   font-size: 14px !important;
 }
+
+.faded {
+  opacity: 0.5;
+}
+
+.flex {
+  display: flex;
+}
+
+.flex-column {
+  flex-direction: column;
+}
+
+.self-start {
+  align-self: flex-start;
+}
+
+.justify-self-start {
+  justify-self: flex-start;
+}
+
+.m-0 {
+  margin: 0;
+}
+
+.mt-1 {
+  margin-top: .25rem;
+}
+.mt-3 {
+  margin-top: .75rem;
+}
+.mt-5 {
+  margin-top: 1.25rem;
+}
+
+.p-5 {
+  padding: 1.25rem;
+}
+
+.px-3 {
+  padding-left: .75rem;
+  padding-right: .75rem;
+}
+
+.py-2 {
+  padding-top: .5rem;
+  padding-bottom: .5rem;
+}
+
+.border-0 {
+  border-width: 0px;
+}
+
+.rounded {
+  border-radius: var(--sn-stylekit-general-border-radius);
+}
+.rounded-md {
+  border-radius: 0.375rem;
+}
+
+.bg-main {
+  background-color: var(--sn-stylekit-info-color);
+}
+.bg-transparent {
+  background-color: transparent;
+}
+
+.col-start-1 {
+  grid-column-start: 1;
+}
+.col-start-2 {
+  grid-column-start: 2;
+}
+.col-end-3 {
+  grid-column-end: 3;
+}
+
+.hover\:brightness-130:hover {
+  filter: brightness(130%);
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.fill-neutral {
+  fill: var(--sn-stylekit-neutral-color);
+}
+.hover\:fill-info:hover {
+  fill: var(--sn-stylekit-info-color)
+}
+
+.font-semibold {
+  font-weight: 600 !important;
+}
+.font-bold {
+  font-weight: 700 !important;
+}
+
+.grid {
+  display: grid;
+}
+.grid-template-cols-1fr {
+  grid-template-columns: 1fr;
+}
+
+.relative {
+  position: relative;
+}
+
+.row-start-1 {
+  grid-row-start: 1;
+}
+
+.selectable {
+  user-select: text !important;
+  cursor: text;
+}
+
+.shadow-sm {
+  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.04), 0px 1px 4px 0px rgba(0, 0, 0, 0.12);
+}
+
+.text-sm {
+  font-size: var(--sn-stylekit-font-size-h5);;
+}
+.text-info-contrast {
+  color: var(--sn-stylekit-info-contrast-color);
+}
+
+.wrap {
+  word-wrap: break-word;
+  word-break: break-all;
+}

app/assets/stylesheets/index.css.scss

@@ -11,3 +11,4 @@
 @import "ionicons";
 @import "reach-sub";
 @import "sessions-modal";
+@import "sn";