From 5103850c47526b704883d8bb3b42daaebf698801 Mon Sep 17 00:00:00 2001
From: NotXia <35894453+NotXia@users.noreply.github.com>
Date: Tue, 24 Jan 2023 21:34:21 +0100
Subject: [PATCH] Update contacts

---
 src/views/contacts/ContactLink.vue |  4 ++--
 src/views/contacts/Contacts.vue    | 23 ++++++++++++-----------
 2 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/src/views/contacts/ContactLink.vue b/src/views/contacts/ContactLink.vue
index 42e376f..320d5ca 100644
--- a/src/views/contacts/ContactLink.vue
+++ b/src/views/contacts/ContactLink.vue
@@ -1,9 +1,9 @@
 <template>
-    <p class="my-4 text-center">
+    <p class="my-4 text-left md:text-center">
         <a :href="props.url">
             <div class="inline-flex items-center">
                 <img :src="props.icon" alt="Github" class="h-7 mr-2 select-none dark:invert" /> 
-                <span class="text-xl truncate">{{ props.label }}</span>
+                <span class="text-xl text-left">{{ props.label }}</span>
             </div>
         </a>
     </p>
diff --git a/src/views/contacts/Contacts.vue b/src/views/contacts/Contacts.vue
index 62df669..b7badc0 100644
--- a/src/views/contacts/Contacts.vue
+++ b/src/views/contacts/Contacts.vue
@@ -3,25 +3,26 @@
         <Navbar />
     </div>
 
-    <main class="absolute top-0 flex justify-center items-center left-0 h-full w-full z-0">
-        <div>
-            <h1 class="text-5xl font-bold text-center">{{ t("contacts") }}</h1>
-            
-            <div class="flex justify-center">
-                <div>
-                    <ContactLink label="tcxia2001@gmail.com" url="mailto:tcxia2001@gmail.com" :icon="mail_icon" alt="E-mail" />
-                    <ContactLink label="t.me/notxia" url="https://t.me/notxia" :icon="telegram_icon" alt="Telegram" />
-                    <ContactLink label="Panda#9784" url="https://discordapp.com/users/272354672969515009" :icon="discord_icon" alt="Discord" />
-                    <ContactLink label="linkedin.com/in/tian-cheng-xia" url="https://www.linkedin.com/in/tian-cheng-xia/" :icon="linkedin_icon" alt="LinkedIn" />
-                </div>
+    <ScreenCenter>
+    <main>
+        <h1 class="text-5xl font-bold text-center">{{ t("contacts") }}</h1>
+        
+        <div class="md:flex justify-center">
+            <div>
+                <ContactLink label="tcxia2001@gmail.com" url="mailto:tcxia2001@gmail.com" :icon="mail_icon" alt="E-mail" />
+                <ContactLink label="t.me/notxia" url="https://t.me/notxia" :icon="telegram_icon" alt="Telegram" />
+                <ContactLink label="Panda#9784" url="https://discordapp.com/users/272354672969515009" :icon="discord_icon" alt="Discord" />
+                <ContactLink label="linkedin.com/in/tian-cheng-xia" url="https://www.linkedin.com/in/tian-cheng-xia/" :icon="linkedin_icon" alt="LinkedIn" />
             </div>
         </div>
     </main>
+    </ScreenCenter>
 </template>
 
 
 <script setup lang="ts">
     import Navbar from "@/components/navbar/Navbar.vue";
+    import ScreenCenter from "@/components/screen-center/ScreenCenter.vue";
     import { useI18n } from "vue-i18n";
     import locale from "./locale.json";
     import ContactLink from "./ContactLink.vue";