UI adjustments to the chrome extnsion

jlucaspains · Jan 16, 2025 · 200830c · 200830c
1 parent 8148192
commit 200830c
Show file tree

Hide file tree

Showing 7 changed files with 28 additions and 10 deletions.
diff --git a/browser-extensions/images/icon-128.png b/browser-extensions/images/icon-128.png
diff --git a/browser-extensions/images/icon-48.png b/browser-extensions/images/icon-48.png
diff --git a/browser-extensions/manifest.json b/browser-extensions/manifest.json
@@ -17,5 +17,9 @@
     "host_permissions": [
         "https://sharpcooking.lpains.net/api/*",
         "https://delightful-flower-0c3edd710-383.centralus.2.azurestaticapps.net/api/*"
-    ]
+    ],
+    "icons": {
+        "48": "images/icon-48.png",
+        "128": "images/icon-128.png"
+    }
 }
diff --git a/browser-extensions/popup.html b/browser-extensions/popup.html
@@ -5,23 +5,35 @@
     <title>Sharp Cooking Extension</title>
     <style>
         .container {
-            height: 5rem;
-            width: 10rem;
             padding: 1rem;
         }
 
+        .display-text {
+            min-width: 200px;
+            font-size: 1rem;
+        }
+
+        .mb-1 {
+            margin-bottom: 1rem;
+        }
+
+        .flex {
+            display: flex;
+            justify-content: center;
+        }
+
         .result {
             font-size: 2rem;
-            margin: auto;
         }
     </style>
 </head>
 
 <body>
     <div class="container">
-        <div id="sharp-cooking-message">Trying to extract recipe. Please wait...</div>
-        <div id="sharp-cooking-code" class="result"></div>
-        <div id="qrcode"></div>
+        <div id="sharp-cooking-message" class="mb-1 display-text">Trying to extract recipe. Please wait...</div>
+        <div id="qrcode" class="mb-1 flex">
+        </div>
+        <div id="sharp-cooking-code" class="result flex"></div>
     </div>
     <script src="qrcode.js"></script>
     <script src="popup.js">

diff --git a/browser-extensions/popup.js b/browser-extensions/popup.js
@@ -9,7 +9,7 @@ chrome.runtime.onMessage.addListener(
     function (request) {
         if (request.contentScriptQuery == "parseRecipeResult") {
             document.getElementById("sharp-cooking-code").innerHTML = request.code || "";
-            document.getElementById("sharp-cooking-message").innerHTML = request.error || "";
+            document.getElementById("sharp-cooking-message").innerHTML = request.error || "Please scan the QR code with your Sharp Cooking app to import the recipe.";
 
             _ = new QRCode(document.getElementById("qrcode"), {
                 text: request.code,

diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
@@ -140,7 +140,8 @@
                     "changeLanguage": "Change Language",
                     "changeLanguageTitle": "Change recipe language",
                     "category": "Category",
-                    "selectCategory": "Select category..."
+                    "selectCategory": "Select category...",
+                    "importFromShareQRCode": "Scan QR Code"
                 },
                 "gallery": {
                     "recipeImage": "Recipe Image"

diff --git a/public/locales/pt/translation.json b/public/locales/pt/translation.json
@@ -139,7 +139,8 @@
                     "changeLanguage": "Alterar idioma",
                     "changeLanguageTitle": "Alterar idioma da receita",
                     "category": "Categoria",
-                    "selectCategory": "Selecione categoria..."
+                    "selectCategory": "Selecione categoria...",
+                    "importFromShareQRCode": "Código QR"
                 },
                 "gallery": {
                     "recipeImage": "Imagem de Receita"