chore(refactor): modern UI

pages/settings.vue

@@ -1,173 +1,147 @@
 <template>
   <div class="page">
-    <pw-section class="green" :label="$t('account')" ref="account">
-      <ul>
-        <li>
-          <div v-if="fb.currentUser">
-            <button class="icon">
-              <img
-                v-if="fb.currentUser.photoURL"
-                :src="fb.currentUser.photoURL"
-                class="rounded-full material-icons"
-              />
-              <i v-else class="material-icons">account_circle</i>
-              <span>
-                {{ fb.currentUser.displayName || $t("nothing_found") }}
-              </span>
-            </button>
-            <br />
-            <button class="icon">
-              <i class="material-icons">email</i>
-              <span>
-                {{ fb.currentUser.email || $t("nothing_found") }}
-              </span>
-            </button>
-            <br />
-            <logout />
-            <p v-for="setting in fb.currentSettings" :key="setting.id">
-              <pw-toggle
-                :key="setting.name"
-                :on="setting.value"
-                @change="toggleSettings(setting.name, setting.value)"
-              >
-                {{ $t(setting.name) + " " + $t("sync") }}
-                {{ setting.value ? $t("enabled") : $t("disabled") }}
-              </pw-toggle>
-            </p>
-            <p v-if="fb.currentSettings.length !== 3">
-              <button class="" @click="initSettings">
-                <i class="material-icons">sync</i>
-                <span>{{ $t("turn_on") + " " + $t("sync") }}</span>
-              </button>
-            </p>
-          </div>
-          <div v-else>
-            <label>{{ $t("login_with") }}</label>
-            <p>
-              <login />
-            </p>
-          </div>
-        </li>
-      </ul>
-    </pw-section>
-
-    <pw-section class="teal" :label="$t('theme')" ref="theme">
-      <ul>
-        <color-mode-picker />
-      </ul>
-      <ul>
-        <accent-mode-picker />
-      </ul>
-      <ul>
-        <li>
-          <span>
-            <pw-toggle
-              :on="settings.FRAME_COLORS_ENABLED"
-              @change="toggleSetting('FRAME_COLORS_ENABLED')"
-            >
-              {{ $t("multi_color") }}
-              {{ settings.FRAME_COLORS_ENABLED ? $t("enabled") : $t("disabled") }}
-            </pw-toggle>
-          </span>
-        </li>
-      </ul>
-      <ul>
-        <li>
-          <span>
-            <pw-toggle
-              :on="settings.SCROLL_INTO_ENABLED"
-              @change="toggleSetting('SCROLL_INTO_ENABLED')"
-            >
-              {{ $t("scrollInto_use_toggle") }}
-              {{ settings.SCROLL_INTO_ENABLED ? $t("enabled") : $t("disabled") }}
-            </pw-toggle>
-          </span>
-        </li>
-      </ul>
-    </pw-section>
-
-    <pw-section class="purple" :label="$t('extensions')" ref="extensions">
-      <ul>
-        <li>
-          <div class="row-wrapper">
-            <pw-toggle
-              :on="settings.EXTENSIONS_ENABLED"
-              @change="toggleSetting('EXTENSIONS_ENABLED')"
-            >
-              {{ $t("extensions_use_toggle") }}
-            </pw-toggle>
-          </div>
-        </li>
-      </ul>
-      <ul class="info">
-        <li v-if="extensionVersion != null">
-          <p>
-            {{ $t("extension_version") }}: v{{ extensionVersion.major }}.{{
-              extensionVersion.minor
-            }}
-          </p>
-        </li>
-        <li v-else>
-          <p>{{ $t("extension_version") }}: {{ $t("extension_ver_not_reported") }}</p>
-        </li>
-      </ul>
-    </pw-section>
-
-    <pw-section class="blue" :label="$t('proxy')" ref="proxy">
-      <ul>
-        <li>
-          <div class="row-wrapper">
+    <pw-section class="green" :label="$t('account')" ref="account" no-legend>
+      <div class="flex flex-col">
+        <label>{{ $t("account") }}</label>
+        <div v-if="fb.currentUser">
+          <button class="icon">
+            <img
+              v-if="fb.currentUser.photoURL"
+              :src="fb.currentUser.photoURL"
+              class="rounded-full material-icons"
+            />
+            <i v-else class="material-icons">account_circle</i>
             <span>
