move client-only wrapper into LocaleSwitch component

so we don't have to wrap <locale-switch> in <client-only> every time we use it

webapp/components/LocaleSwitch/LocaleSwitch.vue

@@ -1,35 +1,37 @@
 <template>
-  <dropdown ref="menu" :placement="placement" :offset="offset">
+  <client-only>
-    <a
+    <dropdown ref="menu" :placement="placement" :offset="offset">
-      slot="default"
+      <a
-      slot-scope="{ toggleMenu }"
+        slot="default"
-      class="locale-menu"
+        slot-scope="{ toggleMenu }"
-      href="#"
+        class="locale-menu"
-      @click.prevent="toggleMenu()"
+        href="#"
-    >
+        @click.prevent="toggleMenu()"
-      <base-icon name="globe" />
-      <span class="label">{{ current.code.toUpperCase() }}</span>
-      <base-icon class="dropdown-arrow" name="angle-down" />
-    </a>
-    <ds-menu
-      slot="popover"
-      slot-scope="{ toggleMenu }"
-      class="locale-menu-popover"
-      :matcher="matcher"
-      :routes="routes"
-    >
-      <ds-menu-item
-        slot="menuitem"
-        slot-scope="item"
-        class="locale-menu-item"
-        :route="item.route"
-        :parents="item.parents"
-        @click.stop.prevent="changeLanguage(item.route.path, toggleMenu)"
       >
-        {{ item.route.name }}
+        <base-icon name="globe" />
-      </ds-menu-item>
+        <span class="label">{{ current.code.toUpperCase() }}</span>
-    </ds-menu>
+        <base-icon class="dropdown-arrow" name="angle-down" />
-  </dropdown>
+      </a>
+      <ds-menu
+        slot="popover"
+        slot-scope="{ toggleMenu }"
+        class="locale-menu-popover"
+        :matcher="matcher"
+        :routes="routes"
+      >
+        <ds-menu-item
+          slot="menuitem"
+          slot-scope="item"
+          class="locale-menu-item"
+          :route="item.route"
+          :parents="item.parents"
+          @click.stop.prevent="changeLanguage(item.route.path, toggleMenu)"
+        >
+          {{ item.route.name }}
+        </ds-menu-item>
+      </ds-menu>
+    </dropdown>
+  </client-only>
 </template>
 
 <script>

webapp/layouts/basic.vue

@@ -10,9 +10,7 @@
             </a>
           </ds-flex-item>
           <ds-flex-item width="20%" style="flex-grow:0;">
-            <client-only>
+            <locale-switch class="topbar-locale-switch" placement="top" offset="16" />
-              <locale-switch class="topbar-locale-switch" placement="top" offset="16" />
-            </client-only>
           </ds-flex-item>
         </ds-flex>
       </ds-container>

webapp/layouts/default.vue

@@ -50,9 +50,7 @@
                 }"
                 style="flex-basis: auto;"
               >
-                <client-only>
+                <locale-switch class="topbar-locale-switch" placement="top" offset="8" />
-                  <locale-switch class="topbar-locale-switch" placement="top" offset="8" />
-                </client-only>
                 <template v-if="isLoggedIn">
                   <client-only>
                     <notification-menu placement="top" />

webapp/maintenance/source/pages/index.vue

@@ -1,11 +1,9 @@
 <template>
   <transition name="fade" appear>
     <ds-container width="medium">
-      <ds-card>
+      <base-card>
         <ds-space>
-          <client-only>
+          <locale-switch class="login-locale-switch" offset="5" />
-            <locale-switch class="login-locale-switch" offset="5" />
-          </client-only>
         </ds-space>
         <ds-flex>
           <ds-flex-item :width="{ base: '100%', sm: 1, md: 1 }">
@@ -31,7 +29,7 @@
             </ds-flex-item>
           </ds-flex-item>
         </ds-flex>
-      </ds-card>
+      </base-card>
     </ds-container>
   </transition>
 </template>

webapp/pages/registration.vue

@@ -3,9 +3,7 @@
     <ds-card>
       <ds-flex gutter="small">
         <ds-flex-item :width="{ base: '100%', sm: '50%' }">
-          <client-only>
+          <locale-switch offset="5" />
-            <locale-switch offset="5" />
-          </client-only>
           <ds-space margin-top="small" margin-bottom="xxx-small">
             <img class="signup-image" alt="Human Connection" src="/img/sign-up/nicetomeetyou.svg" />
           </ds-space>