DerexXD/UT-Registration-Plus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: Replace Webpack with Vite (#53)

Browse Source
This commit is contained in:
Razboy20
2024-01-24 19:40:30 -06:00
committed by GitHub
parent 1629c85818
commit 0560a01a55
112 changed files with 7322 additions and 32180 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/views/components/common/Button/Button.module.scss
View File

@@ -1,4 +1,5 @@
@import 'src/views/styles/base.module.scss';
@use 'sass:color';
@use 'src/views/styles/colors.module.scss';
.button {
background-color: #000;
@@ -7,9 +8,8 @@
margin: 10px;
border-radius: 8px;
border: none;
box-shadow: rgba(0, 0, 0, 0.4) 2px 2px 4px;
cursor: pointer;
transition: all 0.2s ease-in-out;
transition: all 0.1s ease-in-out;
font-family: 'Inter';
display: flex;
@@ -22,7 +22,7 @@
}
&:active {
animation: click_animation 0.2s ease-in-out;
transform: scale(0.96);
}
&.disabled {
@@ -30,20 +30,20 @@
opacity: 0.5 !important;
&:active {
animation: none !important;
transform: unset;
}
}
@each $color,
$value
in (
primary: $burnt_orange,
secondary: $charcoal,
tertiary: $bluebonnet,
danger: $speedway_brick,
warning: $tangerine,
success: $turtle_pond,
info: $turquoise
primary: colors.$burnt_orange,
secondary: colors.$charcoal,
tertiary: colors.$bluebonnet,
danger: colors.$speedway_brick,
warning: colors.$tangerine,
success: colors.$turtle_pond,
info: colors.$turquoise
)
{
&.#{$color} {
@@ -51,12 +51,12 @@
color: #fff;
&:hover {
background-color: lighten($value, 10%);
background-color: color.adjust($value, $lightness: 10%);
}
&:focus,
&:focus-visible,
&:active {
background-color: darken($value, 10%);
background-color: color.adjust($value, $lightness: -10%);
}
&.disabled {
@@ -65,15 +65,3 @@
}
}
}
@keyframes click_animation {
0% {
transform: scale(1);
}
50% {
transform: scale(0.9);
}
100% {
transform: scale(1);
}
}

4
src/views/components/common/Card/Card.module.scss
View File

