CSS games

popup/popup.css

@@ -8,14 +8,15 @@ body {
 .extension-title {
   font-size: 24px;
   color: #4a4a4a;
-  margin-bottom: 20px;
+  margin-bottom: 10px;
 }
 
 .form-container {
   background-color: #fff;
   border-radius: 5px;
-  margin: 10px 0;
-  padding: 20px;
+  margin-bottom: 10px;
+  padding: 10px;
+
   box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
 }
 
@@ -38,6 +39,14 @@ body {
   margin-bottom: 10px;
 }
 
+.btn-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-left: 3px;
+  margin-right: 3px;
+}
+
 .btn {
   font-size: 14px;
   padding: 8px 16px;
@@ -46,9 +55,9 @@ body {
   border: none;
   border-radius: 4px;
   cursor: pointer;
-  margin: 5px 0;
+  margin: 5px 5px 0 5px;
   transition: background-color 0.3s;
-  width: 300px;
+  width: 200px;
 }
 
 .btn:hover {
@@ -70,7 +79,6 @@ body {
 }
 
 #controls {
-  margin-top: 30px;
   display: flex;
   flex-direction: column;
 }
@@ -78,7 +86,8 @@ body {
 .control {
   display: flex;
   justify-content: space-between;
-  margin-bottom: 10px;
+  margin-bottom: 5px;
+  margin-top: 5px;
 }
 
 .input {
@@ -103,7 +112,7 @@ body {
 .settings-text {
   font-size: 18px;
   color: #4a4a4a;
-  margin-bottom: 20px;
+  margin-bottom: 10px;
 }
 
 .settings-container {
@@ -115,7 +124,8 @@ body {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 10px;
+  margin-bottom: 3px;
+  margin-top: 3px;
 }
 
 .settings-item-text {
@@ -126,8 +136,8 @@ body {
 .switch {
   position: relative;
   display: inline-block;
-  width: 60px;
-  height: 34px;
+  width: 40px;
+  height: 24px;
 }
 
 .switch input {
@@ -150,8 +160,8 @@ body {
 .slider:before {
   position: absolute;
   content: "";
-  height: 26px;
-  width: 26px;
+  height: 16px;
+  width: 16px;
   left: 4px;
   bottom: 4px;
   background-color: white;
@@ -163,11 +173,11 @@ input:checked + .slider {
 }
 
 input:checked + .slider:before {
-  transform: translateX(26px);
+  transform: translateX(16px);
 }
 
 .slider.round {
-  border-radius: 34px;
+  border-radius: 24px;
 }
 
 .slider.round:before {

popup/popup.html

@@ -9,15 +9,15 @@
 <h1 class="extension-title">LeafLLM: an AI-powered Overleaf</h1>
 <div id="controls" class="form-container">
     <div class="control">
-        <div class="input"><span>ALT</span><span>I</span></div>
+        <div class="input" id="shortcut-Improve"><span>ALT</span><span>I</span></div>
         <div class="effect">Improve selected text.</div>
     </div>
     <div class="control">
-        <div class="input"><span>ALT</span><span>C</span></div>
+        <div class="input" id="shortcut-Complete"><span>ALT</span><span>C</span></div>
         <div class="effect">Complete selected text.</div>
     </div>
     <div class="control">
-        <div class="input"><span>ALT</span><span>A</span></div>
+        <div class="input" id="shortcut-Ask"><span>ALT</span><span>A</span></div>
         <div class="effect">Ask GPT.</div>
     </div>
 </div>
@@ -50,10 +50,13 @@
 <div id="api-token-form" class="form-container">
     <div class="api-token-text"><span>API Token is </span><span class="api-token-status">not set</span></div>
     <input class="api-token-input" name="api-token" placeholder="OpenAI API Token" type="text"/>
-      <div class="message">To get an API key, go to <a href="https://platform.openai.com/account/api-keys">https://platform.openai.com/account/api-keys</a> </div>
+    <div class="message">To get an API key, go to <a href="https://platform.openai.com/account/api-keys">https://platform.openai.com/account/api-keys</a>
+    </div>
+    <div class="btn-container">
         <button class="submit btn">Set API Token</button>
         <button class="clear btn">Reset API Token</button>
     </div>
+</div>
 <div id="message-box" class="message-box"></div>
 </body>
 </html>

popup/popup.js

@@ -27,8 +27,11 @@ async function refreshStorage() {
     if (bindingFailures.length > 0) {
       addErrorMessage(`Could not bound the following shortcuts:\n${bindingFailures}.\nYou can set it manually at <a href="chrome://extensions/shortcuts">chrome://extensions/shortcuts</a>.`)
     }
-    Object.values(settings).forEach(({ key, status }) => {
+    Object.values(settings).forEach(({ key, status, shortcut }) => {
       $(`#settings-form input[name='text-${key}']:checkbox`).prop('checked', status === 'enabled')
+      let shortcut2 = status === 'error' ? 'not set' : shortcut
+      console.log(`writing ${shortcut2} to shortcut-${key}`)
+      $(`#shortcut-${key}`).html(`<span>${shortcut2}</span>`)
     })
   })
 }
@@ -51,7 +54,6 @@ async function handleAPITokenSet(event) {
   try {
     chrome.storage.local.set({ openAIAPIKey }).then(refreshStorage)
   } catch (error) {
-    console.log(error)
     addErrorMessage('Failed to set API Token.')
     return
   }