fix: update loyalty cards and join loyalty sidebar design

components/Icons/ArrowRight.tsx

@@ -5,6 +5,8 @@ import type { IconProps } from "@/types/components/icon"
 export default function ArrowRightIcon({
   className,
   color,
+  height = "25",
+  width = "24",
   ...props
 }: IconProps) {
   const classNames = iconVariants({ className, color })
@@ -12,9 +14,9 @@ export default function ArrowRightIcon({
     <svg
       className={classNames}
       fill="none"
-      height="25"
+      height={height}
       viewBox="0 0 24 25"
-      width="24"
+      width={width}
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >

components/Icons/Email.tsx

@@ -2,15 +2,21 @@ import { iconVariants } from "./variants"
 
 import type { IconProps } from "@/types/components/icon"
 
-export default function EmailIcon({ className, color, ...props }: IconProps) {
+export default function EmailIcon({
+  className,
+  color,
+  width = "20",
+  height = "20",
+  ...props
+}: IconProps) {
   const classNames = iconVariants({ className, color })
   return (
     <svg
       className={classNames}
       fill="none"
-      height="20"
+      height={height}
       viewBox="0 0 20 20"
-      width="20"
+      width={width}
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >

components/Icons/Phone.tsx

@@ -2,15 +2,21 @@ import { iconVariants } from "./variants"
 
 import type { IconProps } from "@/types/components/icon"
 
-export default function PhoneIcon({ className, color, ...props }: IconProps) {
+export default function PhoneIcon({
+  className,
+  color,
+  height = "24",
+  width = "24",
+  ...props
+}: IconProps) {
   const classNames = iconVariants({ className, color })
   return (
     <svg
       className={classNames}
       fill="none"
-      height="24"
+      height={height}
       viewBox="0 0 24 24"
-      width="24"
+      width={width}
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >