Refactor PlanPanelRight to use CSS classes

Replaced inline styles in PlanPanelRight.tsx with CSS classes and added a dedicated stylesheet (planpanelright.css) for improved maintainability and responsiveness. This change makes the component styling more consistent and easier to manage, with media queries for better display on various screen sizes.

Author: Fr4nc3

src/frontend/src/components/content/PlanPanelRight.tsx

@@ -6,8 +6,9 @@ import {
   ArrowTurnDownRightRegular,
 } from "@fluentui/react-icons";
 import { MPlanData, PlanDetailsProps } from "../../models";
-import { getAgentIcon, getAgentDisplayNameWithSuffix } from '../../utils/agentIconUtils'; 
+import { getAgentIcon, getAgentDisplayNameWithSuffix } from '../../utils/agentIconUtils';
 import ContentNotFound from "../NotFound/ContentNotFound";
+import "../../styles/planpanelright.css";
 
 
 const PlanPanelRight: React.FC<PlanDetailsProps> = ({
@@ -22,18 +23,7 @@ const PlanPanelRight: React.FC<PlanDetailsProps> = ({
 
   if (!planApprovalRequest) {
     return (
-      <div style={{
-        width: '280px',
-        height: '100vh',
-        padding: '20px',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        borderLeft: '1px solid var(--colorNeutralStroke1)',
-        color: 'var(--colorNeutralForeground3)',
-        fontSize: '14px',
-        fontStyle: 'italic'
-      }}>
+      <div className="plan-panel-right__no-data">
         No plan available
       </div>
     );
@@ -48,7 +38,7 @@ const PlanPanelRight: React.FC<PlanDetailsProps> = ({
     return planApprovalRequest.steps.map((step, index) => {
       const action = step.action || step.cleanAction || '';
       const isHeading = action.trim().endsWith(':');
-      
+
       return {
         text: action.trim(),
         isHeading,
@@ -62,63 +52,29 @@ const PlanPanelRight: React.FC<PlanDetailsProps> = ({
     const planSteps = extractPlanSteps();
 
     return (
-      <div style={{
-        marginBottom: '24px',
-        paddingBottom: '20px',
-        borderBottom: '1px solid var(--colorNeutralStroke1)'
-      }}>
-        <Body1 style={{
-          marginBottom: '16px',
-          fontSize: '14px',
-          fontWeight: 600,
-          color: 'var(--colorNeutralForeground1)'
-        }}>
+      <div className="plan-section">
+        <Body1 className="plan-section__title">
           Plan Overview
         </Body1>
 
         {planSteps.length === 0 ? (
-          <div style={{
-            textAlign: 'center',
-            color: 'var(--colorNeutralForeground3)',
-            fontSize: '14px',
-            fontStyle: 'italic',
-            padding: '20px'
-          }}>
+          <div className="plan-section__empty">
             Plan is being generated...
           </div>
         ) : (
-          <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+          <div className="plan-steps">
             {planSteps.map((step, index) => (
-              <div key={step.key} style={{ display: 'flex', flexDirection: 'column' }}>
+              <div key={step.key} className="plan-step">
                 {step.isHeading ? (
                   // Heading - larger text, bold
-                  <Body1 style={{
-                    fontSize: '14px',
-                    fontWeight: 600,
-                    color: 'var(--colorNeutralForeground1)',
-                    marginBottom: '4px'
-                  }}>
+                  <Body1 className="plan-step__heading">
                     {step.text}
                   </Body1>
                 ) : (
                   // Sub-step - with arrow
-                  <div style={{
-                    display: 'flex',
-                    alignItems: 'flex-start',
-                    gap: '8px',
-                    marginBottom: '4px'
-                  }}>
-                    <ArrowTurnDownRightRegular style={{
-                      fontSize: '16px',
-                      color: 'var(--colorNeutralForeground2)',
-                      marginTop: '2px',
-                      flexShrink: 0
-                    }} />
-                    <Body1 style={{
-                      fontSize: '14px',
-                      color: 'var(--colorNeutralForeground1)',
-                      lineHeight: 1.4
-                    }}>
+                  <div className="plan-step__content">
+                    <ArrowTurnDownRightRegular className="plan-step__arrow" />
+                    <Body1 className="plan-step__text">
                       {step.text}
                     </Body1>
                   </div>
@@ -136,59 +92,27 @@ const PlanPanelRight: React.FC<PlanDetailsProps> = ({
     const agents = planApprovalRequest?.team || [];
 
     return (
-      <div style={{
-        flex: 1,
-        overflow: 'auto'
-      }}>
-        <Body1 style={{
-          marginBottom: '16px',
-          fontSize: '14px',
-          fontWeight: 600,
-          color: 'var(--colorNeutralForeground1)'
-        }}>
+      <div className="agents-section">
+        <Body1 className="agents-section__title">
           Agent Team
         </Body1>
 
         {agents.length === 0 ? (
-          <div style={{
-            textAlign: 'center',
-            color: 'var(--colorNeutralForeground3)',
-            fontSize: '14px',
-            fontStyle: 'italic',
-            padding: '20px'
-          }}>
+          <div className="agents-section__empty">
             No agents assigned yet...
           </div>
         ) : (
-          <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+          <div className="agents-list">
             {agents.map((agentName, index) => (
-              <div key={`${agentName}-${index}`} style={{
-                display: 'flex',
-                alignItems: 'center',
-                gap: '12px',
-                padding: '8px 0'
-              }}>
+              <div key={`${agentName}-${index}`} className="agent-item">
                 {/* Agent Icon */}
-                <div style={{
-                  width: '32px',
-                  height: '32px',
-                  borderRadius: '50%',
-                  backgroundColor: 'var(--colorNeutralBackground3)',
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  flexShrink: 0
-                }}>
+                <div className="agent-item__icon">
                   {getAgentIcon(agentName, planData, planApprovalRequest)}
                 </div>
 
                 {/* Agent Info - just name */}
-                <div style={{ flex: 1 }}>
-                  <Body1 style={{
-                    fontWeight: 600,
-                    fontSize: '14px',
-                    color: 'var(--colorNeutralForeground1)'
-                  }}>
+                <div className="agent-item__info">
+                  <Body1 className="agent-item__name">
                     {getAgentDisplayNameWithSuffix(agentName)}
                   </Body1>
                 </div>
@@ -202,16 +126,7 @@ const PlanPanelRight: React.FC<PlanDetailsProps> = ({
 
   // Main render
   return (
-    <div style={{
-      width: '280px',
-      height: '100vh',
-      padding: '20px',
-      display: 'flex',
-      flexDirection: 'column',
-      overflow: 'hidden',
-      borderLeft: '1px solid var(--colorNeutralStroke1)',
-      // backgroundColor: 'var(--colorNeutralBackground1)'
-    }}>
+    <div className="plan-panel-right">
       {/* Plan section on top */}
       {renderPlanSection()}