MCP Gateway
by jowpereira
App.css•10.5 kB
/* App.css */
#root {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
/* text-align: center; /* Remove global text-align center */
}
.app-container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.header {
padding: 1rem 2rem;
background-color: #fff; /* White header */
border-bottom: 1px solid #dee2e6; /* Light border */
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
}
.header h1 {
font-size: 1.8em;
margin: 0;
color: #007bff;
}
.main-content {
flex-grow: 1;
padding: 0 2rem;
}
.card {
background-color: white;
padding: 25px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
}
.dashboard-page {
padding: 20px;
max-width: 1000px;
margin: 0 auto;
}
.error-message {
background-color: #ffebee;
border-left: 4px solid #f44336;
padding: 15px;
margin-bottom: 20px;
border-radius: 4px;
color: #b71c1c;
}
.success-message {
background-color: #e8f5e9;
border-left: 4px solid #4caf50;
padding: 15px;
margin-bottom: 20px;
border-radius: 4px;
color: #1b5e20;
}
.user-info {
background-color: #e3f2fd;
margin-bottom: 20px;
}
.group-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
}
.group-item {
background-color: #f5f5f5;
transition: all 0.3s ease;
}
.group-item:hover {
transform: translateY(-5px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}
.login-card {
max-width: 400px;
margin: 80px auto 20px; /* Aumenta a margem superior para compensar a navbar */
}
.card h2 {
margin-top: 0;
color: #333;
text-align: center;
margin-bottom: 20px;
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
margin-bottom: 8px;
font-weight: bold;
color: #555;
}
.form-group input[type="text"],
.form-group input[type="password"],
.form-group input[type="email"],
.form-group select,
.form-group textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
font-size: 1em;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: #007bff;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
.button-group {
text-align: center;
margin-top: 20px;
}
button {
background-color: #007bff;
color: white;
border: none;
padding: 12px 20px;
border-radius: 4px;
cursor: pointer;
font-size: 1em;
transition: background-color 0.3s;
}
button:hover {
background-color: #0056b3;
}
button:disabled {
background-color: #ccc;
cursor: not-allowed;
}
.list-group {
list-style: none;
padding: 0;
}
.list-group-item {
padding: 0.75rem 1.25rem;
border: 1px solid #dee2e6;
border-top-width: 0;
margin-bottom: -1px; /* Overlap borders */
}
.list-group-item:first-child {
border-top-width: 1px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.list-group-item:last-child {
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
.list-group-item button {
margin-left: 1rem;
padding: 0.3em 0.8em;
font-size: 0.9em;
}
.success-message {
color: #28a745; /* Verde para sucesso */
background-color: #d4edda;
border: 1px solid #c3e6cb;
padding: 10px;
border-radius: 4px;
margin-top: 15px;
text-align: center;
}
.error-message {
color: #d9534f; /* Vermelho para erros */
background-color: #f2dede;
border: 1px solid #ebccd1;
padding: 10px;
border-radius: 4px;
margin-top: 15px;
text-align: center;
}
.login-card {
max-width: 400px;
margin: 4rem auto;
}
.dashboard-section-spacing {
margin-bottom: 1rem;
}
.list-item-actions {
margin-left: auto; /* Pushes actions to the right */
}
.action-button-spacing {
margin-right: 0.5rem;
}
.message-spacing {
margin-top: 1rem;
}
/* Estilos Globais e Layout */
body {
font-family: sans-serif;
margin: 0;
background-color: #f4f7f6;
color: #333;
}
.container {
padding: 20px;
margin-top: 60px; /* Altura da navbar */
}
.loading-container {
display: flex;
justify-content: center;
align-items: center;
height: calc(100vh - 60px); /* Subtrai a altura da navbar */
font-size: 1.5em;
color: #555;
}
/* Navbar */
.navbar {
background-color: #333;
color: white;
padding: 10px 20px;
display: flex;
justify-content: space-between;
align-items: center;
position: fixed; /* Fixa a navbar no topo */
top: 0;
left: 0;
width: 100%;
box-sizing: border-box; /* Garante que padding não aumente a largura total */
z-index: 1000; /* Garante que a navbar fique acima de outros elementos */
}
.navbar-brand a {
color: white;
text-decoration: none;
font-size: 1.5em;
font-weight: bold;
}
.navbar-links a {
color: white;
text-decoration: none;
margin-left: 20px;
transition: color 0.3s;
}
.navbar-links a:hover {
color: #ddd;
}
.navbar-user {
display: flex;
align-items: center;
}
.navbar-user span {
margin-right: 15px;
}
.button-logout {
background-color: #555;
color: white;
border: none;
padding: 8px 15px;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
}
.button-logout:hover {
background-color: #777;
}
/* Page Specific Styles (Placeholder - adicione conforme necessário) */
.dashboard-page,
.tools-page,
.group-admin-page,
.user-requests-page {
padding: 20px;
}
.dashboard-page h1,
.tools-page h1,
.group-admin-page h1,
.user-requests-page h1 {
color: #333;
margin-bottom: 20px;
}
/* Adicione mais estilos conforme necessário para tabelas, listas, etc. */
/* Estilos para componentes de erro */
.error-boundary {
border: 2px solid #f44336;
border-radius: 4px;
padding: 16px;
margin: 16px 0;
background-color: #ffebee;
color: #d32f2f;
text-align: center;
}
.error-boundary button {
background-color: #d32f2f;
color: white;
border: none;
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
margin-top: 8px;
font-weight: bold;
}
.error-toast {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 1000;
min-width: 250px;
max-width: 350px;
}
.error-toast-content {
background-color: #f44336;
color: white;
padding: 16px;
border-radius: 4px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
display: flex;
flex-direction: column;
position: relative;
}
.error-toast-message {
margin-bottom: 4px;
font-weight: bold;
}
.error-toast-code {
font-size: 0.8em;
opacity: 0.8;
}
.error-toast-close {
position: absolute;
top: 8px;
right: 8px;
background: transparent;
border: none;
color: white;
font-size: 1.5em;
cursor: pointer;
line-height: 1;
padding: 0;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
}
/* Estilos para página de solicitações de acesso */
.user-requests-page {
padding: 20px;
max-width: 800px;
margin: 20px auto;
}
.action-bar {
margin: 20px 0;
display: flex;
justify-content: flex-end;
}
.primary-button {
background-color: #4071b8;
color: white;
border: none;
border-radius: 4px;
padding: 8px 16px;
cursor: pointer;
font-weight: bold;
}
.primary-button:hover {
background-color: #305a96;
}
.request-form {
background-color: #f7f9fc;
border-radius: 6px;
padding: 20px;
margin-bottom: 20px;
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
margin-bottom: 8px;
font-weight: bold;
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
font-family: inherit;
}
.button-group {
display: flex;
justify-content: flex-end;
margin-top: 20px;
}
.request-list {
margin-top: 20px;
}
.request-item {
margin-bottom: 15px;
padding: 15px;
background-color: white;
border: 1px solid #e1e4e8;
border-radius: 6px;
}
.request-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #eee;
}
.request-header h4 {
margin: 0;
font-size: 16px;
}
.status {
padding: 4px 8px;
border-radius: 20px;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
}
.status.pending {
background-color: #fff8e1;
color: #f57c00;
border: 1px solid #ffc107;
}
.status.approved {
background-color: #e8f5e9;
color: #2e7d32;
border: 1px solid #4caf50;
}
.status.rejected {
background-color: #ffebee;
color: #c62828;
border: 1px solid #f44336;
}
.info-message {
background-color: #e3f2fd;
padding: 15px;
border-radius: 4px;
margin: 20px 0;
color: #0d47a1;
}
/* Estilos para página de admin de solicitações */
.requests-admin-page {
padding: 20px;
max-width: 800px;
margin: 20px auto;
}
.request-actions {
display: flex;
justify-content: flex-end;
margin-top: 15px;
}
.button {
border: none;
border-radius: 4px;
padding: 8px 16px;
cursor: pointer;
font-weight: bold;
transition: background-color 0.2s;
}
.secondary-button {
background-color: #e0e0e0;
color: #424242;
}
.secondary-button:hover {
background-color: #bdbdbd;
}
.approve-button {
background-color: #4caf50;
color: white;
border: none;
border-radius: 4px;
padding: 8px 16px;
cursor: pointer;
font-weight: bold;
}
.approve-button:hover {
background-color: #388e3c;
}
.reject-button {
background-color: #f44336;
color: white;
border: none;
border-radius: 4px;
padding: 8px 16px;
cursor: pointer;
font-weight: bold;
}
.reject-button:hover {
background-color: #d32f2f;
}
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}
.modal-content {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
width: 90%;
max-width: 600px;
max-height: 90vh;
overflow-y: auto;
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
border-bottom: 1px solid #eee;
}
.modal-header h3 {
margin: 0;
}
.modal-body {
padding: 20px;
}
.close-button {
background: none;
border: none;
font-size: 24px;
font-weight: bold;
cursor: pointer;
color: #757575;
}
.request-summary {
background-color: #f5f5f5;
border-radius: 4px;
padding: 15px;
margin-bottom: 20px;
}
Latest Blog Posts
- MCP Moves to the Linux Foundation: Neutral Stewardship for Agentic InfrastructureBy Om-Shree-0709 on .mcpanthropicLinux Foundation
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/jowpereira/mcp-server'
If you have feedback or need assistance with the MCP directory API, please join our Discord server