color updates

zero.Web/App/Components/Tables/table.vue

@@ -336,7 +336,7 @@
   .ui-table-field-bool
   {
     font-family: var(--font-icon);
-    color: var(--color-fg-light);
+    color: var(--color-fg-xlight);
 
     &:before
     {

zero.Web/App/pages/settings/countries.vue

@@ -29,13 +29,17 @@
             label: '',
             as: 'html',
             render: item => `<i class="flag flag-${item.code.toLowerCase()}"></i>`,
-            width: 45
+            width: 62
           },
           name: {
             as: 'text',
             bold: true
           },
           code: 'text',
+          isPreferred: {
+            as: 'bool',
+            width: 200
+          },
           isActive: {
             as: 'bool',
             label: '@ui.active',
@@ -54,15 +58,4 @@
       }
     }
   }
-</script>
-
-<style lang="scss">
-  .countries .ui-table-cell[table-field="flag"]
-  {
-    padding-right: 0;
-  }
-  .countries .ui-table-cell[table-field="name"]
-  {
-    border-left: none;
-  }
-</style>
+</script>

zero.Web/Resources/Localization/zero.en-us.json

@@ -141,7 +141,8 @@
   "country": {
     "fields": {
       "name": "Name",
-      "code": "ISO"
+      "code": "ISO",
+      "isPreferred": "Show on top"
     }
   }
 }

zero.Web/Sass/Core/_settings.scss

@@ -11,10 +11,11 @@
   --color-fg: #222;
   --color-fg-mid: #6f7375;
   --color-fg-light: #919294;
+  --color-fg-xlight: #bec0c3;
 
   // background color shades
   --color-bg: #f4f5f6;
-  --color-bg-mid: #f0f1f2;
+  --color-bg-mid: #f4f5f6;
   --color-bg-light: #fff;
   --color-bg-xlight: #f8f9fa;
 
@@ -66,6 +67,7 @@
   --color-fg: #fff;
   --color-fg-mid: #c1c5c9;
   --color-fg-light: #919294;
+  --color-fg-xlight: #919294;
 
   /*--color-fg: #222;
   --color-fg-mid: #6f7375;