Slider Pricing update

Signed-off-by: Namanv509 <namanverma00260@gmail.com>

Author: Namanv0509

src/components/Pricing/PricingAddons/index.js

@@ -398,7 +398,7 @@ export const PricingAddons = ({ isYearly = false, setIsYearly, currency, enterpr
                                           }
                                         }}
                                       >
-                                        {formatSliderPrice(option.yearlyPerUser/12, currency)}<br/>{targetSubAddon.unitLabelSingular}/month
+                                        {formatSliderPrice(option.yearlyPerUser / 12, currency)}<br/>{targetSubAddon.unitLabelSingular}/month
                                       </Box>
                                     )}
                                   <Box
@@ -407,10 +407,10 @@ export const PricingAddons = ({ isYearly = false, setIsYearly, currency, enterpr
                                       mb: 1.5,
                                       fontSize: {
                                         xs: "0.75rem",
-                                        sm: "0.8rem",
+                                        sm: "0.9rem",
                                       }
                                     }}>
-                                    {formatSliderPrice(isYearly ? option.yearlyPerUser : option.monthlyPerUser, currency)}/{targetSubAddon.unitLabelSingular}/{isYearly ? "year" : "month"}
+                                    {formatSliderPrice(isYearly ? option.yearlyPerUser : option.monthlyPerUser, currency)}<br/>{targetSubAddon.unitLabelSingular}/{isYearly ? "year" : "month"}
                                   </Box>
                                 </Box>
                               ),

src/components/Pricing/PricingAddons/styles.js

@@ -251,7 +251,7 @@ export const boxStyles = {
     mt: 1
   },
   disclaimerSection: {
-    my: 6,
+    my: 10,
     mb: 2,
     justifyContent: "space-between"
   }

src/sections/Pricing/index.js

@@ -17,28 +17,28 @@ import { min } from "lodash";
 
 const customToggleButtonStyles = {
   container: {
-    ...toggleButtonStyles.container, 
+    ...toggleButtonStyles.container,
     backgroundColor: "transparent",
-     p: "6px",
-     minHeight: "42px",
-     minWidth: "50px",
-    borderColor:"#ffffffff" 
+    p: "6px",
+    minHeight: "42px",
+    minWidth: "50px",
+    borderColor: "#ffffffff"
   },
   base: {
     py: 0.5,
     px: 4,
     fontSize: "4rem",
-    ...toggleButtonStyles.base, 
+    ...toggleButtonStyles.base,
   },
 };
 
 const getCustomToggleButtonStyle = (isActive, baseStyle) => ({
   ...getToggleButtonStyle(isActive, baseStyle),
-  backgroundColor: isActive ? "#00B39F" : "transparent", 
+  backgroundColor: isActive ? "#00B39F" : "transparent",
   color: isActive ? "#fffcfcff" : "#fff",
   fontSize: "1rem",
   "&:hover": {
-    backgroundColor: isActive ? "#009B8A" : "transparent", 
+    backgroundColor: isActive ? "#009B8A" : "transparent",
   },
 });