-              <pw-toggle :on="settings.PROXY_ENABLED" @change="toggleSetting('PROXY_ENABLED')">
-                {{ $t("proxy") }}
-                {{ settings.PROXY_ENABLED ? $t("enabled") : $t("disabled") }}
-              </pw-toggle>
+              {{ fb.currentUser.displayName || $t("nothing_found") }}
             </span>
-            <a
-              href="https://github.com/hoppscotch/hoppscotch/wiki/Proxy"
-              target="_blank"
-              rel="noopener"
+          </button>
+          <br />
+          <button class="icon">
+            <i class="material-icons">email</i>
+            <span>
+              {{ fb.currentUser.email || $t("nothing_found") }}
+            </span>
+          </button>
+          <br />
+          <logout />
+          <p v-for="setting in fb.currentSettings" :key="setting.id">
+            <pw-toggle
+              :key="setting.name"
+              :on="setting.value"
+              @change="toggleSettings(setting.name, setting.value)"
             >
-              <button class="icon" v-tooltip="$t('wiki')">
-                <i class="material-icons">help_outline</i>
-              </button>
-            </a>
-          </div>
-        </li>
-      </ul>
-      <ul>
-        <li>
-          <div class="row-wrapper">
-            <label for="url">{{ $t("url") }}</label>
-            <button class="icon" @click="resetProxy" v-tooltip.bottom="$t('reset_default')">
-              <i class="material-icons">clear_all</i>
-            </button>
-          </div>
-          <input
-            id="url"
-            type="url"
-            v-model="settings.PROXY_URL"
-            :disabled="!settings.PROXY_ENABLED"
-          />
-        </li>
-      </ul>
-      <ul class="info">
-        <li>
-          <p>
-            {{ $t("postwoman_official_proxy_hosting") }}
-            <br />
-            {{ $t("read_the") }}
-            <a
-              class="link"
-              href="https://apollosoftware.xyz/legal/postwoman"
-              target="_blank"
-              rel="noopener"
-            >
-              {{ $t("apollosw_privacy_policy") }} </a
-            >.
+              {{ $t(setting.name) + " " + $t("sync") }}
+              {{ setting.value ? $t("enabled") : $t("disabled") }}
+            </pw-toggle>
           </p>
