From 3fde63ebdefa6dfe0be3d885015a74a82ae1e087 Mon Sep 17 00:00:00 2001
From: Ardis Lu <ardisglu@gmail.com>
Date: Tue, 25 Apr 2023 22:52:29 -0700
Subject: [PATCH] Improve styling

---
 demo/index.html | 101 +++++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 86 insertions(+), 15 deletions(-)

diff --git a/demo/index.html b/demo/index.html
index 217258b..ac62e5b 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -16,8 +16,8 @@
       font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto,
         "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", Helvetica, Arial,
         sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-      color: hsl(0deg 0% 15%);
-      background: hsl(0deg 0% 90%);
+      color: hsl(216deg 50% 10%);
+      background: hsl(216deg 50% 95%);
     }
 
     header {
@@ -29,18 +29,48 @@
     main {
       max-inline-size: 1080px;
       margin-inline: auto;
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
     }
 
-    label {
-      font-size: larger;
-      font-weight: bold;
+    .button-container {
+      display: flex;
+      align-items: center;
+      gap: 8px;
     }
 
-    caption {
-      font-size: larger;
-      font-weight: bold;
-      text-align: left;
-      margin-block-start: 1rem;
+    button {
+      display: flex;
+      gap: 4px;
+      inline-size: fit-content;
+      background: hsl(216deg 50% 90%);
+      padding: 8px;
+      border-radius: 8px;
+      border: 1px solid hsl(216deg 50% 75%);
+      cursor: pointer;
+      transition: filter 600ms;
+    }
+
+    button:disabled {
+      cursor: not-allowed;
+    }
+
+    button>svg {
+      block-size: 1em;
+      fill: hsl(216deg 50% 50%);
+      transition: transform 600ms;
+    }
+
+    button:not(:disabled):hover,
+    button:not(:disabled):focus-within {
+      filter: brightness(105%);
+      transition: filter 200ms;
+    }
+
+    :is(button:not(:disabled):hover, button:not(:disabled):focus-within)>svg {
+      transform: translateX(2px);
+      transition: transform 200ms;
     }
 
     table {
@@ -60,6 +90,22 @@
       text-transform: uppercase;
     }
 
+    th:first-child {
+      border-top-left-radius: 8px;
+    }
+
+    th:last-child {
+      border-top-right-radius: 8px;
+    }
+
+    tr:last-child td:first-child {
+      border-bottom-left-radius: 8px;
+    }
+
+    tr:last-child td:last-child {
+      border-bottom-right-radius: 8px;
+    }
+
     tbody tr:nth-child(odd) {
       background-color: hsl(216deg 100% 95%);
     }
@@ -68,6 +114,23 @@
       background-color: hsl(216deg 100% 90%);
     }
 
+    .CodeMirror {
+      border: 1px solid hsl(216deg 50% 75%);
+      border-radius: 8px;
+    }
+
+    .sr-only {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border-width: 0;
+    }
+
     @keyframes spin {
       100% {
         transform: rotate(360deg);
@@ -94,13 +157,13 @@
     <a href="https://github.com/ardislu/sheets-db">
       <svg role="img" aria-labelledby="github" width="24" height="24" viewBox="0 0 24 24">
         <title id="github">GitHub repository</title>
-        <path d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33c.85 0 1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2z"/>
+        <path d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33c.85 0 1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2z" />
       </svg>
     </a>
   </header>
 
   <main>
-    <label for="editor">Enter a SQL query:</label>
+    <label for="editor" class="sr-only">SQL query:</label>
     <textarea id="editor" name="editor">
 SELECT
   users.first_name
@@ -117,11 +180,19 @@ GROUP BY
 ORDER BY
   TOTAL DESC
 LIMIT 25</textarea>
-    <button id="execute" disabled>Execute SQL</button>
-    <span id="spinner"></span>
+
+    <div class="button-container">
+      <button id="execute" disabled>
+        Execute SQL
+        <svg viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <polygon points="5 3 19 12 5 21 5 3" />
+        </svg>
+      </button>
+      <span id="spinner"></span>
+    </div>
 
     <table id="output">
-      <caption>SQL query output:</caption>
+      <caption class="sr-only">SQL query output:</caption>
       <thead id="headers"></thead>
       <tbody id="body"></tbody>
     </table>
-- 
2.47.3