@@ -1,7 +1,7 @@
@import 'src/views/styles/base.module.scss';
@use 'src/views/styles/colors.module.scss';
.card {
background: $white;
background: colors.$white;
border: 0.5px dotted #c3cee0;
box-sizing: border-box;

4
src/views/components/common/Divider/Divider.module.scss
View File

@@ -1,5 +1,5 @@
@import 'src/views/styles/base.module.scss';
@use 'src/views/styles/colors.module.scss';
hr {
border: 1px solid $limestone;
border: 1px solid colors.$limestone;
}

4
src/views/components/common/Divider/Divider.tsx
View File

@@ -1,6 +1,6 @@
import React from 'react';
import classnames from 'classnames';
import { Color } from 'src/views/styles/colors.module.scss';
import React from 'react';
import { Color } from '@views/styles/colors.module.scss';
import styles from './Divider.module.scss';
export type Props = {

6
src/views/components/common/Icon/Icon.module.scss
View File

@@ -1,10 +1,10 @@
@import 'src/views/styles/fonts.module.scss';
@use 'src/views/styles/fonts.module.scss';
.icon {
font-family: 'Material Icons Round';
font-weight: $normal_weight;
font-weight: fonts.$normal_weight;
font-style: normal;
font-size: $medium_size;
font-size: fonts.$medium_size;
line-height: 1;
letter-spacing: normal;
text-transform: none;

7
src/views/components/common/Icon/Icon.tsx
View File

@@ -1,10 +1,13 @@
import classNames from 'classnames';
import React from 'react';
import colors, { Color } from 'src/views/styles/colors.module.scss';
import fonts, { Size, Weight } from 'src/views/styles/fonts.module.scss';
import colors, { Color } from '@views/styles/colors.module.scss';
import fonts, { Size } from '@views/styles/fonts.module.scss';
import styles from './Icon.module.scss';
import { MaterialIconCode } from './MaterialIcons';
/**
*
*/
export type Props = {
name: MaterialIconCode;
className?: string;

2
src/views/components/common/Link/Link.tsx
View File

@@ -1,6 +1,6 @@
import { background } from '@shared/messages';
import classNames from 'classnames';
import React, { PropsWithChildren } from 'react';
import { background } from 'src/shared/messages';
import Text, { TextProps } from '../Text/Text';
import styles from './Link.module.scss';

4
src/views/components/common/Popup/Popup.module.scss
View File

@@ -1,4 +1,4 @@
@import 'src/views/styles/base.module.scss';
@use 'src/views/styles/colors.module.scss';
.container {
width: 100%;
@@ -18,7 +18,7 @@
.body {
overflow-y: auto;
z-index: 2147483647;
background-color: $white;
background-color: colors.$white;
box-shadow: 0px 12px 30px 0px #323e5f29;
transition: box-shadow 0.15s;
}

6
src/views/components/common/Spinner/Spinner.module.scss
View File

@@ -1,11 +1,11 @@
@import 'src/views/styles/base.module.scss';
@use 'src/views/styles/colors.module.scss';
$spinner-border-width: 10px;
.spinner {
border: 1px solid $charcoal;
border: 1px solid colors.$charcoal;
border-width: $spinner-border-width;
border-top: $spinner-border-width solid $tangerine;
border-top: $spinner-border-width solid colors.$tangerine;
margin: 0 auto 15px auto;
border-radius: 50%;
width: 60px;

31
src/views/components/common/Text/Text.module.scss
View File

@@ -1,59 +1,60 @@
@import 'src/views/styles/base.module.scss';
@use 'src/views/styles/colors.module.scss';
@use 'src/views/styles/fonts.module.scss';
.text {
font-family: 'Inter', sans-serif;
color: $charcoal;
color: colors.$charcoal;
line-height: initial;
}
.light_weight {
font-weight: $light_weight;
font-weight: fonts.$light_weight;
}
.regular_weight {
font-weight: $regular_weight;
font-weight: fonts.$regular_weight;
}
.normal_weight {
font-weight: $normal_weight;
font-weight: fonts.$normal_weight;
}
.semi_bold_weight {
font-weight: $semi_bold_weight;
font-weight: fonts.$semi_bold_weight;
}
.bold_weight {
font-weight: $bold_weight;
font-weight: fonts.$bold_weight;
}
.black_weight {
font-weight: $black_weight;
font-weight: fonts.$black_weight;
}
.x_small_size {
font-size: $x_small_size;
font-size: fonts.$x_small_size;
}
.xx_small_size {
font-size: $xx_small_size;
font-size: fonts.$xx_small_size;
}
.small_size {
font-size: $small_size;
font-size: fonts.$small_size;
}
.medium_size {
font-size: $medium_size;
font-size: fonts.$medium_size;
}
.large_size {
font-size: $large_size;
font-size: fonts.$large_size;
}
.x_large_size {
font-size: $x_large_size;
font-size: fonts.$x_large_size;
}
.xx_large_size {
font-size: $xx_large_size;
font-size: fonts.$xx_large_size;
}

7
src/views/components/common/Text/Text.tsx
View File

@@ -1,9 +1,12 @@
import classNames from 'classnames';
import React, { PropsWithChildren } from 'react';
import colors, { Color } from 'src/views/styles/colors.module.scss';
import fonts, { Size, Weight } from 'src/views/styles/fonts.module.scss';
import colors, { Color } from '@views/styles/colors.module.scss';
import { Size, Weight } from '@views/styles/fonts.module.scss';
import styles from './Text.module.scss';
/**
*
*/
export type TextProps = {
color?: Color;
weight?: Weight;