Refactor PricingAddons and SubscriptionToggle components

- Updated icon imports in pricingData.js from CloudOutlined to Cloud.
- Removed commented-out academyPlans data and added tiered pricing directly in getAddOns function.
- Modified secondaryFill color in AcademyIcon to a lighter shade.
- Replaced monthlyPrice and yearlyPrice with a pricing array for better flexibility in add-ons.
- Introduced SubscriptionToggle component to manage yearly/monthly toggle state.
- Updated Pricing section to utilize SubscriptionToggle for better state management.
- Added sliderThemeCustomization styles for consistent typography across various MUI components.

Signed-off-by: Lee Calcote <lee.calcote@layer5.io>

Author: leecalcote

src/components/PlanCard/collapsible-details.js

@@ -7,27 +7,44 @@ const FeatureDetailsWrapper = styled.div`
   display: inline;
   cursor: pointer;
 
-  .open {
-    margin: 0rem;
-    list-style: none;
-    height: auto !important;
-    opacity: 1 !important;
+  .details > * {
+    max-height: 0;
+    opacity: 0;
+    margin: 0;
+    visibility: hidden;
+    overflow: hidden;
+    transition: opacity 0.2s ease-in-out, 
+                max-height 0.3s ease-in-out 0.1s,
+                margin 0.3s ease-in-out 0.1s,
+                visibility 0s linear 0.4s;
+  }
+
+  .details > .open {
+    max-height: 200px;
+    opacity: 1;
     margin-bottom: 1rem;
-    transition: all 0.4s !important;
+    visibility: visible;
+    transition: visibility 0s linear,
+                opacity 0.2s ease-in-out 0.1s, 
+                max-height 0.3s ease-in-out 0.2s,
+                margin 0.3s ease-in-out 0.2s;
   }
 
   .toggle-icon {
     width: 1.2rem;
     height: 1.2rem;
     fill: ${(props) => props.theme.primaryColor};
-    transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
+  }
+
+  .toggle-icon.expanded {
+    transform: rotate(90deg);
   }
 
   p {
     font-size: 0.9rem;
     margin: 0.5rem;
     color: ${(props) => props.theme.greyC1C1C1ToGreyB3B3B3};
-    transition: 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
   }
 
   .toggle-btn {
@@ -36,17 +53,6 @@ const FeatureDetailsWrapper = styled.div`
     vertical-align: middle;
   }
 
-  .closed {
-    opacity: 1;
-    height: 0;
-    transition: none;
-    visibility: hidden;
-  }
-
-  .open {
-    visibility: visible;
-  }
-
   h5 {
     display: inline-block;
     vertical-align: middle;
@@ -93,10 +99,10 @@ const FeatureDetails = ({ category, description, tier, children, onToggle }) =>
         </h5>
         <div className="details">
           {description && (
-            <p className={`closed ${expand ? "open" : ""}`} dangerouslySetInnerHTML={{ __html: description }} />
+            <p className={expand ? "open" : ""} dangerouslySetInnerHTML={{ __html: description }} />
           )}
           {children && (
-            <div className={`closed ${expand ? "open" : ""}`}>
+            <div className={expand ? "open" : ""}>
               {children}
             </div>
           )}

src/components/PlanCard/planCard.style.js

@@ -210,6 +210,17 @@ const PlanCardWrapper = styled.section`
   font-weight: 500;
   transition: 0.3s;
   background: ${(props) => props.theme.secondaryColor};
+
+}
+.addon-chip {
+  background-color: rgba(0, 179, 159, 0.15);
+  color: ${(props) => props.theme.text.light};
+  border: 1px solid;
+  border-color: ${(props) => props.theme.secondaryColor};
+
+}
+.addon-chip .MuiChip-icon {
+    color: ${(props) => props.theme.secondaryColor};
 }
 `;