Merge pull request #5 from beclab/feat/dark-theme

feat: adapting dark theme

packages/editor/package.json

@@ -17,7 +17,7 @@
     "build:preview": "ACTION=PREVIEW quasar build"
   },
   "dependencies": {
-    "@bytetrade/ui": "^0.0.83",
+		"@bytetrade/ui": "^0.1.12",
     "@quasar/extras": "^1.16.9",
     "axios": "^1.3.5",
     "html2canvas": "^1.4.1",
@@ -32,7 +32,7 @@
     "vue-router": "^4.0.0"
   },
   "devDependencies": {
-    "@quasar/app-vite": "^1.3.0",
+    "@quasar/app-vite": "^2.0.0-beta.1",
     "@types/node": "^12.20.21",
     "@typescript-eslint/eslint-plugin": "^5.10.0",
     "@typescript-eslint/parser": "^5.10.0",

packages/editor/quasar.config.js

@@ -8,13 +8,13 @@
 // Configuration for your app
 // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js
 
-const { configure } = require('quasar/wrappers');
-const dotenv = require('dotenv');
+import { configure } from 'quasar/wrappers';
+import dotenv from 'dotenv';
 
 dotenv.config();
 console.log(process.env);
 
-module.exports = configure(function (/* ctx */) {
+export default configure(function (/* ctx */) {
 	return {
 		eslint: {
 			// fix: true,
@@ -31,7 +31,7 @@ module.exports = configure(function (/* ctx */) {
 		// app boot file (/src/boot)
 		// --> boot files are part of "main.js"
 		// https://v2.quasar.dev/quasar-cli-vite/boot-files
-		boot: ['i18n', 'smartEnginEntrance', 'bytetradeUi'],
+		boot: ['i18n', 'smartEnginEntrance', 'bytetrade-ui'],
 
 		// https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#css
 		css: ['app.scss'],
@@ -119,7 +119,7 @@ module.exports = configure(function (/* ctx */) {
 					ws: true
 				}
 			},
-			open: true, // opens browser window automatically
+			open: true // opens browser window automatically
 			// hmr: {
 			// 	port: 9100,
 			// 	clientPort: 443,
@@ -129,7 +129,9 @@ module.exports = configure(function (/* ctx */) {
 
 		// https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#framework
 		framework: {
-			config: {},
+			config: {
+				dark: 'auto'
+			},
 
 			// iconSet: 'material-icons', // Quasar icon set
 			// lang: 'en-US', // Quasar language pack
@@ -161,27 +163,6 @@ module.exports = configure(function (/* ctx */) {
 		//   electronPreload: 'src-electron/electron-preload'
 		// },
 
-		// https://v2.quasar.dev/quasar-cli-vite/developing-ssr/configuring-ssr
-		ssr: {
-			// ssrPwaHtmlFilename: 'offline.html', // do NOT use index.html as name!
-			// will mess up SSR
-
-			// extendSSRWebserverConf (esbuildConf) {},
-			// extendPackageJson (json) {},
-
-			pwa: false,
-
-			// manualStoreHydration: true,
-			// manualPostHydrationTrigger: true,
-
-			prodPort: 4020, // The default port that the production server should use
-			// (gets superseded if process.env.PORT is specified at runtime)
-
-			middlewares: [
-				'render' // keep this as last one
-			]
-		},
-
 		// https://v2.quasar.dev/quasar-cli-vite/developing-pwa/configuring-pwa
 		pwa: {
 			workboxMode: 'generateSW', // or 'injectManifest'

packages/editor/src/App.vue

@@ -1,4 +1,5 @@
 <template>
+	<bt-theme />
 	<router-view />
 </template>
 <script>

packages/editor/src/components/BioToolBar.vue

@@ -49,8 +49,7 @@ const switchItem = (item: string) => {
 	.item {
 		width: 3.2rem;
 		height: 3.2rem;
-		margin: auto;
-		margin-top: 2.4rem;
+		margin: 2.4rem auto auto;
 		display: flex;
 		border: none;
 		background: #ffffff;

packages/editor/src/components/avatar/AvatarChooseDialog.vue

@@ -6,7 +6,7 @@
 				<q-icon
 					size="16px"
 					name="sym_r_clear"
-					color="grey-8"
+					color="ink-3"
 					@click="onDialogCancel"
 				/>
 			</div>
@@ -32,25 +32,15 @@
 									</template>
 								</q-tab>
 
-								<div
-									:style="{
-										background: tab === 'upload' ? '#E8E8E8' : '#F6F6F6'
-									}"
-									class="tab-title-line"
-								/>
+								<div class="tab-title-line" />
 
 								<q-tab style="padding: 0" name="nft">
 									<template v-slot:default>
 										<bt-tab-item :selected="tab === 'nft'" label="NFT avatar" />
 									</template>
 								</q-tab>
 
-								<div
-									:style="{
-										background: tab === 'default' ? '#E8E8E8' : '#F6F6F6'
-									}"
-									class="tab-title-line"
-								/>
+								<div class="tab-title-line" />
 
 								<q-tab style="padding: 0" name="upload">
 									<template v-slot:default>
@@ -116,7 +106,7 @@ import DefaultAvatar from './DefaultAvatar.vue';
 import UploadAvatar from './UploadAvatar.vue';
 import NFTAvatar from './NFTAvatar.vue';
 import BioButton from 'components/base/BioButton.vue';
-import { bus } from '../..//utils/bus';
+import { bus } from 'src/utils/bus';
 import { useUserStore } from 'src/stores/user';
 import { Encoder } from '@bytetrade/core';
 import ProfileAvatarBoard from './ProfileAvatarBoard.vue';
@@ -209,14 +199,14 @@ onUnmounted(() => {
 	width: 800px;
 	height: 500px;
 	max-height: 500px;
-	background: #ffffff;
+	background: $background-1;
 	padding: 0;
 	position: relative;
 
 	.avatar-choose-header {
 		width: 100%;
 		height: 32px;
-		background: #f8f8f8;
+		background: $background-3;
 		padding-left: 12px;
 		padding-right: 12px;
 
@@ -227,19 +217,20 @@ onUnmounted(() => {
 			line-height: 16px;
 			letter-spacing: 0;
 			text-align: left;
+			color: $ink-1;
 		}
 	}
 
 	.avatar-choose-view {
 		margin-top: 20px;
 		border-radius: 8px;
-		border: 1px solid var(--Grey-02, #ebebeb);
+		border: 1px solid $separator-2;
 		height: 364px;
 		width: 374px;
 		margin-right: 6px;
 
 		.tab-title-background {
-			background: #f6f6f6;
+			background: $background-3;
 			margin-top: 16px;
 			margin-left: 16px;
 			border-radius: 4px;
@@ -250,17 +241,18 @@ onUnmounted(() => {
 			width: 1px;
 			height: 14px;
 			border-radius: 0.5px;
+			background-color: $ink-3;
 		}
 	}
 
 	.avatar-crop-view {
 		margin-top: 20px;
 		border-radius: 8px;
-		border: 1px solid var(--Grey-02, #ebebeb);
+		border: 1px solid $separator-2;
 		height: 364px;
 		width: 374px;
 		margin-left: 6px;
-		background: #00000080;
+		background: $background-3;
 
 		.avatar-preview {
 			width: 100%;

packages/editor/src/components/avatar/DefaultAvatar.vue

@@ -14,8 +14,8 @@
 
 <script setup lang="ts">
 import { onMounted, ref } from 'vue';
-import BioAvatarSelector from 'components/base/BioAvatarSelector.vue';
-import { bus } from '../../utils/bus';
+import BioAvatarSelector from 'src/components/base/BioAvatarSelector.vue';
+import { bus } from 'src/utils/bus';
 
 defineProps({
 	modelValue: {

packages/editor/src/components/avatar/NFTAvatar.vue

@@ -15,7 +15,7 @@
 			</div>
 		</div>
 		<div v-else class="column justify-center items-center" style="height: 100%">
-			<q-icon size="32px" name="sym_r_imagesmode" color="grey-5" />
+			<q-icon size="32px" name="sym_r_imagesmode" color="ink-2" />
 			<div class="nft-image-title">
 				You have not bound the blockchain address and cannot obtain the
 				corresponding NFT image. Go to the settings to complete the binding and
@@ -25,7 +25,7 @@
 				class="nft-bind-border row justify-center items-center cursor-pointer"
 				@click="goBindCloude"
 			>
-				<q-icon size="16px" name="sym_r_add_photo_alternate" />
+				<q-icon color="ink-2" size="16px" name="sym_r_add_photo_alternate" />
 				<div class="nft-bind-label">Go to Binding</div>
 			</div>
 		</div>
@@ -70,13 +70,13 @@ const goBindCloude = () => {
 		line-height: 16px;
 		letter-spacing: 0em;
 		text-align: center;
-		color: var(--Grey-05, #adadad);
+		color: $ink-2;
 		margin-top: 8px;
 	}
 
 	.nft-bind-border {
 		margin-top: 12px;
-		border: 1px solid #2ee58a;
+		border: 1px solid $green-default;
 		padding: 8px 21px;
 		border-radius: 8px;
 
@@ -88,7 +88,7 @@ const goBindCloude = () => {
 			line-height: 16px;
 			letter-spacing: 0em;
 			text-align: left;
-			color: var(--Grey-10, #1f1814);
+			color: $ink-2;
 		}
 	}
 }

packages/editor/src/components/avatar/UploadAvatar.vue

@@ -31,7 +31,7 @@
 import { onMounted, ref } from 'vue';
 import { useUserStore } from 'src/stores/user';
 import { useQuasar } from 'quasar';
-import { bus } from '../../utils/bus';
+import { bus } from 'src/utils/bus';
 
 defineProps({
 	modelValue: {
@@ -76,7 +76,7 @@ const fail = (response: unknown) => {
 
 	.upload-image-inner {
 		border-radius: 8px;
-		border: 1px solid var(--Grey-02, #ebebeb);
+		border: 1px solid $separator-2;
 		width: 120px;
 		height: 120px;
 
@@ -88,7 +88,7 @@ const fail = (response: unknown) => {
 			line-height: 16px;
 			letter-spacing: 0em;
 			text-align: left;
-			color: var(--Grey-08, #5c5551);
+			color: $ink-2;
 		}
 	}
 
@@ -100,7 +100,7 @@ const fail = (response: unknown) => {
 		line-height: 16px;
 		letter-spacing: 0em;
 		text-align: center;
-		color: #000;
+		color: $ink-1;
 	}
 
 	.upload-image-label {
@@ -111,7 +111,7 @@ const fail = (response: unknown) => {
 		letter-spacing: 0em;
 		text-align: center;
 		margin-top: 4px;
-		color: var(--Grey-05-, #adadad);
+		color: $ink-3;
 	}
 }
 </style>

packages/editor/src/components/base/BioAvatarSelector.vue

@@ -24,7 +24,7 @@ defineProps({
 	height: 48px;
 	padding: 2px;
 	border-radius: 4px;
-	border: 1px solid var(--Grey-02, #ebebeb);
+	border: 1px solid $green-default;
 }
 
 .avatar-selector-normal {

packages/editor/src/components/base/BioButton.vue

@@ -10,9 +10,9 @@
 		<q-icon
 			v-if="icon"
 			size="16px"
-			:color="selected ? 'grey-10' : 'grey-8'"
+			:color="selected ? 'ink-on-brand-black' : 'ink-2'"
 			:name="icon"
-			style="margin-right: 8px"
+			class="q-mr-sm"
 		/>
 		<span
 			:class="selected ? 'bio-selected-button__label' : 'bio-button__label'"
@@ -73,8 +73,8 @@ onMounted(() => {
 
 <style scoped lang="scss">
 .bio-button {
-	background: white;
-	border: 1px solid var(--border, #ebebeb);
+	background: $background-1;
+	border: 1px solid $btn-stroke;
 	height: 32px;
 	width: var(--width, 100%);
 	padding-left: 12px;
@@ -109,7 +109,7 @@ onMounted(() => {
 		letter-spacing: 0em;
 		text-align: center;
 		overflow: hidden;
-		color: var(--grey-08, #5c5551);
+		color: $ink-2;
 		text-overflow: ellipsis;
 	}
 }
@@ -153,7 +153,7 @@ onMounted(() => {
 		letter-spacing: 0em;
 		text-align: center;
 		overflow: hidden;
-		color: var(--grey-10, #1f1814);
+		color: $ink-on-brand-black;
 		text-overflow: ellipsis;
 	}
 }

packages/editor/src/components/base/BioImage.vue

@@ -12,7 +12,7 @@
 	>
 		<q-img v-if="imgUrl" class="bio-img" :src="imgUrl" />
 		<div v-else class="bio-img-none column justify-center items-center">
-			<q-icon size="32px" color="grey-5" name="sym_r_imagesmode" />
+			<q-icon size="32px" color="ink-3" name="sym_r_imagesmode" />
 		</div>
 	</BtUploader>
 </template>
@@ -64,7 +64,7 @@ const fail = (response: unknown) => {
 	width: 72px;
 	height: 72px;
 	border-radius: 8px;
-	background: var(--grey-01, #f6f6f6);
-	border: 1px solid var(--border, #ebebeb);
+	background: $background-3;
+	border: $separator-2;
 }
 </style>