scale the font and button sizes better

Author: zubyj

src/content-script/update-description.ts

@@ -3,7 +3,8 @@ chrome.runtime.onMessage.addListener((request) => {
 
         // testing some stuff
 
-        let descriptionContainer = document.querySelectorAll('div.px-5.pt-4')
+        let descriptionContainer = document.getElementById('descriptionContainer');
+        // remove the <pre> element from the page
         console.log(descriptionContainer)
         // end testing
 

src/popup/popup.css

@@ -127,6 +127,10 @@ a:hover {
     height: 30px;
 }
 
+.settings-btn {
+    width: 250px;
+}
+
 #settings-menu {
     text-align: center;
 }

src/popup/popup.ts

@@ -175,11 +175,16 @@ async function main(): Promise<void> {
             fontSizeElement.style.setProperty('--dynamic-font-size', `${data.fontSize}px`);
 
             if (parseInt(data.fontSize) >= 18) {
-                let width = (parseInt(data.fontSize) * 20 + 180);
-                document.body.style.width = `${width}px`;
+                let width = (parseInt(data.fontSize) * 24 + 200);
+                document.body.style.width = `${width + 20}px`;
                 fixCodeContainer.style.maxWidth = `${width}px`;
                 analyzeCodeResponse.style.maxWidth = `${width}px`;
             }
+
+            let sizes = document.getElementsByClassName('material-button');
+            for (let i = 0; i < sizes.length; i++) {
+                (sizes[i] as HTMLElement).style.width = `${data.fontSize * 13}px`;
+            }
         }
     });
 

src/popup/settings.html

@@ -14,15 +14,15 @@ <h2 class="title">Settings</h2>
             <image src="../assets/images/home-icon.png" alt="Home" />
         </a>
     </div>
-    <label for="font-size-select">Font Size</label>
-    <select name="fontSize" id="font-size-select" class="material-button select">
+    <label for="font-size-select">Display Size</label>
+    <select name="fontSize" id="font-size-select" class="material-button select settings-btn">
         <option value="12">Extra Small (XS)</option>
         <option value="14">Small (S)</option>
         <option value="16">Medium (M)</option>
         <option value="18">Large (L)</option>
         <option value="22">Extra Large (XL)</option>
     </select>
-    <button id="hide-tags-btn" class="material-button">
+    <button id="hide-tags-btn" class="material-button settings-btn">
         <span id="toggle-show-tags-text"> </span> Show Company Tags
     </button>
 </body>