age gated style

src/components/InstanceActionBar.vue

@@ -135,9 +135,9 @@
             <span v-if="instance?.queueSize" class="ml-1">
                 {{ t('dialog.user.info.instance_queue') }} {{ instance.queueSize }}
             </span>
-            <span v-if="instanceInfoState.isAgeGated" class="ml-1">
+            <Badge v-if="instanceInfoState.isAgeGated" variant="outline" class="ml-1">
                 {{ t('dialog.user.info.instance_age_gated') }}
-            </span>
+            </Badge>
         </div>
     </div>
 </template>
@@ -145,6 +145,7 @@
 <script setup>
     import { History, Loader2, LogIn, Mail, MapPin, RefreshCw, UsersRound } from 'lucide-vue-next';
     import { computed, reactive, ref, watch } from 'vue';
+    import { Badge } from '@/components/ui/badge';
     import { Button } from '@/components/ui/button';
     import { storeToRefs } from 'pinia';
     import { toast } from 'vue-sonner';

src/localization/en.json

@@ -1343,7 +1343,7 @@
                 "instance_full": "full",
                 "instance_closed": "Instance closed",
                 "close_instance": "Close Instance",
-                "instance_age_gated": "age gated",
+                "instance_age_gated": "Age Gated",
                 "open_previous_instance": "Open Previous Instances",
                 "show_mutual_friends": "Show Mutual Friends",
                 "show_discord_connections": "Show Discord Connections"