Merge pull request #49 from Azure-Samples/mirza/fe/cta-colors

Add button style utility and apply styles in ShowcaseCard and ShowcaseListTile components

Author: Emumba-Abdullah

src/components/gallery/ShowcaseCard/index.tsx

@@ -13,6 +13,7 @@ import ShowcaseDialog from "../ShowcaseDialog/index";
 
 import type { User } from "../../../data/tags";
 import { getButtonText } from "../../../utils/buttonTextUtils";
+import { getButtonStyles } from "../../../utils/buttonStyleUtils";
 import OptimizedImage from "../../OptimizedImage";
 
 const LEARNING_PATH_TAGS = [
@@ -59,6 +60,9 @@ function ShowcaseCard({
   const [isOpen, { setTrue: openDialog, setFalse: dismissDialog }] =
     useBoolean(false);
 
+  const buttonText = getButtonText(user.website, user.tags);
+  const ctaStyles = getButtonStyles(buttonText);
+
   const [githubData, setGithubData] = useState<GitHubRepoInfo>(null);
 
   const fetchGitHubData = async (owner: string, repo: string) => {
@@ -141,7 +145,7 @@ function ShowcaseCard({
               key={displayTitle}
               tags={tags}
               cardPanel={false}
-              buttonText={getButtonText(user.website, user.tags)}
+              buttonText={buttonText}
             />
           </div>
           <div style={{ padding: 16 }}>
@@ -166,24 +170,25 @@ function ShowcaseCard({
           {/* <CardFooter> */}
           {user.website && (
             <Button
-              appearance="primary"
+              appearance="outline"
               as="a"
               href={user.website}
               target="_blank"
               rel="noopener noreferrer"
               onClick={(e) => e.stopPropagation()}
               style={{
                 width: "100%",
-                fontSize: "16px",
-                backgroundColor: "#0078d4",
+                fontSize: "14px",
+                fontWeight: 600,
                 display: "flex",
                 alignItems: "center",
                 justifyContent: "center",
                 paddingLeft: "16px",
                 paddingRight: "16px",
+                ...ctaStyles,
               }}
             >
-              <span>{getButtonText(user.website, user.tags)}</span>
+              <span>{buttonText}</span>
             </Button>
           )}
           {/* </CardFooter> */}

src/components/gallery/ShowcaseListTile/index.tsx

@@ -11,6 +11,7 @@ import styleCSS from "../ShowcaseCard/styles.module.css";
 import ShowcaseDialog from "../ShowcaseDialog/index";
 import ShowcaseCardTag from "../ShowcaseTag/index";
 import { getButtonText } from "../../../utils/buttonTextUtils";
+import { getButtonStyles } from "../../../utils/buttonStyleUtils";
 import OptimizedImage from "../../OptimizedImage";
 
 export default function ShowcaseListTile({
@@ -22,6 +23,8 @@ export default function ShowcaseListTile({
 }) {
   const [isOpen, { setTrue: openDialog, setFalse: dismissDialog }] =
     useBoolean(false);
+  const buttonText = getButtonText(user.website, user.tags);
+  const ctaStyles = getButtonStyles(buttonText);
   const shouldUseLearningPathContent =
     !!user.learningPathTitle && !!user.learningPathDescription;
   const displayTitle = shouldUseLearningPathContent
@@ -87,7 +90,7 @@ export default function ShowcaseListTile({
                 <ShowcaseCardTag
                   tags={user.tags}
                   cardPanel={false}
-                  buttonText={getButtonText(user.website, user.tags)}
+                  buttonText={buttonText}
                 />
               </div>
               <div className={styleCSS.listTitle}>{displayTitle}</div>
@@ -96,23 +99,25 @@ export default function ShowcaseListTile({
               </div>
               {user.website && (
                 <Button
-                  appearance="primary"
+                  appearance="outline"
                   as="a"
                   href={user.website}
                   target="_blank"
                   rel="noopener noreferrer"
                   onClick={(e) => e.stopPropagation()}
                   style={{
                     marginTop: 12,
-                    backgroundColor: "#0078d4",
+                    fontSize: "14px",
+                    fontWeight: 600,
                     display: "flex",
                     alignItems: "center",
                     justifyContent: "center",
                     paddingLeft: "16px",
                     paddingRight: "16px",
+                    ...ctaStyles,
                   }}
                 >
-                  <span>{getButtonText(user.website, user.tags)}</span>
+                  <span>{buttonText}</span>
                 </Button>
               )}
             </div>

src/utils/buttonStyleUtils.ts

@@ -0,0 +1,64 @@
+/**
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License.
+ */
+
+export interface ButtonStyles {
+  backgroundColor: string;
+  border: string;
+  color: string;
+  borderRadius: string;
+}
+
+const BUTTON_STYLE_MAP: Record<string, ButtonStyles> = {
+  Documentation: {
+    backgroundColor: "#ECF9FF",
+    border: "1px solid #AED4F2",
+    color: "#0078D4",
+    borderRadius: "3px 3px 14px 14px",
+  },
+  "Solution Accelerator": {
+    backgroundColor: "#F1FBF1",
+    border: "1px solid #B7D8B7",
+    color: "#107C10",
+    borderRadius: "3px 3px 14px 14px",
+  },
+  Video: {
+    backgroundColor: "#FEF7EE",
+    border: "1px solid #DDC4A2",
+    color: "#CE811D",
+    borderRadius: "3px 3px 14px 14px",
+  },
+  Training: {
+    backgroundColor: "#FAF4FF",
+    border: "1px solid #CDBFDE",
+    color: "#5C2D91",
+    borderRadius: "3px 3px 14px 14px",
+  },
+  Workshop: {
+    backgroundColor: "#FAF4FF",
+    border: "1px solid #CDBFDE",
+    color: "#5C2D91",
+    borderRadius: "3px 3px 14px 14px",
+  },
+  Blog: {
+    backgroundColor: "#FFEFFD",
+    border: "1px solid #E6B9E1",
+    color: "#B140A3",
+    borderRadius: "3px 3px 14px 14px",
+  },
+};
+
+const DEFAULT_BUTTON_STYLES: ButtonStyles = {
+  backgroundColor: "#ECF9FF",
+  border: "1px solid #AED4F2",
+  color: "#0078D4",
+  borderRadius: "3px 3px 14px 14px",
+};
+
+/**
+ * Returns CTA button styles (background, border, text color, border-radius) based on button text.
+ */
+export function getButtonStyles(buttonText: string): ButtonStyles {
+  return BUTTON_STYLE_MAP[buttonText] ?? DEFAULT_BUTTON_STYLES;
+}