Merge pull request #50 from Azure-Samples/mirza/fe/hotifix-ctas

Improve ShowcaseCard and ShowcaseListTile styles for layout consistency

Author: Emumba-Abdullah

src/components/gallery/ShowcaseCard/index.tsx

@@ -125,47 +125,49 @@ function ShowcaseCard({
           {tileNumber !== undefined && (
             <div className={styleCSS.mobileTileNumber}>{tileNumber}</div>
           )}
-          {user.image && (
-            <div className={styleCSS.imageContainer}>
-              <OptimizedImage
-                src={user.image}
-                alt={displayTitle + " image"}
-                objectFit="cover"
-                style={{
-                  width: "100%",
-                  height: "200px",
-                  display: "block",
-                  borderRadius: "8px 8px 0px 0px",
-                }}
+          <div className={styleCSS.cardContent}>
+            {user.image && (
+              <div className={styleCSS.imageContainer}>
+                <OptimizedImage
+                  src={user.image}
+                  alt={displayTitle + " image"}
+                  objectFit="cover"
+                  style={{
+                    width: "100%",
+                    height: "200px",
+                    display: "block",
+                    borderRadius: "8px 8px 0px 0px",
+                  }}
+                />
+              </div>
+            )}
+            <div className={styleCSS.cardTags}>
+              <ShowcaseCardTag
+                key={displayTitle}
+                tags={tags}
+                cardPanel={false}
+                buttonText={buttonText}
               />
             </div>
-          )}
-          <div className={styleCSS.cardTags}>
-            <ShowcaseCardTag
-              key={displayTitle}
-              tags={tags}
-              cardPanel={false}
-              buttonText={buttonText}
-            />
-          </div>
-          <div style={{ padding: 16 }}>
-            {coverPage ? (
-              <>
-                <div className={styleCSS.cardTitleCoverPage}>
-                  {displayTitle}
-                </div>
-                <div className={styleCSS.cardDescriptionCoverPage}>
-                  {displayDescription}
-                </div>
-              </>
-            ) : (
-              <>
-                <div className={styleCSS.cardTitle}>{displayTitle}</div>
-                <div className={styleCSS.cardDescription}>
-                  {displayDescription}
-                </div>
-              </>
-            )}
+            <div style={{ padding: 16 }}>
+              {coverPage ? (
+                <>
+                  <div className={styleCSS.cardTitleCoverPage}>
+                    {displayTitle}
+                  </div>
+                  <div className={styleCSS.cardDescriptionCoverPage}>
+                    {displayDescription}
+                  </div>
+                </>
+              ) : (
+                <>
+                  <div className={styleCSS.cardTitle}>{displayTitle}</div>
+                  <div className={styleCSS.cardDescription}>
+                    {displayDescription}
+                  </div>
+                </>
+              )}
+            </div>
           </div>
           {/* <CardFooter> */}
           {user.website && (
@@ -178,6 +180,7 @@ function ShowcaseCard({
               onClick={(e) => e.stopPropagation()}
               style={{
                 width: "100%",
+                marginTop: "-1px",
                 fontSize: "14px",
                 fontWeight: 600,
                 display: "flex",
@@ -186,6 +189,7 @@ function ShowcaseCard({
                 paddingLeft: "16px",
                 paddingRight: "16px",
                 ...ctaStyles,
+                borderRadius: "3px 3px 16px 16px",
               }}
             >
               <span>{buttonText}</span>

src/components/gallery/ShowcaseCard/styles.module.css

@@ -119,7 +119,7 @@
   overflow: hidden;
   transition: box-shadow 0.3s, transform 0.3s;
   box-shadow: none !important;
-  border: 1px solid #0078d426 !important;
+  border: none !important;
   transform-origin: center;
   position: relative;
 }
@@ -148,6 +148,48 @@
   margin-top: 12px;
 }
 
+/* Grid-view card structural sections */
+.cardContent {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  border-top: 1px solid #0078d426;
+  border-left: 1px solid #0078d426;
+  border-right: 1px solid #0078d426;
+  border-radius: 16px 16px 0 0;
+  overflow: hidden;
+}
+
+.cardFooterAction {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  padding: 14px 16px;
+  min-height: 48px;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1;
+  text-decoration: none !important;
+  cursor: pointer;
+  box-sizing: border-box;
+  /* only the top divider border is set; left/right/bottom are covered by
+     the inset box-shadow in the same accent color (set inline), so the
+     accent wraps the full section edge-to-edge */
+  border-left: none;
+  border-right: none;
+  border-bottom: none;
+  /* match card's bottom corners so overflow:hidden clips cleanly */
+  border-radius: 0 0 16px 16px;
+  margin: 0;
+  transition: filter 0.15s ease;
+}
+
+.cardFooterAction:hover {
+  filter: brightness(0.93);
+  text-decoration: none !important;
+}
+
 /* Mobile breakpoint: cap card size to 600px and center */
 @media screen and (max-width: 768px) {
   .card {

src/components/gallery/ShowcaseListTile/index.tsx

@@ -115,6 +115,7 @@ export default function ShowcaseListTile({
                     paddingLeft: "16px",
                     paddingRight: "16px",
                     ...ctaStyles,
+                    borderRadius: "1px",
                   }}
                 >
                   <span>{buttonText}</span>

src/utils/buttonStyleUtils.ts

@@ -24,9 +24,9 @@ const BUTTON_STYLE_MAP: Record<string, ButtonStyles> = {
     borderRadius: "3px 3px 14px 14px",
   },
   Video: {
-    backgroundColor: "#FEF7EE",
-    border: "1px solid #DDC4A2",
-    color: "#CE811D",
+    backgroundColor: "#FFEFFD",
+    border: "1px solid #E6B9E1",
+    color: "#B140A3",
     borderRadius: "3px 3px 14px 14px",
   },
   Training: {
@@ -42,9 +42,9 @@ const BUTTON_STYLE_MAP: Record<string, ButtonStyles> = {
     borderRadius: "3px 3px 14px 14px",
   },
   Blog: {
-    backgroundColor: "#FFEFFD",
-    border: "1px solid #E6B9E1",
-    color: "#B140A3",
+    backgroundColor: "#FEF7EE",
+    border: "1px solid #DDC4A2",
+    color: "#CE811D",
     borderRadius: "3px 3px 14px 14px",
   },
 };