From 78605f149253fa897910b388eac19c9275520558 Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Fri, 21 Sep 2018 00:16:10 +0900
Subject: [PATCH 1/8] refs #251 Move appearance settings to separate page

---
 src/config/locales/en/translation.json        |  36 +--
 src/constants/displayStyle.js                 |   6 +-
 src/constants/theme.js                        |   4 +-
 src/constants/timeFormat.js                   |   4 +-
 src/main/preferences.js                       |  12 +-
 src/renderer/components/Preferences.vue       |  13 +-
 .../components/Preferences/Appearance.vue     | 150 ++++++++++
 .../Preferences/Appearance/Toot.vue           | 274 ++++++++++++++++++
 .../components/Preferences/General.vue        |  99 +------
 src/renderer/router/index.js                  |   5 +
 src/renderer/store/App.js                     |   8 +-
 src/renderer/store/Preferences.js             |   4 +-
 src/renderer/store/Preferences/Appearance.js  | 105 +++++++
 src/renderer/store/Preferences/General.js     |  80 +----
 14 files changed, 586 insertions(+), 214 deletions(-)
 create mode 100644 src/renderer/components/Preferences/Appearance.vue
 create mode 100644 src/renderer/components/Preferences/Appearance/Toot.vue
 create mode 100644 src/renderer/store/Preferences/Appearance.js

diff --git a/src/config/locales/en/translation.json b/src/config/locales/en/translation.json
index 8889e63bfe..87464df3c4 100644
--- a/src/config/locales/en/translation.json
+++ b/src/config/locales/en/translation.json
@@ -74,35 +74,37 @@
     "title": "Preferences",
     "general": {
       "title": "General",
-      "appearance": "Appearance",
-      "theme_color": "Theme color:",
+      "toot": "Toot",
+      "visibility": {
+        "title": "Default visibility:",
+        "public": "Public",
+        "unlisted": "Unlisted",
+        "private": "Private",
+        "direct": "Direct"
+      },
+      "sounds": "Sounds",
+      "fav_rb_sound": "Favorite and Boost:",
+      "toot_sound": "Toot:"
+    },
+    "appearance": {
+      "title": "Appearance",
+      "theme_color": "Theme color",
       "theme": {
         "light": "Light",
         "dark": "Dark"
       },
-      "font_size": "Font size:",
+      "font_size": "Font size",
       "display_style": {
-        "title": "Display style:",
+        "title": "Display style of username",
         "display_name_and_username": "Display name and username",
         "display_name": "Display name",
         "username": "Username"
       },
       "time_format": {
-        "title": "Time format:",
+        "title": "Time format",
         "absolute": "Absolute",
         "relative": "Relative"
-      },
-      "toot": "Toot",
-      "visibility": {
-        "title": "Default visibility:",
-        "public": "Public",
-        "unlisted": "Unlisted",
-        "private": "Private",
-        "direct": "Direct"
-      },
-      "sounds": "Sounds",
-      "fav_rb_sound": "Favorite and Boost:",
-      "toot_sound": "Toot:"
+      }
     },
     "notification": {
       "title": "Notification",
diff --git a/src/constants/displayStyle.js b/src/constants/displayStyle.js
index f1aae951d2..450de0ae5b 100644
--- a/src/constants/displayStyle.js
+++ b/src/constants/displayStyle.js
@@ -1,14 +1,14 @@
 export default {
   DisplayNameAndUsername: {
-    name: 'preferences.general.display_style.display_name_and_username',
+    name: 'preferences.appearance.display_style.display_name_and_username',
     value: 0
   },
   DisplayName: {
-    name: 'preferences.general.display_style.display_name',
+    name: 'preferences.appearance.display_style.display_name',
     value: 1
   },
   Username: {
-    name: 'preferences.general.display_style.username',
+    name: 'preferences.appearance.display_style.username',
     value: 2
   }
 }
diff --git a/src/constants/theme.js b/src/constants/theme.js
index eeaa341510..d11ded68ec 100644
--- a/src/constants/theme.js
+++ b/src/constants/theme.js
@@ -1,10 +1,10 @@
 export default {
   Light: {
-    name: 'preferences.general.theme.light',
+    name: 'preferences.appearance.theme.light',
     key: 'light'
   },
   Dark: {
-    name: 'preferences.general.theme.dark',
+    name: 'preferences.appearance.theme.dark',
     key: 'dark'
   }
 }
diff --git a/src/constants/timeFormat.js b/src/constants/timeFormat.js
index f00407665d..17e0fae687 100644
--- a/src/constants/timeFormat.js
+++ b/src/constants/timeFormat.js
@@ -1,10 +1,10 @@
 export default {
   Absolute: {
-    name: 'preferences.general.time_format.absolute',
+    name: 'preferences.appearance.time_format.absolute',
     value: 0
   },
   Relative: {
-    name: 'preferences.general.time_format.relative',
+    name: 'preferences.appearance.time_format.relative',
     value: 1
   }
 }
diff --git a/src/main/preferences.js b/src/main/preferences.js
index d19e4045bf..737b036f75 100644
--- a/src/main/preferences.js
+++ b/src/main/preferences.js
@@ -12,11 +12,7 @@ const Base = {
       fav_rb: true,
       toot: true
     },
-    theme: Theme.Light.key,
-    fontSize: 14,
-    displayNameStyle: DisplayStyle.DisplayNameAndUsername.value,
-    tootVisibility: Visibility.Public.value,
-    timeFormat: TimeFormat.Absolute.value
+    tootVisibility: Visibility.Public.value
   },
   state: {
     collapse: false
@@ -31,6 +27,12 @@ const Base = {
       favourite: true,
       follow: true
     }
+  },
+  appearance: {
+    theme: Theme.Light.key,
+    fontSize: 14,
+    displayNameStyle: DisplayStyle.DisplayNameAndUsername.value,
+    timeFormat: TimeFormat.Absolute.value
   }
 }
 
diff --git a/src/renderer/components/Preferences.vue b/src/renderer/components/Preferences.vue
index b5af2abb24..86d053b65c 100644
--- a/src/renderer/components/Preferences.vue
+++ b/src/renderer/components/Preferences.vue
@@ -23,15 +23,19 @@
             <icon name="cog" class="icon" scale="1.3"></icon>
             <span>{{ $t('preferences.general.title') }}</span>
           </el-menu-item>
-          <el-menu-item index="2" :route="{path: '/preferences/notification'}" @click="notification">
+          <el-menu-item index="2" :route="{path: '/preferences/appearance'}" @click="appearance">
+            <icon name="palette" class="icon" scale="1.3"></icon>
+            <span>{{ $t('preferences.appearance.title') }}</span>
+          </el-menu-item>
+          <el-menu-item index="3" :route="{path: '/preferences/notification'}" @click="notification">
             <icon name="bell" class="icon" scale="1.3"></icon>
             <span>{{ $t('preferences.notification.title') }}</span>
           </el-menu-item>
-          <el-menu-item index="3" :route="{path: '/preferences/account'}" @click="account">
+          <el-menu-item index="4" :route="{path: '/preferences/account'}" @click="account">
             <icon name="user" class="icon" scale="1.3"></icon>
             <span>{{ $t('preferences.account.title') }}</span>
           </el-menu-item>
-          <el-menu-item index="4" :route="{path: '/preferences/language'}" @click="language">
+          <el-menu-item index="5" :route="{path: '/preferences/language'}" @click="language">
             <icon name="language" class="icon" scale="1.3"></icon>
             <span>{{ $t('preferences.language.title') }}</span>
           </el-menu-item>
@@ -72,6 +76,9 @@ export default {
     },
     language () {
       this.$router.push('/preferences/language')
+    },
+    appearance () {
+      this.$router.push('/preferences/appearance')
     }
   }
 }
