2 files changed, 46 insertions, 30 deletions
diff --git a/src/components/settings/settings.js b/src/components/settings/settings.js
index b88937bb..a26111d6 100644
--- a/src/components/settings/settings.js
+++ b/src/components/settings/settings.js
@@ -10,7 +10,8 @@ const settings = {
       muteWordsString: this.$store.state.config.muteWords.join('\n'),
       autoLoadLocal: this.$store.state.config.autoLoad,
       streamingLocal: this.$store.state.config.streaming,
-      hoverPreviewLocal: this.$store.state.config.hoverPreview
+      hoverPreviewLocal: this.$store.state.config.hoverPreview,
+      stopGifs: this.$store.state.config.stopGifs
     }
   },
   components: {
@@ -43,6 +44,9 @@ const settings = {
     muteWordsString (value) {
       value = filter(value.split('\n'), (word) => trim(word).length > 0)
       this.$store.dispatch('setOption', { name: 'muteWords', value })
+    },
+    stopGifs (value) {
+      this.$store.dispatch('setOption', { name: 'stopGifs', value })
     }
   }
 }
diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue
index 8fdd09de..b4514ba1 100644
--- a/src/components/settings/settings.vue
+++ b/src/components/settings/settings.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="settings panel panel-default base00-background">
-    <div class="panel-heading base02-background base04">
+  <div class="settings panel panel-default">
+    <div class="panel-heading">
       {{$t('settings.settings')}}
     </div>
     <div class="panel-body">
@@ -29,8 +29,8 @@
                 <label for="hideNsfw">{{$t('settings.nsfw_clickthrough')}}</label>
             </li>
             <li>
-                <input type="checkbox" id="autoLoad" v-model="autoLoadLocal">
-                <label for="autoLoad">{{$t('settings.autoload')}}</label>
+                <input type="checkbox" id="autoload" v-model="autoLoadLocal">
+                <label for="autoload">{{$t('settings.autoload')}}</label>
             </li>
             <li>
                 <input type="checkbox" id="streaming" v-model="streamingLocal">
@@ -40,6 +40,10 @@
                 <input type="checkbox" id="hoverPreview" v-model="hoverPreviewLocal">
                 <label for="hoverPreview">{{$t('settings.reply_link_preview')}}</label>
             </li>
+            <li>
+                <input type="checkbox" id="stopGifs" v-model="stopGifs">
+                <label for="stopGifs">{{$t('settings.stop_gifs')}}</label>
+            </li>
         </ul>
       </div>
     </div>
@@ -50,32 +54,40 @@
 </script>
 
 <style lang="scss">
- .setting-item {
-   margin: 1em 1em 1.4em;
-   textarea {
-     width: 100%;
-     height: 100px;
-   }
+@import '../../_variables.scss';
+
+.setting-item {
+  margin: 1em 1em 1.4em;
+
+  textarea {
+    width: 100%;
+    height: 100px;
+  }
 
-   .old-avatar {
-     width: 128px;
-     border-radius: 5px;
-   }
+  .old-avatar {
+    width: 128px;
+    border-radius: $fallback--avatarRadius;
+    border-radius: var(--avatarRadius, $fallback--avatarRadius);
+  }
 
-   .new-avatar {
-     object-fit: cover;
-     width: 128px;
-     height: 128px;
-     border-radius: 5px;
-   }
+  .new-avatar {
+    object-fit: cover;
+    width: 128px;
+    height: 128px;
+    border-radius: $fallback--avatarRadius;
+    border-radius: var(--avatarRadius, $fallback--avatarRadius);
+  }
 
-   .btn {
-     margin-top: 1em;
-     min-height: 28px;
-     width: 10em;
-   }
- }
- .setting-list {
-   list-style-type: none;
- }
+  .btn {
+    margin-top: 1em;
+    min-height: 28px;
+    width: 10em;
+  }
+}
+.setting-list {
+  list-style-type: none;
+  li {
+    margin-bottom: 0.5em;
+  }
+}
 </style>