MM-64591 Fix contact sales button in banner (#31425)

webapp/channels/src/components/admin_console/feature_discovery/feature_discovery.tsx

@@ -123,6 +123,7 @@ export default class FeatureDiscovery extends React.PureComponent<Props, State>
             <div className='purchase-card'>
                 <>
                     <PurchaseLink
+                        className='btn btn-primary btn-lg'
                         eventID='post_trial_purchase_license'
                         buttonTextElement={
                             <FormattedMessage

webapp/channels/src/components/announcement_bar/configuration_bar/__snapshots__/configuration_bar.test.tsx.snap

@@ -23,6 +23,7 @@ exports[`components/ConfigurationBar should match snapshot, expired 1`] = `
         />
       </React.Fragment>
       <Memo(Connect(RenewalLink))
+        className="btn btn-tertiary btn-xs btn-inverted annnouncementBar__renewLicense"
         telemetryInfo={
           Object {
             "error": "renew_license_banner_fail",
@@ -79,6 +80,7 @@ exports[`components/ConfigurationBar should match snapshot, expired, in grace pe
         />
       </React.Fragment>
       <Memo(Connect(RenewalLink))
+        className="btn btn-tertiary btn-xs btn-inverted annnouncementBar__renewLicense"
         telemetryInfo={
           Object {
             "error": "renew_license_banner_fail",
@@ -156,6 +158,7 @@ exports[`components/ConfigurationBar should match snapshot, expiring, trial lice
             id="announcement_bar.error.purchase_a_license_now"
           />
         }
+        className="btn btn-tertiary btn-xs btn-inverted annnouncementBar__purchaseNow"
       />
     </div>
   }
@@ -194,6 +197,7 @@ exports[`components/ConfigurationBar should match snapshot, expiring, trial lice
             id="announcement_bar.error.purchase_a_license_now"
           />
         }
+        className="btn btn-tertiary btn-xs btn-inverted annnouncementBar__purchaseNow"
       />
     </div>
   }

webapp/channels/src/components/announcement_bar/configuration_bar/configuration_bar.tsx

@@ -98,7 +98,10 @@ const ConfigurationAnnouncementBar = (props: Props) => {
                     message={
                         <div className='announcement-bar__configuration'>
                             {message}
-                            <RenewalLink telemetryInfo={renewLinkTelemetry}/>
+                            <RenewalLink
+                                className='btn btn-tertiary btn-xs btn-inverted annnouncementBar__renewLicense'
+                                telemetryInfo={renewLinkTelemetry}
+                            />
                         </div>
                     }
                     tooltipMsg={message}
@@ -112,6 +115,7 @@ const ConfigurationAnnouncementBar = (props: Props) => {
         if (isTrialLicense(props.license) && typeof daysUntilLicenseExpires !== 'undefined' && daysUntilLicenseExpires <= 14 && !props.dismissedExpiringTrialLicense) {
             const purchaseLicense = (
                 <PurchaseLink
+                    className='btn btn-tertiary btn-xs btn-inverted annnouncementBar__purchaseNow'
                     buttonTextElement={
                         <FormattedMessage
                             id='announcement_bar.error.purchase_a_license_now'
@@ -200,7 +204,10 @@ const ConfigurationAnnouncementBar = (props: Props) => {
                     message={
                         <div className='announcement-bar__configuration'>
                             {message}
-                            <RenewalLink telemetryInfo={renewLinkTelemetry}/>
+                            <RenewalLink
+                                className='btn btn-tertiary btn-xs btn-inverted annnouncementBar__renewLicense'
+                                telemetryInfo={renewLinkTelemetry}
+                            />
                         </div>
                     }
                     tooltipMsg={message}

webapp/channels/src/components/announcement_bar/purchase_link/purchase_link.tsx

@@ -12,6 +12,7 @@ import './purchase_link.scss';
 export interface Props {
     buttonTextElement: JSX.Element;
     eventID?: string;
+    className?: string;
 }
 
 const PurchaseLink: React.FC<Props> = (props: Props) => {
@@ -24,10 +25,16 @@ const PurchaseLink: React.FC<Props> = (props: Props) => {
         openSalesLink();
     };
 
+    // Default classes for feature discovery context
+    const defaultClassName = 'btn btn-primary';
+
+    // Use provided className or default
+    const buttonClassName = props.className || defaultClassName;
+
     return (
         <button
             id={props.eventID}
-            className={'btn btn-primary btn-lg announcementBar__purchaseNow'}
+            className={buttonClassName}
             onClick={handlePurchaseLinkClick}
         >
             {props.buttonTextElement}

webapp/channels/src/components/announcement_bar/renewal_link/renew_link.scss

@@ -2,16 +2,5 @@
 
 .annnouncementBar__renewLicense {
     display: block;
-    padding: 12px 20px;
+    margin-left: 8px;
-    border: none;
-    border-radius: 4px;
-    margin-top: 15px;
-    background: var(--sys-button-bg);
-    color: var(--sys-button-color);
-
-    span {
-        font-size: 14px;
-        font-weight: 600;
-        line-height: 14px;
-    }
 }

webapp/channels/src/components/announcement_bar/renewal_link/renewal_link.tsx

@@ -17,6 +17,7 @@ export interface RenewalLinkProps {
     };
     isDisabled?: boolean;
     customBtnText?: JSX.Element;
+    className?: string;
 }
 
 const RenewalLink = (props: RenewalLinkProps) => {
@@ -34,9 +35,15 @@ const RenewalLink = (props: RenewalLinkProps) => {
         />
     );
 
+    // Default classes for general context
+    const defaultClassName = 'btn btn-primary';
+
+    // Use provided className or default
+    const buttonClassName = props.className || defaultClassName;
+
     return (
         <button
-            className='btn btn-primary annnouncementBar__renewLicense'
+            className={buttonClassName}
             disabled={props.isDisabled}
             onClick={(e) => handleLinkClick(e)}
         >