diff --git a/src/assets/css/App.css b/src/assets/css/App.css
index e948fcad..955079a5 100644
--- a/src/assets/css/App.css
+++ b/src/assets/css/App.css
@@ -70,7 +70,7 @@
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
-.botao-gerar-codigo {
+.botao-gerar-codigo {
display: inline-flex;
align-items: center;
@@ -80,8 +80,9 @@
&:hover,
&:focus {
- color: #009944;
- border-color: #009944;
+ color: #00B300 !important;
+ border-color: #00B300 !important;
+ box-shadow: 0 0 0 2px rgba(0, 122, 51, 0.2) !important;
}
}
diff --git a/src/assets/css/FormEnterSystem.css b/src/assets/css/FormEnterSystem.css
index f2c00624..00d16581 100644
--- a/src/assets/css/FormEnterSystem.css
+++ b/src/assets/css/FormEnterSystem.css
@@ -8,6 +8,11 @@
.login-form-forgot {
float: right;
+ color: #007A33;
+}
+
+.login-form-forgot:hover {
+ color: #009E4A;
}
.login-form-button {
diff --git a/src/assets/css/Map.css b/src/assets/css/Map.css
index ab72e1ca..f8608469 100644
--- a/src/assets/css/Map.css
+++ b/src/assets/css/Map.css
@@ -13,7 +13,7 @@
.spinner {
border: 8px solid #f3f3f3;
- border-top: 8px solid #3498db;
+ border-top: 8px solid #00994A;
border-radius: 50%;
width: 60px;
height: 60px;
diff --git a/src/assets/css/antd-theme.css b/src/assets/css/antd-theme.css
index 7fd5bf84..6c199257 100644
--- a/src/assets/css/antd-theme.css
+++ b/src/assets/css/antd-theme.css
@@ -1,26 +1,69 @@
/* Tema personalizado para Ant Design v4 */
/* Cores principais: Verde #007A33, Amarelo #FFD53D */
-/* Cores primárias */
+/* Paleta de Cores */
+:root {
+ --primary-green: #007A33;
+ --primary-yellow: #B8860B;
+}
+
+/* Botão primário (aquele com o fundo verde de adicionar, pesquisar, entre outros) */
.ant-btn-primary {
- background-color: #007A33 !important;
- border-color: #007A33 !important;
+ background-color: var(--primary-green) !important;
+ border-color: var(--primary-green) !important;
}
-.ant-btn-primary:hover,
-.ant-btn-primary:focus {
+/* Efeitos visuais ao interagir com o botão primário */
+.ant-btn-primary:not(:disabled):is(:hover, :focus, :active) {
background-color: #00994A !important;
- border-color: #00994A !important;
+ border-color: transparent !important;
+}
+
+/* Botão secundário (usado apenas em um botão de sair/cancelar na tela de adicionar tombo) */
+.ant-btn-secondary a{
+ color: black !important;
+}
+
+/* Efeitos visuais no botão secundário ao interagir com ele */
+.ant-btn-secondary:not(:disabled):is(:hover, :focus, :active) {
+ color: var(--primary-green) !important;
+ border-color: var(--primary-green) !important;
}
-.ant-btn-primary:active {
- background-color: #00662A !important;
- border-color: #00662A !important;
+/* Efeitos visuais no texto do botão secundário ao intereagir com o botão */
+.ant-btn-secondary:not(:disabled):is(:hover, :focus, :active) a {
+ color: var(--primary-green) !important;
+}
+
+/* Efietos visuais ao interagir com o botão padrão (aquele com o fundo transparente, de limpar e adicionar filtro, por exemplo) */
+.ant-btn-default:not(:disabled):is(:hover, :focus, :active) {
+ border-color: var(--primary-green) !important;
+ color: var(--primary-green) !important;
+ box-shadow: 0 0 0 2px rgba(0, 122, 51, 0.2) !important;
+}
+
+/* Transição nas características do botão marcado como dangerous, que é aquele vermelho */
+.ant-btn-dangerous {
+ transition: color 0.5s, text-shadow 0.5s, border-color 0.5s, box-shadow 0.5s;
+}
+
+/* Transição nos ícones dentro do botão marcado dangerous */
+.ant-btn-dangerous .anticon {
+ transition: filter 0.5s;
+}
+
+/* Efeito de hover no botão dangerous */
+.ant-btn-dangerous:not(:disabled):hover {
+ background-color: transparent !important;
+ border-color: red !important;
+ box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.2) !important;
+ color: red !important;
+
}
/* Links */
.ant-typography a {
- color: #007A33 !important;
+ color: var(--primary-green) !important;
}
.ant-typography a:hover {
@@ -29,59 +72,178 @@
/* Checkbox */
.ant-checkbox-checked .ant-checkbox-inner {
- background-color: #007A33 !important;
- border-color: #007A33 !important;
+ background-color: var(--primary-green) !important;
+ border-color: transparent !important;
+}
+
+/* Efeitos ao interagir com o checkbox */
+.ant-checkbox-wrapper:is(:hover, :focus-within, :active-within) .ant-checkbox-inner {
+ border-color: var(--primary-green) !important;
+ box-shadow: 0 0 0 2px rgba(0, 122, 51, 0.2) !important;
}
-.ant-checkbox-wrapper:hover .ant-checkbox-inner {
- border-color: #007A33 !important;
+/* Precisei fazer essa alteração no ::after pois é onde consegui remover uma borda azul que ficava ao redor */
+.ant-checkbox-checked::after {
+ border: 1px solid var(--primary-green) !important;
}
-/* Radio */
+/* Bolinha no interior do radio verde quando marcado */
+.ant-radio-checked .ant-radio-inner::after {
+ background-color: var(--primary-green) !important;
+}
+
+/* Borda do radio quando marcado */
.ant-radio-checked .ant-radio-inner {
- background-color: #007A33 !important;
- border-color: #007A33 !important;
+ border-color: var(--primary-green) !important;
}
+/* Efeito de hover no radio */
.ant-radio-wrapper:hover .ant-radio-inner {
- border-color: #007A33 !important;
+ border-color: var(--primary-green) !important;
+ box-shadow: 0 0 0 2px rgba(0, 122, 51, 0.2) !important;
}
-/* Select */
-.ant-select-focused .ant-select-selector {
- border-color: #007A33 !important;
+/* Mantém a borda e box-shadow verde quando clica no radio */
+.ant-radio-input:focus + .ant-radio-inner {
+ border-color: var(--primary-green) !important;
box-shadow: 0 0 0 2px rgba(0, 122, 51, 0.2) !important;
}
-.ant-select-item-option-selected {
- background-color: #007A33 !important;
+/* Inicia a bolinha interna do radio já verde, no processo de animação quando clicado */
+.ant-radio-inner::after {
+ background-color: var(--primary-green) !important;
}
-.ant-select-item-option:hover {
+/* Inicia a borda do radio já verde, no processo de animação quando clicado */
+.ant-radio::after {
+ border-color: var(--primary-green) !important;
+}
+
+/* Efeitos visuais no select quando não está desativado */
+.ant-select:not(.ant-select-disabled):is(:hover, :focus, .ant-select-focused, :active) .ant-select-selector {
+ border-color: var(--primary-green) !important;
+ box-shadow: 0 0 0 2px rgba(0, 122, 51, 0.2) !important;
+}
+
+/* Mesmos efeitos visuais do select aplicados àquela seta no seu interior */
+.ant-select:not(.ant-select-disabled):is(:hover, :focus, .ant-select-focused, :active) .ant-select-arrow .ant-select-suffix {
+ color: var(--primary-green) !important;
+}
+
+/* Efeito de hover nas opções não selecionadas */
+.ant-select-item-option:not(.ant-select-item-option-selected):hover {
background-color: rgba(0, 122, 51, 0.1) !important;
}
-/* Input */
+/* Cores da opção selecionada */
+.ant-select-item-option-selected {
+ background-color: var(--primary-green) !important;
+ color: white !important;
+}
+
+/* Efeito de hover e active na opção selecionada */
+.ant-select-item-option-selected:hover,
+.ant-select-item-active {
+ background-color: #00994A !important;
+}
+
+/* Efeito de hover quando a caixa de seleção está vazia */
+.ant-select-item-empty:hover {
+ background-color: rgba(0, 122, 51, 0.05) !important;
+}
+
+/* Efeitos visuais no input */
+.ant-input:not(.ant-input-disabled):hover,
.ant-input:focus,
.ant-input-focused {
- border-color: #007A33 !important;
+ border-color: var(--primary-green) !important;
box-shadow: 0 0 0 2px rgba(0, 122, 51, 0.2) !important;
}
-/* InputNumber */
-.ant-input-number:focus,
+/* Efeitos visuais no input number */
+.ant-input-number:is(:focus, :hover),
.ant-input-number-focused {
- border-color: #007A33 !important;
+ border-color: var(--primary-green) !important;
box-shadow: 0 0 0 2px rgba(0, 122, 51, 0.2) !important;
}
-/* DatePicker */
-.ant-picker:focus,
+/* Efeitos visuais naquela setinha que avança ou no input number */
+.ant-input-number .ant-input-number-handler-up:is(:hover, :focus, :active) .ant-input-number-handler-up-inner {
+ color: var(--primary-green) !important;
+}
+
+/* Efeitos visuais naquela setinha que regrede no input number */
+.ant-input-number .ant-input-number-handler-down:is(:hover, :focus, :active) .ant-input-number-handler-down-inner {
+ color: var(--primary-green) !important;
+}
+
+/* Efeitos visuais em um row */
+.ant-form-item-row:is(:focus-within, :hover) .ant-input-affix-wrapper {
+ border-color: var(--primary-green) !important;
+ box-shadow: 0 0 0 2px rgba(0, 122, 51, 0.2) !important;
+}
+
+/* Tira os efeitos visuais no input dentro de um row (tela de login, por exemplo) */
+.ant-form-item-row:is(:focus-within, :hover) .ant-input-affix-wrapper .ant-input {
+ border-color: transparent !important;
+ box-shadow: none !important;
+}
+
+/* Tira o background no ícone ao fim do row, tipo o olho, na tela de login*/
+.ant-form-item-row .ant-input-affix-wrapper .ant-input-suffix .ant-btn-icon-only {
+ background-color: transparent !important;
+}
+
+/* Cores padrões nesses ícones, que geralmente ficam dentro de inputs ou similares */
+.anticon-mail,
+.anticon-lock,
+.anticon-eye {
+ color: rgba(0, 0, 0, 0.25) !important;
+}
+
+/* Efeitos no ícone de olho */
+.anticon-eye:is(:hover, :focus) {
+ color: var(--primary-green) !important;
+ filter: drop-shadow(0px 0px 2px rgba(0, 122, 51, 0.6)) !important;
+}
+
+/* Cor no ícone de olho invisível */
+.anticon-eye-invisible {
+ color: var(--primary-green) !important;
+}
+
+/* Efeitos no ícone de olho invisível */
+.anticon-eye-invisible:is(:hover, :focus) {
+ filter: drop-shadow(0px 0px 2px rgba(0, 122, 51, 0.6)) !important;
+}
+
+/* Efeitos nos ícones de impressoras e lápis de edição */
+.ant-table-cell :is(.anticon-printer, .anticon-edit):is(:hover, :focus) {
+ filter: drop-shadow(0px 0px 1px currentColor) !important;
+}
+
+/* Efeitos no ícone de lupa, apenas quando está em uma ant-table-cell, assim como as impressoras */
+.ant-table-cell .anticon-search:is(:hover, :focus) {
+ filter: drop-shadow(0px 0px 1px currentColor) !important;
+}
+
+/* Efeitos no datepicker */
+.ant-picker:is(:hover, :focus, :active),
.ant-picker-focused {
- border-color: #007A33 !important;
+ border-color: var(--primary-green) !important;
box-shadow: 0 0 0 2px rgba(0, 122, 51, 0.2) !important;
}
+/* Coloração do ícone de calendário ao no datepicker */
+:is(.ant-picker:is(:hover, :focus, :active), .ant-picker-focused) .ant-picker-suffix {
+ color: var(--primary-green) !important;
+}
+
+/* Cor verde na barar do datepicker */
+.ant-picker .ant-picker-active-bar {
+ background-color: var(--primary-green) !important;
+}
+
/* Table */
.ant-table-thead > tr > th {
background-color: #f5f5f5 !important;
@@ -92,22 +254,48 @@
background-color: rgba(0, 122, 51, 0.05) !important;
}
-/* Pagination */
+/* Efeito visual no item de pagination (aqueles quadrados, como abaixo das listas) */
+.ant-pagination-item:hover {
+ border-color: var(--primary-green) !important;
+}
+
+/* Efeito no texto interno do item de pagination quando não é o selecionado */
+.ant-pagination-item:not(.ant-pagination-item-active):hover a {
+ color: var(--primary-green) !important;
+}
+
+/* Coloração do pagination ativo */
.ant-pagination-item-active {
- background-color: #007A33 !important;
- border-color: #007A33 !important;
+ background-color: var(--primary-green) !important;
+ border-color: var(--primary-green) !important;
}
+/* Cor do texto no pagination ativo */
.ant-pagination-item-active a {
color: #ffffff !important;
}
-.ant-pagination-item:hover {
- border-color: #007A33 !important;
+/* Efeitos no pagination ativo */
+.ant-pagination-item-active:hover {
+ background-color: #00994A !important;
+ border-color: transparent !important;
}
-.ant-pagination-item:hover a {
- color: #007A33 !important;
+/* Efeitos no pagination de ir para próxima página, quando não está desativado */
+.ant-pagination-next:not(.ant-pagination-disabled) .ant-pagination-item-link:hover {
+ border-color: var(--primary-green) !important;
+ color: var(--primary-green) !important;
+}
+
+/* Efeitos no pagination de voltar para página anterior, quando não está desativado */
+.ant-pagination-prev:not(.ant-pagination-disabled) .ant-pagination-item-link:hover {
+ border-color: var(--primary-green) !important;
+ color: var(--primary-green) !important;
+}
+
+/* Aquelas setinhas que aprecem ao passar o mouse sobre os três pontinhos, quando tem muitos itens no pagination */
+.ant-pagination-jump-next-custom-icon .ant-pagination-item-link-icon {
+ color: var(--primary-green) !important;
}
/* Modal */
@@ -132,26 +320,26 @@
/* Tabs */
.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
- color: #007A33 !important;
+ color: var(--primary-green) !important;
}
.ant-tabs-ink-bar {
- background-color: #007A33 !important;
+ background-color: var(--primary-green) !important;
}
.ant-tabs-tab:hover {
- color: #007A33 !important;
+ color: var(--primary-green) !important;
}
/* Steps */
.ant-steps-item-process .ant-steps-item-icon {
- background-color: #007A33 !important;
- border-color: #007A33 !important;
+ background-color: var(--primary-green) !important;
+ border-color: var(--primary-green) !important;
}
.ant-steps-item-finish .ant-steps-item-icon {
- background-color: #007A33 !important;
- border-color: #007A33 !important;
+ background-color: var(--primary-green) !important;
+ border-color: var(--primary-green) !important;
}
.ant-steps-item-finish .ant-steps-item-icon > .anticon {
@@ -160,7 +348,7 @@
/* Progress */
.ant-progress-bg {
- background-color: #007A33 !important;
+ background-color: var(--primary-green) !important;
}
/* Alert */
@@ -170,21 +358,21 @@
}
.ant-alert-success .ant-alert-icon {
- color: #007A33 !important;
+ color: var(--primary-green) !important;
}
/* Badge */
.ant-badge-count {
- background-color: #007A33 !important;
+ background-color: var(--primary-green) !important;
}
/* Menu */
.ant-menu-item-selected {
- background-color: #007A33 !important;
+ background-color: var(--primary-green) !important;
}
.ant-menu-item:hover {
- color: #007A33 !important;
+ color: var(--primary-green) !important;
}
/* Dropdown */
@@ -194,11 +382,11 @@
/* Tooltip */
.ant-tooltip-inner {
- background-color: #007A33 !important;
+ background-color: var(--primary-green) !important;
}
.ant-tooltip-arrow::before {
- background-color: #007A33 !important;
+ background-color: var(--primary-green) !important;
}
/* Popover */
@@ -206,6 +394,14 @@
background-color: #ffffff !important;
}
+/* Efeitos visuais no botão de cancelar nesse elemento de pop up */
+.ant-popconfirm .ant-btn-default:is(:hover, :focus, :active) {
+ color: red !important;
+ border-color: red !important;
+ box-shadow: 0 0 0 1px rgba(255, 0, 0, 0.2) !important;
+}
+
+
/* Cores de aviso (warning) */
.ant-alert-warning {
background-color: #fffbe6 !important;
@@ -213,7 +409,7 @@
}
.ant-alert-warning .ant-alert-icon {
- color: #FFD53D !important;
+ color: var(--primary-yellow) !important;
}
/* Cores de erro (mantém padrão do antd) */
@@ -233,31 +429,31 @@
/* Cores de sucesso */
.ant-result-success .ant-result-icon > .anticon {
- color: #007A33 !important;
+ color: var(--primary-green) !important;
}
/* Upload */
.ant-upload-list-item-done .ant-upload-list-item-name {
- color: #007A33 !important;
+ color: var(--primary-green) !important;
}
/* Form */
.ant-form-item-label > label.ant-form-item-required:not(.ant-form-item-required-mark-optional)::before {
- color: #007A33 !important;
+ color: var(--primary-green) !important;
}
/* Switch */
.ant-switch-checked {
- background-color: #007A33 !important;
+ background-color: var(--primary-green) !important;
}
/* Slider */
.ant-slider-track {
- background-color: #007A33 !important;
+ background-color: var(--primary-green) !important;
}
.ant-slider-handle {
- border-color: #007A33 !important;
+ border-color: var(--primary-green) !important;
}
.ant-slider-handle:focus {
@@ -267,7 +463,7 @@
/* Rate */
.ant-rate-star.ant-rate-star-full .ant-rate-star-first,
.ant-rate-star.ant-rate-star-full .ant-rate-star-second {
- color: #FFD53D !important;
+ color: var(--primary-yellow) !important;
}
/* Tag */
@@ -278,13 +474,13 @@
.ant-tag-success {
background-color: #f6ffed !important;
border-color: #b7eb8f !important;
- color: #007A33 !important;
+ color: var(--primary-green) !important;
}
.ant-tag-warning {
background-color: #fffbe6 !important;
border-color: #ffe58f !important;
- color: #FFD53D !important;
+ color: var(--primary-yellow) !important;
}
/* Divider */
@@ -302,13 +498,48 @@
color: #000000 !important;
}
+/* Cor do ícone de recarregar */
+.ant-card .anticon-reload {
+ color: rgba(0, 0, 0, 0.25) !important;
+}
+
+/* Efeito no ícone de recarregar */
+.ant-card .anticon-reload:is(:hover, :focus) {
+ color: var(--primary-green) !important;
+}
+
/* Collapse */
.ant-collapse-header {
color: #000000 !important;
}
+/* Efeito de hover no texto do collapse */
+.ant-collapse-header:hover {
+ color: var(--primary-green) !important;
+ text-shadow: 0px 0px 1px rgba(0, 122, 51, 0.6) !important;
+}
+
+/* Mudanças visuais no texto quando o collapse está ativo */
.ant-collapse-item-active > .ant-collapse-header {
- color: #007A33 !important;
+ color: var(--primary-green) !important;
+ text-shadow: 0px 0px 1px rgba(0, 122, 51, 0.6) !important;
+}
+
+/* Efeito visual no hover do ícone de seta do collapse */
+.ant-collapse-header:hover .ant-collapse-expand-icon .ant-collapse-arrow {
+ color: var(--primary-green) !important;
+ filter: drop-shadow(0px 0px 1px rgba(0, 122, 51, 0.5));
+}
+
+/* Mudanças visuais no ícone de seta quando o collapse está ativo */
+.ant-collapse-item-active > .ant-collapse-header .ant-collapse-expand-icon .ant-collapse-arrow {
+ color: var(--primary-green) !important;
+ filter: drop-shadow(0px 0px 1px rgba(0, 122, 51, 0.5));
+}
+
+/* Tira a borda do botão de remover, elemento presente na tela de filtros avançados */
+.ant-collapse-item .ant-collapse-header .ant-collapse-extra .ant-btn-dangerous:hover {
+ border-color: transparent !important;
}
/* Tree */
@@ -317,7 +548,7 @@
}
.ant-tree .ant-tree-node-selected {
- background-color: #007A33 !important;
+ background-color: var(--primary-green) !important;
}
.ant-tree .ant-tree-node-selected .ant-tree-title {
@@ -335,7 +566,7 @@
}
.ant-transfer-list-item-checked {
- background-color: #007A33 !important;
+ background-color: var(--primary-green) !important;
}
.ant-transfer-list-item-checked .ant-transfer-list-item-content {
@@ -344,8 +575,8 @@
/* Timeline */
.ant-timeline-item-head {
- background-color: #007A33 !important;
- border-color: #007A33 !important;
+ background-color: var(--primary-green) !important;
+ border-color: var(--primary-green) !important;
}
/* Anchor */
@@ -354,16 +585,16 @@
}
.ant-anchor-link-active > .ant-anchor-link-title {
- color: #007A33 !important;
+ color: var(--primary-green) !important;
}
.ant-anchor-link:hover .ant-anchor-link-title {
- color: #007A33 !important;
+ color: var(--primary-green) !important;
}
/* BackTop */
.ant-back-top {
- background-color: #007A33 !important;
+ background-color: var(--primary-green) !important;
}
.ant-back-top:hover {
@@ -377,7 +608,7 @@
/* Breadcrumb */
.ant-breadcrumb a {
- color: #007A33 !important;
+ color: var(--primary-green) !important;
}
.ant-breadcrumb a:hover {
@@ -386,42 +617,42 @@
/* Carousel */
.ant-carousel .ant-carousel-dot-active > .ant-carousel-dot {
- background-color: #007A33 !important;
+ background-color: var(--primary-green) !important;
}
/* Cascader */
.ant-cascader-picker:focus .ant-cascader-input {
- border-color: #007A33 !important;
+ border-color: var(--primary-green) !important;
box-shadow: 0 0 0 2px rgba(0, 122, 51, 0.2) !important;
}
/* Mentions */
.ant-mentions:focus {
- border-color: #007A33 !important;
+ border-color: var(--primary-green) !important;
box-shadow: 0 0 0 2px rgba(0, 122, 51, 0.2) !important;
}
/* Notification */
.ant-notification-notice-success .ant-notification-notice-icon {
- color: #007A33 !important;
+ color: var(--primary-green) !important;
}
.ant-notification-notice-warning .ant-notification-notice-icon {
- color: #FFD53D !important;
+ color: var(--primary-yellow) !important;
}
/* Message */
.ant-message-success .anticon {
- color: #007A33 !important;
+ color: var(--primary-green) !important;
}
.ant-message-warning .anticon {
- color: #FFD53D !important;
+ color: var(--primary-yellow) !important;
}
/* Spin */
.ant-spin-dot-item {
- background-color: #007A33 !important;
+ background-color: var(--primary-green) !important;
}
/* Skeleton */
@@ -473,7 +704,7 @@
/* Avatar */
.ant-avatar {
- background-color: #007A33 !important;
+ background-color: var(--primary-green) !important;
}
/* Comment */
@@ -487,17 +718,17 @@
/* Calendar */
.ant-picker-calendar-date-today .ant-picker-calendar-date-value {
- color: #007A33 !important;
+ color: var(--primary-green) !important;
}
.ant-picker-calendar-date-selected .ant-picker-calendar-date-value {
- background-color: #007A33 !important;
+ background-color: var(--primary-green) !important;
color: #ffffff !important;
}
/* TimePicker */
.ant-picker-time-panel-column > li.ant-picker-time-panel-cell-selected .ant-picker-time-panel-cell-inner {
- background-color: #007A33 !important;
+ background-color: var(--primary-green) !important;
}
/* ColorPicker */
@@ -506,7 +737,7 @@
}
.ant-color-picker-trigger:hover {
- border-color: #007A33 !important;
+ border-color: var(--primary-green) !important;
}
/* Image */
@@ -516,12 +747,12 @@
/* Segmented */
.ant-segmented-item-selected {
- background-color: #007A33 !important;
+ background-color: var(--primary-green) !important;
color: #ffffff !important;
}
.ant-segmented-item:hover {
- color: #007A33 !important;
+ color: var(--primary-green) !important;
}
/* QRCode */
@@ -545,7 +776,7 @@
/* FloatButton */
.ant-float-btn-primary {
- background-color: #007A33 !important;
+ background-color: var(--primary-green) !important;
}
.ant-float-btn-primary:hover {
@@ -562,21 +793,22 @@
color: #000000 !important;
}
-/* Botão Pesquisar - Cor Secundária Escura */
+/* Botão Pesquisar */
.ant-btn-pesquisar {
- background-color: #B8860B !important;
- border-color: #B8860B !important;
+ background-color: var(--primary-yellow) !important;
+ border-color: var(--primary-yellow) !important;
color: #FFFFFF !important;
}
-.ant-btn-pesquisar:hover,
-.ant-btn-pesquisar:focus {
+/* Efeitos no botão pesquisar, quando não está desativado */
+.ant-btn-pesquisar:not(:disabled):is(:hover, :focus) {
background-color: #DAA520 !important;
border-color: #DAA520 !important;
color: #FFFFFF !important;
}
-.ant-btn-pesquisar:active {
+/* Efeito no active do botão pesquisar, quando não está desativado */
+.ant-btn-pesquisar:not(:disabled):active {
background-color: #9A7209 !important;
border-color: #9A7209 !important;
color: #FFFFFF !important;
@@ -584,16 +816,16 @@
/* Sider - Tema Dark */
.ant-layout-sider-dark {
- background-color: #007A33 !important;
+ background-color: var(--primary-green) !important;
}
.ant-layout-sider-dark .ant-layout-sider-children {
- background-color: #007A33 !important;
+ background-color: var(--primary-green) !important;
}
/* Menu - Tema Dark */
.ant-menu-dark {
- background-color: #007A33 !important;
+ background-color: var(--primary-green) !important;
}
.ant-menu-dark .ant-menu-item {
@@ -711,7 +943,7 @@
}
.ant-menu-dark .ant-menu-submenu-popup .ant-menu-item:hover {
- background-color: #007A33 !important;
+ background-color: var(--primary-green) !important;
color: #ffffff !important;
}
@@ -724,7 +956,7 @@
}
.ant-menu-dark .ant-menu-submenu-popup .ant-menu-item-selected {
- background-color: #007A33 !important;
+ background-color: var(--primary-green) !important;
color: #ffffff !important;
}
@@ -755,7 +987,7 @@
}
.ant-menu-dark .ant-menu-submenu-inline .ant-menu-item:hover {
- background-color: #007A33 !important;
+ background-color: var(--primary-green) !important;
color: #ffffff !important;
}
@@ -768,7 +1000,7 @@
}
.ant-menu-dark .ant-menu-submenu-inline .ant-menu-item-selected {
- background-color: #007A33 !important;
+ background-color: var(--primary-green) !important;
color: #ffffff !important;
}
diff --git a/src/components/ComparativeAreaChart.jsx b/src/components/ComparativeAreaChart.jsx
index ecd727df..ca734956 100644
--- a/src/components/ComparativeAreaChart.jsx
+++ b/src/components/ComparativeAreaChart.jsx
@@ -1,12 +1,14 @@
import React from 'react'
+
import { Card, Statistic, Spin, Button, Space, Typography } from 'antd'
-import { ArrowUpOutlined, ArrowDownOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons'
import { withTranslation } from 'react-i18next'
import {
ResponsiveContainer, AreaChart, Area, XAxis, YAxis,
CartesianGrid, Tooltip as RechartsTooltip, Legend
} from 'recharts'
+import { ArrowUpOutlined, ArrowDownOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons'
+
const { Title } = Typography
const ComparativeAreaChart = ({
@@ -58,18 +60,19 @@ const ComparativeAreaChart = ({
position: 'absolute', top: 0, left: 0, right: 0, bottom: 0,
backgroundColor: 'rgba(255,255,255,0.7)', zIndex: 10,
display: 'flex', justifyContent: 'center', alignItems: 'center'
- }}>
+ }}
+ >
)}
-
+
{!loading && data && data.length > 0 && (
-
-
+
+
@@ -81,18 +84,24 @@ const ComparativeAreaChart = ({
-
+
diff --git a/src/components/Relatorios/RelatoriosTombosPorPeriodo/TombosPorIntervaloTempo.component.tsx b/src/components/Relatorios/RelatoriosTombosPorPeriodo/TombosPorIntervaloTempo.component.tsx
index 2fb62bc1..8f3c566a 100644
--- a/src/components/Relatorios/RelatoriosTombosPorPeriodo/TombosPorIntervaloTempo.component.tsx
+++ b/src/components/Relatorios/RelatoriosTombosPorPeriodo/TombosPorIntervaloTempo.component.tsx
@@ -225,13 +225,13 @@ const TombosPorIntervaloTempoComponent: React.FC =
boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
padding: '12px'
}}
- cursor={{ fill: 'rgba(24, 144, 255, 0.05)' }}
+ cursor={{ fill: 'rgba(0, 122, 51, 0.05)' }}
formatter={value => [`${String(value)} ${t('relatorioPorPeriodo:tombos')}`, t('relatorioPorPeriodo:quantidade')]}
/>
= props => {
marginTop: '15px'
}
- const inputPrefixStyle = {
- color: 'rgba(0, 0, 0, 0.25)'
- }
-
- const eyeButtonStyle = {
- border: 'none',
- boxShadow: 'none',
- color: 'rgba(0, 0, 0, 0.25)'
- }
-
return (
@@ -69,7 +59,7 @@ const LoginLayout: React.FC = props => {
>
}
+ prefix={}
placeholder={t('loginLayout:email')}
size="large"
value={formViewModel.email}
@@ -81,13 +71,12 @@ const LoginLayout: React.FC = props => {
size="large"
type={formViewModel.senhaVisivel ? 'text' : 'password'}
placeholder={t('loginLayout:senha')}
- prefix={}
+ prefix={}
suffix={(
: }
onClick={formViewModel.toggleSenhaVisivel}
- style={eyeButtonStyle}
/>
)}
value={formViewModel.senha}
diff --git a/src/helpers/leaflet-plugins/leaflet.navbar.css b/src/helpers/leaflet-plugins/leaflet.navbar.css
index 3d83744a..d958eeed 100644
--- a/src/helpers/leaflet-plugins/leaflet.navbar.css
+++ b/src/helpers/leaflet-plugins/leaflet.navbar.css
@@ -26,3 +26,18 @@ background-image: url("img/arrow-left_bbbbbb_14.png");
.leaflet-control-navbar-home-disabled {
background-image: url("img/home_bbbbbb_14.png");
}
+
+/* Cor verde no seletor de camadas do mapa */
+.leaflet-control-layers .leaflet-control-layers-selector {
+accent-color: #007A33 !important;
+}
+
+/* Efeito visual no hover do outline do círuclo e do ícone de "+" que leva para a tela de detalhes do tombo */
+.leaflet-popup-content-wrapper .custom-popup:hover .anticon-plus-circle svg path:is(:nth-of-type(1), :nth-of-type(3)) {
+ fill: #00B300 !important;
+}
+
+/* Efeito visual no hover do espaço interno círuclo com ícone de "+" que leva para a tela de detalhes do tombo */
+.leaflet-popup-content-wrapper .custom-popup:hover .anticon-plus-circle svg path:nth-of-type(2) {
+ fill: #CFCFCF !important;
+}