Use omorphia icons for auth pages (#1614)

* Begin Work

* Use omorphia icons for sign-up page
This commit is contained in:
Mysterious_Dev
2024-01-28 20:02:29 +01:00
committed by GitHub
parent 5243d8bedf
commit e9483cb242
3 changed files with 37 additions and 33 deletions

View File

@@ -66,9 +66,7 @@
</div> </div>
</template> </template>
<script setup> <script setup>
import { SendIcon } from 'omorphia' import { SendIcon, MailIcon, KeyIcon } from 'omorphia'
import MailIcon from 'assets/icons/auth/mail.svg'
import KeyIcon from 'assets/icons/auth/key.svg'
const { formatMessage } = useVIntl() const { formatMessage } = useVIntl()

View File

@@ -27,27 +27,27 @@
<section class="third-party"> <section class="third-party">
<a class="btn" :href="getAuthUrl('discord', redirectTarget)"> <a class="btn" :href="getAuthUrl('discord', redirectTarget)">
<DiscordIcon /> <SSODiscordIcon />
<span>Discord</span> <span>Discord</span>
</a> </a>
<a class="btn" :href="getAuthUrl('github', redirectTarget)"> <a class="btn" :href="getAuthUrl('github', redirectTarget)">
<GitHubIcon /> <SSOGitHubIcon />
<span>GitHub</span> <span>GitHub</span>
</a> </a>
<a class="btn" :href="getAuthUrl('microsoft', redirectTarget)"> <a class="btn" :href="getAuthUrl('microsoft', redirectTarget)">
<MicrosoftIcon /> <SSOMicrosoftIcon />
<span>Microsoft</span> <span>Microsoft</span>
</a> </a>
<a class="btn" :href="getAuthUrl('google', redirectTarget)"> <a class="btn" :href="getAuthUrl('google', redirectTarget)">
<GoogleIcon /> <SSOGoogleIcon />
<span>Google</span> <span>Google</span>
</a> </a>
<a class="btn" :href="getAuthUrl('steam', redirectTarget)"> <a class="btn" :href="getAuthUrl('steam', redirectTarget)">
<SteamIcon /> <SSOSteamIcon />
<span>Steam</span> <span>Steam</span>
</a> </a>
<a class="btn" :href="getAuthUrl('gitlab', redirectTarget)"> <a class="btn" :href="getAuthUrl('gitlab', redirectTarget)">
<GitLabIcon /> <SSOGitLabIcon />
<span>GitLab</span> <span>GitLab</span>
</a> </a>
</section> </section>
@@ -107,15 +107,17 @@
</template> </template>
<script setup> <script setup>
import { RightArrowIcon } from 'omorphia' import {
import GitHubIcon from 'assets/icons/auth/sso-github.svg' RightArrowIcon,
import MicrosoftIcon from 'assets/icons/auth/sso-microsoft.svg' SSOGitHubIcon,
import GoogleIcon from 'assets/icons/auth/sso-google.svg' SSOMicrosoftIcon,
import SteamIcon from 'assets/icons/auth/sso-steam.svg' SSOSteamIcon,
import DiscordIcon from 'assets/icons/auth/sso-discord.svg' SSOGoogleIcon,
import KeyIcon from 'assets/icons/auth/key.svg' SSODiscordIcon,
import MailIcon from 'assets/icons/auth/mail.svg' SSOGitLabIcon,
import GitLabIcon from 'assets/icons/auth/sso-gitlab.svg' KeyIcon,
MailIcon,
} from 'omorphia'
const { formatMessage } = useVIntl() const { formatMessage } = useVIntl()

View File

@@ -4,27 +4,27 @@
<section class="third-party"> <section class="third-party">
<a class="btn discord-btn" :href="getAuthUrl('discord', redirectTarget)"> <a class="btn discord-btn" :href="getAuthUrl('discord', redirectTarget)">
<DiscordIcon /> <SSODiscordIcon />
<span>Discord</span> <span>Discord</span>
</a> </a>
<a class="btn" :href="getAuthUrl('github', redirectTarget)"> <a class="btn" :href="getAuthUrl('github', redirectTarget)">
<GitHubIcon /> <SSOGitHubIcon />
<span>GitHub</span> <span>GitHub</span>
</a> </a>
<a class="btn" :href="getAuthUrl('microsoft', redirectTarget)"> <a class="btn" :href="getAuthUrl('microsoft', redirectTarget)">
<MicrosoftIcon /> <SSOMicrosoftIcon />
<span>Microsoft</span> <span>Microsoft</span>
</a> </a>
<a class="btn" :href="getAuthUrl('google', redirectTarget)"> <a class="btn" :href="getAuthUrl('google', redirectTarget)">
<GoogleIcon /> <SSOGoogleIcon />
<span>Google</span> <span>Google</span>
</a> </a>
<a class="btn" :href="getAuthUrl('steam', redirectTarget)"> <a class="btn" :href="getAuthUrl('steam', redirectTarget)">
<SteamIcon /> <SSOSteamIcon />
<span>Steam</span> <span>Steam</span>
</a> </a>
<a class="btn" :href="getAuthUrl('gitlab', redirectTarget)"> <a class="btn" :href="getAuthUrl('gitlab', redirectTarget)">
<GitLabIcon /> <SSOGitLabIcon />
<span>GitLab</span> <span>GitLab</span>
</a> </a>
</section> </section>
@@ -123,15 +123,19 @@
</template> </template>
<script setup> <script setup>
import { RightArrowIcon, UserIcon, Checkbox } from 'omorphia' import {
import GitHubIcon from 'assets/icons/auth/sso-github.svg' RightArrowIcon,
import MicrosoftIcon from 'assets/icons/auth/sso-microsoft.svg' UserIcon,
import GoogleIcon from 'assets/icons/auth/sso-google.svg' Checkbox,
import SteamIcon from 'assets/icons/auth/sso-steam.svg' SSOGitHubIcon,
import DiscordIcon from 'assets/icons/auth/sso-discord.svg' SSOMicrosoftIcon,
import KeyIcon from 'assets/icons/auth/key.svg' SSOGoogleIcon,
import MailIcon from 'assets/icons/auth/mail.svg' SSOSteamIcon,
import GitLabIcon from 'assets/icons/auth/sso-gitlab.svg' SSODiscordIcon,
KeyIcon,
MailIcon,
SSOGitLabIcon,
} from 'omorphia'
const { formatMessage } = useVIntl() const { formatMessage } = useVIntl()