Merge pull request #20 from beclab/fix/ui_bug

fix: fixed some UI bugs
beclab · Dec 18, 2024 · 7f8b13e · 7f8b13e
2 parents 0f75cd7 + c3d4cb5
commit 7f8b13e
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 11 deletions.
diff --git a/packages/frontend/package-lock.json b/packages/frontend/package-lock.json
diff --git a/packages/frontend/package.json b/packages/frontend/package.json
@@ -42,6 +42,7 @@
     "eslint-plugin-vue": "^9.0.0",
     "node-polyfill": "^1.0.0",
     "node-polyfill-webpack-plugin": "^1.1.4",
+    "preload-webpack-plugin": "^3.0.0-beta.4",
     "prettier": "^2.5.1",
     "sass": "^1.77.6",
     "terser-webpack-plugin": "^5.3.10",

diff --git a/packages/frontend/quasar.config.js b/packages/frontend/quasar.config.js
@@ -1,6 +1,7 @@
 const { configure } = require('quasar/wrappers');
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
+const PreloadWebpackPlugin = require('preload-webpack-plugin');
 
 module.exports = configure(function (ctx) {
 	return {
@@ -15,13 +16,9 @@ module.exports = configure(function (ctx) {
 
 		preFetch: true,
 		boot: ['i18n', 'axios', 'smartEnginEntrance'],
-		css: [
-			'app.scss',
-			'fonts.scss',
-			ctx.dev ? 'font.dev.scss' : 'font.pro.scss'
-		],
+		css: ['app.scss', ctx.dev ? 'font.dev.scss' : 'font.pro.scss'],
 
-		extras: ['material-icons'],
+		extras: ['material-icons', 'roboto-font'],
 
 		vendor: {
 			remove: ['@bytetrade/ui']
@@ -46,6 +43,18 @@ module.exports = configure(function (ctx) {
 			extractCSS: true,
 			sourceMap: true,
 
+			extendWebpack(cfg) {
+				!ctx.dev &&
+					cfg.plugins.push(
+						new PreloadWebpackPlugin({
+							rel: 'preload',
+							include: 'allAssets',
+							fileWhitelist: [/.+MaterialSymbolsRounded.+/],
+							as: 'font'
+						})
+					);
+			},
+
 			chainWebpack(chain, { isClient, isServer }) {
 				if (isClient) {
 					chain.plugin('css-minimizer-webpack-plugin').use(CssMinimizerPlugin, [

diff --git a/packages/frontend/src/assets/fonts/Montserrat-ExtraBold.ttf b/packages/frontend/src/assets/fonts/Montserrat-ExtraBold.ttf
diff --git a/packages/frontend/src/css/fonts.scss b/packages/frontend/src/css/fonts.scss
diff --git a/packages/frontend/src/pages/FirstLogin.vue b/packages/frontend/src/pages/FirstLogin.vue
@@ -146,11 +146,12 @@ input[type='password']::placeholder {
 </style> -->
 <style lang="scss" scoped>
 input[type='password'] {
-	font-size: 28px !important;
+	font-size: 38px !important;
 	caret-color: #ffffff;
 	letter-spacing: 1px;
 	line-height: 16px;
 	height: 16px;
+	font-family: 'Arial', sans-serif;
 }
 input[type='password']::placeholder {
 	font-size: 12px;