feat: (wip) sessions management

app/assets/stylesheets/_main.scss

@@ -48,10 +48,16 @@ body {
   color: var(--sn-stylekit-info-contrast-color);
 }
 
-*:focus {outline:0;}
+h1 {
+  font-size: var(--sn-stylekit-font-size-h1);
+}
 
-button:focus {
-  outline:0;
+h2 {
+  font-size: var(--sn-stylekit-font-size-h2);
+}
+
+h3 {
+  font-size: var(--sn-stylekit-font-size-h3);
 }
 
 input, button, select, textarea {

app/assets/stylesheets/_notes.scss

@@ -63,9 +63,16 @@
       font-weight: normal;
       font-size: var(--sn-stylekit-font-size-h3);
 
-      border: none;
+      border-style: solid;
+      border-color: transparent;
       width: 100%;
       position: relative;
+
+      &:focus {
+        outline: 0;
+        border-color: var(--sn-stylekit-info-color);
+        border-width: 1px;
+      }
     }
 
     #search-clear-button {

app/assets/stylesheets/_reach-sub.scss

@@ -0,0 +1,38 @@
+[data-reach-dialog-overlay] {
+  z-index: $z-index-modal;
+  background: none;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  overflow: unset;
+}
+[data-reach-dialog-overlay]::before {
+  background-color: var(--sn-stylekit-contrast-background-color);
+  content: "";
+  position: fixed;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  left: 0px;
+  opacity: 0.75;
+
+}
+
+[data-reach-dialog-content] {
+  padding: 0;
+  margin: 0;
+  position: relative;
+  overflow: unset;
+  flex-basis: 0;
+}
+
+[data-reach-dialog-content] .sk-modal-content,
+[data-reach-dialog-content] .sn-component,
+[data-reach-dialog-content] .sk-panel {
+  height: 100%;
+}
+
+[data-reach-alert-dialog-content] {
+  width: auto;
+}

app/assets/stylesheets/_sessions-modal.scss

@@ -0,0 +1,48 @@
+.sessions-modal {
+  h2, ul, p {
+    margin: 0;
+    padding: 0;
+  }
+  h2 {
+    font-size: var(--sn-stylekit-font-size-h2);
+  }
+  ul {
+    grid-column: 1 / 3;
+    display: grid;
+    gap: 16px;
+    grid-gap: 16px;
+  }
+  li {
+    display: grid;
+    grid-template-columns: 1fr max-content;
+    border-bottom: 1px solid var(--sn-stylekit-border-color);
+    padding-bottom: 16px;
+    grid-column-gap: 12px;
+    column-gap: 12px;
+  }
+  li:last-of-type {
+    border: none;
+    padding-bottom: 0;
+  }
+  li > * {
+    grid-column: 1;
+  }
+  li button {
+    grid-column: 2;
+    grid-row: 1 / span 3;
+    align-self: center;
+  }
+  .sn-component .sk-panel-content {
+    padding-bottom: 1.6rem;
+    display: grid;
+    grid-template-columns: auto 1fr;
+    align-items: center;
+    grid-gap: 8px;
+    gap: 8px;
+  }
+}
+
+.sessions-modal-refreshing {
+  grid-column: 2;
+  font-weight: normal;
+}

app/assets/stylesheets/_stylekit-sub.scss

@@ -77,6 +77,12 @@ button.sk-button {
   border: none;
 }
 
-a {
+a, .sk-a {
+  background: none;
+  border: none;
   color: var(--sn-stylekit-info-color);
 }
+
+button.sk-a {
+  min-height: 24px;
+}

app/assets/stylesheets/index.css.scss

@@ -9,3 +9,5 @@
 @import "lock-screen";
 @import "stylekit-sub";
 @import "ionicons";
+@import "reach-sub";
+@import "sessions-modal";