fix: fixed some UI bugs

packages/frontend/package.json

@@ -45,6 +45,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",
     "qrcode.vue": "^3.3.3",
     "sass": "^1.77.8",

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 {
@@ -17,16 +18,9 @@ module.exports = configure(function (ctx) {
 
 		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: [
-			'roboto-font', // optional, you are not bound to it
-			'material-icons' // optional, you are not bound to it
-		],
+		extras: ['roboto-font', 'material-icons'],
 
 		vendor: {
 			remove: ['@bytetrade/ui']
@@ -45,6 +39,18 @@ module.exports = configure(function (ctx) {
 				EXPIRES: 'Wed, 01 Jan 2025 00:00:00 GMT'
 			},
 
+			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, [

packages/frontend/src/components/BasicWindow.vue

@@ -384,8 +384,8 @@ export default defineComponent({
 
 <style lang="scss">
 .iframe-box {
-	box-shadow: 0 1px 5px rgb(0 0 0 / 20%), 0 2px 2px rgb(0 0 0 / 14%),
-		0 3px 1px -2px rgb(0 0 0 / 12%);
+	box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.4),
+		0px 0px 40px 0px rgba(0, 0, 0, 0.2);
 	border-radius: 10px;
 
 	.iframe-window {

packages/frontend/src/components/ConfirmDialog.vue

@@ -1,6 +1,30 @@
 <template>
 	<q-dialog class="card-dialog" v-model="show" ref="dialogRef" @hide="onCancel">
-		<q-card class="card-continer" flat>
+		<q-card class="card-continer" v-if="isMobile" flat>
+			<div class="text-ink-1 text-subtitle2 row items-center justify-center">
+				{{ title }}
+			</div>
+
+			<div class="dialog-desc left row item-center justify-center q-my-lg">
+				{{ message }}
+			</div>
+
+			<div class="row item-center justify-between">
+				<span
+					class="cancel-mobile text-ink-2 q-mr-md"
+					v-if="showCancel"
+					@click="onCancel"
+					>{{ t('buttons.cancel') }}</span
+				>
+				<span
+					class="confirm-mobile bg-yellow-default text-ink-1"
+					@click="submit"
+					>{{ t('buttons.confirm') }}</span
+				>
+			</div>
+		</q-card>
+
+		<q-card class="card-continer" v-else flat>
 			<div class="dialog-header row items-center justify-between">
 				<div class="text-ink-1">
 					{{ title }}
@@ -43,6 +67,7 @@
 import { useI18n } from 'vue-i18n';
 import { useDialogPluginComponent } from 'quasar';
 import { ref } from 'vue';
+import { isMobile } from '../utils/resize';
 
 defineProps({
 	title: {
@@ -142,6 +167,37 @@ const onCancel = async () => {
 				opacity: 0.8;
 			}
 		}
+
+		.confirm-mobile {
+			width: 46%;
+			height: 48px;
+			line-height: 48px;
+			margin-top: 12px;
+			text-align: center;
+			border-radius: 8px;
+			font-size: 16px;
+			float: right;
+			cursor: pointer;
+			&:hover {
+				opacity: 0.8;
+			}
+		}
+
+		.cancel-mobile {
+			width: 46%;
+			height: 48px;
+			line-height: 48px;
+			margin-top: 12px;
+			text-align: center;
+			border-radius: 8px;
+			font-size: 16px;
+			float: right;
+			cursor: pointer;
+			border: 1px solid $btn-stroke;
+			&:hover {
+				opacity: 0.8;
+			}
+		}
 	}
 }
 </style>

packages/frontend/src/components/UpgradeComponent.vue

@@ -119,33 +119,39 @@ export default defineComponent({
 		.shadow {
 			width: 100%;
 			height: 100%;
-			border: 4px solid transparent;
-			border-top-color: #ffffff;
+			// border: 4px solid transparent;
+			// border-top-color: #ffffff;
 			box-sizing: border-box;
 			border-radius: 50%;
-			animation: 1.2s loaderAni linear infinite;
+			animation: 2.5s loaderAni linear infinite;
 			position: absolute;
 			left: 0;
 			right: 0;
 			top: 0;
 			bottom: 0;
 			margin: auto;
-			&:before {
-				content: '';
-				display: block;
-				width: calc(100% + 2px);
-				height: calc(100% + 2px);
-				position: absolute;
-				left: -3px;
-				right: 0;
-				top: 0;
-				bottom: 0;
-				margin: auto;
-				border: 2px solid #ffffff;
-				box-sizing: content-box;
-				border-radius: 50%;
-				opacity: 0.5;
-			}
+
+			background-image: url('./../assets/upgrading.png');
+			background-repeat: no-repeat;
+			background-size: 100%;
+			background-position: center center;
+
+			// &:before {
+			// 	content: '';
+			// 	display: block;
+			// 	width: calc(100% + 0px);
+			// 	height: calc(100% + 0px);
+			// 	position: absolute;
+			// 	left: -1px;
+			// 	right: 0;
+			// 	top: 0;
+			// 	bottom: 0;
+			// 	margin: auto;
+			// 	border: 1px solid #ffffff;
+			// 	box-sizing: content-box;
+			// 	border-radius: 50%;
+			// 	opacity: 0.5;
+			// }
 
 			@keyframes loaderAni {
 				0% {

packages/frontend/src/pages/LaunchPad.vue

@@ -655,7 +655,7 @@ const goto = (value: number) => {
 	.delete_launch {
 		width: 20px;
 		height: 20px;
-		background-image: url('./../assets/delete_iocn.png');
+		background-image: url('./../assets/delete_app_icon.svg');
 		background-repeat: no-repeat;
 		background-position: center;
 		background-size: contain;

packages/frontend/src/pages/mobile/LaunchPad.vue

@@ -303,10 +303,10 @@ const goto = (value: number) => {
 	.delete_launch {
 		width: 36px;
 		height: 36px;
-		background-image: url('./../../assets/delete_iocn.png');
+		background-image: url('./../../assets/delete_app_icon.svg');
 		background-repeat: no-repeat;
 		background-position: center;
-		background-size: contain;
+		background-size: 60% 60%;
 		position: absolute;
 		top: -14px;
 		left: 7px;