@@ -16,4 +17,5 @@ import { Component } from '@angular/core';
`,
})
export class FooterComponent {
-}
+ constructor(private themeService: NbThemeService) {}
+}
\ No newline at end of file
diff --git a/src/app/@theme/components/header/header.component.ts b/src/app/@theme/components/header/header.component.ts
index bfe2b9bc..14fa4e53 100644
--- a/src/app/@theme/components/header/header.component.ts
+++ b/src/app/@theme/components/header/header.component.ts
@@ -17,24 +17,28 @@ export class HeaderComponent implements OnInit, OnDestroy {
userPictureOnly: boolean = false;
user: any;
- themes = [
- {
- value: 'default',
- name: 'Light',
- },
- {
- value: 'dark',
- name: 'Dark',
- },
- {
- value: 'cosmic',
- name: 'Cosmic',
- },
- {
- value: 'corporate',
- name: 'Corporate',
- },
- ];
+themes = [
+ {
+ value: 'default',
+ name: 'Light',
+ },
+ {
+ value: 'dark',
+ name: 'Dark',
+ },
+ {
+ value: 'cosmic',
+ name: 'Cosmic',
+ },
+ {
+ value: 'corporate',
+ name: 'Corporate',
+ },
+ {
+ value: 'marketsoft',
+ name: 'Marketsoft',
+ },
+];
currentTheme = 'default';
diff --git a/src/app/@theme/styles/styles.scss b/src/app/@theme/styles/styles.scss
index 5b3be87e..e71bc4f1 100644
--- a/src/app/@theme/styles/styles.scss
+++ b/src/app/@theme/styles/styles.scss
@@ -1,4 +1,6 @@
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700&display=swap');
+/* You can add global styles to this file, and also import other style files */
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
// themes - our custom or/and out of the box themes
@import 'themes';
diff --git a/src/app/@theme/styles/theme.marketsoft.ts b/src/app/@theme/styles/theme.marketsoft.ts
new file mode 100644
index 00000000..46215f8c
--- /dev/null
+++ b/src/app/@theme/styles/theme.marketsoft.ts
@@ -0,0 +1,171 @@
+import { NbJSThemeOptions, DEFAULT_THEME as baseTheme } from '@nebular/theme';
+
+const baseThemeVariables = baseTheme.variables;
+
+export const MARKETSOFT_THEME = {
+ name: 'marketsoft',
+ base: 'default',
+ variables: {
+ // Based on the Marketsoft brand colors from the provided brand guide
+ // Primary color - Marketsoft red
+ temperature: {
+ arcFill: ['#D6001C', '#D6001C', '#D6001C', '#D6001C', '#D6001C'],
+ arcEmpty: baseThemeVariables.bg2,
+ thumbBg: '#FFFFFF',
+ thumbBorder: '#D6001C',
+ },
+
+ // Override with Marketsoft brand colors
+ primary: '#D6001C', // Marketsoft red
+ success: '#2a2e40', // Marketsoft blue
+ info: '#2a2e40', // Marketsoft blue
+ warning: '#D6001C', // Marketsoft red
+ danger: '#D6001C', // Marketsoft red
+
+ // Background colors
+ bg3: '#f7f9fc',
+ bg4: '#edf1f7',
+
+ solar: {
+ gradientLeft: '#D6001C',
+ gradientRight: '#D6001C',
+ shadowColor: 'rgba(0, 0, 0, 0)',
+ secondSeriesFill: baseThemeVariables.bg2,
+ radius: ['70%', '90%'],
+ },
+
+ traffic: {
+ tooltipBg: baseThemeVariables.bg,
+ tooltipBorderColor: baseThemeVariables.border2,
+ tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
+ tooltipTextColor: baseThemeVariables.fgText,
+ tooltipFontWeight: 'normal',
+
+ yAxisSplitLine: baseThemeVariables.separator,
+
+ lineBg: '#D6001C',
+ lineShadowBlur: '0',
+ itemColor: '#D6001C',
+ itemBorderColor: '#D6001C',
+ itemEmphasisBorderColor: '#D6001C',
+ shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
+ shadowLineShadow: 'rgba(0, 0, 0, 0)',
+ gradFrom: baseThemeVariables.bg,
+ gradTo: baseThemeVariables.bg,
+ },
+
+ electricity: {
+ tooltipBg: baseThemeVariables.bg,
+ tooltipLineColor: baseThemeVariables.fgText,
+ tooltipLineWidth: '0',
+ tooltipBorderColor: baseThemeVariables.border2,
+ tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
+ tooltipTextColor: baseThemeVariables.fgText,
+ tooltipFontWeight: 'normal',
+
+ axisLineColor: baseThemeVariables.border3,
+ xAxisTextColor: baseThemeVariables.fg,
+ yAxisSplitLine: baseThemeVariables.separator,
+
+ itemBorderColor: '#D6001C',
+ lineStyle: 'solid',
+ lineWidth: '4',
+ lineGradFrom: '#D6001C',
+ lineGradTo: '#D6001C',
+ lineShadow: 'rgba(0, 0, 0, 0)',
+
+ areaGradFrom: 'rgba(214, 0, 28, 0.2)',
+ areaGradTo: 'rgba(214, 0, 28, 0)',
+ shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
+ },
+
+ bubbleMap: {
+ titleColor: baseThemeVariables.fgText,
+ areaColor: baseThemeVariables.bg4,
+ areaHoverColor: baseThemeVariables.fgHighlight,
+ areaBorderColor: baseThemeVariables.border5,
+ },
+
+ echarts: {
+ bg: baseThemeVariables.bg,
+ textColor: baseThemeVariables.fgText,
+ axisLineColor: baseThemeVariables.fgText,
+ splitLineColor: baseThemeVariables.separator,
+ itemHoverShadowColor: 'rgba(0, 0, 0, 0.5)',
+ tooltipBackgroundColor: '#D6001C',
+ areaOpacity: '0.7',
+ },
+
+ chartjs: {
+ axisLineColor: baseThemeVariables.separator,
+ textColor: baseThemeVariables.fgText,
+ },
+
+ // Additional styling for specific components
+ orders: {
+ tooltipBg: baseThemeVariables.bg,
+ tooltipLineColor: 'rgba(0, 0, 0, 0)',
+ tooltipLineWidth: '0',
+ tooltipBorderColor: baseThemeVariables.border2,
+ tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
+ tooltipTextColor: baseThemeVariables.fgText,
+ tooltipFontWeight: 'normal',
+ tooltipFontSize: '20',
+
+ axisLineColor: baseThemeVariables.border4,
+ axisFontSize: '16',
+ axisTextColor: baseThemeVariables.fg,
+ yAxisSplitLine: baseThemeVariables.separator,
+
+ itemBorderColor: '#D6001C',
+ lineStyle: 'solid',
+ lineWidth: '4',
+
+ // first line
+ firstAreaGradFrom: 'rgba(42, 46, 64, 0.2)',
+ firstAreaGradTo: 'rgba(42, 46, 64, 0)',
+ firstShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
+
+ // second line
+ secondLineGradFrom: '#D6001C',
+ secondLineGradTo: '#D6001C',
+
+ secondAreaGradFrom: 'rgba(214, 0, 28, 0.2)',
+ secondAreaGradTo: 'rgba(214, 0, 28, 0)',
+ secondShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
+
+ // third line
+ thirdLineGradFrom: '#2a2e40',
+ thirdLineGradTo: '#2a2e40',
+
+ thirdAreaGradFrom: 'rgba(42, 46, 64, 0.2)',
+ thirdAreaGradTo: 'rgba(42, 46, 64, 0)',
+ thirdShadowLineDarkBg: 'rgba(0, 0, 0, 0)',
+ },
+
+ // Setting up the Marketsoft specific colors for visuals
+ visitorsPieLegend: {
+ firstSection: '#D6001C',
+ secondSection: '#2a2e40',
+ },
+
+ earningPie: {
+ radius: ['65%', '100%'],
+ center: ['50%', '50%'],
+
+ fontSize: '22',
+
+ firstPieGradientLeft: '#D6001C',
+ firstPieGradientRight: '#D6001C',
+ firstPieShadowColor: 'rgba(0, 0, 0, 0)',
+
+ secondPieGradientLeft: '#2a2e40',
+ secondPieGradientRight: '#2a2e40',
+ secondPieShadowColor: 'rgba(0, 0, 0, 0)',
+
+ thirdPieGradientLeft: '#ffffff',
+ thirdPieGradientRight: '#ffffff',
+ thirdPieShadowColor: 'rgba(0, 0, 0, 0)',
+ },
+ },
+} as NbJSThemeOptions;
\ No newline at end of file
diff --git a/src/app/@theme/styles/themes.scss b/src/app/@theme/styles/themes.scss
index 6ee6e40e..c7e25807 100644
--- a/src/app/@theme/styles/themes.scss
+++ b/src/app/@theme/styles/themes.scss
@@ -86,3 +86,67 @@ $nb-themes: nb-register-theme((
slide-out-shadow-color: 0 4px 14px 0 #8f9bb3,
slide-out-shadow-color-rtl: 0 4px 14px 0 #8f9bb3,
), dark, dark);
+
+// Add the new Marketsoft theme
+$nb-themes: nb-register-theme((
+ layout-padding-top: 2.25rem,
+
+ menu-item-icon-margin: 0 0.5rem 0 0,
+
+ card-height-tiny: 13.5rem,
+ card-height-small: 21.1875rem,
+ card-height-medium: 28.875rem,
+ card-height-large: 36.5625rem,
+ card-height-giant: 44.25rem,
+ card-margin-bottom: 1.875rem,
+ card-header-with-select-padding-top: 0.5rem,
+ card-header-with-select-padding-bottom: 0.5rem,
+
+ select-min-width: 6rem,
+
+ // Marketsoft brand colors
+ color-primary-100: #ffe2e5,
+ color-primary-200: #ffb2b9,
+ color-primary-300: #ff7e8c,
+ color-primary-400: #ff4d5f,
+ color-primary-500: #D6001C, // Main Marketsoft red
+ color-primary-600: #ad0017,
+ color-primary-700: #840012,
+ color-primary-800: #5b000c,
+ color-primary-900: #320007,
+
+ // Custom background for the Marketsoft theme
+ background-basic-color-1: #ffffff,
+ background-basic-color-2: #f7f9fc,
+ background-basic-color-3: #edf1f7,
+ background-basic-color-4: #e4e9f2,
+
+ // Text colors
+ text-basic-color: #2a2e40, // Marketsoft dark blue
+ text-primary-color: #D6001C, // Marketsoft red
+
+ // Override some menu colors
+ menu-item-hover-text-color: #D6001C,
+ menu-item-active-text-color: #D6001C,
+ menu-item-active-background-color: #ffe2e5,
+ menu-item-icon-color: #D6001C,
+
+ // Set the slide-out colors (sidebar)
+ slide-out-background: #ffffff,
+ slide-out-shadow-color: 0 4px 14px 0 rgba(214, 0, 28, 0.1),
+ slide-out-shadow-color-rtl: 0 4px 14px 0 rgba(214, 0, 28, 0.1),
+
+ // Button colors
+ button-filled-primary-background-color: #D6001C,
+ button-filled-primary-border-color: #D6001C,
+ button-filled-primary-hover-background-color: #ad0017,
+ button-filled-primary-hover-border-color: #ad0017,
+
+ // Border radius
+ card-border-radius: 0.375rem,
+ border-radius: 0.375rem,
+
+ // Typography settings - use Roboto as specified in the brand guide
+ font-family-primary: 'Roboto, sans-serif',
+ font-family-secondary: 'Roboto, sans-serif',
+), marketsoft, default);
\ No newline at end of file
diff --git a/src/app/@theme/theme.module.ts b/src/app/@theme/theme.module.ts
index 9bb44420..f61b7e63 100644
--- a/src/app/@theme/theme.module.ts
+++ b/src/app/@theme/theme.module.ts
@@ -38,6 +38,7 @@ import { DEFAULT_THEME } from './styles/theme.default';
import { COSMIC_THEME } from './styles/theme.cosmic';
import { CORPORATE_THEME } from './styles/theme.corporate';
import { DARK_THEME } from './styles/theme.dark';
+import { MARKETSOFT_THEME } from './styles/theme.marketsoft'; // Import the new theme
const NB_MODULES = [
NbLayoutModule,
@@ -82,11 +83,11 @@ export class ThemeModule {
providers: [
...NbThemeModule.forRoot(
{
- name: 'default',
+ name: 'marketsoft', // Set marketsoft as the default theme
},
- [ DEFAULT_THEME, COSMIC_THEME, CORPORATE_THEME, DARK_THEME ],
+ [ DEFAULT_THEME, COSMIC_THEME, CORPORATE_THEME, DARK_THEME, MARKETSOFT_THEME ], // Add MARKETSOFT_THEME to the themes array
).providers,
],
};
}
-}
+}
\ No newline at end of file
diff --git a/src/app/pages/dashboard/status-card/status-card.component.scss b/src/app/pages/dashboard/status-card/status-card.component.scss
index 03be02f5..a5deba5b 100644
--- a/src/app/pages/dashboard/status-card/status-card.component.scss
+++ b/src/app/pages/dashboard/status-card/status-card.component.scss
@@ -76,4 +76,4 @@
text-transform: uppercase;
}
}
-}
+}
\ No newline at end of file