-        </li>
-      </ul>
+          <p v-if="fb.currentSettings.length !== 3">
+            <button class="" @click="initSettings">
+              <i class="material-icons">sync</i>
+              <span>{{ $t("turn_on") + " " + $t("sync") }}</span>
+            </button>
+          </p>
+        </div>
+        <div v-else>
+          <label>{{ $t("login_with") }}</label>
+          <p>
+            <login />
+          </p>
+        </div>
+      </div>
+    </pw-section>
+
+    <pw-section class="teal" :label="$t('theme')" ref="theme" no-legend>
+      <div class="flex flex-col">
+        <label>{{ $t("theme") }}</label>
+        <color-mode-picker />
+        <accent-mode-picker />
+        <span>
+          <pw-toggle
+            :on="settings.FRAME_COLORS_ENABLED"
+            @change="toggleSetting('FRAME_COLORS_ENABLED')"
+          >
+            {{ $t("multi_color") }}
+            {{ settings.FRAME_COLORS_ENABLED ? $t("enabled") : $t("disabled") }}
+          </pw-toggle>
+        </span>
+        <span>
+          <pw-toggle
+            :on="settings.SCROLL_INTO_ENABLED"
+            @change="toggleSetting('SCROLL_INTO_ENABLED')"
+          >
+            {{ $t("scrollInto_use_toggle") }}
+            {{ settings.SCROLL_INTO_ENABLED ? $t("enabled") : $t("disabled") }}
+          </pw-toggle>
+        </span>
+      </div>
+    </pw-section>
+
+    <pw-section class="purple" :label="$t('extensions')" ref="extensions" no-legend>
+      <div class="flex flex-col">
+        <label>{{ $t("extensions") }}</label>
+        <div class="row-wrapper">
+          <pw-toggle
+            :on="settings.EXTENSIONS_ENABLED"
+            @change="toggleSetting('EXTENSIONS_ENABLED')"
+          >
+            {{ $t("extensions_use_toggle") }}
+          </pw-toggle>
+        </div>
+        <p v-if="extensionVersion != null" class="info">
+          {{ $t("extension_version") }}: v{{ extensionVersion.major }}.{{ extensionVersion.minor }}
+        </p>
+        <p v-else class="info">
+          {{ $t("extension_version") }}: {{ $t("extension_ver_not_reported") }}
+        </p>
+      </div>
+    </pw-section>
+
+    <pw-section class="blue" :label="$t('proxy')" ref="proxy" no-legend>
+      <div class="flex flex-col">
+        <label>{{ $t("proxy") }}</label>
+        <div class="row-wrapper">
+          <span>
+            <pw-toggle :on="settings.PROXY_ENABLED" @change="toggleSetting('PROXY_ENABLED')">
+              {{ $t("proxy") }}
+              {{ settings.PROXY_ENABLED ? $t("enabled") : $t("disabled") }}
+            </pw-toggle>
+          </span>
+          <a
+            href="https://github.com/hoppscotch/hoppscotch/wiki/Proxy"
+            target="_blank"
+            rel="noopener"
+          >
+            <button class="icon" v-tooltip="$t('wiki')">
+              <i class="material-icons">help_outline</i>
+            </button>
+          </a>
+        </div>
+        <div class="row-wrapper">
+          <label for="url">{{ $t("url") }}</label>
+          <button class="icon" @click="resetProxy" v-tooltip.bottom="$t('reset_default')">
+            <i class="material-icons">clear_all</i>
+          </button>
+        </div>
+        <input
+          id="url"
+          type="url"
+          v-model="settings.PROXY_URL"
+          :disabled="!settings.PROXY_ENABLED"
+        />
+        <p class="info">
+          {{ $t("postwoman_official_proxy_hosting") }}
+          <br />
+          {{ $t("read_the") }}
+          <a
+            class="link"
+            href="https://apollosoftware.xyz/legal/postwoman"
+            target="_blank"
+            rel="noopener"
+          >
+            {{ $t("apollosw_privacy_policy") }} </a
+          >.
+        </p>
+      </div>
       <!--
       PROXY SETTINGS URL AND KEY
       --------------
@@ -185,33 +159,28 @@
       -->
     </pw-section>
 
-    <pw-section class="red" :label="$t('experiments')" ref="experiments">
-      <ul class="info">
-        <li>
-          <p>
-            {{ $t("experiments_notice") }}
-            <a
-              class="link"
-              href="https://github.com/hoppscotch/hoppscotch/issues/new/choose"
-              target="_blank"
-              rel="noopener noreferrer"
-              >{{ $t("contact_us") }}</a
-            >.
-          </p>
-        </li>
-      </ul>
-      <ul>
-        <li>
-          <div class="row-wrapper">
-            <pw-toggle
-              :on="settings.EXPERIMENTAL_URL_BAR_ENABLED"
-              @change="toggleSetting('EXPERIMENTAL_URL_BAR_ENABLED')"
-            >
-              {{ $t("use_experimental_url_bar") }}
-            </pw-toggle>
-          </div>
-        </li>
-      </ul>
+    <pw-section class="red" :label="$t('experiments')" ref="experiments" no-legend>
+      <div class="flex flex-col">
+        <label>{{ $t("experiments") }}</label>
+        <p class="info">
+          {{ $t("experiments_notice") }}
+          <a
+            class="link"
+            href="https://github.com/hoppscotch/hoppscotch/issues/new/choose"
+            target="_blank"
+            rel="noopener noreferrer"
+            >{{ $t("contact_us") }}</a
+          >.
+        </p>
+        <div class="row-wrapper">
+          <pw-toggle
+            :on="settings.EXPERIMENTAL_URL_BAR_ENABLED"
+            @change="toggleSetting('EXPERIMENTAL_URL_BAR_ENABLED')"
+          >
+            {{ $t("use_experimental_url_bar") }}
+          </pw-toggle>
+        </div>
+      </div>
     </pw-section>
   </div>
 </template>