Make n-window selector button more prominent

Author: MetRonnie

src/components/cylc/workspace/Toolbar.vue

@@ -85,13 +85,20 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       </div>
 
       <!-- n-window selector -->
-      <v-chip
+      <v-btn
         :disabled="isStopped"
-        link
+        variant="tonal"
+        rounded
         size="small"
         data-cy="n-win-selector"
       >
         N={{ nWindow }}
+        <template #append>
+          <v-icon
+            :icon="$options.icons.mdiChevronDown"
+            class="mx-n1"
+          />
+        </template>
         <v-menu
           activator="parent"
           :close-on-content-click="false"
@@ -122,7 +129,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             </v-card-text>
           </v-card>
         </v-menu>
-      </v-chip>
+      </v-btn>
 
       <!-- workflow status message -->
       <span class="status-msg text-body-2">
@@ -207,7 +214,8 @@ import {
   mdiPlusBoxMultiple,
   mdiStop,
   mdiViewList,
-  mdiAccount
+  mdiAccount,
+  mdiChevronDown,
 } from '@mdi/js'
 import { startCase } from 'lodash'
 import { until } from '@/utils'
@@ -462,7 +470,8 @@ export default {
     run: mdiPlay,
     stop: mdiStop,
     mdiCog,
-    mdiAccount
+    mdiAccount,
+    mdiChevronDown,
   },
 }
 </script>