refs #251 Fix design of language setting

src/config/locales/en/translation.json

@@ -131,7 +131,7 @@
     },
     "language": {
       "title": "Language",
-      "display_language": "language",
+      "language_description": "Choose the language you would like to use with Whalebird.",
       "notice": "Require relaunch",
       "confirm": {
         "title": "Warning",

src/renderer/components/Preferences/Language.vue

@@ -2,11 +2,7 @@
 <div id="language">
   <h2>{{ $t('preferences.language.title') }}</h2>
   <div class="display-language">
-    <table class="language">
-      <tbody>
-        <tr>
-          <td class="title">{{ $t('preferences.language.display_language') }}</td>
-          <td class="status">
+    <p class="description">{{ $t('preferences.language.language_description') }}</p>
     <el-select v-model="displayLanguage" placeholder="style">
       <el-option
         v-for="lang in languages"
@@ -16,10 +12,6 @@
       </el-option>
     </el-select>
     <p class="notice">{{ $t('preferences.language.notice') }}</p>
-          </td>
-        </tr>
-      </tbody>
-    </table>
   </div>
 </div>
 </template>
@@ -80,27 +72,12 @@ export default {
 
 <style lang="scss" scoped>
 #language {
-  table {
-    width: 100%;
+  .description {
+    margin: 24px 0 20px;
   }
-
-  td {
-    padding: 16px 0;
-  }
-
-  .title {
-    text-align: right;
-    width: 50%;
-  }
-
-  .status {
-    width: 50%;
-    text-align: center;
-
   .notice {
     color: #c0c4cc;
     font-size: 12px;
   }
-  }
 }
 </style>