Vanilla CSS Status Indicator (#123)

* Rewrote tailwind css as inline vanilla css

* Explicitly set font-size, tab-size, line-height

* Add box-sizing + adjust width/height

This will subtract border and padding from the element width/height
making it consistent across different resolutions.

* Link to original version

* Add to changelog

Co-authored-by: Sridhar Ratnakumar <srid@srid.ca>

CHANGELOG.md

@@ -7,6 +7,7 @@ This releases brings a significant rewrite of Ema. If you choose to upgrade your
 - GHC 9.0 support
 - Better handling of URL anchors (#83; #87)
 - `routeUrl` uses `UrlDirect` by default. Use `routeUrlWith` if you want to change that.
+- Ema status indicator now works independently (requires no Tailwind)
 - Multisite rewrite (Ema is mostly rewritten)
   - Add the notion of route `Prism_` (first-class values), along with a `IsRoute` class to define them.
     - Optional generic deriving of route prisms, so you do not have to hand-write them.

src/Ema/Server.hs

@@ -438,45 +438,127 @@ wsClientJS =
         </script>
     |]
 
+-- The inline CSS here is roughly analogous to the ones generated by Tailwind.
+-- See the original version based on Tailwind`: https://gist.github.com/srid/2471813953a6df9b24909b9bb1d3cd2b
 wsClientHtml :: LByteString
 wsClientHtml =
   encodeUtf8
     [text|
-      <div class="absolute top-0 left-0 p-2" style="display: none;" id="ema-indicator">
+      <div 
+        style="
+          display: none;
+          position: absolute;
+          top: 0px;
+          left: 0px;
+          padding: 0.5rem;
+          font-size: 12px;
+          line-height: 18px;
+          tab-size: 4;
+          text-size-adjust: 100%;
+        " 
+        id="ema-indicator">
         <div
-          class="
-            flex overflow-hidden items-center p-2 text-xs gap-2
-            h-8 border-2 border-gray-200 bg-white rounded-full shadow-lg
-            transition-[width,height] duration-500 ease-in-out w-8 hover:w-full
+          style="
+            display: flex;
+            overflow: hidden;
+            font-size: 0.75rem;
+            align-items: center;
+            gap: 0.5rem;
+            padding: 0.5rem;
+            height: 2rem;
+            width: 2rem;
+            box-sizing: border-box;
+            border-style: solid;
+            border-width: 2px;
+            border-color: rgb(229 231 235);
+            background-color: rgb(255 255 255);
+            border-radius: 9999px;
+            box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+            transition-property: width, height;
+            transition-duration: 500ms;
+          	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
           "
+          onMouseOver="this.style.width='100%'"
+          onMouseOut="this.style.width='2rem'"
           id="ema-status"
           title="Ema Status"
         >
           <div
             hidden
-            class="flex-none w-3 h-3 bg-green-600 rounded-full"
+            style="
+              flex: none;
+              width: 0.75rem;
+              height: 0.75rem;
+              background-color: rgb(22 163 74);
+              border-radius: 9999px;
+            "
             id="ema-connected"
           ></div>
           <div
             hidden
-            class="flex-none w-3 h-3 rounded-full animate-spin bg-gradient-to-r from-blue-300 to-blue-600"
+            style="
+              flex: none;
+              width: 0.75rem;
+              height: 0.75rem;
+              border-radius: 9999px;
+            	animation: spin 1s linear infinite;
+              background-image: linear-gradient(to right, var(--tw-gradient-stops));
+              --tw-gradient-from: #93c5fd;
+              --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+              --tw-gradient-to: #2563eb;
+            "
             id="ema-reloading"
-          ></div>
+          ><style>
+            @keyframes spin {
+              from {
+                transform: rotate(0deg);
+              }
+              to {
+                transform: rotate(360deg);
+              }
+            }
+          </style></div>
           <div
             hidden
-            class="flex-none w-3 h-3 bg-yellow-500 rounded-full"
+            style="
+              flex: none;
+              width: 0.75rem;
+              height: 0.75rem;
+              border-radius: 9999px;
+            	background-color: rgb(234 179 8);
+            "
             id="ema-connecting"
           >
             <div
-              class="flex-none w-3 h-3 bg-yellow-500 rounded-full animate-ping"
-            ></div>
+              style="
+                flex: none;
+                width: 0.75rem;
+                height: 0.75rem;
+                border-radius: 9999px;
+                background-color: rgb(234 179 8);
+                animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
+              "
+            ><style>
+              @keyframes ping {
+                75%, 100% {
+                  transform: scale(2);
+                  opacity: 0;
+                }
+              }
+          </style></div>
           </div>
           <div
             hidden
-            class="flex-none w-3 h-3 bg-red-500 rounded-full"
+            style="
+              flex: none;
+              width: 0.75rem;
+              height: 0.75rem;
+              border-radius: 9999px;
+              background-color: rgb(239 68 68);
+            "
             id="ema-disconnected"
           ></div>
-          <p class="whitespace-nowrap" id="ema-message"></p>
+          <p style="white-space: nowrap;" id="ema-message"></p>
         </div>
       </div>
   |]