diff --git a/src/PagesMedico/styleMedico/Agendamento.css b/src/PagesMedico/styleMedico/Agendamento.css index fe00c0c..ffa5552 100644 --- a/src/PagesMedico/styleMedico/Agendamento.css +++ b/src/PagesMedico/styleMedico/Agendamento.css @@ -1,81 +1,155 @@ -/* Default (light mode) styles */ -html { - background-color: #f8f9fa; - color: #212529; +/* --- Esconde a barra de unidade e profissional --- */ +.unidade-selecionarprofissional { + display: none; } -.calendario { - background-color: #fff; - border: 1px solid #dee2e6; - box-shadow: 0 4px 12px rgba(0,0,0,0.08); +/* --- Posiciona a barra de busca corretamente --- */ +.busca-atendimento { + display: flex; + align-items: center; /* Alinha os itens verticalmente */ + margin-top: 20px; /* Espaço acima da barra de busca */ + padding: 0 10px; /* Adiciona um padding lateral para alinhar com o resto */ + gap: 15px; +} + +.busca-atendimento > div:first-child { + width: 400px; /* Define um tamanho para a barra de pesquisa */ + display: flex; + align-items: center; } .busca-atendimento input { - background-color: #fff; - color: #212529; - border: 1px solid #ced4da; + margin-left: 8px; + border-radius: 8px; + padding: 8px; + width: 100%; + border: 1px solid #ccc; } .busca-atendimento select { - background-color: #5980fd; - color: #fff; + padding: 8px; + border-radius: 8px; + background-color: #0078d7; + color: white; + font-weight: bold; + border: none; } +/* --- Estilos dos botões de Dia, Semana, Mês --- */ .btn-selecionar-tabeladia, .btn-selecionar-tabelasemana, .btn-selecionar-tabelames { - background-color: #fff; - color: #212529; + background-color: rgba(231, 231, 231, 0.808); + padding: 8px 10px; + font-size: larger; + font-weight: bold; + border-style: hidden; + cursor: pointer; +} + +.btn-selecionar-tabeladia { + border-radius: 10px 0px 0px 10px; +} + +.btn-selecionar-tabelames { + border-radius: 0px 10px 10px 0px; } .btn-selecionar-tabeladia.ativo, .btn-selecionar-tabelasemana.ativo, .btn-selecionar-tabelames.ativo { - background-color: #5980fd; - color: #fff; - border-color: #3a5ccc; + background-color: lightcyan; + border-color: darkcyan; + font-weight: bolder; +} + +/* --- Container dos botões e legenda --- */ +.btns-e-legenda-container { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 10px; + padding: 0 10px; +} + +/* --- Legendas --- */ +.legenda-tabela { + display: flex; + gap: 15px; +} + +#status-card-consulta-realizado, .legenda-item-realizado { + background-color: #b7ffbd; + border: 3px solid #91d392; + padding: 5px; + font-weight: bold; + border-radius: 10px; +} + +#status-card-consulta-cancelado, .legenda-item-cancelado { + background-color: #ffb7cc; + border: 3px solid #ff6c84; + padding: 5px; + font-weight: bold; + border-radius: 10px; +} + +#status-card-consulta-confirmado, .legenda-item-confirmado { + background-color: #eef8fb; + border: 3px solid #d8dfe7; + padding: 5px; + font-weight: bold; + border-radius: 10px; +} + +#status-card-consulta-agendado, .legenda-item-agendado { + background-color: #f7f7c4; + border: 3px solid #f3ce67; + padding: 5px; + font-weight: bold; + border-radius: 10px; +} + +/* --- Estrutura Geral --- */ +.calendario { + border-collapse: collapse; + width: 100%; + border-radius: 10px; + overflow: hidden; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); + border: 1px solid #eee; + background-color: #ffffff; +} + +.calendario-ou-filaespera { + margin-top: 0; +} + +.container-btns-agenda-fila_esepera { + margin-top: 30px; + display: flex; + flex-direction: row; + gap: 20px; + margin-left: 20px; } .btn-fila-espera, .btn-agenda { - background-color: #fff; - color: #212529; + background-color: transparent; + border: 0px; border-bottom: 3px solid transparent; + padding: 8px; + border-radius: 10px 10px 0px 0px; + font-weight: bold; + cursor: pointer; } .opc-filaespera-ativo, .opc-agenda-ativo { + color: white; background-color: #5980fd; - color: #fff; } -#status-card-consulta-realizado, -.legenda-item-realizado { - background-color: #e6f9e6; - border: 3px solid #b7ffbd; - color: #2e4d2e; -} - -#status-card-consulta-cancelado, -.legenda-item-cancelado { - background-color: #ffe6ee; - border: 3px solid #ffb7cc; - color: #4d2e36; -} - -#status-card-consulta-confirmado, -.legenda-item-confirmado { - background-color: #e6f0fa; - border: 3px solid #eef8fb; - color: #2e3a4d; -} - -#status-card-consulta-agendado, -.legenda-item-agendado { - background-color: #f7f7c4; - border: 3px solid #f7f7c4; - color: #4d4d2e; -} /* Dark mode styles */ html[data-bs-theme="dark"] { @@ -154,4 +228,4 @@ html[data-bs-theme="dark"] .legenda-item-agendado { background-color: #2e2e1e; border: 3px solid #4d4d2e; color: #f7f7c4; -} +} \ No newline at end of file diff --git a/src/assets/scss/_variables.scss b/src/assets/scss/_variables.scss index 91ef39e..b0ac702 100644 --- a/src/assets/scss/_variables.scss +++ b/src/assets/scss/_variables.scss @@ -11,7 +11,6 @@ $dark-mode: false !default; - // Mazer Variables @import "~bootstrap/scss/functions"; diff --git a/src/pages/TablePaciente.jsx b/src/pages/TablePaciente.jsx index 52a7854..a82e63d 100644 --- a/src/pages/TablePaciente.jsx +++ b/src/pages/TablePaciente.jsx @@ -270,7 +270,7 @@ const pacientesFiltrados = Array.isArray(pacientes) ? pacientes.filter((paciente className="btn btn-sm" style={{ backgroundColor: "#E6F2FF", - color: "#004085!important", + color: "#004085", }} onClick={() => {