Temas

​

Configuração de temas

​

Path Params

❗ Atenção, existem hoje 3 portais da aplicação, Portal do Cliente, Portal da Empresa e Backoffice. Sendo assim é necessário realizar a configuração de tema para cada um dos portais. Saiba mais

​

Body Params

• Customer - Aplicação para o uso par usuários finais que irão solicitar algum tipo de crédito.
• Operator - Aplicação para o uso par usuários que desempenho algum papel de operação nas plataformas, como triagem de propostas.

curl --request POST \
     --url https://api.base39.io/v1/tenants/branding/themes/seu.dominio.com.br \
     --header 'accept: application/json' \
     --header 'authorization: <key>' \
     --header 'content-type: application/json' \
     --data '
{
  "palette": {
    "primary": {
      "main": "#000",
      "light": "#000",
      "dark": "#000",
      "contrastText": "#fff"
    }
  },
  "images": {
    "logoUrl": "https://placehold.co/120x80",
    "darkBackgroundLogoUrl": "https://placehold.co/48x48/FFF/000/png",
    "loadingImageUrl": "https://placehold.co/32x32",
    "faviconUrl": "https://placehold.co/16x16.png"
  },
  "application": "OPERATOR",
  "displayName": "Seu Domínio",
  "pageTitle": "Título do Browser"
}
'

​

Configurações

• primary - Utilizada para representar a cor primária dos elementos do sistema;
• [DEPRECATED] secondary - Utilizada para representar a cor secundária dos elementos do sistema;
• error - Utilizado para representar elementos de notificação de erro. Como falhas de conexão ou acessos não autorizados;
• info - Utilizado para representar informações neutras do sistema. Como notificações de informações de status;
• success - Utilizado para indicar mensagens de sucesso de uma ação que o usuário realizou. Ex.: Envio de formulário.

• [DEPRECATED] light: Cor clara da paleta;
• main: Cor principal da paleta;
• [DEPRECATED] dark: Cor escura da paleta;
• contrastText: Cor de contraste para o texto.

⚠️ Importante! Caso nenhuma cor seja informado o sistema vai utilizar o padrão #000 como cor primária do sistema, sendo #fff a cor de contraste para o texto.

• fontFamily - Padrão Roboto;
• fontUrl: URL da fonte a ser utilizada no sistema. Ex.: https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap.

• logoUrl: Logo principal da aplicação. Apresentada na tela de Login. Ex.: https://placehold.co/120x80;
• darkBackgroundLogoUrl: Logo de contraste do sistema, utilizada no Header de cada aplicação. Ex.: https://placehold.co/48x48/FFF/000/png;
• loadingImageUrl: URL da imagem de carregamento a ser utilizada no sistema. Ex.: https://placehold.co/32x32;
• faviconUrl: URL do favicon a ser utilizada no sistema. Ex.: https://placehold.co/16x16.png.

• success: Representa o status de sucesso de uma solicitação de crédito.
• pending: Representa o status pendente, ou seja, a solicitação de crédito ainda está em análise.
• rejected: Representa o status de uma proposta que foi rejeitada, ou seja, a solicitação de crédito foi negada.

​

Onde as configurações são aplicadas:

​

Toasts

​

Login

​

Telas de carregamento do Portal do Cliente

​

Tema padrão

{
  application: '',
  displayName: '',
  pageTitle: '',
  images: {
    logoUrl: 'https://placehold.co/45x45',
    darkBackgroundLogoUrl: 'https://placehold.co/45x45/FFF/000/png',
    loadingImageUrl: 'https://placehold.co/32x32',
    faviconUrl: 'https://placehold.co/16x16.png'
  },
  palette: {
    primary: {
      main: '#000',
      contrastText: '#fff'
    },
    error: {
      main: '#d32f2f',
      contrastText: '#fff'
    },
    warning: {
      main: '#ed6c02',
      contrastText: '#fff'
    },
    info: {
      main: '#0288d1',
      contrastText: '#fff'
    },
    success: {
      main: '#2e7d32',
      contrastText: '#fff'
    }
  },
  typography: {
    fontFamily: 'Roboto',
    fontUrl:
      'https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap'
  },
  loanStatus: {
    palette: {
      success: {
        main: '#00b894',
        contrastText: '#fff'
      },
      pending: {
        main: '#ff9800',
        contrastText: '#fff'
      },
      rejected: {
        main: '#fc5a5a',
        contrastText: '#fff'
      }
    }
  }