You've already forked AstralRinth
forked from didirus/AstralRinth
feat(frontend): refactor and modernize welcome page (#3614)
* feat(frontend): refactor and modernize welcome page - also fixes navbar issue. Closes: #1533 * fix(frontend): lint issues & use standard variables instead of the constants from error.vue * fix(frontend): remove creator count as it's not a count of all users * fix(frontend): lang reshuffle * feat: rinthbot * fix: lint issues * fix: sizing of bot on mobile & scss cleanup for error.vue * fix: lint issues * fix: ui lint
This commit is contained in:
Calum H.
@@ -5,12 +5,7 @@
|
||||
<Logo404 />
|
||||
</div>
|
||||
<div class="error-box" :class="{ 'has-bot': !is404 }">
|
||||
<img
|
||||
v-if="!is404"
|
||||
src="https://cdn-raw.modrinth.com/sad-bot.webp"
|
||||
alt="Sad Modrinth bot"
|
||||
class="error-box__sad-bot"
|
||||
/>
|
||||
<img v-if="!is404" :src="SadRinthbot" alt="Sad Modrinth bot" class="error-box__sad-bot" />
|
||||
<div v-if="!is404" class="error-box__top-glow" />
|
||||
<div class="error-box__body">
|
||||
<h1 class="error-box__title">{{ formatMessage(errorMessages.title) }}</h1>
|
||||
@@ -55,6 +50,7 @@
|
||||
|
||||
<script setup>
|
||||
import { defineMessage, useVIntl } from "@vintl/vintl";
|
||||
import { SadRinthbot } from "@modrinth/assets";
|
||||
import Logo404 from "~/assets/images/404.svg";
|
||||
|
||||
const { formatMessage } = useVIntl();
|
||||
@@ -272,6 +268,19 @@ const routeMessages = [
|
||||
}
|
||||
}
|
||||
|
||||
.error-graphic {
|
||||
margin-bottom: 2rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
svg {
|
||||
fill: var(--color-text);
|
||||
color: var(--color-text);
|
||||
width: min(15rem, 100%);
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.error-box {
|
||||
background-color: var(--color-raised-bg);
|
||||
border-radius: 1.25rem;
|
||||
@@ -281,105 +290,96 @@ const routeMessages = [
|
||||
gap: 1.25rem;
|
||||
box-shadow: var(--shadow-card);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.error-box.has-bot {
|
||||
margin-block: 120px;
|
||||
}
|
||||
&.has-bot {
|
||||
margin-block: 120px;
|
||||
}
|
||||
|
||||
.error-box p {
|
||||
margin: 0;
|
||||
}
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.error-box a {
|
||||
color: var(--color-brand);
|
||||
font-weight: 600;
|
||||
}
|
||||
a {
|
||||
color: var(--color-brand);
|
||||
font-weight: 600;
|
||||
|
||||
.error-box a:hover,
|
||||
.error-box a:focus {
|
||||
filter: brightness(1.125);
|
||||
text-decoration: underline;
|
||||
}
|
||||
&:hover,
|
||||
&:focus {
|
||||
filter: brightness(1.125);
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.error-graphic {
|
||||
margin-bottom: 2rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
&__sad-bot {
|
||||
--_bot-height: 112px;
|
||||
position: absolute;
|
||||
top: calc(-1 * var(--_bot-height));
|
||||
right: 5rem;
|
||||
width: auto;
|
||||
height: var(--_bot-height);
|
||||
|
||||
.error-graphic svg {
|
||||
fill: var(--color-text);
|
||||
color: var(--color-text);
|
||||
@media screen and (max-width: 768px) {
|
||||
--_bot-height: 70px;
|
||||
right: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
width: min(15rem, 100%);
|
||||
height: auto;
|
||||
}
|
||||
&__top-glow {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
transparent 2rem,
|
||||
var(--color-green) calc(100% - 13rem),
|
||||
var(--color-green) calc(100% - 5rem),
|
||||
transparent calc(100% - 2rem)
|
||||
);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.error-box__sad-bot {
|
||||
--_bot-height: 112px;
|
||||
position: absolute;
|
||||
top: calc(-1 * var(--_bot-height));
|
||||
right: 5rem;
|
||||
width: auto;
|
||||
height: var(--_bot-height);
|
||||
}
|
||||
&__title {
|
||||
font-size: 2rem;
|
||||
font-weight: 900;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.error-box__top-glow {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
transparent 2rem,
|
||||
var(--color-green) calc(100% - 13rem),
|
||||
var(--color-green) calc(100% - 5rem),
|
||||
transparent calc(100% - 2rem)
|
||||
);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 0.4;
|
||||
}
|
||||
&__subtitle {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.error-box__title {
|
||||
font-size: 2rem;
|
||||
font-weight: 900;
|
||||
margin: 0;
|
||||
}
|
||||
&__body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.error-box__subtitle {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
&__list-title {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.error-box__body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
&__list {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
|
||||
.error-box__list-title {
|
||||
font-weight: 600;
|
||||
}
|
||||
li {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.error-box__list {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
|
||||
.error-box li {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.error-box__details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: var(--color-secondary);
|
||||
gap: 0.25rem;
|
||||
font-weight: 500;
|
||||
font-size: 0.875rem;
|
||||
&__details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: var(--color-secondary);
|
||||
gap: 0.25rem;
|
||||
font-weight: 500;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -159,7 +159,7 @@
|
||||
"message": "Subscribe to updates about Modrinth"
|
||||
},
|
||||
"auth.welcome.description": {
|
||||
"message": "Thank you for creating an account. You can now follow and create projects, receive updates about your favorite projects, and more!"
|
||||
"message": "You’re now part of the awesome community of creators & explorers already building, downloading, and staying up-to-date with amazing mods."
|
||||
},
|
||||
"auth.welcome.label.tos": {
|
||||
"message": "By creating an account, you have agreed to Modrinth's <terms-link>Terms</terms-link> and <privacy-policy-link>Privacy Policy</privacy-policy-link>."
|
||||
|
||||
@@ -1,10 +1,20 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>{{ formatMessage(messages.welcomeLongTitle) }}</h1>
|
||||
<div class="welcome-box has-bot">
|
||||
<img :src="WavingRinthbot" alt="Waving Modrinth Bot" class="welcome-box__waving-bot" />
|
||||
<div class="welcome-box__top-glow" />
|
||||
<div class="welcome-box__body">
|
||||
<h1 class="welcome-box__title">
|
||||
{{ formatMessage(messages.welcomeLongTitle) }}
|
||||
</h1>
|
||||
|
||||
<section class="auth-form">
|
||||
<p>
|
||||
{{ formatMessage(messages.welcomeDescription) }}
|
||||
<p class="welcome-box__subtitle">
|
||||
<IntlFormatted :message-id="messages.welcomeDescription">
|
||||
<template #bold="{ children }">
|
||||
<strong>
|
||||
<component :is="() => normalizeChildren(children)" />
|
||||
</strong>
|
||||
</template>
|
||||
</IntlFormatted>
|
||||
</p>
|
||||
|
||||
<Checkbox
|
||||
@@ -14,11 +24,12 @@
|
||||
:description="formatMessage(messages.subscribeCheckbox)"
|
||||
/>
|
||||
|
||||
<button class="btn btn-primary continue-btn centered-btn" @click="continueSignUp">
|
||||
{{ formatMessage(commonMessages.continueButton) }} <RightArrowIcon />
|
||||
<button class="btn btn-primary centered-btn" @click="continueSignUp">
|
||||
{{ formatMessage(commonMessages.continueButton) }}
|
||||
<RightArrowIcon />
|
||||
</button>
|
||||
|
||||
<p>
|
||||
<p class="tos-text">
|
||||
<IntlFormatted :message-id="messages.tosLabel">
|
||||
<template #terms-link="{ children }">
|
||||
<NuxtLink to="/legal/terms" class="text-link">
|
||||
@@ -32,12 +43,15 @@
|
||||
</template>
|
||||
</IntlFormatted>
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Checkbox, commonMessages } from "@modrinth/ui";
|
||||
import { RightArrowIcon } from "@modrinth/assets";
|
||||
import { RightArrowIcon, WavingRinthbot } from "@modrinth/assets";
|
||||
|
||||
const route = useRoute();
|
||||
|
||||
const { formatMessage } = useVIntl();
|
||||
|
||||
@@ -54,7 +68,7 @@ const messages = defineMessages({
|
||||
welcomeDescription: {
|
||||
id: "auth.welcome.description",
|
||||
defaultMessage:
|
||||
"Thank you for creating an account. You can now follow and create projects, receive updates about your favorite projects, and more!",
|
||||
"You’re now part of the awesome community of creators & explorers already building, downloading, and staying up-to-date with awazing mods.",
|
||||
},
|
||||
welcomeLongTitle: {
|
||||
id: "auth.welcome.long-title",
|
||||
@@ -72,20 +86,18 @@ useHead({
|
||||
|
||||
const subscribe = ref(true);
|
||||
|
||||
async function continueSignUp() {
|
||||
const route = useRoute();
|
||||
|
||||
onMounted(async () => {
|
||||
await useAuth(route.query.authToken);
|
||||
await useUser();
|
||||
});
|
||||
|
||||
async function continueSignUp() {
|
||||
if (subscribe.value) {
|
||||
try {
|
||||
await useBaseFetch("auth/email/subscribe", {
|
||||
method: "POST",
|
||||
});
|
||||
} catch {
|
||||
/* empty */
|
||||
}
|
||||
} catch {}
|
||||
}
|
||||
|
||||
if (route.query.redirect) {
|
||||
@@ -95,3 +107,84 @@ async function continueSignUp() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.welcome-box {
|
||||
background-color: var(--color-raised-bg);
|
||||
border-radius: var(--size-rounded-lg);
|
||||
padding: 1.75rem 2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.25rem;
|
||||
box-shadow: var(--shadow-card);
|
||||
position: relative;
|
||||
|
||||
&.has-bot {
|
||||
margin-block: 120px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
a {
|
||||
color: var(--color-brand);
|
||||
font-weight: var(--weight-bold);
|
||||
&:hover,
|
||||
&:focus {
|
||||
filter: brightness(1.125);
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
&__waving-bot {
|
||||
--bot-height: 112px;
|
||||
position: absolute;
|
||||
top: calc(-1 * var(--bot-height));
|
||||
right: 5rem;
|
||||
height: var(--bot-height);
|
||||
width: auto;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
--bot-height: 70px;
|
||||
right: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
&__top-glow {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
opacity: 0.4;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
transparent 2rem,
|
||||
var(--color-green) calc(100% - 13rem),
|
||||
var(--color-green) calc(100% - 5rem),
|
||||
transparent calc(100% - 2rem)
|
||||
);
|
||||
}
|
||||
|
||||
&__body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: var(--text-32);
|
||||
font-weight: var(--weight-extrabold);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: var(--text-18);
|
||||
}
|
||||
|
||||
.tos-text {
|
||||
font-size: var(--text-14);
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user