Improve naming of QRcode share props

Expensify · Jul 18, 2024 · 1171083 · 1171083
1 parent 256ed3a
commit 1171083
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 33 deletions.
diff --git a/src/components/QRCode.tsx b/src/components/QRCode.tsx
@@ -21,19 +21,19 @@ type QRCodeProps = {
 
     /**
      * If the logo to be displayed in the middle of the QR code is an SVG, then this prop needs to be used
-     * instead of standard `logo`
+     * instead of standard `logo`.
      */
-    logoSVG?: React.FC<SvgProps>;
+    svgLogo?: React.FC<SvgProps>;
 
     /**
-     * Background color to be used for logo, we set background only for SVG logos
+     * Background color to be used for logo.
      */
     logoBackgroundColor?: string;
 
     /**
-     * Fill color to be used for logos of type SVG
+     * Fill color to be used for logos of type SVG.
      */
-    logoColor?: string;
+    svgLogoFillColor?: string;
 
     /** The size ratio of logo to QR code */
     logoRatio?: QRCodeLogoRatio;
@@ -51,7 +51,7 @@ type QRCodeProps = {
     backgroundColor?: string;
 
     /**
-     * Function to retrieve the internal component ref and be able to call it's
+     * Function to retrieve the internal component ref and be able to call its
      * methods
      */
     getRef?: (ref: Svg) => Svg;
@@ -60,8 +60,8 @@ type QRCodeProps = {
 function QRCode({
     url,
     logo,
-    logoSVG,
-    logoColor,
+    svgLogo,
+    svgLogoFillColor,
     logoBackgroundColor,
     getRef,
     size = 120,
@@ -78,8 +78,8 @@ function QRCode({
             value={url}
             size={size}
             logo={logo}
-            logoSVG={logoSVG}
-            logoColor={logoColor}
+            logoSVG={svgLogo}
+            logoColor={svgLogoFillColor}
             logoBackgroundColor={logoBackgroundColor ?? theme.highlightBG}
             logoSize={size * logoRatio}
             logoMargin={size * logoMarginRatio}

diff --git a/src/components/QRShare/index.tsx b/src/components/QRShare/index.tsx
@@ -12,7 +12,7 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import variables from '@styles/variables';
 import type {QRShareHandle, QRShareProps} from './types';
 
-function QRShare({url, title, subtitle, logo, logoSVG, logoBackground, logoColor, logoRatio, logoMarginRatio}: QRShareProps, ref: ForwardedRef<QRShareHandle>) {
+function QRShare({url, title, subtitle, logo, svgLogo, svgLogoFillColor, logoBackgroundColor, logoRatio, logoMarginRatio}: QRShareProps, ref: ForwardedRef<QRShareHandle>) {
     const styles = useThemeStyles();
     const theme = useTheme();
 
@@ -48,9 +48,9 @@ function QRShare({url, title, subtitle, logo, logoSVG, logoBackground, logoColor
             <QRCode
                 getRef={(svg) => (svgRef.current = svg)}
                 url={url}
-                logoSVG={logoSVG}
-                logoColor={logoColor}
-                logoBackgroundColor={logoBackground}
+                svgLogo={svgLogo}
+                svgLogoFillColor={svgLogoFillColor}
+                logoBackgroundColor={logoBackgroundColor}
                 logo={logo}
                 size={qrCodeSize}
                 logoRatio={logoRatio}

diff --git a/src/components/QRShare/types.ts b/src/components/QRShare/types.ts
@@ -23,22 +23,22 @@ type QRShareProps = {
      * If the logo to be displayed in the middle of the QR code is an SVG, then this prop needs to be used
      * instead of standard `logo`
      */
-    logoSVG?: React.FC<SvgProps>;
+    svgLogo?: React.FC<SvgProps>;
 
     /**
      * The logo which will be display in the middle of the QR code
      */
     logo?: ImageSourcePropType;
 
     /**
-     * Background color to be used for logo, we set background only for SVG logos
+     * Background color to be used for logo.
      */
-    logoBackground?: string;
+    logoBackgroundColor?: string;
 
     /**
      * Fill color to be used for logos of type SVG
      */
-    logoColor?: string;
+    svgLogoFillColor?: string;
 
     /**
      * The size ratio of logo to QR code

diff --git a/src/pages/ShareCodePage.tsx b/src/pages/ShareCodePage.tsx
@@ -90,16 +90,16 @@ function ShareCodePage({report, policy}: ShareCodePageProps) {
     const logo = isReport ? getLogoForWorkspace(report, policy) : (UserUtils.getAvatarUrl(currentUserPersonalDetails?.avatar, currentUserPersonalDetails?.accountID) as ImageSourcePropType);
 
     // Default logos (avatars) are SVG and they require some special logic to display correctly
-    let logoSVG: React.FC<SvgProps> | undefined;
-    let logoBackground: string | undefined;
-    let logoColor: string | undefined;
+    let svgLogo: React.FC<SvgProps> | undefined;
+    let logoBackgroundColor: string | undefined;
+    let svgLogoFillColor: string | undefined;
 
     if (!logo && policy && !policy.avatarURL) {
-        logoSVG = ReportUtils.getDefaultWorkspaceAvatar(policy.name) || Expensicons.FallbackAvatar;
+        svgLogo = ReportUtils.getDefaultWorkspaceAvatar(policy.name) || Expensicons.FallbackAvatar;
 
         const defaultWorkspaceAvatarColors = StyleUtils.getDefaultWorkspaceAvatarColor(policy.id ?? '');
-        logoBackground = defaultWorkspaceAvatarColors.backgroundColor?.toString();
-        logoColor = defaultWorkspaceAvatarColors.fill;
+        logoBackgroundColor = defaultWorkspaceAvatarColors.backgroundColor?.toString();
+        svgLogoFillColor = defaultWorkspaceAvatarColors.fill;
     }
 
     return (
@@ -124,9 +124,9 @@ function ShareCodePage({report, policy}: ShareCodePageProps) {
                         title={title}
                         subtitle={subtitle}
                         logo={logo}
-                        logoSVG={logoSVG}
-                        logoBackground={logoBackground}
-                        logoColor={logoColor}
+                        svgLogo={svgLogo}
+                        logoBackgroundColor={logoBackgroundColor}
+                        svgLogoFillColor={svgLogoFillColor}
                         logoRatio={CONST.QR.DEFAULT_LOGO_SIZE_RATIO}
                         logoMarginRatio={CONST.QR.DEFAULT_LOGO_MARGIN_RATIO}
                     />

diff --git a/src/pages/workspace/WorkspaceProfileSharePage.tsx b/src/pages/workspace/WorkspaceProfileSharePage.tsx
@@ -46,9 +46,9 @@ function WorkspaceProfileSharePage({policy}: WithPolicyProps) {
     const defaultWorkspaceAvatar = ReportUtils.getDefaultWorkspaceAvatar(policyName) || Expensicons.FallbackAvatar;
     const defaultWorkspaceAvatarColors = StyleUtils.getDefaultWorkspaceAvatarColor(policyID);
 
-    const logoSVG = !hasAvatar ? defaultWorkspaceAvatar : undefined;
-    const logoBackground = !hasAvatar ? defaultWorkspaceAvatarColors.backgroundColor?.toString() : undefined;
-    const logoColor = !hasAvatar ? defaultWorkspaceAvatarColors.fill : undefined;
+    const svgLogo = !hasAvatar ? defaultWorkspaceAvatar : undefined;
+    const logoBackgroundColor = !hasAvatar ? defaultWorkspaceAvatarColors.backgroundColor?.toString() : undefined;
+    const svgLogoFillColor = !hasAvatar ? defaultWorkspaceAvatarColors.fill : undefined;
 
     return (
         <AccessOrNotFoundWrapper
@@ -78,9 +78,9 @@ function WorkspaceProfileSharePage({policy}: WithPolicyProps) {
                                 url={url}
                                 title={policyName}
                                 logo={logo}
-                                logoSVG={logoSVG}
-                                logoBackground={logoBackground}
-                                logoColor={logoColor}
+                                svgLogo={svgLogo}
+                                logoBackgroundColor={logoBackgroundColor}
+                                svgLogoFillColor={svgLogoFillColor}
                                 logoRatio={CONST.QR.DEFAULT_LOGO_SIZE_RATIO}
                                 logoMarginRatio={CONST.QR.DEFAULT_LOGO_MARGIN_RATIO}
                             />