Quality of life changes (#47)

- Use less brittle current img2img image retrieval
- Updating styling to use variables for different themes
- Change lock to a locked lock...

javascript/aspectRatioController.js

@@ -1,28 +1,29 @@
 // constants
 const _OFF = "Off";  // Don't use the functionality at all
-const _LOCK = '🔓';  // Aspect ratio is "locked"
+const _LOCK = '🔒';  // Aspect ratio is "locked"
 const _IMAGE = '🖼️'; // Aspect ratio is "locked" to that of the image
 
 const _MAXIMUM_DIMENSION = 2048;
 const _MINIMUM_DIMENSION = 64;
 
-const _TAB_STRING_TO_IMAGE_ID_MAP = {
+const _IMAGE_INPUT_CONTAINER_IDS = [
-    'img2img': 'img2img_image',
+    'img2img_image',
-    'sketch': 'img2img_sketch',
+    'img2img_sketch',
-    'inpaint': 'img2maskimg',
+    'img2maskimg',
-    'inpaint sketch': 'inpaint_sketch',
+    'inpaint_sketch',
-    'inpaint upload': 'img_inpaint_base',
+    'img_inpaint_base',
-}
+];
-
-const _IMAGE_INPUT_CONTAINER_IDS = Array.from(Object.values(_TAB_STRING_TO_IMAGE_ID_MAP));
 
 const getSelectedImage2ImageTab = () => {
-    return document.querySelector('#img2img_settings > div > div > button.selected').textContent.toLowerCase().trim();
+    const selectedButton = gradioApp().getElementById('mode_img2img').querySelector('button.selected');
+    const allButtons = gradioApp().getElementById('mode_img2img').querySelectorAll('button');
+    const selectedIndex = Array.prototype.indexOf.call(allButtons, selectedButton);
+    return selectedIndex;
 }
 
 const getCurrentImage = () => {
-    const currentTab = getSelectedImage2ImageTab();
+    const currentTabIndex = getSelectedImage2ImageTab();
-    const currentTabImageId = _TAB_STRING_TO_IMAGE_ID_MAP[currentTab];
+    const currentTabImageId = _IMAGE_INPUT_CONTAINER_IDS[currentTabIndex];
     return document.getElementById(currentTabImageId).querySelector('img');
 }
 
@@ -104,15 +105,12 @@ class OptionPickingController {
     }
 
     pickerChanged(controller) {
-        const originalBGC = this.switchButton.style.backgroundColor;
         return () => {
             const picked = this.getCurrentOption();
             if (_IMAGE === picked) {
                 this.switchButton.disabled = true;
-                this.switchButton.style.backgroundColor = 'black';
             } else {
                 this.switchButton.removeAttribute('disabled')
-                this.switchButton.style.backgroundColor = originalBGC;
             }
 
             controller.setAspectRatio(picked);
@@ -368,7 +366,8 @@ class AspectRatioController {
         });
     }
 
-    static observeStartup(key, page, defaultOptions, postSetup = (_) => {}) {
+    static observeStartup(key, page, defaultOptions, postSetup = (_) => {
+    }) {
         let observer = new MutationObserver(() => {
             const widthContainer = gradioApp().querySelector(`#${page}_width`);
             const heightContainer = gradioApp().querySelector(`#${page}_height`);

style.css

@@ -1,4 +1,4 @@
-#txt2img_size_toolbox, #img2img_size_toolbox{
+#txt2img_size_toolbox, #img2img_size_toolbox {
     min-width: unset !important;
     gap: 0;
 }
@@ -10,17 +10,19 @@
 }
 
 #txt2img_ratio select, #img2img_ratio select {
-    font-family: 'Source Sans Pro', 'ui-sans-serif', 'system-ui', sans-serif;
+    background: var(--background-fill-primary);
+    border: 1px solid var(--block-border-color);
+    color: var(--block-label-text-color);
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    background-image: none;
     tab-size: 4;
-    color: white;
-    font-weight: 400;
     font-size: 14px;
     line-height: 1.4;
     box-sizing: border-box;
     position: relative;
-    border: 1px solid #374151;
     border-radius: 8px;
-    background: #1f2937;
     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     padding-right: 1px;
     margin-bottom: 10px;