components: icon button adjustments

src/assets/main.css

@@ -65,6 +65,22 @@ select:focus {
   outline: none;
 }
 
+.select::after {
+  content: " ";
+  display: block;
+  height: 0.625em;
+  margin-top: -1.6em;
+  pointer-events: none;
+  right: 0.725em;
+  position: absolute;
+  border: 2px solid #fff;
+  border-right: 0;
+  border-top: 0;
+  width: 0.625em;
+  transform: rotate(-45deg);
+  transform-origin: center;
+}
+
 .button {
   appearance: none;
   border: 0;

src/components/DKFilterSelect.vue

@@ -39,14 +39,16 @@ export default {
 
 <template>
   <div class="dropdown-content">
-    <input
-      :name="input_name"
-      type="text"
-      v-model="user_input"
-      :style="show_dropdown ? '' : 'text-align: center'"
-      placeholder="Start typing to search..."
-      @focus="edit_selection"
-    />
+    <div class="select">
+      <input
+        :name="input_name"
+        type="text"
+        v-model="user_input"
+        :style="show_dropdown ? '' : 'text-align: center'"
+        placeholder="Start typing to search..."
+        @focus="edit_selection"
+      />
+    </div>
     <div class="dropdown-gutter" v-if="show_dropdown">
       <a
         v-for="(opt, index) in filtered_options"
@@ -61,6 +63,10 @@ export default {
 </template>
 
 <style scoped>
+div.select::after {
+  margin-top: -1.2em;
+}
+
 .dropdown-content a {
   padding: 12px 16px;
   text-decoration: none;

src/components/DKIconButton.vue

@@ -1,7 +1,6 @@
 <script>
 export default {
   props: {
-    icon: String,
     title: String,
     explain: String,
   },
@@ -11,11 +10,7 @@ export default {
 <template>
   <button class="button" style="height: 100%">
     <div class="icon-container">
-      <img
-        class="icon"
-        src="@/assets/drive-harddisk-root-symbolic.svg"
-        height="36"
-      />
+      <slot />
       <div class="text-box">
         <span style="font-size: 1rem">{{ explain }}</span>
         <h2 style="font-size: 1.5rem">{{ title }}</h2>
@@ -24,11 +19,13 @@ export default {
   </button>
 </template>
 
-<style scoped>
-.icon {
+<style>
+.icon-container img {
   margin: 0 0.5rem 0 0;
 }
+</style>
 
+<style scoped>
 .text-box {
   line-height: 0.9;
   margin-top: 0rem;

src/views/InstallView.vue

@@ -46,8 +46,12 @@ export default {
     </article>
   </div>
   <p style="display: flex; column-gap: 0.5rem">
-    <DKIconButton title="Firefox" explain="Web Browser" />
-    <DKIconButton title="BGM" explain="Mute" />
+    <DKIconButton title="Firefox" explain="Web Browser">
+      <img src="@/assets/web-browser-symbolic.svg" height="36" />
+    </DKIconButton>
+    <DKIconButton title="BGM" explain="Mute">
+      <img src="@/assets/audio-volume-muted.svg" height="36" />
+    </DKIconButton>
   </p>
 </template>
 

src/views/LocaleView.vue

@@ -41,12 +41,16 @@ export default {
     <p class="error-msg"></p>
     <form class="form-layout">
       <label for="timezone">Timezone</label>
-      <select name="timezone"></select>
+      <p class="select">
+        <select name="timezone"></select>
+      </p>
       <label for="rtc">RTC Timezone</label>
-      <select name="rtc">
-        <option value="0">UTC (Recommended)</option>
-        <option value="1">Local time (like Windows)</option>
-      </select>
+      <p class="select">
+        <select name="rtc">
+          <option value="0">UTC (Recommended)</option>
+          <option value="1">Local time (like Windows)</option>
+        </select>
+      </p>
     </form>
   </div>
 </template>
@@ -59,5 +63,6 @@ export default {
 input,
 select {
   margin-bottom: 0.5em;
+  width: 100%;
 }
 </style>

src/views/PartitionView.vue

@@ -48,7 +48,9 @@ export default {
 
     <section>
       <p style="display: flex">
-        <DKIconButton title="GParted" explain="Manange Partitions" />
+        <DKIconButton title="GParted" explain="Manange Partitions">
+          <img src="@/assets/drive-harddisk-root-symbolic.svg" height="36" />
+        </DKIconButton>
       </p>
     </section>
   </div>

src/views/SwapFileView.vue

@@ -27,11 +27,13 @@ export default {
     <form>
       <section class="form-layout">
         <label for="swap">Swapfile</label>
-        <select name="swap" v-model="type">
-          <option :value="0">Automatic</option>
-          <option :value="1">Custom</option>
-          <option :value="2">Disabled</option>
-        </select>
+        <p class="select">
+          <select name="swap" v-model="type">
+            <option :value="0">Automatic</option>
+            <option :value="1">Custom</option>
+            <option :value="2">Disabled</option>
+          </select>
+        </p>
         <div></div>
         <p class="error-msg" v-if="type === 2">
           <i>
@@ -58,13 +60,13 @@ export default {
             <p>{{ rec_size * 2 }}GiB</p>
           </div>
         </section>
-        <span style="float: right; width: 25%; margin-left: 2.4rem">
+        <span style="float: right; width: 25%; margin-left: 2rem">
           <input
             type="number"
             :max="rec_size * 2"
             min="0"
             step="0.5"
-            style="width: 70%"
+            style="width: 67%"
             v-model="size"
             required
           />
@@ -105,6 +107,7 @@ input.dk-slider {
 input,
 select {
   margin-bottom: 0.5em;
+  width: 100%;
 }
 
 .dk-slider::-webkit-slider-thumb {