ui/splashscreen: transform to use css modules
This commit is contained in:
@@ -1,4 +1,4 @@
|
|||||||
#splash {
|
.splash {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
inset: 0;
|
inset: 0;
|
||||||
background: linear-gradient(to top, #e3e7e7, #edf1f1);
|
background: linear-gradient(to top, #e3e7e7, #edf1f1);
|
||||||
@@ -9,17 +9,17 @@
|
|||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
#splash .content {
|
.splash_content {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
.splash_title {
|
||||||
@apply h-8 mb-8;
|
@apply h-8 mb-8;
|
||||||
}
|
}
|
||||||
|
|
||||||
.loader {
|
.loading_bar {
|
||||||
@apply h-3 w-60 mb-3;
|
@apply h-3 w-60 mb-3;
|
||||||
width: 18rem;
|
width: 18rem;
|
||||||
background: repeating-linear-gradient(
|
background: repeating-linear-gradient(
|
||||||
@@ -1,14 +1,14 @@
|
|||||||
import Logo from "@/logos/darknet-builder-logo.svg";
|
import Logo from "@/logos/darknet-builder-logo.svg";
|
||||||
import "./splash.css";
|
import styles from "./splash.module.css";
|
||||||
import { Typography } from "../components/Typography/Typography";
|
import { Typography } from "../components/Typography/Typography";
|
||||||
|
|
||||||
export const Splash = () => (
|
export const Splash = () => (
|
||||||
<div id="splash">
|
<div class={styles.splash}>
|
||||||
<div class="content">
|
<div class={styles.splash_content}>
|
||||||
<span class="title">
|
<span class={styles.splash_title}>
|
||||||
<Logo />
|
<Logo />
|
||||||
</span>
|
</span>
|
||||||
<div class="loader"></div>
|
<div class={styles.loading_bar} />
|
||||||
|
|
||||||
<Typography hierarchy="label" size="xs" weight="medium">
|
<Typography hierarchy="label" size="xs" weight="medium">
|
||||||
Loading new Clan
|
Loading new Clan
|
||||||
|
|||||||
Reference in New Issue
Block a user