feat: implement UI for logging out (#638)

* feat: implement UI for logging out

* feat: use old style dialogs for logout confirmation

* feat: implement manage sessions

* feat: implement session logout success dialog

* feat: use snjs alert for revoking sessions confirmation

* fix: make OtherSessionsLogout easier to read

app/assets/javascripts/components/ConfirmationDialog.tsx

@@ -0,0 +1,35 @@
+import { ComponentChildren, FunctionComponent } from 'preact';
+import {
+  AlertDialog,
+  AlertDialogDescription,
+  AlertDialogLabel,
+} from '@reach/alert-dialog';
+import { useRef } from 'preact/hooks';
+
+export const ConfirmationDialog: FunctionComponent<{
+  title: string | ComponentChildren;
+}> = ({ title, children }) => {
+  const ldRef = useRef<HTMLButtonElement>();
+
+  return (
+    <AlertDialog leastDestructiveRef={ldRef}>
+      {/* sn-component is focusable by default, but doesn't stretch to child width
+          resulting in a badly focused dialog. Utility classes are not available
+          at the sn-component level, only below it. tabIndex -1 disables focus
+          and enables it on the child component */}
+      <div tabIndex={-1} className="sn-component">
+        <div
+          tabIndex={0}
+          className="max-w-89 bg-default rounded shadow-overlay focus:padded-ring-info px-9 py-9 flex flex-col items-center"
+        >
+          <AlertDialogLabel>{title}</AlertDialogLabel>
+          <div className="min-h-2" />
+
+          <AlertDialogDescription className="flex flex-col items-center">
+            {children}
+          </AlertDialogDescription>
+        </div>
+      </div>
+    </AlertDialog>
+  );
+};