List settings clean up

src/components/Lists/ListSettings.vue

@@ -1,15 +1,15 @@
 <template lang="html">
     <div class="list-settings">
-        <section>
-            <h4>{{ $t('list.moveList') }}</h4>
+        <h4>{{ $t('list.moveList') }}</h4>
 
+        <div class="button-grid">
             <button
                 class="xsmall primary hollow"
                 :title="$t('list.moveLeft')"
                 :disabled="isFirst"
                 @click="moveList(activeListIndex, activeListIndex - 1)"
             >
-                <i class="fas fa-caret-left" />
+                <i class="fas fa-arrow-left" />
 
                 {{ $t('list.moveLeft') }}
             </button>
@@ -21,12 +21,12 @@
                 @click="moveList(activeListIndex, activeListIndex + 1)"
             >
                 {{ $t('list.moveRight') }}
-                <i class="fas fa-caret-right" />
+                <i class="fas fa-arrow-right" />
             </button>
-        </section>
+        </div>
 
         <section>
-            <h4>{{ $t('list.changeView') }}</h4>
+            <h4>{{ $t('list.view') }}</h4>
 
             <div class="button-group">
                 <button
@@ -50,7 +50,7 @@
                 <button
                     v-for="(icon, sortOrder) in sortOrders"
                     :key="sortOrder"
-                    class="xxsmall primary"
+                    class="xsmall primary"
                     :class="{ hollow: activeList.sortOrder !== sortOrder }"
                     @click="setListSort(sortOrder)"
                 >
@@ -128,9 +128,9 @@ export default {
             },
             sortOrders: {
                 sortByName: 'fas fa-sort-alpha-down',
-                sortByRating: 'fas fa-sort-numeric-up',
+                sortByRating: 'fas fa-star',
                 sortByReleaseDate: 'fas fa-calendar-alt',
-                sortByCustom: 'fas fa-sort',
+                sortByCustom: 'fas fa-user',
             },
         };
     },
@@ -254,6 +254,10 @@ export default {
         margin-bottom: $gp;
     }
 
+    h4 {
+        margin-bottom: $gp / 2;
+    }
+
     .actions, footer {
         display: flex;
         justify-content: space-between;
@@ -267,5 +271,13 @@ export default {
 
     .button-group {
         border: 1px solid $color-blue;
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr 1fr;
+    }
+
+    .button-grid {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: $gp;
     }
 </style>

src/i18n/en.json

@@ -74,16 +74,16 @@
         },
         "input": "Enter your own",
         "add": "Add list",
-        "sortByName": "Alphabetically",
-        "sortByRating": "Game rating",
-        "sortByReleaseDate": "Release date",
+        "sortByName": "A-Z",
+        "sortByRating": "Score",
+        "sortByReleaseDate": "Date",
         "sortByCustom": "Custom",
-        "delete": "Delete list",
+        "delete": "Delete",
         "moveLeft": "Move left",
         "moveRight": "Move right",
         "emptyList": "This list is empty",
         "addGame": "Add game",
-        "changeView": "Change view",
+        "view": "List view",
         "moveList": "Move list",
         "sortList": "Sort list",
         "coversSizeTitle": "Covers across",
@@ -91,7 +91,7 @@
             "single": "Default",
             "wide": "Compact",
             "text": "Text only",
-            "grid": "Masonry Grid"
+            "grid": "Grid"
         }
     },
     "settings": {
@@ -120,7 +120,7 @@
         },
         "ownedLists": "Only show my platforms",
         "sortPlatforms": "Sort platforms alphabetically",
-        "ratings": "Hide game ratings",
+        "ratings": "Hide game score",
         "signOut": "Sign out",
         "wallpaper": {
             "title": "Upload wallpaper",