feat: Add quick settings menu with theme switcher and other changes (#673)

Co-authored-by: Mo Bitar <mo@standardnotes.org>
Co-authored-by: Antonella Sgarlatta <antsgar@gmail.com>

app/assets/stylesheets/_menus.scss

@@ -17,13 +17,20 @@
   max-height: calc(85vh - 90px);
 }
 
-.sn-account-menu {
+.sn-account-menu,
+.sn-quick-settings-menu {
   z-index: $z-index-footer-bar-item-panel;
   @extend .bottom-100;
   @extend .left-0;
   @extend .cursor-auto;
 }
 
+.sn-menu-border {
+  @extend .border-1;
+  @extend .border-solid;
+  @extend .border-gray-300;
+}
+
 .sn-account-menu-headline {
   @extend .sk-h2;
   @extend .sk-bold;

app/assets/stylesheets/_sn.scss

@@ -384,3 +384,41 @@
 .cursor-auto {
   cursor: auto;
 }
+
+.top-1\/2 {
+  top: 50%;
+}
+
+.left-1\/2 {
+  left: 50%;
+}
+
+.-translate-1\/2 {
+  transform: translate(-50%, -50%);
+}
+
+.pseudo-radio-btn {
+  @extend .w-4;
+  @extend .h-4;
+  @extend .border-2;
+  @extend .border-solid;
+  @extend .border-info;
+  @extend .rounded-full;
+  @extend .relative;
+}
+
+.pseudo-radio-btn--checked::after {
+  content: '';
+  @extend .bg-info;
+  @extend .absolute;
+  @extend .top-1\/2;
+  @extend .left-1\/2;
+  @extend .-translate-1\/2;
+  @extend .w-2;
+  @extend .h-2;
+  @extend .rounded-full;
+}
+
+.focus\:bg-info-backdrop:focus {
+  background-color: var(--sn-stylekit-info-backdrop-color);
+}