Make Settings accessible

src/renderer/components/Settings.vue

@@ -3,10 +3,10 @@
   <el-header class="header">
     <el-row>
       <el-col :span="23">
-        <h3>{{ $t('settings.title') }}</h3>
+        <h1>{{ $t('settings.title') }}</h1>
       </el-col>
       <el-col :span="1">
-        <el-button type="text" icon="el-icon-close" @click="close" class="close-button"></el-button>
+        <el-button type="text" icon="el-icon-close" @click="close" class="close-button" role="button"></el-button>
       </el-col>
     </el-row>
   </el-header>
@@ -72,10 +72,11 @@ export default {
   .header {
     text-align: center;
     border-bottom: 1px solid var(--theme-border-color);
+    user-select: none;
   }
 
   .close-button {
-    font-size: 24px;
+    font-size: 28px;
   }
 
   .menu {
@@ -83,31 +84,16 @@ export default {
     padding-left: 24px;
 
     .el-menu {
-      background-color: var(--theme-background-color);
       border-right: solid 1px var(--theme-border-color);
     }
 
     .setting-menu /deep/ {
       height: 100%;
+      user-select: none;
 
       .icon {
         margin-right: 9px;
       }
-
-      .el-menu-item {
-        transition: none;
-        -webkit-transition: none;
-
-        .icon {
-          color: var(--theme-secondary-color);
-        }
-      }
-
-      .is-active {
-        .icon {
-          color: #409eff;
-        }
-      }
     }
   }
 }

src/renderer/components/Settings/General.vue

@@ -1,20 +1,22 @@
 <template>
 <div id="general">
-  <div class="toot section">
+  <h2>{{ $t('settings.general.title') }}</h2>
+  <el-form class="toot section" label-width="250px" label-position="right" size="medium">
     <h3>{{ $t('settings.general.toot.title') }}</h3>
-    <p class="description">{{ $t('settings.general.toot.visibility.description') }}</p>
-    <el-select v-model="tootVisibility" placeholder="visibility">
-      <el-option
-        v-for="v in visibilities"
-        :key="v.value"
-        :label="$t(v.name)"
-        :value="v.value">
-      </el-option>
-    </el-select>
-    <p class="description">{{ $t('settings.general.toot.sensitive.description') }}</p>
-    <el-switch v-model="tootSensitive">
-    </el-switch>
-  </div>
+    <el-form-item for="visibility" :label="$t('settings.general.toot.visibility.description')">
+      <el-select id="visibility" v-model="tootVisibility" placeholder="visibility">
+        <el-option
+          v-for="v in visibilities"
+          :key="v.value"
+          :label="$t(v.name)"
+          :value="v.value">
+        </el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item for="sensitive" :label="$t('settings.general.toot.sensitive.description')">
+      <el-switch id="sensitive" v-model="tootSensitive"></el-switch>
+    </el-form-item>
+  </el-form>
 </div>
 </template>
 
@@ -58,12 +60,12 @@ export default {
 
 <style lang="scss" scoped>
 #general {
-  .description {
-    margin: 32px 0 20px;
-  }
-
-  .section {
+  .section /deep/ {
     margin-bottom: 40px;
+
+    .el-form-item__label {
+      color: var(--theme-primary-color);
+    }
   }
 }
 </style>

src/renderer/components/Settings/Timeline.vue

@@ -1,37 +1,20 @@
 <template>
 <div id="timeline">
-  <div class="unread-notification section">
+  <h2>{{ $t('settings.timeline.title') }}</h2>
+  <el-form class="unread-notification section" size="medium" label-position="right" label-width="250px">
     <h3>{{ $t('settings.timeline.unread_notification.title') }}</h3>
     <p class="description">{{ $t('settings.timeline.unread_notification.description') }}</p>
-    <table class="table">
-      <tbody>
-        <tr>
-          <td class="title">
-            {{ $t('settings.timeline.unread_notification.direct') }}
-          </td>
-          <td class="status">
-            <el-switch v-model="direct" />
-          </td>
-        </tr>
-        <tr>
-          <td class="title">
-            {{ $t('settings.timeline.unread_notification.local') }}
-          </td>
-          <td class="status">
-            <el-switch v-model="local" />
-          </td>
-        </tr>
-        <tr>
-          <td class="title">
-            {{ $t('settings.timeline.unread_notification.public') }}
-          </td>
-          <td class="status">
-            <el-switch v-model="public" />
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
+
+    <el-form-item for="direct" :label="$t('settings.timeline.unread_notification.direct')">
+      <el-switch v-model="direct" id="direct" />
+    </el-form-item>
+    <el-form-item for="local" :label="$t('settings.timeline.unread_notification.local')">
+      <el-switch v-model="local" id="local" />
+    </el-form-item>
+    <el-form-item for="public" :label="$t('settings.timeline.unread_notification.public')">
+      <el-switch v-model="public" id="public" />
+    </el-form-item>
+  </el-form>
 </div>
 </template>
 
@@ -82,23 +65,11 @@ export default {
     margin: 32px 0 20px;
   }
 
-  .section {
+  .section /deep/ {
     margin-bottom: 40px;
-  }
 
-  .table {
-    tr {
-      height: 3rem;
-    }
-
-    .title {
-      width: 200px;
-      text-align: right;
-    }
-
-    .status {
-      width: 200px;
-      text-align: center;
+    .el-form-item__label {
+      color: var(--theme-primary-color);
     }
   }
 }