CSS

/* Replace existing :root and .app-container styles with these: */

:root {
— primary: #1976d2;
— primary-dark: #1565c0;
— secondary: #dc004e;
— success: #4caf50;
— warning: #ff9800;
— error: #f44336;
— text: #333;
— text-light: #666;
— border: #ddd;
— background: #f5f7fa;
— card-bg: #fff;
— card-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
font-family: ‘Roboto’, -apple-system, BlinkMacSystemFont, ‘Segoe UI’, Arial, sans-serif;
background-color: var( — background);
color: var( — text);
line-height: 1.6;
padding: 0;
}

.app-container {
padding: 24px;
min-height: 100vh;
width: 100%;
max-width: 1800px; /* Increased max-width */
margin: 0 auto;
}

/* Add this new media query for larger screens */
@media (min-width: 1600px) {
.app-container {
padding: 24px 48px;
}
}

.app-title {
margin-bottom: 24px;
color: #1a3d7c;
border-bottom: 2px solid var( — primary);
padding-bottom: 12px;
text-align: center;
}

/* Domain Manager */
.domain-manager {
background: var( — card-bg);
border-radius: 8px;
padding: 24px;
box-shadow: var( — card-shadow);
width: 100%;
}

/* Update domain cards grid */
.domain-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 24px;
}

/* Rule Grid */
.rule-grid-container {
margin-top: 20px;
width: 100%;
}

.ag-theme-alpine {
border-radius: 8px;
overflow: hidden;
box-shadow: var( — card-shadow);
width: 100%;
}

/* Form sections */
.form-section {
margin-bottom: 24px;
padding: 20px;
background: #f8f9fa;
border-radius: 8px;
}

/* Add responsive layout for form rows */
.form-row {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 15px;
}

.form-row .form-group {
flex: 1 1 300px; /* Grow, shrink, basis */
}

Get Aamirmtasgaonkar’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

/* Make dialogs wider on large screens */
@media (min-width: 1200px) {
.MuiDialog-paper {
min-width: 800px;
}
}

/* Condition cards */
.condition-card, .attribute-card {
background: #fff;
border-radius: 8px;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
border: 1px solid #eee;
}

/* Full-width buttons */
.domain-header, .rule-manager-header, .section-header {
display: flex;
flex-wrap: wrap;
gap: 15px;
justify-content: space-between;
align-items: center;
}

/* Responsive table */
@media (max-width: 768px) {
.domain-cards {
grid-template-columns: 1fr;
}

.form-row {
flex-direction: column;
gap: 10px;
}

.domain-header, .rule-manager-header {
flex-direction: column;
align-items: flex-start;
}
}

• ***********************************************************

// In the domain card JSX, update to:
<div key={domain.id} className=”domain-card”>
<div className=”domain-header”>
<div className=”domain-info”>
<h4>{domain.name}</h4>
<div className=”domain-meta”>
<span className={`status-badge ${domain.isActive ? ‘active’ : ‘inactive’}`}>
{domain.isActive ? ‘Active’ : ‘Inactive’}
</span>
<span>Mandator: {domain.mandator}</span>
</div>
</div>
<div className=”domain-actions”>
<Button
variant=”outlined”
onClick={() => domain.id && handleManageRules(domain.id)}
>
Manage Rules
</Button>
<Button
variant=”outlined”
color=”error”
onClick={() => domain.id && handleDeleteDomain(domain.id)}
>
Delete
</Button>
</div>
</div>

<p className=”domain-description”>{domain.description || ‘No description’}</p>

<div className=”domain-meta-grid”>
<div className=”meta-item”>
<strong>Valid From:</strong>
<span>{new Date(domain.domainValidFrom).toLocaleDateString()}</span>
</div>
<div className=”meta-item”>
<strong>Valid To:</strong>
<span>{new Date(domain.domainValidTo).toLocaleDateString()}</span>
</div>
<div className=”meta-item”>
<strong>Attributes:</strong>
<span>{domain.domainAttributes?.length || 0}</span>
</div>
<div className=”meta-item”>
<strong>Rules:</strong>
<span>{domain.rules?.length || 0}</span>
</div>
</div>

<div className=”domain-footer”>
<span>Updated by: {domain.updatedBy || ‘N/A’}</span>
<span>Created: {new Date(domain.createdDate).toLocaleDateString()}</span>
</div>
</div>

• ****************************************************************

/* Add these new styles */
.domain-info {
flex: 1;
min-width: 250px;
}

.domain-meta-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 12px;
margin: 15px 0;
padding: 12px 0;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
}

.meta-item {
display: flex;
flex-direction: column;
}

.meta-item strong {
font-size: 0.85em;
color: var( — text-light);
margin-bottom: 4px;
}

.meta-item span {
font-weight: 500;
}

.domain-footer {
display: flex;
justify-content: space-between;
font-size: 0.85em;
color: var( — text-light);
padding-top: 12px;
}

/* Status badges */
.status-badge {
display: inline-block;
padding: 3px 10px;
border-radius: 12px;
font-size: 0.85em;
font-weight: bold;
margin-right: 10px;
}

.status-badge.active {
background-color: #e8f5e9;
color: #2e7d32;
}

.status-badge.inactive {
background-color: #ffebee;
color: #c62828;
}