feat: highlight login button when rate limited

ubiquity · Jan 30, 2024 · e5e8199 · e5e8199
1 parent 509c109
commit e5e8199
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 12 deletions.
diff --git a/src/home/ready-toolbar.ts b/src/home/ready-toolbar.ts
@@ -1,5 +1,6 @@
+const toolbar = document.getElementById("toolbar");
 export async function readyToolbar() {
-  const toolbar = document.getElementById("toolbar");
   if (!toolbar) throw new Error("toolbar not found");
   toolbar.classList.add("ready");
 }
+export { toolbar };
diff --git a/src/home/rendering/display-error-modal.ts b/src/home/rendering/display-error-modal.ts
@@ -1,5 +1,6 @@
 import { preview, previewBodyInner, titleAnchor, titleHeader } from "../rendering/render-preview-modal";
-
+import { toolbar } from "../ready-toolbar";
+import { gitHubLoginButton } from "./render-github-login-button";
 export function displayPopupMessage(header: string, message: string, url?: string) {
   titleHeader.textContent = header;
   if (url) {
@@ -9,4 +10,13 @@ export function displayPopupMessage(header: string, message: string, url?: strin
 
   preview.classList.add("active");
   document.body.classList.add("preview-active");
+
+  if (toolbar) {
+    toolbar.scrollTo({
+      left: toolbar.scrollWidth,
+      behavior: "smooth",
+    });
+
+    gitHubLoginButton?.classList.add("highlight");
+  }
 }
diff --git a/src/home/rendering/render-github-login-button.ts b/src/home/rendering/render-github-login-button.ts
@@ -1,4 +1,5 @@
 import { createClient } from "@supabase/supabase-js";
+import { toolbar } from "../ready-toolbar";
 
 const supabaseUrl = process.env.SUPABASE_URL;
 if (!supabaseUrl) throw new Error("SUPABASE_URL not found");
@@ -11,20 +12,20 @@ export function getSupabase() {
   return supabase;
 }
 
-async function gitHubLoginButton() {
+async function gitHubLoginButtonHandler() {
   const { error } = await supabase.auth.signInWithOAuth({ provider: "github" });
   if (error) {
     console.error("Error logging in:", error);
   }
 }
-
+const gitHubLoginButton = document.createElement("button");
 export function renderGitHubLoginButton() {
-  const button = document.createElement("button");
-  button.id = "github-login-button";
-  button.innerHTML = "<span>Login</span><span class='full'>&nbsp;With GitHub</span>";
-  button.addEventListener("click", gitHubLoginButton);
-  const toolbar = document.getElementById("toolbar");
-  if (!toolbar) throw new Error("toolbar not found");
-  toolbar.appendChild(button);
-  toolbar.classList.add("ready");
+  gitHubLoginButton.id = "github-login-button";
+  gitHubLoginButton.innerHTML = "<span>Login</span><span class='full'>&nbsp;With GitHub</span>";
+  gitHubLoginButton.addEventListener("click", gitHubLoginButtonHandler);
+  if (toolbar) {
+    toolbar.appendChild(gitHubLoginButton);
+    toolbar.classList.add("ready");
+  }
 }
+export { gitHubLoginButton };
diff --git a/static/style/inverted-style.css b/static/style/inverted-style.css
@@ -475,6 +475,9 @@
     vertical-align: middle;
     height: 20px;
   }
+  .preview-body-inner{
+    line-height: 1.25
+  }
   .preview-body-inner > :last-child {
     margin-bottom: 0;
   }
@@ -593,6 +596,7 @@
   button#github-login-button {
     margin-left: 0;
   }
+
   p.organization-name::after {
     content: "/";
   }

diff --git a/static/style/special.css b/static/style/special.css
@@ -14,6 +14,11 @@
   #toolbar.ready {
     background-color: var(--dark-background-half);
   }
+  body.preview-active button#github-login-button.highlight {
+    /* background-color: #008080; */
+    /* border-width: 0; */
+    animation: highlight-dark-mode 1s ease-in-out infinite alternate;
+  }
 }
 
 @media (prefers-color-scheme: light) {
@@ -27,4 +32,29 @@
   #toolbar.ready {
     background-color: var(--light-background-half);
   }
+  body.preview-active button#github-login-button.highlight {
+
+
+    animation: highlight-light-mode 1s ease-in-out infinite alternate;
+  }
+}
+
+@keyframes highlight-dark-mode {
+  from {
+    background-color: #808080;
+    box-shadow: 0 0 24px 0px #808080;
+  }
+  to {
+    background-color: #000;
+  }
+}
+@keyframes highlight-light-mode {
+  from {
+    background-color: #bfbfbf;
+
+  }
+  to {
+    background-color: #fff;
+    box-shadow: 0 0 24px 12px #fff;
+  }
 }
diff --git a/static/style/style.css b/static/style/style.css
@@ -475,6 +475,9 @@
     vertical-align: middle;
     height: 20px;
   }
+  .preview-body-inner{
+    line-height: 1.25
+  }
   .preview-body-inner > :last-child {
     margin-bottom: 0;
   }
@@ -593,6 +596,7 @@
   button#github-login-button {
     margin-left: 0;
   }
+
   p.organization-name::after {
     content: "/";
   }