feat: Better unavailable view style

Author: Robin Simonklein

src/components/StimulusDevToolsLogo.vue

@@ -0,0 +1,19 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 644 61">
+    <path
+      class="text-stimulus"
+      fill="currentColor"
+      d="M1.789 0h57.395a1.788 1.788 0 0 1 1.789 1.759V7.5c0 .503 0 .754-.098.946a.897.897 0 0 1-.392.392c-.191.097-.443.097-.945.097H46.665a7.638 7.638 0 0 0-3.334.915L15.894 25.976a7.689 7.689 0 0 1-3.344.915H1.435c-.503 0-.754 0-.945-.098a.897.897 0 0 1-.392-.392C0 26.209 0 25.958 0 25.456V17.56c0-.503 0-.754.098-.946a.896.896 0 0 1 .392-.392c.191-.098.442-.098.945-.098H12.55a7.832 7.832 0 0 1 3.344.915l3.048 1.78a3.321 3.321 0 0 0 3.049 0l3.902-2.298a1.016 1.016 0 0 0 0-1.81l-8.21-4.829a7.782 7.782 0 0 0-3.334-.915H1.435c-.503 0-.754 0-.945-.098a.897.897 0 0 1-.392-.392C0 8.285 0 8.034 0 7.532V1.789A1.79 1.79 0 0 1 1.789 0ZM48.423 16.145a7.83 7.83 0 0 0-3.344.915L17.641 33.194a7.785 7.785 0 0 1-3.333.915H1.435c-.503 0-.754 0-.945.098a.897.897 0 0 0-.392.392C0 34.79 0 35.042 0 35.544v7.896c0 .503 0 .754.098.946a.897.897 0 0 0 .392.392c.191.098.442.098.945.098H12.55a7.832 7.832 0 0 0 3.344-.915l27.438-16.135a7.778 7.778 0 0 1 3.333-.915h12.873c.502 0 .754 0 .945-.098a.898.898 0 0 0 .392-.392c.098-.192.098-.443.098-.945V17.58c0-.502 0-.754-.098-.946a.897.897 0 0 0-.392-.392c-.191-.097-.443-.097-.945-.097H48.423ZM48.423 34.12a7.834 7.834 0 0 0-3.344.914L17.641 51.16a7.64 7.64 0 0 1-3.333.915H1.435c-.503 0-.754 0-.945.098a.897.897 0 0 0-.392.392C0 52.755 0 53.006 0 53.508v5.742A1.8 1.8 0 0 0 1.789 61h57.395a1.799 1.799 0 0 0 1.789-1.78v-5.742c0-.502 0-.753-.098-.945a.897.897 0 0 0-.392-.392c-.191-.098-.443-.098-.945-.098H46.624a7.64 7.64 0 0 1-3.333-.915L35.08 46.31a1.017 1.017 0 0 1 0-1.82l3.902-2.287a3.321 3.321 0 0 1 3.049 0l3.048 1.769a7.688 7.688 0 0 0 3.344.915h11.115c.502 0 .754 0 .945-.098a.896.896 0 0 0 .392-.392c.098-.192.098-.443.098-.945v-7.896c0-.503 0-.754-.098-.946a.897.897 0 0 0-.392-.392c-.191-.098-.443-.098-.945-.098H48.423Z"
+    />
+    <path
+      class="text-black dark:text-white"
+      fill="currentColor"
+      d="M83.08 55c-3.92 0-5.88-1.68-5.88-5.04 0-.607.07-1.26.21-1.96l1.47-8.4h8.26l-.77 4.55c-.047.093-.07.303-.07.63 0 .933.513 1.4 1.54 1.4h9.1c1.213 0 1.96-.677 2.24-2.03l1.33-7.49v-.49c0-.98-.513-1.47-1.54-1.47H86.65c-3.92 0-5.88-1.68-5.88-5.04 0-.607.07-1.26.21-1.96L83.57 13c.84-4.667 3.547-7 8.12-7h16.17c3.92 0 5.88 1.68 5.88 5.04 0 .607-.07 1.26-.21 1.96l-1.4 8.05h-8.26l.77-4.2v-.28a.617.617 0 0 0 .07-.28c0-.933-.513-1.4-1.54-1.4h-9.1c-1.26 0-1.983.653-2.17 1.96l-1.33 7.21c-.047.093-.07.28-.07.56 0 .98.513 1.47 1.54 1.47h12.25c3.967 0 5.95 1.68 5.95 5.04 0 .607-.07 1.26-.21 1.96L107.37 48c-.84 4.667-3.547 7-8.12 7H83.08Zm38.537 0 6.93-39.55h-11.41l2.38-9.45h31.78l-2.45 9.45h-10.71L131.207 55h-9.59Zm25.576 0 8.61-49h9.59l-8.61 49h-9.59Zm45.992 0 5.32-30.31-13.16 19.04-6.51-19.04-5.32 30.31h-9.31l8.61-49h9.94l5.81 19.32L201.165 6h9.87l-8.61 49h-9.24Zm23.134 0c-3.92 0-5.88-1.68-5.88-5.04 0-.607.07-1.26.21-1.96l7.42-42h9.45l-6.65 37.59c-.047.093-.07.28-.07.56 0 .933.537 1.4 1.61 1.4h6.93c1.307 0 2.053-.653 2.24-1.96L238.229 6h9.45l-7.42 42c-.84 4.667-3.523 7-8.05 7h-15.89Zm29.921 0 8.61-49h9.59l-7 39.55h14.07L269.9 55h-23.66Zm35.499 0c-3.92 0-5.88-1.68-5.88-5.04 0-.607.07-1.26.21-1.96l7.42-42h9.45l-6.65 37.59c-.047.093-.07.28-.07.56 0 .933.537 1.4 1.61 1.4h6.93c1.307 0 2.053-.653 2.24-1.96L303.649 6h9.45l-7.42 42c-.84 4.667-3.523 7-8.05 7h-15.89Zm36.361 0c-3.92 0-5.88-1.68-5.88-5.04 0-.607.07-1.26.21-1.96l1.47-8.4h8.26l-.77 4.55c-.047.093-.07.303-.07.63 0 .933.513 1.4 1.54 1.4h9.1c1.213 0 1.96-.677 2.24-2.03l1.33-7.49v-.49c0-.98-.514-1.47-1.54-1.47h-12.32c-3.92 0-5.88-1.68-5.88-5.04 0-.607.07-1.26.21-1.96l2.59-14.7c.84-4.667 3.546-7 8.12-7h16.17c3.92 0 5.88 1.68 5.88 5.04 0 .607-.07 1.26-.21 1.96l-1.4 8.05h-8.26l.77-4.2v-.28a.63.63 0 0 0 .07-.28c0-.933-.514-1.4-1.54-1.4h-9.1c-1.26 0-1.984.653-2.17 1.96l-1.33 7.21c-.047.093-.07.28-.07.56 0 .98.513 1.47 1.54 1.47h12.25c3.966 0 5.95 1.68 5.95 5.04 0 .607-.07 1.26-.21 1.96L342.39 48c-.84 4.667-3.547 7-8.12 7H318.1Z"
+    />
+    <path
+      class="text-stimulus"
+      fill="currentColor"
+      d="m360.64 55 8.61-49h20.02c5.927 0 8.89 2.38 8.89 7.14 0 .84-.093 1.727-.28 2.66l-5.18 29.4c-1.12 6.533-5.133 9.8-12.04 9.8h-20.02Zm27.51-36.12c.047-.187.07-.35.07-.49v-.49c0-1.633-.933-2.45-2.8-2.45h-8.4l-5.32 30.1h8.4c2.24 0 3.57-1.12 3.99-3.36l4.06-23.31ZM398.033 55l8.61-49h27.79l-2.38 9.45h-17.71l-1.68 9.66h16.8l-2.31 8.19h-15.96l-2.17 12.25h18.62l-1.61 9.45h-28Zm42.508 0-2.59-49h10.36l1.05 32.13L461.891 6h9.66l-19.67 49h-11.34Zm36.033 0 6.93-39.55h-11.41l2.38-9.45h31.78l-2.45 9.45h-10.71L486.164 55h-9.59Zm31.876 0c-3.92 0-5.88-1.68-5.88-5.04 0-.607.07-1.26.21-1.96l6.16-35c.84-4.667 3.547-7 8.12-7h17.29c3.92 0 5.88 1.68 5.88 5.04 0 .607-.07 1.26-.21 1.96l-6.16 35c-.84 4.667-3.546 7-8.12 7h-17.29Zm21.35-37.52v-.28a.617.617 0 0 0 .07-.28c0-.98-.536-1.47-1.61-1.47h-8.4c-1.26 0-2.006.677-2.24 2.03L513 43.59c-.046.093-.07.28-.07.56 0 .933.537 1.4 1.61 1.4h8.4c1.307 0 2.054-.653 2.24-1.96l4.62-26.11ZM546.253 55c-3.92 0-5.88-1.68-5.88-5.04 0-.607.07-1.26.21-1.96l6.16-35c.84-4.667 3.547-7 8.12-7h17.29c3.92 0 5.88 1.68 5.88 5.04 0 .607-.07 1.26-.21 1.96l-6.16 35c-.84 4.667-3.546 7-8.12 7h-17.29Zm21.35-37.52v-.28a.617.617 0 0 0 .07-.28c0-.98-.536-1.47-1.61-1.47h-8.4c-1.26 0-2.006.677-2.24 2.03l-4.62 26.11c-.046.093-.07.28-.07.56 0 .933.537 1.4 1.61 1.4h8.4c1.307 0 2.054-.653 2.24-1.96l4.62-26.11ZM577.476 55l8.61-49h9.59l-7 39.55h14.07l-1.61 9.45h-23.66Zm35.219 0c-3.92 0-5.88-1.68-5.88-5.04 0-.607.07-1.26.21-1.96l1.47-8.4h8.26l-.77 4.55c-.046.093-.07.303-.07.63 0 .933.514 1.4 1.54 1.4h9.1c1.214 0 1.96-.677 2.24-2.03l1.33-7.49v-.49c0-.98-.513-1.47-1.54-1.47h-12.32c-3.92 0-5.88-1.68-5.88-5.04 0-.607.07-1.26.21-1.96l2.59-14.7c.84-4.667 3.547-7 8.12-7h16.17c3.92 0 5.88 1.68 5.88 5.04 0 .607-.07 1.26-.21 1.96l-1.4 8.05h-8.26l.77-4.2v-.28a.617.617 0 0 0 .07-.28c0-.933-.513-1.4-1.54-1.4h-9.1c-1.26 0-1.983.653-2.17 1.96l-1.33 7.21c-.046.093-.07.28-.07.56 0 .98.514 1.47 1.54 1.47h12.25c3.967 0 5.95 1.68 5.95 5.04 0 .607-.07 1.26-.21 1.96L636.985 48c-.84 4.667-3.546 7-8.12 7h-16.17Z"
+    />
+  </svg>
+</template>

src/components/StimulusLogo.vue

@@ -1,22 +1,17 @@
 <template>
-  <div class="absolute inset-0 flex flex-col items-center justify-center px-2">
+  <div class="absolute inset-0 flex flex-col items-center justify-center px-4">
     <div class="inline-flex items-center">
-      <StimulusLogo class="h-5 w-5 sm:h-8 sm:w-8" />
-      <p class="ml-2 text-xl font-bold sm:text-3xl">
-        <span>Stimulus</span>
-        <span class="ml-1 text-stimulus">DevTools</span>
-      </p>
+      <StimulusDevToolsLogo class="w-[320px] max-w-full" />
     </div>
     <div class="mt-14 text-center">
       <p class="text-muted-foreground">Stimulus is not detected on this page.</p>
       <p class="text-muted-foreground">
-        Add your application to <CodeInline code="window.Stimulus" language="javascript" /> to enable devtools.
+        Add your application to <span class="font-mono text-code-purple">window.Stimulus</span> to enable devtools.
       </p>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import StimulusLogo from '@/components/StimulusLogo.vue';
-import CodeInline from '@/components/core/code/CodeInline.vue';
+import StimulusDevToolsLogo from '@/components/StimulusDevToolsLogo.vue';
 </script>