Ups theme updated

src/app/@theme/components/footer/footer.component.ts

@@ -1,11 +1,12 @@
 import { Component } from '@angular/core';
+import { NbThemeService } from '@nebular/theme';
 
 @Component({
   selector: 'ngx-footer',
   styleUrls: ['./footer.component.scss'],
   template: `
     <span class="created-by">
-      Created with ♥ by <b><a href="https://akveo.page.link/8V2f" target="_blank">Akveo</a></b> 2019
+      Created with ♥ by <b><a href="https://marketsoft.com.au" target="_blank">Marketsoft</a></b> 2025
     </span>
     <div class="socials">
       <a href="#" target="_blank" class="ion ion-social-github"></a>
@@ -16,4 +17,5 @@ import { Component } from '@angular/core';
   `,
 })
 export class FooterComponent {
+  constructor(private themeService: NbThemeService) {}
 }

src/app/@theme/components/header/header.component.ts

@@ -17,7 +17,7 @@ export class HeaderComponent implements OnInit, OnDestroy {
   userPictureOnly: boolean = false;
   user: any;
 
-  themes = [
+themes = [
   {
     value: 'default',
     name: 'Light',
@@ -34,7 +34,11 @@ export class HeaderComponent implements OnInit, OnDestroy {
     value: 'corporate',
     name: 'Corporate',
   },
-  ];
+  {
+    value: 'marketsoft',
+    name: 'Marketsoft',
+  },
+];
 
   currentTheme = 'default';
 

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';

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;

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);

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,9 +83,9 @@ 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,
       ],
     };