Style and behavior for flash messages

Author: rossta

app/javascript/controllers/flash.js

@@ -0,0 +1,14 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+  connect() {
+    setTimeout(() => {
+      this.dismiss();
+    }, 5000);
+  }
+
+  dismiss() {
+    this.element.style.opacity = 0;
+    setTimeout(() => this.element.remove(), 1000);
+  }
+}

app/javascript/controllers/index.js

@@ -7,6 +7,7 @@ import { application } from './application';
 import CodeExample from './code-example';
 import ClipboardCopy from './clipboard-copy';
 import Darkmode from './darkmode';
+import Flash from './flash';
 
 import PwaInstallation from './pwa/installation';
 import PwaWebPushSubscription from './pwa/web-push-subscription';
@@ -25,6 +26,7 @@ application.register('analytics', AnalyticsCustomEvent);
 application.register('code-example', CodeExample);
 application.register('clipboard-copy', ClipboardCopy);
 application.register('darkmode', Darkmode);
+application.register('flash', Flash);
 
 application.register('pwa-installation', PwaInstallation);
 application.register('pwa-web-push-subscription', PwaWebPushSubscription);

app/javascript/controllers/snippets/preview.ts

@@ -13,9 +13,9 @@ export default class extends Controller<HTMLFormElement> {
   connect(): void {
     console.log('Connect!');
 
-    this.element.addEventListener('turbo:submit-start', this.disable);
+    // this.element.addEventListener('turbo:submit-start', this.disable);
 
-    this.element.addEventListener('turbo:submit-end', this.enable);
+    // this.element.addEventListener('turbo:submit-end', this.enable);
   }
 
   disable = (event): void => {

app/javascript/controllers/snippets/screenshot.ts

@@ -6,10 +6,10 @@ import debug from '../../utils/debug';
 const console = debug('app:javascript:controllers:snippets:screenshot');
 
 export default class extends Controller<HTMLFormElement> {
-  static targets = ['snippet'];
+  static targets = ['snippet', 'submitButton'];
 
-  declare readonly hasSnippetTarget: boolean;
   declare readonly snippetTarget: HTMLInputElement;
+  declare readonly submitButtonTarget: HTMLInputElement;
 
   connect(): void {
     console.log('Connect!');
@@ -18,6 +18,10 @@ export default class extends Controller<HTMLFormElement> {
       'turbo:before-fetch-request',
       this.prepareScreenshot,
     );
+
+    // submit immediately
+    // this.submitButtonTarget.click();
+    // this.submitButtonTarget.disabled = true;
   }
 
   prepareScreenshot = async (event) => {

app/javascript/css/application.css

@@ -37,3 +37,4 @@
 @import './components/color-scheme.scss';
 @import './components/table.css';
 @import './components/snippet.css';
+@import './components/flash.css';

app/javascript/css/components/flash.css

@@ -0,0 +1,35 @@
+.flash__container {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  z-index: 1000;
+  width: 100%;
+  max-width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  padding: var(--space-s);
+  gap: var(--space-xs);
+  width: fit-content;
+
+  & .flash__message {
+    padding: var(--space-xs) var(--space-s);
+    border-radius: 4px;
+    transition: opacity 750ms ease-out;
+  }
+
+  & .flash__alert {
+    background-color: var(--joy-background-error);
+    border: 1px solid var(--joy-border-error);
+  }
+
+  & .flash__notice {
+    background-color: var(--joy-background-success);
+    border: 1px solid var(--joy-border-success);
+  }
+
+  & .flash__warning {
+    background-color: var(--joy-background-warn);
+    border: 1px solid var(--joy-border-warn);
+  }
+}

app/javascript/css/config/theme.css

@@ -49,11 +49,15 @@
   --joy-background-mask: var(--color-darken);
   --joy-background-reset: white;
 
-  --joy-background-success: var(--dracula-green-800);
-  --joy-background-error: var(--dracula-red-900);
+  --joy-background-inline-code: ghostwhite;
+
+  --joy-background-success: var(--dracula-green-400);
+  --joy-background-error: var(--dracula-red-400);
   --joy-background-warn: var(--dracula-orange-800);
 
-  --joy-background-inline-code: ghostwhite;
+  --joy-border-success: var(--dracula-green-900);
+  --joy-border-error: var(--dracula-red-900);
+  --joy-border-warn: var(--dracula-orange-900);
 
   --joy-border-quiet: var(--joy-color-100);
   --joy-border-subtle: var(--joy-color-200);
@@ -95,11 +99,15 @@
   --joy-background-mask: var(--color-lighten);
   --joy-background-reset: var(--color-slate-950);
 
-  --joy-background-success: var(--dracula-green-400);
+  --joy-background-inline-code: var(--dracula-black);
+
+  /* --joy-background-success: var(--dracula-green-400);
   --joy-background-error: var(--dracula-red-500);
   --joy-background-warn: var(--dracula-orange-500);
 
-  --joy-background-inline-code: var(--dracula-black);
+  --joy-border-success: var(--dracula-green-900);
+  --joy-border-error: var(--dracula-red-950);
+  --joy-border-warn: var(--dracula-orange-950); */
 
   --joy-border-quiet: var(--joy-color-900);
   --joy-border-subtle: var(--joy-color-800);