refactor(NGUI-176): consolidate CSS to global.css and eliminate inline styles

Author: Hrithik-Gavankar

src/components/OneCardWrapper.tsx

@@ -35,51 +35,31 @@ const OneCardWrapper: React.FC<OneCardProps> = ({
   imageSize = "md",
   className,
 }) => {
-  const getImageFlexBasis = () => {
-    switch (imageSize) {
-      case "sm":
-        return "15%";
-      case "lg":
-        return "25%";
-      default:
-        return "20%";
-    }
-  };
 
   return (
     <Card 
       id={id} 
-      className={className}
-      style={{ 
-        maxWidth: "1440px", 
-        margin: "0 auto",
-        width: "100%"
-      }}
+      className={`onecard-component-container ${className || ''}`}
     >
       <CardBody>
         <Flex spaceItems={{ default: "spaceItemsLg" }} alignItems={{ default: "alignItemsFlexStart" }}>
           {/* Left Column - Image */}
           {image && (
-            <FlexItem shrink={{ default: "shrink" }} style={{ flexBasis: getImageFlexBasis() }}>
+            <FlexItem className={`onecard-component-image-container size-${imageSize}`}>
               <img
                 src={image}
                 alt={title}
-                style={{
-                  width: "100%",
-                  height: "auto",
-                  borderRadius: "var(--pf-global--BorderRadius--sm)",
-                  objectFit: "cover",
-                }}
+                className="onecard-component-img"
               />
             </FlexItem>
           )}
 
           {/* Right Column - Title + Fields */}
           <FlexItem grow={{ default: "grow" }}>
-            <Title headingLevel="h4" size="lg" style={{ marginBottom: "16px" }}>
+            <Title headingLevel="h4" size="lg" className="onecard-component-title">
               {title}
             </Title>
-            <Divider component="div" style={{ marginTop: "16px", marginBottom: "16px" }} />
+            <Divider component="div" className="onecard-component-divider" />
             <div>
               <DescriptionList isAutoFit>
                 {fields?.map((field, idx) => (

src/components/VideoPlayerWrapper.tsx

@@ -27,18 +27,18 @@ import {
     controls = true,
     aspectRatio = '16:9',
   }) => {
-    // Get aspect ratio styles
-    const getAspectRatioStyle = () => {
+    // Get aspect ratio class
+    const getAspectRatioClass = () => {
       switch (aspectRatio) {
         case '16:9':
-          return { paddingBottom: '56.25%' };
+          return 'aspect-16-9';
         case '4:3':
-          return { paddingBottom: '75%' };
+          return 'aspect-4-3';
         case '1:1':
-          return { paddingBottom: '100%' };
+          return 'aspect-1-1';
         case 'auto':
         default:
-          return {};
+          return 'aspect-auto';
       }
     };
 
@@ -76,25 +76,11 @@ import {
         if (isYouTubeUrl(video)) {
           // YouTube video embedding
           return (
-            <div 
-              style={{ 
-                position: 'relative', 
-                height: aspectRatio === 'auto' ? 'auto' : 0, 
-                overflow: 'hidden',
-                ...getAspectRatioStyle()
-              }}
-            >
+            <div className={`video-player-container ${getAspectRatioClass()}`}>
               <iframe
                 title={title}
                 src={getYouTubeEmbedUrl(video)}
-                style={{
-                  position: 'absolute',
-                  top: 0,
-                  left: 0,
-                  width: '100%',
-                  height: '100%',
-                  border: 0
-                }}
+                className="video-player-iframe"
                 allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                 referrerPolicy="strict-origin-when-cross-origin"
                 allowFullScreen
@@ -109,6 +95,7 @@ import {
               controls={controls}
               autoPlay={autoPlay}
               title={title}
+              className="video-player-video"
             >
               Your browser does not support the video tag.
             </video>
@@ -120,6 +107,7 @@ import {
           <img
             src={video_img}
             alt={title}
+            className="video-player-poster"
           />
         );
       }

src/global.css

@@ -1,3 +1,13 @@
+/* CSS Custom Properties for Dynamic Values */
+:root {
+  --ngui-image-placeholder-height: 200px;
+  --ngui-container-max-width: 1440px;
+  --ngui-spacing-medium: 16px;
+  --ngui-aspect-ratio-16-9: 56.25%;
+  --ngui-aspect-ratio-4-3: 75%;
+  --ngui-aspect-ratio-1-1: 100%;
+}
+
 /* Image Component Styles */
 .image-component-img {
   width: 100%;
@@ -8,11 +18,92 @@
 
 .image-component-placeholder {
   width: 100%;
-  height: 200px;
+  height: var(--ngui-image-placeholder-height);
   background-color: var(--pf-global--Color--200);
   border-radius: var(--pf-global--BorderRadius--sm);
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--pf-global--Color--300);
 }
+
+/* OneCard Component Styles */
+.onecard-component-img {
+  width: 100%;
+  height: auto;
+  border-radius: var(--pf-global--BorderRadius--sm);
+  object-fit: cover;
+}
+
+.onecard-component-container {
+  max-width: var(--ngui-container-max-width);
+  margin: 0 auto;
+  width: 100%;
+}
+
+.onecard-component-image-container {
+  flex-shrink: 0;
+}
+
+.onecard-component-image-container.size-sm {
+  flex-basis: 15%;
+}
+
+.onecard-component-image-container.size-md {
+  flex-basis: 20%;
+}
+
+.onecard-component-image-container.size-lg {
+  flex-basis: 25%;
+}
+
+.onecard-component-title {
+  margin-bottom: var(--ngui-spacing-medium);
+}
+
+.onecard-component-divider {
+  margin-top: var(--ngui-spacing-medium);
+  margin-bottom: var(--ngui-spacing-medium);
+}
+
+/* Video Player Component Styles */
+.video-player-container {
+  position: relative;
+  overflow: hidden;
+}
+
+.video-player-container.aspect-16-9 {
+  padding-bottom: var(--ngui-aspect-ratio-16-9);
+}
+
+.video-player-container.aspect-4-3 {
+  padding-bottom: var(--ngui-aspect-ratio-4-3);
+}
+
+.video-player-container.aspect-1-1 {
+  padding-bottom: var(--ngui-aspect-ratio-1-1);
+}
+
+.video-player-container.aspect-auto {
+  height: auto;
+}
+
+.video-player-iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: 0;
+}
+
+.video-player-video,
+.video-player-poster {
+  width: 100%;
+  height: auto;
+}
+
+.video-player-poster {
+  border-radius: var(--pf-global--BorderRadius--sm);
+  object-fit: cover;
+}