retaining code structure of CSS file

Author: Suvam-paul145

src/common/playlists/PlayErrorBoundary.css

@@ -0,0 +1,60 @@
+.play-error-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 3rem 1.5rem;
+    text-align: center;
+    min-height: 50vh;
+}
+
+.play-error-image {
+    width: 200px;
+    height: auto;
+    margin-bottom: 1.5rem;
+    opacity: 0.8;
+}
+
+.play-error-title {
+    font-size: 1.5rem;
+    font-weight: 600;
+    color: #333;
+    margin: 0 0 0.75rem;
+}
+
+.play-error-message {
+    font-size: 1rem;
+    color: #666;
+    max-width: 500px;
+    line-height: 1.5;
+    margin: 0 0 1.5rem;
+}
+
+.play-error-actions {
+    display: flex;
+    gap: 1rem;
+}
+
+.play-error-retry-button {
+    padding: 0.6rem 1.5rem;
+    font-size: 0.95rem;
+    font-weight: 600;
+    border: none;
+    border-radius: 6px;
+    cursor: pointer;
+    background: #00f2fe;
+    color: #fff;
+    transition: opacity 0.2s;
+}
+
+.play-error-back-button {
+    padding: 0.6rem 1.5rem;
+    font-size: 0.95rem;
+    font-weight: 600;
+    border: 2px solid #00f2fe;
+    border-radius: 6px;
+    cursor: pointer;
+    background: transparent;
+    color: #00f2fe;
+    transition: opacity 0.2s;
+}

src/common/playlists/PlayErrorBoundary.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { ReactComponent as ImageOops } from 'images/img-oops.svg';
+import './PlayErrorBoundary.css';
 
 class PlayErrorBoundary extends React.Component {
   constructor(props) {
@@ -32,23 +33,23 @@ class PlayErrorBoundary extends React.Component {
   render() {
     if (this.state.hasError) {
       return (
-        <div className="play-error-boundary" style={styles.container}>
-          <ImageOops style={styles.image} />
-          <h2 style={styles.title}>
+        <div className="play-error-boundary play-error-container">
+          <ImageOops className="play-error-image" />
+          <h2 className="play-error-title">
             {this.state.isChunkError ? 'Failed to load this play' : 'Something went wrong'}
           </h2>
-          <p style={styles.message}>
+          <p className="play-error-message">
             {this.state.isChunkError
               ? 'There was a network error loading this play. Please check your connection and try again.'
               : `An error occurred while rendering "${this.props.playName || 'this play'}".`}
           </p>
-          <div style={styles.actions}>
+          <div className="play-error-actions">
             {this.state.isChunkError && (
-              <button style={styles.retryButton} onClick={this.handleRetry}>
+              <button className="play-error-retry-button" onClick={this.handleRetry}>
                 Retry
               </button>
             )}
-            <button style={styles.backButton} onClick={this.handleGoBack}>
+            <button className="play-error-back-button" onClick={this.handleGoBack}>
               Back to Plays
             </button>
           </div>
@@ -60,61 +61,4 @@ class PlayErrorBoundary extends React.Component {
   }
 }
 
-const styles = {
-  container: {
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: '3rem 1.5rem',
-    textAlign: 'center',
-    minHeight: '50vh'
-  },
-  image: {
-    width: '200px',
-    height: 'auto',
-    marginBottom: '1.5rem',
-    opacity: 0.8
-  },
-  title: {
-    fontSize: '1.5rem',
-    fontWeight: 600,
-    color: '#333',
-    margin: '0 0 0.75rem'
-  },
-  message: {
-    fontSize: '1rem',
-    color: '#666',
-    maxWidth: '500px',
-    lineHeight: 1.5,
-    margin: '0 0 1.5rem'
-  },
-  actions: {
-    display: 'flex',
-    gap: '1rem'
-  },
-  retryButton: {
-    padding: '0.6rem 1.5rem',
-    fontSize: '0.95rem',
-    fontWeight: 600,
-    border: 'none',
-    borderRadius: '6px',
-    cursor: 'pointer',
-    background: '#00f2fe',
-    color: '#fff',
-    transition: 'opacity 0.2s'
-  },
-  backButton: {
-    padding: '0.6rem 1.5rem',
-    fontSize: '0.95rem',
-    fontWeight: 600,
-    border: '2px solid #00f2fe',
-    borderRadius: '6px',
-    cursor: 'pointer',
-    background: 'transparent',
-    color: '#00f2fe',
-    transition: 'opacity 0.2s'
-  }
-};
-
 export default PlayErrorBoundary;