Added directory-selector component

Made prefix folder selection design

public/html/settings.html

@@ -130,15 +130,22 @@
                     </div>
                 </div>
 
-                <br>
+                <br><br>
 
-                <div id="prefixloc">
+                <div class="directory-selector" id="prefix">
-                    <span>Prefix: </span>
+                    <span>Prefix</span>
                     
-                    <span id="currentprefix">empty</span>
+                    <input readonly>
 
-                    <button class="button" id="prefixdir" i18id="ChangePrefix">Change Prefix</button>&nbsp;&nbsp;&nbsp;
+                    <div>
-                    <button class="button" id="defprefix" i18id="DefPrefix">Reset</button>
+                        <button class="button hint--top hint--small" data-hint="Select dir" id="choose-location">
+                            <svg width="21px" height="21px" viewBox="0 0 21 21" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" transform="translate(3 4)"><path d="m.5 1.5v9c0 1.1045695.8954305 2 2 2h10c1.1045695 0 2-.8954305 2-2v-6.00280762c.0007656-1.05436179-.8150774-1.91816512-1.8499357-1.99451426l-.1500643-.00468356-5 .00200544-2-2h-4c-.55228475 0-1 .44771525-1 1z"/><path d="m.5 2.5h7"/></g></svg>
+                        </button>
+
+                        <button class="button hint--top hint--small" data-hint="Reset dir" id="reset-location">
+                            <svg width="15px" height="15px" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M4.85355 2.14645C5.04882 2.34171 5.04882 2.65829 4.85355 2.85355L3.70711 4H9C11.4853 4 13.5 6.01472 13.5 8.5C13.5 10.9853 11.4853 13 9 13H5C4.72386 13 4.5 12.7761 4.5 12.5C4.5 12.2239 4.72386 12 5 12H9C10.933 12 12.5 10.433 12.5 8.5C12.5 6.567 10.933 5 9 5H3.70711L4.85355 6.14645C5.04882 6.34171 5.04882 6.65829 4.85355 6.85355C4.65829 7.04882 4.34171 7.04882 4.14645 6.85355L2.14645 4.85355C1.95118 4.65829 1.95118 4.34171 2.14645 4.14645L4.14645 2.14645C4.34171 1.95118 4.65829 1.95118 4.85355 2.14645Z" fill="currentColor"/></svg>
+                        </button>
+                    </div>
                 </div>
 
                 <br><br>

src/sass/components.sass

@@ -12,6 +12,53 @@
         p, span, div
             color: map.get($theme-map, "text")
 
+        /* Directory selector
+
+        .directory-selector
+            display: inline-flex
+
+            width: calc(100% - 28px)
+            border-radius: 16px
+            padding: 8px
+
+            background-color: map.get($theme-map, "background2")
+
+            > span
+                align-self: center
+                margin: 0 12px
+
+            > input
+                width: 100%
+                height: 24px
+                align-self: center
+
+                background-color: transparent
+
+                font-size: 15px
+                color: map.get($theme-map, "text")
+
+                border: unset
+                outline: none
+                border-bottom: 1px solid map.get($theme-map, "primary")
+
+            > div
+                width: 120px
+                margin-left: 8px
+
+                button
+                    padding: 4px 8px
+
+                    &:nth-child(1) svg
+                        width: 20px
+                        height: 20px
+                
+                    &:nth-child(2) svg
+                        width: 18px
+                        height: 18px
+
+                    &:hover
+                        background-color: map.get($theme-map, "background1") !important
+
         /* Editable list of properties */
 
         .properties-list

src/ts/settings.ts

@@ -58,17 +58,17 @@ $(() => {
      * Prefix
      */
 
-    $('#prefixloc #currentprefix').text(LauncherLib.getConfig('prefix'));
+    $('#prefix input').val(constants.prefixDir.get());
 
     ipcRenderer.on('prefix-changed', () => {
-        $('#prefixloc #currentprefix').text(LauncherLib.getConfig('prefix'));
+        $('#prefix input').val(constants.prefixDir.get());
     });
 
-    $('#prefixloc #prefixdir').on('click', () => {
+    $('#prefix #choose-location').on('click', () => {
         ipcRenderer.send('prefix-select');
     });
 
-    $('#prefixloc #defprefix').on('click', () => {
+    $('#prefix #reset-location').on('click', () => {
         ipcRenderer.send('prefix-reset');
     });