Move Pricing components

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

Author: leecalcote

…mponents/PlanCard/collapsible-details.js …/Pricing/PlanCard/collapsible-details.jssrc/components/PlanCard/collapsible-details.js renamed to src/components/Pricing/PlanCard/collapsible-details.js src/components/PlanCard/collapsible-details.js renamed to src/components/Pricing/PlanCard/collapsible-details.js

@@ -1,6 +1,6 @@
 import React from "react";
-import Button from "../../reusecore/Button";
-import { Col, Row, Container } from "../../reusecore/Layout";
+import Button from "../../../reusecore/Button";
+import { Col, Row, Container } from "../../../reusecore/Layout";
 import PlanCardWrapper from "./planCard.style";
 import FeatureDetails from "./collapsible-details";
 
@@ -103,7 +103,9 @@ const PlanCard = ({ planData , isYearly }) => {
                         <div key={t.id}>
                           {isFirstAddOn && (
                             <div className="add-on-separator">
+                              <span className="add-on-label">Add-on Features</span>
                               <hr className="add-on-line" />
+                             
                             </div>
                           )}
                           <div className="feature">

src/components/PlanCard/index.js src/components/Pricing/PlanCard/index.jssrc/components/PlanCard/index.js renamed to src/components/Pricing/PlanCard/index.js

@@ -140,6 +140,13 @@ const PlanCardWrapper = styled.section`
     line-height: 1rem;
     .add-on-separator {
       margin: 1.5rem 0 1rem 0;
+      .add-on-label {
+        font-size: 0.75rem;
+        font-weight: 500;
+        color: ${(props) => props.theme.secondaryColor};
+        margin-bottom: 0.5rem;
+        display: block;
+      }
       .add-on-line {
         border: none;
         border-top: 1px solid ${(props) => props.theme.greyDCDCDCToGrey3B3B3B};

src/components/PlanCard/planCard.style.js …nents/Pricing/PlanCard/planCard.style.jssrc/components/PlanCard/planCard.style.js renamed to src/components/Pricing/PlanCard/planCard.style.js src/components/PlanCard/planCard.style.js renamed to src/components/Pricing/PlanCard/planCard.style.js

@@ -2,7 +2,7 @@
 import React, { useState, useEffect } from "react";
 import { Box, Card, CardContent, CardHeader, Typography, FormControl, InputLabel, Select, MenuItem, Slider, Switch, FormControlLabel, Chip, Container, Link, Paper, SistentThemeProvider, CssBaseline, useTheme } from "@sistent/sistent";
 import { Calculate, CheckCircle } from "@mui/icons-material";
-import { useStyledDarkMode } from "../../theme/app/useStyledDarkMode";
+import { useStyledDarkMode } from "../../../theme/app/useStyledDarkMode";
 import { getAddOns } from "./pricingData";
 import FeatureDetails from "../PlanCard/collapsible-details";
 import PlanCardWrapper from "../PlanCard/planCard.style";

…/components/PricingAddons/AcademyIcon.js …nts/Pricing/PricingAddons/AcademyIcon.jssrc/components/PricingAddons/AcademyIcon.js renamed to src/components/Pricing/PricingAddons/AcademyIcon.js src/components/PricingAddons/AcademyIcon.js renamed to src/components/Pricing/PricingAddons/AcademyIcon.js

@@ -4,7 +4,7 @@ import { PricingAddons } from ".";
 
 import { SistentThemeProvider, Box, Typography, Container, CssBaseline } from "@sistent/sistent";
 
-import { useStyledDarkMode } from "../../theme/app/useStyledDarkMode";
+import { useStyledDarkMode } from "../../../theme/app/useStyledDarkMode";
 
 
 const TestPage = () => {