diff --git a/src/renderer/components/Preferences/Appearance.vue b/src/renderer/components/Preferences/Appearance.vue
new file mode 100644
index 0000000000..5a20f0c0c6
--- /dev/null
+++ b/src/renderer/components/Preferences/Appearance.vue
@@ -0,0 +1,150 @@
+<template>
+<div id="appearance">
+  <h2>{{ $t('preferences.appearance.title') }}</h2>
+  <div class="theme section">
+    <div class="left">
+      <h4>{{ $t('preferences.appearance.theme_color') }}</h4>
+      <span class="status">
+        <el-select v-model="theme" placeholder="theme">
+          <el-option
+            v-for="t in themes"
+            :key="t.key"
+            :label="$t(t.name)"
+            :value="t.key">
+          </el-option>
+        </el-select>
+      </span>
+    </div>
+    <div class="right">
+      <Toot
+        :displayNameStyle="displayNameStyle"
+        :timeFormat="timeFormat"
+        ></Toot>
+    </div>
+  </div>
+  <div class="font section">
+    <h4>{{ $t('preferences.appearance.font_size') }}</h4>
+    <span class="status">
+      <el-input-number :value="fontSize" :min="9" :max="18" @change="updateFontSize"></el-input-number>
+    </span>
+  </div>
+  <div class="display-style section">
+    <h4>{{ $t('preferences.appearance.display_style.title') }}</h4>
+    <span class="status">
+      <el-select v-model="displayNameStyle" placeholder="style">
+        <el-option
+          v-for="style in nameStyles"
+          :key="style.value"
+          :label="$t(style.name)"
+          :value="style.value">
+        </el-option>
+      </el-select>
+    </span>
+  </div>
+  <div class="time-format section">
+    <h4>{{ $t('preferences.appearance.time_format.title') }}</h4>
+    <span class="status">
+      <el-select v-model="timeFormat" placeholder="format">
+        <el-option
+          v-for="format in timeFormats"
+          :key="format.value"
+          :label="$t(format.name)"
+          :value="format.value">
+        </el-option>
+      </el-select>
+    </span>
+  </div>
+</div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import Toot from './Appearance/Toot'
+import DisplayStyle from '~/src/constants/displayStyle'
+import Theme from '~/src/constants/theme'
+import TimeFormat from '~/src/constants/timeFormat'
+
+export default {
+  name: 'appearance',
+  components: {
+    Toot
+  },
+  data () {
+    return {
+      nameStyles: [
+        DisplayStyle.DisplayNameAndUsername,
+        DisplayStyle.DisplayName,
+        DisplayStyle.Username
+      ],
+      themes: [
+        Theme.Light,
+        Theme.Dark
+      ],
+      timeFormats: [
+        TimeFormat.Absolute,
+        TimeFormat.Relative
+      ]
+    }
+  },
+  computed: {
+    ...mapState('Preferences/Appearance', {
+      fontSize: state => state.appearance.fontSize
+    }),
+    theme: {
+      get () {
+        return this.$store.state.Preferences.Appearance.appearance.theme
+      },
+      set (value) {
+        this.$store.dispatch('Preferences/Appearance/updateTheme', value)
+      }
+    },
+    displayNameStyle: {
+      get () {
+        return this.$store.state.Preferences.Appearance.appearance.displayNameStyle
+      },
+      set (value) {
+        this.$store.dispatch('Preferences/Appearance/updateDisplayNameStyle', value)
+      }
+    },
+    timeFormat: {
+      get () {
+        return this.$store.state.Preferences.Appearance.appearance.timeFormat
+      },
+      set (value) {
+        this.$store.dispatch('Preferences/Appearance/updateTimeFormat', value)
+      }
+    }
+  },
+  created () {
+    this.$store.dispatch('Preferences/Appearance/loadAppearance')
+  },
+  methods: {
+    updateFontSize (value) {
+      this.$store.dispatch('Preferences/Appearance/updateFontSize', value)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+#appearance {
+  color: var(--theme-secondary-color);
+  box-sizing: border-box;
+
+  .theme {
+    display: flex;
+    align-items: flex-start;
+
+    .left {
+    }
+
+    .right {
+      margin-left: 40px;
+    }
+  }
+
+  .section {
+    margin-bottom: 48px;
+  }
+}
+</style>
diff --git a/src/renderer/components/Preferences/Appearance/Toot.vue b/src/renderer/components/Preferences/Appearance/Toot.vue
new file mode 100644
index 0000000000..a117792fb5
--- /dev/null
+++ b/src/renderer/components/Preferences/Appearance/Toot.vue
@@ -0,0 +1,274 @@
+<template>
+<div
+  class="status"
+  tabIndex="0"
+  ref="status"
+  >
+  <div class="toot">
+    <div class="icon">
+      <img :src="sampleIcon" />
+    </div>
+    <div class="detail">
+      <div class="toot-header">
+        <div class="user">
+          <span class="display-name">{{ username }}</span>
+          <span class="acct">{{ accountName }}</span>
+        </div>
+        <div class="timestamp">
+          {{ timestamp }}
+        </div>
+        <div class="clearfix"></div>
+      </div>
+      <div class="content-wrapper">
+        <div class="content" v-html="status"></div>
+      </div>
+      <div class="tool-box">
+        <el-button type="text" class="reply" :title="$t('cards.toot.reply')">
+          <icon name="reply" scale="0.9"></icon>
+        </el-button>
+        <el-button type="text" class="reblog" :title="$t('cards.toot.reblog')">
+          <icon name="retweet" scale="0.9"></icon>
+        </el-button>
+        <span class="count">
+          {{ reblogsCount }}
+        </span>
+        <el-button type="text" class="favourite" :title="$t('cards.toot.fav')">
+          <icon name="star" scale="0.9"></icon>
+        </el-button>
+        <span class="count">
+          {{ favouritesCount }}
+        </span>
+        <popper trigger="click" :options="{placement: 'bottom'}" ref="popper">
+          <div class="popper toot-menu">
+            <ul class="menu-list">
+              <li role="button">
+                {{ $t('cards.toot.view_toot_detail') }}
+              </li>
+              <li role="button">
+                {{ $t('cards.toot.open_in_browser') }}
+              </li>
+              <li role="button">
+                {{ $t('cards.toot.copy_link_to_toot') }}
+              </li>
+              <li role="button" class="separate">
+                {{ $t('cards.toot.delete') }}
+              </li>
+            </ul>
+          </div>
+          <el-button slot="reference" type="text" :title="$t('cards.toot.detail')">
+            <icon name="ellipsis-h" scale="0.9"></icon>
+          </el-button>
+        </popper>
+      </div>
+      <div class="application">
+        {{ $t('cards.toot.via', { application: 'Whalebird' }) }}
+      </div>
+    </div>
+    <div class="clearfix"></div>
+  </div>
+</div>
+</template>
+
+<script>
+import moment from 'moment'
+import DisplayStyle from '~/src/constants/displayStyle'
+import TimeFormat from '~/src/constants/timeFormat'
+
+export default {
+  name: 'toot',
+  props: {
+    displayNameStyle: {
+      type: Number,
+      default: DisplayStyle.DisplayNameAndUsername.value
+    },
+    timeFormat: {
+      type: Number,
+      default: TimeFormat.Absolute.value
+    }
+  },
+  computed: {
+    sampleIcon () {
+      return 'https://github.com/h3poteto/whalebird-desktop/raw/master/build/icons/256x256.png'
+    },
+    username () {
+      switch (this.displayNameStyle) {
+        case DisplayStyle.DisplayNameAndUsername.value:
+        case DisplayStyle.DisplayName.value:
+          return 'Whalebird'
+        default:
+          return 'whalebird@mastodon.social'
+      }
+    },
+    accountName () {
+      switch (this.displayNameStyle) {
+        case DisplayStyle.DisplayNameAndUsername.value:
+          return 'whalebird@mastodon.social'
+        default:
+          return ''
+      }
+    },
+    timestamp () {
+      switch (this.timeFormat) {
+        case TimeFormat.Absolute.value:
+          return '2018-08-12 20:35:41'
+        case TimeFormat.Relative.value:
+          return moment('2018-08-12 20:35:41').fromNow()
+      }
+    },
+    status () {
+      return '<p>Sample status</p>'
+    },
+    reblogsCount () {
+      return 1
+    },
+    favouritesCount () {
+      return 5
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.toot {
+  padding: 8px 0 0 16px;
+
+  .icon {
+    float: left;
+
+    img {
+      width: 36px;
+      height: 36px;
+      border-radius: 4px;
+      cursor: pointer;
+    }
+  }
+
+  .detail {
+    margin: 0 8px 0 8px;
+    float: left;
+    width: calc(100% - 52px);
+
+    .toot-header {
+      .user {
+        float: left;
+        font-size: var(--base-font-size);
+        cursor: pointer;
+        white-space: nowrap;
+        max-width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+
+        .display-name {
+          font-weight: 800;
+          color: var(--theme-primary-color);
+        }
+
+        .acct {
+          font-weight: normal;
+          color: var(--theme-secondary-color);
+        }
+      }
+
+      .timestamp {
+        font-size: var(--base-font-size);
+        text-align: right;
+        width: 100%;
+        color: #909399;
+        flota: right;
+      }
+    }
+
+    .content-wrapper /deep/ {
+      font-size: var(--base-font-size);
+      color: var(--theme-primary-color);
+
+      .content {
+        margin: 4px 0 8px;
+        word-wrap: break-word;
+      }
+
+      .emojione {
+        width: 20px;
+        height: 20px;
+      }
+    }
+
+    .tool-box {
+      float: left;
+
+      button {
+        margin: 0 8px;
+        padding: 0;
+        color: #909399;
+      }
+
+      .count {
+        font-size: 0.8em;
+        color: #909399;
+        margin: 0 0 4px -8px;
+      }
+
+      .toot-menu {
+        padding: 2px 0;
+        border-color: #909399;
+
+        .menu-list {
+          padding: 0;
+          margin: 4px 0;
+          font-size: 0.9rem;
+          list-style-type: none;
+          line-height: 32px;
+          text-align: left;
+          color: #303133;
+
+          li {
+            box-sizing: border-box;
+            padding: 0 32px 0 16px;
+
+            &:hover {
+              background-color: #409eff;
+              color: #fff;
+              cursor: pointer;
+            }
+
+            &.separate {
+              border-top: 1px solid var(--theme-border-color);
+              padding-top: 4px;
+              margin-top: 2px;
+            }
+          }
+        }
+      }
+    }
+
+    .application {
+      float: right;
+      color: #909399;
+    }
+
+    .reply:hover,
+    .reblog:hover,
+    .favourite:hover {
+      color: #409eff;
+    }
+  }
+
+  .action-pop-over {
+    color: #303133;
+  }
+}
+
+.status {
+  background-color: var(--theme-background-color);
+  border: 1px solid var(--theme-border-color);
+  border-radius: 4px;
+  padding-bottom: 4px;
+  box-shadow: 0 0 12px var(--theme-border-color);
+}
+
+.status:focus {
+  background-color: var(--theme-selected-background-color);
+  outline: 0;
+}
+
+</style>
diff --git a/src/renderer/components/Preferences/General.vue b/src/renderer/components/Preferences/General.vue
index 02c332db24..4f5a56b021 100644
--- a/src/renderer/components/Preferences/General.vue
+++ b/src/renderer/components/Preferences/General.vue
@@ -1,51 +1,6 @@
 <template>
 <div id="general" v-loading="loading">
   <h2>{{ $t('preferences.general.title') }}</h2>
-  <div class="appearance">
-    <h3>{{ $t('preferences.general.appearance') }}</h3>
-    <table class="theme">
-      <tbody>
-        <tr>
-          <td class="title">{{ $t('preferences.general.theme_color') }}</td>
-          <td class="status">
-            <el-radio v-for="t in themes" :key="t.key" v-model="theme" :label="t.key">{{ $t(t.name) }}</el-radio>
-          </td>
-        </tr>
-        <tr>
-          <td class="title">{{ $t('preferences.general.font_size') }}</td>
-          <td class="status">
-            <el-input-number :value="fontSize" :min="9" :max="18" @change="updateFontSize"></el-input-number>
-          </td>
-        </tr>
-        <tr>
-          <td class="title">{{ $t('preferences.general.display_style.title') }}</td>
-          <td class="status">
-            <el-select v-model="displayNameStyle" placeholder="style">
-              <el-option
-                v-for="style in nameStyles"
-                :key="style.value"
-                :label="$t(style.name)"
-                :value="style.value">
-              </el-option>
-            </el-select>
-          </td>
-        </tr>
-        <tr>
-          <td class="title">{{ $t('preferences.general.time_format.title') }}</td>
-          <td class="status">
-            <el-select v-model="timeFormat" placeholder="format">
-              <el-option
-                v-for="format in timeFormats"
-                :key="format.value"
-                :label="$t(format.name)"
-                :value="format.value">
-              </el-option>
-            </el-select>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
   <div class="toot">
     <h3>{{ $t('preferences.general.toot') }}</h3>
     <table>
@@ -97,9 +52,6 @@
 <script>
 import { mapState } from 'vuex'
 import Visibility from '~/src/constants/visibility'
-import DisplayStyle from '~/src/constants/displayStyle'
-import Theme from '~/src/constants/theme'
-import TimeFormat from '~/src/constants/timeFormat'
 
 export default {
   name: 'general',
@@ -109,51 +61,13 @@ export default {
         Visibility.Public,
         Visibility.Unlisted,
         Visibility.Private
-      ],
-      nameStyles: [
-        DisplayStyle.DisplayNameAndUsername,
-        DisplayStyle.DisplayName,
-        DisplayStyle.Username
-      ],
-      themes: [
-        Theme.Light,
-        Theme.Dark
-      ],
-      timeFormats: [
-        TimeFormat.Absolute,
-        TimeFormat.Relative
       ]
     }
   },
   computed: {
     ...mapState({
-      loading: state => state.Preferences.General.loading,
-      fontSize: state => state.Preferences.General.general.fontSize
+      loading: state => state.Preferences.General.loading
     }),
-    theme: {
-      get () {
-        return this.$store.state.Preferences.General.general.theme
-      },
-      set (value) {
-        this.$store.dispatch('Preferences/General/updateTheme', value)
-      }
-    },
-    displayNameStyle: {
-      get () {
-        return this.$store.state.Preferences.General.general.displayNameStyle
-      },
-      set (value) {
-        this.$store.dispatch('Preferences/General/updateDisplayNameStyle', value)
-      }
-    },
-    timeFormat: {
-      get () {
-        return this.$store.state.Preferences.General.general.timeFormat
-      },
-      set (value) {
-        this.$store.dispatch('Preferences/General/updateTimeFormat', value)
-      }
-    },
     tootVisibility: {
       get () {
         return this.$store.state.Preferences.General.general.tootVisibility
@@ -191,11 +105,6 @@ export default {
           type: 'error'
         })
       })
-  },
-  methods: {
-    updateFontSize (value) {
-      this.$store.dispatch('Preferences/General/updateFontSize', value)
-    }
   }
 }
 </script>
@@ -220,12 +129,6 @@ export default {
     text-align: center;
   }
 
-  .appearance {
-    color: var(--theme-secondary-color);
-    width: 100%;
-    box-sizing: border-box;
-  }
-
   .toot {
     color: var(--theme-secondary-color);
     width: 100%;
diff --git a/src/renderer/router/index.js b/src/renderer/router/index.js
index 53e77f61b9..97dac3a2a2 100644
--- a/src/renderer/router/index.js
+++ b/src/renderer/router/index.js
@@ -26,6 +26,11 @@ export default new Router({
           name: 'general',
           component: require('@/components/Preferences/General').default
         },
+        {
+          path: 'appearance',
+          name: 'appearance',
+          component: require('@/components/Preferences/Appearance').default
+        },
         {
           path: 'notification',
           name: 'notification',
diff --git a/src/renderer/store/App.js b/src/renderer/store/App.js
index 543701066d..ea185167d4 100644
--- a/src/renderer/store/App.js
+++ b/src/renderer/store/App.js
@@ -74,12 +74,12 @@ const App = {
         })
         ipcRenderer.once('response-get-preferences', (event, conf) => {
           ipcRenderer.removeAllListeners('error-get-preferences')
-          commit('updateTheme', conf.general.theme)
-          commit('updateDisplayNameStyle', conf.general.displayNameStyle)
-          commit('updateFontSize', conf.general.fontSize)
+          commit('updateTheme', conf.appearance.theme)
+          commit('updateDisplayNameStyle', conf.appearance.displayNameStyle)
+          commit('updateFontSize', conf.appearance.fontSize)
           commit('updateTootVisibility', conf.general.tootVisibility)
           commit('updateNotify', conf.notification.notify)
-          commit('updateTimeFormat', conf.general.timeFormat)
+          commit('updateTimeFormat', conf.appearance.timeFormat)
           commit('updateLanguage', conf.language.language)
           resolve(conf)
         })
diff --git a/src/renderer/store/Preferences.js b/src/renderer/store/Preferences.js
index 3632eb0436..a523cbaa34 100644
--- a/src/renderer/store/Preferences.js
+++ b/src/renderer/store/Preferences.js
@@ -2,6 +2,7 @@ import General from './Preferences/General'
 import Account from './Preferences/Account'
 import Language from './Preferences/Language'
 import Notification from './Preferences/Notification'
+import Appearance from './Preferences/Appearance'
 
 const Preferences = {
   namespaced: true,
@@ -9,7 +10,8 @@ const Preferences = {
     General,
     Account,
     Language,
-    Notification
+    Notification,
+    Appearance
   },
   state: {
     defaultActive: '1'
diff --git a/src/renderer/store/Preferences/Appearance.js b/src/renderer/store/Preferences/Appearance.js
new file mode 100644
index 0000000000..8106bdf85c
--- /dev/null
+++ b/src/renderer/store/Preferences/Appearance.js
@@ -0,0 +1,105 @@
+import { ipcRenderer } from 'electron'
+import DisplayStyle from '~/src/constants/displayStyle'
+import Theme from '~/src/constants/theme'
+import TimeFormat from '~/src/constants/timeFormat'
+
+export default {
+  namespaced: true,
+  state: {
+    appearance: {
+      theme: Theme.Light.key,
+      fontSize: 14,
+      displayNameStyle: DisplayStyle.DisplayNameAndUsername.value,
+      timeFormat: TimeFormat.Absolute.value
+    }
+  },
+  mutations: {
+    updateAppearance (state, conf) {
+      state.appearance = conf
+    }
+  },
+  actions: {
+    loadAppearance ({ commit }) {
+      return new Promise((resolve, reject) => {
+        ipcRenderer.send('get-preferences')
+        ipcRenderer.once('error-get-preferences', (event, err) => {
+          ipcRenderer.removeAllListeners('response-get-preferences')
+          reject(err)
+        })
+        ipcRenderer.once('response-get-preferences', (event, conf) => {
+          ipcRenderer.removeAllListeners('error-get-preferences')
+          commit('updateAppearance', conf.appearance)
+          resolve(conf)
+        })
+      })
+    },
+    updateTheme ({ dispatch, commit, state }, theme) {
+      const newAppearance = Object.assign({}, state.appearance, {
+        theme: theme
+      })
+      const config = {
+        appearance: newAppearance
+      }
+      ipcRenderer.send('update-preferences', config)
+      ipcRenderer.once('error-update-preferences', (event, err) => {
+        ipcRenderer.removeAllListeners('response-update-preferences')
+      })
+      ipcRenderer.once('response-update-preferences', (event, conf) => {
+        ipcRenderer.removeAllListeners('error-update-preferences')
+        commit('updateAppearance', conf.appearance)
+        dispatch('App/loadPreferences', null, { root: true })
+      })
+    },
+    updateFontSize ({ dispatch, commit, state }, fontSize) {
+      const newAppearance = Object.assign({}, state.appearance, {
+        fontSize: fontSize
+      })
+      const config = {
+        appearance: newAppearance
+      }
+      ipcRenderer.send('update-preferences', config)
+      ipcRenderer.once('error-update-preferences', (event, err) => {
+        ipcRenderer.removeAllListeners('response-update-preferences')
+      })
+      ipcRenderer.once('response-update-preferences', (event, conf) => {
+        ipcRenderer.removeAllListeners('error-update-preferences')
+        commit('updateAppearance', conf.appearance)
+        dispatch('App/loadPreferences', null, { root: true })
+      })
+    },
+    updateDisplayNameStyle ({ dispatch, commit, state }, value) {
+      const newAppearance = Object.assign({}, state.appearance, {
+        displayNameStyle: value
+      })
+      const config = {
+        appearance: newAppearance
+      }
+      ipcRenderer.send('update-preferences', config)
+      ipcRenderer.once('error-update-preferences', (event, err) => {
+        ipcRenderer.removeAllListeners('response-update-preferences')
+      })
+      ipcRenderer.once('response-update-preferences', (event, conf) => {
+        ipcRenderer.removeAllListeners('error-update-preferences')
+        dispatch('App/loadPreferences', null, { root: true })
+        commit('updateAppearance', conf.appearance)
+      })
+    },
+    updateTimeFormat ({ dispatch, commit, state }, value) {
+      const newAppearance = Object.assign({}, state.appearance, {
+        timeFormat: value
+      })
+      const config = {
+        appearance: newAppearance
+      }
+      ipcRenderer.send('update-preferences', config)
+      ipcRenderer.once('error-update-preferences', (event, err) => {
+        ipcRenderer.removeAllListeners('response-update-preferences')
+      })
+      ipcRenderer.once('response-update-preferences', (event, conf) => {
+        ipcRenderer.removeAllListeners('error-update-preferences')
+        dispatch('App/loadPreferences', null, { root: true })
+        commit('updateAppearance', conf.appearance)
+      })
+    }
+  }
+}
diff --git a/src/renderer/store/Preferences/General.js b/src/renderer/store/Preferences/General.js
index 030a5abaaf..a9d2031453 100644
--- a/src/renderer/store/Preferences/General.js
+++ b/src/renderer/store/Preferences/General.js
@@ -1,8 +1,5 @@
 import { ipcRenderer } from 'electron'
 import Visibility from '~/src/constants/visibility'
-import DisplayStyle from '~/src/constants/displayStyle'
-import Theme from '~/src/constants/theme'
-import TimeFormat from '~/src/constants/timeFormat'
 
 const General = {
   namespaced: true,
@@ -12,11 +9,7 @@ const General = {
         fav_rb: true,
         toot: true
       },
-      theme: Theme.Light.key,
-      fontSize: 14,
-      displayNameStyle: DisplayStyle.DisplayNameAndUsername.value,
-      tootVisibility: Visibility.Public.value,
-      timeFormat: TimeFormat.Absolute.value
+      tootVisibility: Visibility.Public.value
     },
     loading: false
   },
@@ -46,77 +39,6 @@ const General = {
         })
       })
     },
-    updateTheme ({ dispatch, commit, state }, theme) {
-      commit('changeLoading', true)
-      const newGeneral = Object.assign({}, state.general, {
-        theme: theme
-      })
-      const config = {
-        general: newGeneral
-      }
-      ipcRenderer.send('update-preferences', config)
-      ipcRenderer.once('error-update-preferences', (event, err) => {
-        ipcRenderer.removeAllListeners('response-update-preferences')
-        commit('changeLoading', false)
-      })
-      ipcRenderer.once('response-update-preferences', (event, conf) => {
-        ipcRenderer.removeAllListeners('error-update-preferences')
-        commit('updateGeneral', conf.general)
-        dispatch('App/loadPreferences', null, { root: true })
-        commit('changeLoading', false)
-      })
-    },
-    updateFontSize ({ dispatch, commit, state }, fontSize) {
-      const newGeneral = Object.assign({}, state.general, {
-        fontSize: fontSize
-      })
-      const config = {
-        general: newGeneral
-      }
-      ipcRenderer.send('update-preferences', config)
-      ipcRenderer.once('error-update-preferences', (event, err) => {
-        ipcRenderer.removeAllListeners('response-update-preferences')
-      })
-      ipcRenderer.once('response-update-preferences', (event, conf) => {
-        ipcRenderer.removeAllListeners('error-update-preferences')
-        commit('updateGeneral', conf.general)
-        dispatch('App/loadPreferences', null, { root: true })
-      })
-    },
-    updateDisplayNameStyle ({ dispatch, commit, state }, value) {
-      const newGeneral = Object.assign({}, state.general, {
-        displayNameStyle: value
-      })
-      const config = {
-        general: newGeneral
-      }
-      ipcRenderer.send('update-preferences', config)
-      ipcRenderer.once('error-update-preferences', (event, err) => {
-        ipcRenderer.removeAllListeners('response-update-preferences')
-      })
-      ipcRenderer.once('response-update-preferences', (event, conf) => {
-        ipcRenderer.removeAllListeners('error-update-preferences')
-        dispatch('App/loadPreferences', null, { root: true })
-        commit('updateGeneral', conf.general)
-      })
-    },
-    updateTimeFormat ({ dispatch, commit, state }, value) {
-      const newGeneral = Object.assign({}, state.general, {
-        timeFormat: value
-      })
-      const config = {
-        general: newGeneral
-      }
-      ipcRenderer.send('update-preferences', config)
-      ipcRenderer.once('error-update-preferences', (event, err) => {
-        ipcRenderer.removeAllListeners('response-update-preferences')
-      })
-      ipcRenderer.once('response-update-preferences', (event, conf) => {
-        ipcRenderer.removeAllListeners('error-update-preferences')
-        dispatch('App/loadPreferences', null, { root: true })
-        commit('updateGeneral', conf.general)
-      })
-    },
     updateTootVisibility ({ dispatch, commit, state }, value) {
       const newGeneral = Object.assign({}, state.general, {
         tootVisibility: value

From 460841892f71cea4c52055fad3a4d94734f164ec Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Fri, 21 Sep 2018 00:31:21 +0900
Subject: [PATCH 2/8] refs #251 Fix design of language setting

---
 src/config/locales/en/translation.json        |  2 +-
 .../components/Preferences/Language.vue       | 53 ++++++-------------
 2 files changed, 16 insertions(+), 39 deletions(-)

diff --git a/src/config/locales/en/translation.json b/src/config/locales/en/translation.json
index 87464df3c4..965c7987ea 100644
--- a/src/config/locales/en/translation.json
+++ b/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",
diff --git a/src/renderer/components/Preferences/Language.vue b/src/renderer/components/Preferences/Language.vue
index b511acbff1..54bbbd1e27 100644
--- a/src/renderer/components/Preferences/Language.vue
+++ b/src/renderer/components/Preferences/Language.vue
@@ -2,24 +2,16 @@
 <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">
-            <el-select v-model="displayLanguage" placeholder="style">
-              <el-option
-                v-for="lang in languages"
-                :key="lang.key"
-                :label="lang.name"
-                :value="lang.key">
-              </el-option>
-            </el-select>
-            <p class="notice">{{ $t('preferences.language.notice') }}</p>
-          </td>
-        </tr>
-      </tbody>
-    </table>
+    <p class="description">{{ $t('preferences.language.language_description') }}</p>
+    <el-select v-model="displayLanguage" placeholder="style">
+      <el-option
+        v-for="lang in languages"
+        :key="lang.key"
+        :label="lang.name"
+        :value="lang.key">
+      </el-option>
+    </el-select>
+    <p class="notice">{{ $t('preferences.language.notice') }}</p>
   </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;
-    }
+  .notice {
+    color: #c0c4cc;
+    font-size: 12px;
   }
 }
 </style>

From c58a5a74e81ab3262af841c59e67a71a1e781061 Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Fri, 21 Sep 2018 00:49:17 +0900
Subject: [PATCH 3/8] refs #251 Fix design of notification setting

---
 src/config/locales/en/translation.json        |  12 +--
 .../components/Preferences/Notification.vue   | 101 ++++++++----------
 2 files changed, 51 insertions(+), 62 deletions(-)

diff --git a/src/config/locales/en/translation.json b/src/config/locales/en/translation.json
index 965c7987ea..7bd76fae69 100644
--- a/src/config/locales/en/translation.json
+++ b/src/config/locales/en/translation.json
@@ -108,12 +108,12 @@
     },
     "notification": {
       "title": "Notification",
-      "notify": {
-        "title": "Notify",
-        "reply": "Reply:",
-        "reblog": "Reblog:",
-        "favourite": "Favourite:",
-        "follow": "Follow:"
+      "enable": {
+        "description": "Please set notification event.",
+        "reply": "Notify me when I receive reply",
+        "reblog": "Notify me when I receive reblog",
+        "favourite": "Notify me when I receive favourite",
+        "follow": "Notify me when I receive follow"
       }
     },
     "account": {
diff --git a/src/renderer/components/Preferences/Notification.vue b/src/renderer/components/Preferences/Notification.vue
index 56802c9df5..95f5562954 100644
--- a/src/renderer/components/Preferences/Notification.vue
+++ b/src/renderer/components/Preferences/Notification.vue
@@ -1,48 +1,44 @@
 <template>
 <div id="notification">
   <h2>{{ $t('preferences.notification.title') }}</h2>
-  <div class="notify">
-    <h3>{{ $t('preferences.notification.notify.title') }}</h3>
-    <table class="notification">
-      <tbody>
-        <tr>
-          <td class="title">{{ $t('preferences.notification.notify.reply') }}</td>
-          <td class="status">
-            <el-switch
-              v-model="notifyReply"
-              active-color="#13ce66">
-            </el-switch>
-          </td>
-        </tr>
-        <tr>
-          <td class="title">{{ $t('preferences.notification.notify.reblog') }}</td>
-          <td class="status">
-            <el-switch
-              v-model="notifyReblog"
-              active-color="#13ce66">
-            </el-switch>
-          </td>
-        </tr>
-        <tr>
-          <td class="title">{{ $t('preferences.notification.notify.favourite') }}</td>
-          <td class="status">
-            <el-switch
-              v-model="notifyFavourite"
-              active-color="#13ce66">
-            </el-switch>
-          </td>
-        </tr>
-        <tr>
-          <td class="title">{{ $t('preferences.notification.notify.follow') }}</td>
-          <td class="status">
-            <el-switch
-              v-model="notifyFollow"
-              active-color="#13ce66">
-            </el-switch>
-          </td>
-        </tr>
-      </tbody>
-    </table>
+  <div class="enable">
+    <p class="description">{{ $t('preferences.notification.enable.description') }}</p>
+    <div class="selection">
+      <span class="value">
+        <el-switch
+          v-model="notifyReply"
+          active-color="#13ce66">
+        </el-switch>
+      </span>
+      <span class="title">{{ $t('preferences.notification.enable.reply') }}</span>
+    </div>
+    <div class="selection">
+      <span class="value">
+        <el-switch
+          v-model="notifyReblog"
+          active-color="#13ce66">
+        </el-switch>
+      </span>
+      <span class="title">{{ $t('preferences.notification.enable.reblog') }}</span>
+    </div>
+    <div class="selection">
+      <span class="value">
+        <el-switch
+          v-model="notifyFavourite"
+          active-color="#13ce66">
+        </el-switch>
+      </span>
+      <span class="title">{{ $t('preferences.notification.enable.favourite') }}</span>
+    </div>
+    <div class="selection">
+      <span class="value">
+        <el-switch
+          v-model="notifyFollow"
+          active-color="#13ce66">
+        </el-switch>
+      </span>
+      <span class="title">{{ $t('preferences.notification.enable.follow') }}</span>
+    </div>
   </div>
 </div>
 </template>
@@ -106,23 +102,16 @@ export default {
 
 <style lang="scss" scoped>
 #notification {
-  .notify {
-    table {
-      width: 100%;
-    }
+  .description {
+    margin: 24px 0 20px;
+  }
 
-    td {
-      padding: 16px 0;
-    }
+  .selection {
+    margin: 12px 0;
 
     .title {
-      text-align: right;
-      width: 50%;
-    }
-
-    .status {
-      width: 50%;
-      text-align: center;
+      margin-left: 12px;
+      font-weight: 800;
     }
   }
 }

From 72e6073f2179f072caf1eb6c3b4d9e7ae7a78f6b Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Fri, 21 Sep 2018 08:39:27 +0900
Subject: [PATCH 4/8] refs #251 Fix design of general setting

---
 src/config/locales/en/translation.json        |  14 ++-
 .../components/Preferences/General.vue        | 108 +++++++-----------
 2 files changed, 52 insertions(+), 70 deletions(-)

diff --git a/src/config/locales/en/translation.json b/src/config/locales/en/translation.json
index 7bd76fae69..07f4ffc1d2 100644
--- a/src/config/locales/en/translation.json
+++ b/src/config/locales/en/translation.json
@@ -74,7 +74,10 @@
     "title": "Preferences",
     "general": {
       "title": "General",
-      "toot": "Toot",
+      "toot": {
+        "title": "Toot",
+        "description": "Customize default visibility of toot."
+      },
       "visibility": {
         "title": "Default visibility:",
         "public": "Public",
@@ -82,9 +85,12 @@
         "private": "Private",
         "direct": "Direct"
       },
-      "sounds": "Sounds",
-      "fav_rb_sound": "Favorite and Boost:",
-      "toot_sound": "Toot:"
+      "sounds": {
+        "title": "Sounds",
+        "description": "Please set feedback sounds.",
+        "fav_rb": "When you favorite or boost the toot",
+        "toot": "When you post toot"
+      }
     },
     "appearance": {
       "title": "Appearance",
diff --git a/src/renderer/components/Preferences/General.vue b/src/renderer/components/Preferences/General.vue
index 4f5a56b021..60ec59d7d5 100644
--- a/src/renderer/components/Preferences/General.vue
+++ b/src/renderer/components/Preferences/General.vue
@@ -1,50 +1,39 @@
 <template>
 <div id="general" v-loading="loading">
   <h2>{{ $t('preferences.general.title') }}</h2>
-  <div class="toot">
-    <h3>{{ $t('preferences.general.toot') }}</h3>
-    <table>
-      <tbody>
-        <tr>
-          <td class="title">{{ $t('preferences.general.visibility.title') }}</td>
-          <td class="status">
-            <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>
-          </td>
-        </tr>
-      </tbody>
-    </table>
+  <div class="toot section">
+    <h3>{{ $t('preferences.general.toot.title') }}</h3>
+    <p class="description">{{ $t('preferences.general.toot.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>
   </div>
-  <div class="sounds">
-    <h3>{{ $t('preferences.general.sounds') }}</h3>
-    <table>
-      <tbody>
-        <tr>
-          <td class="title">{{ $t('preferences.general.fav_rb_sound') }}</td>
-          <td class="status">
-            <el-switch
-              v-model="sound_fav_rb"
-              active-color="#13ce66">
-            </el-switch>
-          </td>
-        </tr>
-        <tr>
-          <td class="title">{{ $t('preferences.general.toot_sound') }}</td>
-          <td class="status">
-            <el-switch
-              v-model="sound_toot"
-              active-color="#13ce66">
-            </el-switch>
-          </td>
-        </tr>
-      </tbody>
-    </table>
+  <div class="sounds section">
+    <h3>{{ $t('preferences.general.sounds.title') }}</h3>
+    <p class="description">{{ $t('preferences.general.sounds.description') }}</p>
+    <div class="selection">
+      <span class="value">
+        <el-switch
+          v-model="sound_fav_rb"
+          active-color="#13ce66">
+        </el-switch>
+      </span>
+      <span class="title">{{ $t('preferences.general.sounds.fav_rb') }}</span>
+    </div>
+    <div class="selection">
+      <span class="value">
+        <el-switch
+          v-model="sound_toot"
+          active-color="#13ce66">
+        </el-switch>
+      </span>
+      <span class="title">{{ $t('preferences.general.sounds.toot') }}</span>
+    </div>
   </div>
 </div>
 </template>
@@ -111,34 +100,21 @@ export default {
 
 <style lang="scss" scoped>
 #general {
-  table {
-    width: 100%;
+  .description {
+    margin: 24px 0 20px;
   }
 
-  td {
-    padding: 16px 0;
+  .section {
+    margin-bottom: 48px;
   }
 
-  .title {
-    text-align: right;
-    width: 50%;
-  }
-
-  .status {
-    width: 50%;
-    text-align: center;
-  }
+  .selection {
+    margin: 12px 0;
 
-  .toot {
-    color: var(--theme-secondary-color);
-    width: 100%;
-    box-sizing: border-box;
-  }
-
-  .sounds {
-    color: var(--theme-secondary-color);
-    width: 100%;
-    box-sizing: border-box;
+    .title {
+      margin-left: 12px;
+      font-weight: 800;
+    }
   }
 }
 </style>

From 9410b4479d343d8c93c411027296f9646b6126b1 Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Fri, 21 Sep 2018 08:41:55 +0900
Subject: [PATCH 5/8] refs #251 Update i18n keys in toot visibility

---
 src/config/locales/en/translation.json | 16 ++++++++--------
 src/constants/visibility.js            |  8 ++++----
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/config/locales/en/translation.json b/src/config/locales/en/translation.json
index 07f4ffc1d2..83d8c264f3 100644
--- a/src/config/locales/en/translation.json
+++ b/src/config/locales/en/translation.json
@@ -76,14 +76,14 @@
       "title": "General",
       "toot": {
         "title": "Toot",
-        "description": "Customize default visibility of toot."
-      },
-      "visibility": {
-        "title": "Default visibility:",
-        "public": "Public",
-        "unlisted": "Unlisted",
-        "private": "Private",
-        "direct": "Direct"
+        "description": "Customize default visibility of toot.",
+        "visibility": {
+          "title": "Default visibility:",
+          "public": "Public",
+          "unlisted": "Unlisted",
+          "private": "Private",
+          "direct": "Direct"
+        }
       },
       "sounds": {
         "title": "Sounds",
diff --git a/src/constants/visibility.js b/src/constants/visibility.js
index 38a24dfb15..d73fd4605a 100644
--- a/src/constants/visibility.js
+++ b/src/constants/visibility.js
@@ -1,21 +1,21 @@
 export default {
   Public: {
-    name: 'preferences.general.visibility.public',
+    name: 'preferences.general.toot.visibility.public',
     value: 0,
     key: 'public'
   },
   Unlisted: {
-    name: 'preferences.general.visibility.unlisted',
+    name: 'preferences.general.toot.visibility.unlisted',
     value: 1,
     key: 'unlisted'
   },
   Private: {
-    name: 'preferences.general.visibility.private',
+    name: 'preferences.general.toot.visibility.private',
     value: 2,
     key: 'private'
   },
   Direct: {
-    name: 'preferences.general.visibility.direct',
+    name: 'preferences.general.toot.visibility.direct',
     value: 3,
     key: 'direct'
   }

From 2c76e89329f1030c1d6b33a58d48a3a7d70af752 Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Fri, 21 Sep 2018 23:33:27 +0900
Subject: [PATCH 6/8] refs #251 Update translation files for preferences

---
 src/config/locales/de/translation.json | 57 +++++++++++++++----------
 src/config/locales/en/translation.json |  4 +-
 src/config/locales/fr/translation.json | 57 +++++++++++++++----------
 src/config/locales/ja/translation.json | 57 +++++++++++++++----------
 src/config/locales/ko/translation.json | 58 +++++++++++++++-----------
 src/config/locales/pl/translation.json | 57 +++++++++++++++----------
 6 files changed, 175 insertions(+), 115 deletions(-)

diff --git a/src/config/locales/de/translation.json b/src/config/locales/de/translation.json
index 3f7ce575e2..5e2feeef3f 100644
--- a/src/config/locales/de/translation.json
+++ b/src/config/locales/de/translation.json
@@ -74,39 +74,52 @@
     "title": "Einstellungen",
     "general": {
       "title": "Allgemein",
-      "appearance": "Anzeige",
-      "theme_color": "Themenfarbe:",
+      "toot": {
+        "title": "Toot",
+        "description": "Customize default visibility of toot.",
+        "visibility": {
+          "title": "Standard-Sichtbarkeit",
+          "public": "Öffenlich",
+          "unlisted": "Nicht gelistet",
+          "private": "Privat",
+          "direct": "Direkt"
+        }
+      },
+      "sounds": {
+        "title": "Klänge",
+        "description": "Please set feedback sounds.",
+        "fav_rb": "When you favourite or boost the toot",
+        "toot": "When you post toot"
+      }
+    },
+    "appearance": {
+      "title": "Anzeige",
+      "theme_color": "Themenfarbe",
       "theme": {
         "light": "Hell",
         "dark": "Dunkel"
       },
-      "font_size": "Schriftgröße:",
+      "font_size": "Schriftgröße",
       "display_style": {
-        "title": "Anzeigestil:",
+        "title": "Anzeigestil",
         "display_name_and_username": "Anzeige- und Benutzername",
         "display_name": "Anzeigename",
         "username": "Benutzername"
       },
-      "toot": "Toot",
-      "visibility": {
-        "title": "Standard-Sichtbarkeit:",
-        "public": "Öffenlich",
-        "unlisted": "Nicht gelistet",
-        "private": "Privat",
-        "direct": "Direkt"
-      },
-      "sounds": "Klänge",
-      "fav_rb_sound": "Favorit und Boost:",
-      "toot_sound": "Toot:"
+      "time_format": {
+        "title": "Time format",
+        "absolute": "Absolute",
+        "relative": "Relative"
+      }
     },
     "notification": {
       "title": "Notification",
-      "notify": {
-        "title": "Notify",
-        "reply": "Reply:",
-        "reblog": "Reblog:",
-        "favourite": "Favourite:",
-        "follow": "Follow:"
+      "enable": {
+        "description": "Pelase set notification events.",
+        "reply": "Notify me when I receive reply",
+        "reblog": "Notify me when I receive reblog",
+        "favourite": "Notify me when I receive favourite",
+        "follow": "Notify me when I receive follow"
       }
     },
     "account": {
@@ -124,7 +137,7 @@
     },
     "language": {
       "title": "Sprache",
-      "display_language": "Sprache",
+      "language_description": "Choose the language you would like to use with Whalebird.",
       "notice": "Erfordert Neustart",
       "confirm": {
         "title": "Warnung",
diff --git a/src/config/locales/en/translation.json b/src/config/locales/en/translation.json
index 83d8c264f3..4e1a20f01d 100644
--- a/src/config/locales/en/translation.json
+++ b/src/config/locales/en/translation.json
@@ -78,7 +78,7 @@
         "title": "Toot",
         "description": "Customize default visibility of toot.",
         "visibility": {
-          "title": "Default visibility:",
+          "title": "Default visibility",
           "public": "Public",
           "unlisted": "Unlisted",
           "private": "Private",
@@ -115,7 +115,7 @@
     "notification": {
       "title": "Notification",
       "enable": {
-        "description": "Please set notification event.",
+        "description": "Please set notification events.",
         "reply": "Notify me when I receive reply",
         "reblog": "Notify me when I receive reblog",
         "favourite": "Notify me when I receive favourite",
diff --git a/src/config/locales/fr/translation.json b/src/config/locales/fr/translation.json
index 18a2cb9895..54ecef2cc3 100644
--- a/src/config/locales/fr/translation.json
+++ b/src/config/locales/fr/translation.json
@@ -74,39 +74,52 @@
     "title": "Préférences",
     "general": {
       "title": "Général",
-      "appearance": "Apparence",
-      "theme_color": "Couleur du thème:",
+      "toot": {
+        "title": "Pouet",
+        "description": "Customize default visibility of toot.",
+        "visibility": {
+          "title": "Visibilité par défaut",
+          "public": "Public",
+          "unlisted": "Public sans être affiché sur le fil public",
+          "private": "Abonné⋅e⋅s uniquement",
+          "direct": "Message direct"
+        }
+      },
+      "sounds": {
+        "title": "Sons",
+        "description": "Please set feedback sounds.",
+        "fav_rb": "Partages et favoris",
+        "toot": "Pouets"
+      }
+    },
+    "appearance": {
+      "title": "Apparence",
+      "theme_color": "Couleur du thème",
       "theme": {
         "light": "Clair",
         "dark": "Foncé"
       },
-      "font_size": "Taille des caractères:",
+      "font_size": "Taille des caractères",
       "display_style": {
-        "title": "Format d'affichage:",
+        "title": "Format d'affichage",
         "display_name_and_username": "Nom et utilisateur⋅trice",
         "display_name": "Nom",
         "username": "Utilisateur⋅trice"
       },
-      "toot": "Pouet",
-      "visibility": {
-        "title": "Visibilité par défaut:",
-        "public": "Public",
-        "unlisted": "Public sans être affiché sur le fil public",
-        "private": "Abonné⋅e⋅s uniquement",
-        "direct": "Message direct"
-      },
-      "sounds": "Sons",
-      "fav_rb_sound": "Partages et favoris:",
-      "toot_sound": "Pouets:"
+      "time_format": {
+        "title": "Time format",
+        "absolute": "Absolute",
+        "relative": "Relative"
+      }
     },
     "notification": {
       "title": "Notification",
-      "notify": {
-        "title": "Notify",
-        "reply": "Reply:",
-        "reblog": "Reblog:",
-        "favourite": "Favourite:",
-        "follow": "Follow:"
+      "enable": {
+        "description": "Please set notification events.",
+        "reply": "Notify me when I receive reply",
+        "reblog": "Notify me when I receive reblog",
+        "favourite": "Notify me when I receive favourite",
+        "follow": "Notify me when I receive follow"
       }
     },
     "account": {
@@ -124,7 +137,7 @@
     },
     "language": {
       "title": "Langue",
-      "display_language": "Langue",
+      "language_description": "Choose the language you would like to use with Whalebird.",
       "notice": "Nécessite un redémarrage",
       "confirm": {
         "title": "Avertissement",
diff --git a/src/config/locales/ja/translation.json b/src/config/locales/ja/translation.json
index e5d71291f4..ddffadf81a 100644
--- a/src/config/locales/ja/translation.json
+++ b/src/config/locales/ja/translation.json
@@ -74,39 +74,52 @@
     "title": "設定",
     "general": {
       "title": "一般",
-      "appearance": "外観",
-      "theme_color": "テーマカラー:",
+      "toot": {
+        "title": "トゥート",
+        "description": "トゥートの公開設定を変更できます",
+        "visibility": {
+          "title": "公開設定",
+          "public": "公開",
+          "unlisted": "未収載",
+          "private": "フォロワー限定",
+          "direct": "ダイレクト"
+        }
+      },
+      "sounds": {
+        "title": "効果音",
+        "description": "操作時の効果音を設定",
+        "fav_rb": "お気に入り，ブースト時",
+        "toot": "トゥート時"
+      }
+    },
+    "appearance": {
+      "title": "外観",
+      "theme_color": "テーマカラー",
       "theme": {
         "light": "標準",
         "dark": "ダーク"
       },
-      "font_size": "フォントサイズ:",
+      "font_size": "フォントサイズ",
       "display_style": {
-        "title": "ユーザ名の表示形式:",
+        "title": "ユーザ名の表示形式",
         "display_name_and_username": "表示名+ユーザー名",
         "display_name": "表示名",
         "username": "ユーザー名"
       },
-      "toot": "トゥート",
-      "visibility": {
-        "title": "公開設定:",
-        "public": "公開",
-        "unlisted": "未収載",
-        "private": "フォロワー限定",
-        "direct": "ダイレクト"
-      },
-      "sounds": "効果音",
-      "fav_rb_sound": "お気に入り，ブースト時:",
-      "toot_sound": "トゥート時:"
+      "time_format": {
+        "title": "時間の表示形式",
+        "absolute": "絶対表示",
+        "relative": "相対表示"
+      }
     },
     "notification": {
       "title": "通知",
-      "notify": {
-        "title": "通知設定",
-        "reply": "返信:",
-        "reblog": "ブースト:",
-        "favourite": "お気に入り:",
-        "follow": "フォロー:"
+      "enable": {
+        "description": "通知を受け取るかどうかを設定",
+        "reply": "返信がある時",
+        "reblog": "ブーストされた時",
+        "favourite": "お気に入りされた時",
+        "follow": "フォローされた時"
       }
     },
     "account": {
@@ -124,7 +137,7 @@
     },
     "language": {
       "title": "言語",
-      "display_language": "表示言語",
+      "language_description": "Whalebirdの表示言語を選択",
       "notice": "再起動が必要です",
       "confirm": {
         "title": "再起動します",
diff --git a/src/config/locales/ko/translation.json b/src/config/locales/ko/translation.json
index 6ef09a9de5..b4ab66417b 100644
--- a/src/config/locales/ko/translation.json
+++ b/src/config/locales/ko/translation.json
@@ -74,44 +74,52 @@
     "title": "설정",
     "general": {
       "title": "일반",
-      "appearance": "외관",
-      "theme_color": "테마 색상:",
+      "toot": {
+        "title": "툿",
+        "description": "Customize default visibility of toot.",
+        "visibility": {
+          "title": "기본 공개 설정",
+          "public": "공개",
+          "unlisted": "미등록",
+          "private": "비공개",
+          "direct": "다이렉트"
+        }
+      },
+      "sounds": {
+        "title": "사운드",
+        "description": "Please set feedback sounds.",
+        "fav_rb": "When you favorite or boost the toot",
+        "toot": "When you post toot"
+      }
+    },
+    "appearance": {
+      "title": "외관",
+      "theme_color": "테마 색상",
       "theme": {
         "light": "밝은 테마",
         "dark": "어두운 테마"
       },
-      "font_size": "폰트 크기:",
+      "font_size": "폰트 크기",
       "display_style": {
-        "title": "사용자 표시 형식:",
+        "title": "사용자 표시 형식",
         "display_name_and_username": "닉네임과 아이디 모두 보이기",
         "display_name": "닉네임만 보이기",
         "username": "아이디만 보이기"
       },
-	  "time_format":{
-        "title": "시간 표시 형식:",
+      "time_format":{
+        "title": "시간 표시 형식",
         "absolute": "고정 시각 표시",
         "relative": "상대 시간 표시"
-	  },
-      "toot": "툿",
-      "visibility": {
-        "title": "기본 공개 설정:",
-        "public": "공개",
-        "unlisted": "미등록",
-        "private": "비공개",
-        "direct": "다이렉트"
-      },
-      "sounds": "사운드",
-      "fav_rb_sound": "즐겨찾기 및 부스트:",
-      "toot_sound": "툿:"
+      }
     },
     "notification": {
       "title": "알림",
-      "notify": {
-        "title": "푸쉬 알림",
-        "reply": "답장:",
-        "reblog": "부스트:",
-        "favourite": "즐겨찾기:",
-        "follow": "즐겨찾기:"
+      "enable": {
+        "description": "Please set notification events.",
+        "reply": "Notify me when I receive reply",
+        "reblog": "Notify me when I receive reblog",
+        "favourite": "Notify me when I receive favourite",
+        "follow": "Notify me when I receive follow"
       }
     },
     "account": {
@@ -129,7 +137,7 @@
     },
     "language": {
       "title": "언어",
-      "display_language": "언어",
+      "language_description": "Choose the language you would like to use with Whalebird.",
       "notice": "재실행이 필요합니다",
       "confirm": {
         "title": "알림",
diff --git a/src/config/locales/pl/translation.json b/src/config/locales/pl/translation.json
index 9ff34e295a..086ed22521 100644
--- a/src/config/locales/pl/translation.json
+++ b/src/config/locales/pl/translation.json
@@ -74,39 +74,52 @@
     "title": "Preferencje",
     "general": {
       "title": "Ogólne",
-      "appearance": "Wygląd",
-      "theme_color": "Kolor motywu:",
+      "toot": {
+        "title": "Wpisy",
+        "description": "Customize default visibility of toot.",
+        "visibility": {
+          "title": "Domyślna widoczność",
+          "public": "Publiczne",
+          "unlisted": "Niewidoczne",
+          "private": "Prywatne",
+          "direct": "Bezpośrednie"
+        }
+      },
+      "sounds": {
+        "title": "Dźwięki",
+        "description": "Please set feedback sounds.",
+        "fav_rb": "Polubienie i podbicie",
+        "toot": "Wpisy"
+      }
+    },
+    "appearance": {
+      "title": "Wygląd",
+      "theme_color": "Kolor motywu",
       "theme": {
         "light": "Jasny",
         "dark": "Ciemny"
       },
-      "font_size": "Rozmiar czcionki:",
+      "font_size": "Rozmiar czcionki",
       "display_style": {
-        "title": "Styl wyświetlania:",
+        "title": "Styl wyświetlania",
         "display_name_and_username": "Nazwa wyświetlana i nazwa użytkownika",
         "display_name": "Nazwa wyświetlana",
         "username": "Nazwa użytkownika"
       },
-      "toot": "Wpisy",
-      "visibility": {
-        "title": "Domyślna widoczność:",
-        "public": "Publiczne",
-        "unlisted": "Niewidoczne",
-        "private": "Prywatne",
-        "direct": "Bezpośrednie"
-      },
-      "sounds": "Dźwięki",
-      "fav_rb_sound": "Polubienie i podbicie:",
-      "toot_sound": "Wpisy:"
+      "time_format": {
+        "title": "Time format",
+        "absolute": "Absolute",
+        "relative": "Relative"
+      }
     },
     "notification": {
       "title": "Notification",
-      "notify": {
-        "title": "Notify",
-        "reply": "Reply:",
-        "reblog": "Reblog:",
-        "favourite": "Favourite:",
-        "follow": "Follow:"
+      "enable": {
+        "description": "Please set notification events.",
+        "reply": "Notify me when I receive reply",
+        "reblog": "Notify me when I receive reblog",
+        "favourite": "Notify me when I receive favourite",
+        "follow": "Notify me when I receive follow"
       }
     },
     "account": {
@@ -124,7 +137,7 @@
     },
     "language": {
       "title": "Język",
-      "display_language": "język",
+      "language_description": "Choose the language you would like to use with Whalebird.",
       "notice": "Wymaga ponownego uruchomienia",
       "confirm": {
         "title": "Ostrzeżenie",

From a2d49ac8fe3abb2f214ddd84b217797152a6b7d4 Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Fri, 21 Sep 2018 23:46:08 +0900
Subject: [PATCH 7/8] refs #251 Fix float setting

---
 src/renderer/components/Preferences/Appearance/Toot.vue       | 3 +--
 src/renderer/components/TimelineSpace/Contents/Cards/Toot.vue | 3 +--
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/renderer/components/Preferences/Appearance/Toot.vue b/src/renderer/components/Preferences/Appearance/Toot.vue
index a117792fb5..d828364216 100644
--- a/src/renderer/components/Preferences/Appearance/Toot.vue
+++ b/src/renderer/components/Preferences/Appearance/Toot.vue
@@ -172,9 +172,8 @@ export default {
       .timestamp {
         font-size: var(--base-font-size);
         text-align: right;
-        width: 100%;
         color: #909399;
-        flota: right;
+        float: right;
       }
     }
 
diff --git a/src/renderer/components/TimelineSpace/Contents/Cards/Toot.vue b/src/renderer/components/TimelineSpace/Contents/Cards/Toot.vue
index 7d26f79292..77ab6ca7df 100644
--- a/src/renderer/components/TimelineSpace/Contents/Cards/Toot.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Cards/Toot.vue
@@ -486,9 +486,8 @@ export default {
       .timestamp {
         font-size: var(--base-font-size);
         text-align: right;
-        width: 100%;
         color: #909399;
-        flota: right;
+        float: right;
       }
     }
 

From 48907098e0aeae5c83298da60d4a97fb16018776 Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Fri, 21 Sep 2018 23:50:02 +0900
Subject: [PATCH 8/8] refs #251 [stylelint] Fix style formats

---
 src/renderer/components/Preferences/Appearance.vue | 3 ---
 src/renderer/components/Preferences/Language.vue   | 1 +
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/renderer/components/Preferences/Appearance.vue b/src/renderer/components/Preferences/Appearance.vue
index 5a20f0c0c6..37c48a42fb 100644
--- a/src/renderer/components/Preferences/Appearance.vue
+++ b/src/renderer/components/Preferences/Appearance.vue
@@ -135,9 +135,6 @@ export default {
     display: flex;
     align-items: flex-start;
 
-    .left {
-    }
-
     .right {
       margin-left: 40px;
     }
diff --git a/src/renderer/components/Preferences/Language.vue b/src/renderer/components/Preferences/Language.vue
index 54bbbd1e27..d31166514d 100644
--- a/src/renderer/components/Preferences/Language.vue
+++ b/src/renderer/components/Preferences/Language.vue
@@ -75,6 +75,7 @@ export default {
   .description {
     margin: 24px 0 20px;
   }
+
   .notice {
     color: #c0c4cc;
     font-size: 12px;