Feat: Insight Sharing Implementation

• Implemented template saving and editing (no delete yet)
• Unique ID generation for every template
• Implemented Frequency selection
• Implemented Warnings when recipients/email template empty
• Implemented Bold/Italic/Underline with
• Implemented Sidebar functionality for reporting
• Looked at adding images to templates, will look more into it this week (bit tricky)

libs/shared/lib/components/buttons/Button.tsx

@@ -21,6 +21,7 @@ type ButtonProps = {
   className?: string;
   style?: React.CSSProperties;
   tooltip?: string;
+  active?: boolean;
   onMouseUp?: (e: any) => void;
   onMouseDown?: (e: any) => void;
   onMouseEnter?: (e: any) => void;
@@ -54,6 +55,7 @@ export const Button = React.forwardRef<HTMLButtonElement | HTMLAnchorElement | H
       className,
       children,
       tooltip,
+      active,
       ...props
     },
     forwardedRef,
@@ -139,6 +141,8 @@ export const Button = React.forwardRef<HTMLButtonElement | HTMLAnchorElement | H
       [iconComponent, label, children],
     );
 
+    const activeClass = useMemo(() => (active ? styles['btn-active'] : ''), [active, styles]);
+
     const ButtonComponent = as;
 
     const isAnchor = as === 'a';
@@ -148,7 +152,7 @@ export const Button = React.forwardRef<HTMLButtonElement | HTMLAnchorElement | H
         {tooltip && <TooltipContent>{tooltip}</TooltipContent>}
         <TooltipTrigger>
           <ButtonComponent
-            className={`${styles.btn} ${typeClass} ${variantClass} ${sizeClass} ${blockClass} ${roundedClass} ${iconOnlyClass} ${className ? className : ''}`}
+            className={`${styles.btn} ${typeClass} ${variantClass} ${sizeClass} ${blockClass} ${roundedClass} ${iconOnlyClass} ${activeClass} ${className ? className : ''}`}
             onClick={onClick}
             disabled={disabled}
             aria-label={ariaLabel}