Styling

The react-maintenance package offers several ways to customize the appearance of your maintenance screens. This page explains the different styling options available.

Basic Styling

The simplest way to customize the appearance is by using the bgColor and textColor props:

<Maintenance 
  bgColor="#f0f9ff"        // Light blue background
  textColor="#0c4a6e"      // Dark blue text
/>

Under Maintenance

We are currently performing scheduled maintenance. Please check back later.

Custom Styles

For more fine-grained control, you can use the customStyles prop to provide specific styles for different parts of the maintenance screen:

<Maintenance 
  customStyles={{
    container: {
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      justifyContent: 'center',
      padding: '3rem',
      maxWidth: '800px',
      margin: '0 auto',
      borderRadius: '10px',
      boxShadow: '0 10px 25px rgba(0, 0, 0, 0.1)',
      backgroundColor: '#f0f9ff'
    },
    title: {
      fontSize: '2.5rem',
      marginBottom: '1.5rem',
      color: '#0369a1',
      fontWeight: 'bold'
    },
    message: {
      fontSize: '1.2rem',
      textAlign: 'center',
      color: '#0c4a6e',
      lineHeight: 1.6,
      maxWidth: '600px'
    },
    countdown: {
      marginTop: '2rem',
      fontFamily: 'monospace',
      fontSize: '1.5rem',
      color: '#0284c7',
      fontWeight: 'bold'
    }
  }}
  title="We're Making Things Better"
  message="Our team is currently upgrading our systems to improve your experience."
  showCountdown={true}
  endTime="2025-04-15T18:00:00"
/>

We're Making Things Better

Our team is currently upgrading our systems to improve your experience.

Time remaining: 03:42:15

Custom Component

For complete control over the appearance and behavior, you can provide a custom component using the CustomComponent prop:

import React from 'react';
import { Maintenance } from 'react-maintenance';
import './maintenance-styles.css'; // Import your CSS

const CustomMaintenanceComponent = () => {
  return (
    <div className="custom-maintenance">
      <div className="maintenance-logo">
        <img src="/logo.svg" alt="Company Logo" />
      </div>
      <h1 className="maintenance-title">We're Upgrading Our Platform</h1>
      <p className="maintenance-message">
        We're working hard to improve your experience. 
        Please check back later.
      </p>
      <div className="maintenance-progress">
        <div className="progress-bar">
          <div className="progress-fill"></div>
        </div>
        <p>Estimated time remaining: 2 hours</p>
      </div>
      <div className="social-links">
        <a href="https://twitter.com/example" target="_blank" rel="noopener noreferrer">
          Twitter
        </a>
        <a href="https://status.example.com" target="_blank" rel="noopener noreferrer">
          Status Page
        </a>
      </div>
    </div>
  );
};

function App() {
  return (
    <Maintenance 
      CustomComponent={CustomMaintenanceComponent}
    >
      <div className="app">
        <h1>Welcome to My App</h1>
        <p>This content is only visible when not in maintenance mode.</p>
      </div>
    </Maintenance>
  );
}

This approach allows you to use your own CSS for styling:

maintenance-styles.css

.custom-maintenance {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 2rem;
  background-color: #f0f9ff;
  color: #0c4a6e;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
}

.maintenance-logo {
  margin-bottom: 2rem;
}

.maintenance-logo img {
  width: 120px;
  height: auto;
}

.maintenance-title {
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 1.5rem;
  color: #0369a1;
}

.maintenance-message {
  font-size: 1.2rem;
  max-width: 600px;
  text-align: center;
  line-height: 1.6;
  margin-bottom: 2.5rem;
}

.maintenance-progress {
  width: 100%;
  max-width: 400px;
  margin-bottom: 2rem;
}

.progress-bar {
  height: 8px;
  background-color: #e0f2fe;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.progress-fill {
  height: 100%;
  width: 75%;
  background-color: #0284c7;
  border-radius: 4px;
}

.social-links {
  display: flex;
  gap: 1.5rem;
  margin-top: 2rem;
}

.social-links a {
  color: #0369a1;
  text-decoration: none;
  font-weight: 500;
}

.social-links a:hover {
  text-decoration: underline;
}

@media (max-width: 640px) {
  .maintenance-title {
    font-size: 2rem;
  }
  
  .maintenance-message {
    font-size: 1rem;
  }
}

We're Upgrading Our Platform

We're working hard to improve your experience. Please check back later.

Estimated time remaining: 2 hours

Twitter Status Page

Responsive Design

The maintenance screen is responsive by default, but you can further customize its appearance on different screen sizes using media queries in your custom styles or custom component.

Here's an example of using media queries with the customStyles prop:

// The customStyles prop doesn't directly support media queries
// For responsive designs, it's better to use a CustomComponent

// However, you can adjust base styles for a better responsive experience
<Maintenance 
  customStyles={{
    container: {
      padding: '5vw', // responsive padding based on viewport width
      maxWidth: '90%', 
      width: '800px',
      margin: '0 auto',
    },
    title: {
      fontSize: 'clamp(1.5rem, 4vw, 2.5rem)', // responsive font size
      marginBottom: '1.5rem',
    },
    message: {
      fontSize: 'clamp(1rem, 2vw, 1.2rem)', // responsive font size
      maxWidth: '100%',
    }
  }}
/>