Skip to content

Commit

Permalink
VCST-1415: Update vc-shell (#10)
Browse files Browse the repository at this point in the history
  • Loading branch information
artem-dudarev authored Nov 14, 2024
1 parent de659fc commit 5739229
Show file tree
Hide file tree
Showing 11 changed files with 3,753 additions and 2,549 deletions.
16 changes: 8 additions & 8 deletions src/VirtoCommerce.PushMessages.Web/App/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,10 +23,10 @@
"@types/node": "^20.10.5",
"@typescript-eslint/eslint-plugin": "^6.16.0",
"@typescript-eslint/parser": "^6.16.0",
"@vc-shell/api-client-generator": "^1.0.247",
"@vc-shell/release-config": "^1.0.247",
"@vc-shell/ts-config": "^1.0.247",
"@vitejs/plugin-vue": "^5.0.3",
"@vc-shell/api-client-generator": "^1.0.325",
"@vc-shell/release-config": "^1.0.325",
"@vc-shell/ts-config": "^1.0.325",
"@vitejs/plugin-vue": "5.0.3",
"@vue/eslint-config-prettier": "^9.0.0",
"@vue/eslint-config-typescript": "^12.0.0",
"autoprefixer": "^10.4.16",
Expand All @@ -45,8 +45,8 @@
"sass": "^1.69.6",
"tailwindcss": "^3.4.0",
"tsx": "^4.7.1",
"typescript": "^5.3.3",
"vite": "^5.0.11",
"typescript": "~5.3.3",
"vite": "5.3.6",
"vite-plugin-checker": "^0.6.2",
"vite-plugin-mkcert": "^1.17.1",
"vite-plugin-pwa": "^0.18.1",
Expand All @@ -55,8 +55,8 @@
},
"dependencies": {
"@fortawesome/fontawesome-free": "^5.15.3",
"@vc-shell/config-generator": "^1.0.247",
"@vc-shell/framework": "^1.0.247",
"@vc-shell/config-generator": "^1.0.325",
"@vc-shell/framework": "^1.0.325",
"@vueuse/core": "^10.7.1",
"@vueuse/integrations": "^10.7.1",
"moment": "^2.30.1",
Expand Down
2 changes: 0 additions & 2 deletions src/VirtoCommerce.PushMessages.Web/App/src/main.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import DynamicModule from "./modules/push-messages";
import { bootstrap } from "./bootstrap";

// Load required CSS
import "./styles/index.scss";
import "@fortawesome/fontawesome-free/css/all.min.css";
import "roboto-fontface/css/roboto/roboto-fontface.css";
import "@vc-shell/framework/dist/index.css";
Expand All @@ -21,7 +20,6 @@ async function startApp() {
const app = createApp(RouterView)
.use(VirtoShellFramework, {
router,
platformUrl: import.meta.env.APP_PLATFORM_URL,
i18n: {
locale: import.meta.env.APP_I18N_LOCALE,
fallbackLocale: import.meta.env.APP_I18N_FALLBACK_LOCALE,
Expand Down
73 changes: 1 addition & 72 deletions src/VirtoCommerce.PushMessages.Web/App/src/pages/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -27,75 +27,4 @@ onMounted(async () => {
console.debug(`Initializing App`);
</script>

<style lang="scss">
:root {
--background-color: #f5f6f9;
--top-bar-color: #161d25;
--basic-black-color: #333333;
--tooltips-color: #a5a5a5;
--primary-color: #43b0e6;
--primary-color-hover: #319ed4;
--primary-color-disabled: #a9ddf6;
--special-color: #f89406;
--special-color-hover: #eb8b03;
--special-color-disabled: #fed498;
/* Layout variables */
--app-bar-background-color: var(--top-bar-color);
--app-bar-toolbar-icon-background-hover: #2e3d4e;
--app-bar-toolbar-item-width: 50px;
--app-bar-toolbar-icon-color: #7e8e9d;
--app-bar-account-info-role-color: #838d9a;
--background-color: #f2f2f2;
--top-bar-color: #ffffff;
--app-background: linear-gradient(180deg, #e4f5fb 5.06%, #e8f3f2 100%), linear-gradient(0deg, #e8f2f3, #e8f2f3),
#eef2f8;
--app-bar-background-color: #ffffff;
--app-bar-divider-color: #ffffff;
--app-bar-toolbar-item-width: 50px;
--app-bar-toolbar-icon-color: #7e8e9d;
--app-bar-toolbar-icon-color-hover: #465769;
--app-bar-toolbar-icon-background-hover: #ffffff;
--app-bar-account-info-name-color: #161d25;
--app-bar-account-info-role-color: #7e8e9d;
}
html,
body,
#app {
@apply tw-font-roboto tw-h-full tw-w-full tw-m-0 tw-fixed tw-overflow-hidden tw-overscroll-y-none;
}
body {
@apply tw-text-base;
}
h1,
h2,
h3,
h4,
h5,
h6,
button,
input,
select,
textarea {
@apply tw-font-roboto;
}
::-webkit-input-placeholder {
@apply tw-font-roboto;
}
:-moz-placeholder {
@apply tw-font-roboto;
}
::-moz-placeholder {
@apply tw-font-roboto;
}
:-ms-input-placeholder {
@apply tw-font-roboto;
}
</style>
<style lang="scss">@import "./../styles/index.scss";</style>
13 changes: 12 additions & 1 deletion src/VirtoCommerce.PushMessages.Web/App/src/router/routes.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { RouteRecordRaw } from "vue-router";
import App from "../pages/App.vue";
import { Invite, Login, ResetPassword, useBladeNavigation } from "@vc-shell/framework";
import { ChangePasswordPage, Invite, Login, ResetPassword, useBladeNavigation } from "@vc-shell/framework";
// eslint-disable-next-line import/no-unresolved
import whiteLogoImage from "/assets/logo-white.svg";
// eslint-disable-next-line import/no-unresolved
Expand Down Expand Up @@ -54,6 +54,17 @@ export const routes: RouteRecordRaw[] = [
userName: route.query.userName,
}),
},
{
name: "ChangePassword",
path: "/changepassword",
component: ChangePasswordPage,
meta: {
forced: true,
},
props: (_route) => ({
background: bgImage,
}),
},
{
path: "/:pathMatch(.*)*",
component: App,
Expand Down
38 changes: 38 additions & 0 deletions src/VirtoCommerce.PushMessages.Web/App/src/styles/base.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
@tailwind base;

@layer base {
html,
body,
#app {
@apply tw-font-roboto tw-h-full tw-w-full tw-m-0 tw-fixed tw-overflow-hidden tw-overscroll-y-none;
}

body {
@apply tw-text-sm tw-text-[color:var(--base-text-color)];
}
}

h1,
h2,
h3,
h4,
h5,
h6,
button,
input,
select,
textarea {
@apply tw-font-roboto;
}
::-webkit-input-placeholder {
@apply tw-font-roboto;
}
:-moz-placeholder {
@apply tw-font-roboto;
}
::-moz-placeholder {
@apply tw-font-roboto;
}
:-ms-input-placeholder {
@apply tw-font-roboto;
}
10 changes: 10 additions & 0 deletions src/VirtoCommerce.PushMessages.Web/App/src/styles/colors.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
/* Do not edit this file. Use custom.scss to add custom colors */

:root {
--base-text-color: var(--neutrals-950);
--base-error-color: var(--danger-500);
--base-border-color: var(--neutrals-200);
--app-background: var(--secondary-200);
--empty-grid-icon-color: var(--secondary-500);
--mobile-card-count-color: var(--primary-500);
}
116 changes: 116 additions & 0 deletions src/VirtoCommerce.PushMessages.Web/App/src/styles/custom.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,116 @@
/* Custom styles
*/

/* Apply color scheme example
You also need to register color theme in startApp() using the 'register(['my-theme'])' method of the useTheme composable. */
/* html.my-theme {
// Primary
--primary-50: #1F2D3A;
--primary-100: #2B3D4A;
--primary-200: #3A4E5D;
--primary-300: #4A5F70;
--primary-400: #5B6F82;
--primary-500: #6C7F94;
--primary-600: #7A8F9E;
--primary-700: #8A9FA8;
--primary-800: #9AAEB2;
--primary-900: #AABFC0;
--primary-950: #BCCDD0;
// Secondary
--secondary-50: #1F2D3A;
--secondary-100: #2B3D4A;
--secondary-200: #3A4E5D;
--secondary-300: #4A5F70;
--secondary-400: #5B6F82;
--secondary-500: #6C7F94;
--secondary-600: #7A8F9E;
--secondary-700: #8A9FA8;
--secondary-800: #9AAEB2;
--secondary-900: #AABFC0;
--secondary-950: #BCCDD0;
// Accent
--accent-50: #1F2D3A;
--accent-100: #2B3D4A;
--accent-200: #3A4E5D;
--accent-300: #4A5F70;
--accent-400: #5B6F82;
--accent-500: #6C7F94;
--accent-600: #7A8F9E;
--accent-700: #8A9FA8;
--accent-800: #9AAEB2;
--accent-900: #AABFC0;
--accent-950: #BCCDD0;
// Neutrals
--neutrals-50: #2E2E2E;
--neutrals-100: #3D3D3D;
--neutrals-200: #4D4D4D;
--neutrals-300: #6D6D6D;
--neutrals-400: #8A8A8A;
--neutrals-500: #B3B3B3;
--neutrals-600: #D4D4D4;
--neutrals-700: #E4E4E4;
--neutrals-800: #F4F4F4;
--neutrals-900: #FAFAFA;
--neutrals-950: #FFFFFF;
// Additional
--additional-50: #2E2E2E;
--additional-950: #FFFFFF;
// States
// Warning
--warning-50: #3A2D00;
--warning-100: #5A4D00;
--warning-200: #7A6D00;
--warning-300: #9A8D00;
--warning-400: #B9AB00;
--warning-500: #D8C600;
--warning-600: #D8D100;
--warning-700: #B8A800;
--warning-800: #9A8B00;
--warning-900: #7A6E00;
--warning-950: #5A5000;
// Danger
--danger-50: #3F0D0D;
--danger-100: #5E1E1E;
--danger-200: #7E2F2F;
--danger-300: #9E3F3F;
--danger-400: #BF4F4F;
--danger-500: #DF5F5F;
--danger-600: #DF4D4D;
--danger-700: #BF3D3D;
--danger-800: #9E2D2D;
--danger-900: #7E1D1D;
--danger-950: #5E0D0D;
// Success
--success-50: #1D3A1D;
--success-100: #2D5A2D;
--success-200: #3A7A3A;
--success-300: #4A9A4A;
--success-400: #5AB05A;
--success-500: #6AC56A;
--success-600: #5A9A5A;
--success-700: #4A7F4A;
--success-800: #3A664A;
--success-900: #1D4C1D;
--success-950: #0A3A0A;
// Info
--info-50: #1F2D3A;
--info-100: #2B3D4A;
--info-200: #3A4E5D;
--info-300: #4A5F70;
--info-400: #5B6F82;
--info-500: #6C7F94;
--info-600: #7A8F9E;
--info-700: #8A9FA8;
--info-800: #9AAEB2;
--info-900: #AABFC0;
--info-950: #BCCDD0;
} */
8 changes: 7 additions & 1 deletion src/VirtoCommerce.PushMessages.Web/App/src/styles/index.scss
Original file line number Diff line number Diff line change
@@ -1,3 +1,9 @@
@tailwind base;
@tailwind components;

@import 'base';

@import 'colors';

@import 'custom';

@tailwind utilities;
6 changes: 3 additions & 3 deletions src/VirtoCommerce.PushMessages.Web/App/tailwind.config.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import defaultConfig from "@vc-shell/framework/tailwind.config";

import defaultConfig, { content } from "@vc-shell/framework/tailwind.config";
export default {
prefix: "tw-",
content: ["../../node_modules/@vc-shell/**/*.{vue,js,ts,jsx,tsx}", "./src/**/*.{vue,js,ts,jsx,tsx}"],
content: [...content, "./src/**/*.{vue,js,ts,jsx,tsx}"],
theme: defaultConfig.theme,
};
6 changes: 6 additions & 0 deletions src/VirtoCommerce.PushMessages.Web/App/vite.config.mts
Original file line number Diff line number Diff line change
@@ -1,7 +1,13 @@
import { getApplicationConfiguration } from "@vc-shell/config-generator";
import { resolve } from "node:path";
import { VitePWA } from "vite-plugin-pwa";

export default getApplicationConfiguration({
resolve: {
alias: {
"vee-validate": resolve(__dirname, "node_modules/vee-validate/dist/vee-validate.mjs"),
},
},
plugins: [
VitePWA({
includeAssets: ["favicon.ico", "apple-touch-icon.png"],
Expand Down
Loading

0 comments on commit 5739229

Please sign in to comment.