Merge pull request #256 from danshilm/feat/ui

feat(login): cleanup sso login buttons

Author: MrSunshyne

packages/frontendmu-nuxt/components/auth/LoginForm.vue

@@ -95,35 +95,26 @@ const developmentEnvironment = process.env.NODE_ENV === 'development'
         </form>
 
         <div v-else>
-          <div class="relative flex justify-center text-sm font-medium leading-6">
-            <span class="pb-8 text-verse-900 dark:text-verse-100 text-lg">connect using</span>
-          </div>
-
           <div class="relative">
             <div class="absolute inset-0 flex items-center" aria-hidden="true">
               <div class="w-full border-t border-verse-500/20" />
             </div>
           </div>
 
-          <div class="mt-10 grid sm:grid-cols-2 gap-4">
+          <div class="flex flex-col space-y-3">
             <a :href="oAuthLogin('google')"
               class="flex w-full items-center justify-center gap-3 rounded-md bg-[#000000] hover:bg-black/50 transition-all duration-300 px-3 py-1.5 text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#1D9BF0]">
-              <Icon name="logos:google-icon" class="h-5 w-5" />
-              <span class="text-sm font-semibold leading-6">Google</span>
+              <Icon name="logos:google-icon" class="w-5 h-5" />
+              <span class="text-sm font-semibold leading-6">Continue with Google</span>
             </a>
 
             <AuthLoginWithGithub />
 
-            <!-- <a
-              :href="oAuthLogin('discord')"
+            <!-- <a :href="oAuthLogin('discord')"
               class="flex w-full items-center justify-center gap-3 rounded-md bg-[#000000]  hover:bg-black/50  px-3 py-1.5 text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#24292F]"
-              disabled
-            >
-              <Icon
-                name="logos:discord-icon"
-                class="h-5 w-5"
-              />
-              <span class="text-sm font-semibold leading-6">Discord</span>
+              disabled>
+              <Icon name="logos:discord-icon" class="w-5 h-5" />
+              <span class="text-sm font-semibold leading-6">Continue with Discord</span>
             </a> -->
           </div>
         </div>

packages/frontendmu-nuxt/components/auth/LoginWithGithub.vue

@@ -23,14 +23,14 @@ function triggerRedirectToGithub() {
 <template>
     <AlertDialog>
         <AlertDialogTrigger as-child>
-            <div class="flex w-full items-center justify-center gap-3 rounded-md bg-[#000000]  hover:bg-black/50  px-3 py-1.5 text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#24292F]"
+            <div class="flex w-full items-center justify-center gap-3 rounded-md bg-[#000000]  hover:bg-black/50 hover:cursor-pointer px-3 py-1.5 text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#24292F]"
                 disabled>
                 <svg class="h-5 w-5" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20">
                     <path fill-rule="evenodd"
                         d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z"
                         clip-rule="evenodd" />
                 </svg>
-                <span class="text-sm font-semibold leading-6">GitHub</span>
+                <span class="text-sm font-semibold leading-6">Continue with GitHub</span>
             </div>
         </AlertDialogTrigger>
         <AlertDialogContent class="border-white/20">