Merge pull request #657 from devtron-labs/feat/license-card-sheen

feat: add sheen for light and dark mode in license card

Author: AbhishekA1509

src/Shared/Components/DevtronLicenseCard/DevtronLicenseCard.tsx

@@ -4,6 +4,7 @@ import { ClipboardButton, getTTLInHumanReadableFormat } from '@Common/index'
 import { ReactComponent as ICChatSupport } from '@IconsV2/ic-chat-circle-dots.svg'
 import { getThemeOppositeThemeClass } from '@Shared/Providers/ThemeProvider/utils'
 import {
+    AppThemeType,
     CONTACT_SUPPORT_LINK,
     DevtronLicenseCardProps,
     ENTERPRISE_SUPPORT_LINK,
@@ -32,6 +33,7 @@ export const DevtronLicenseCard = ({
     const remainingTime = getTTLInHumanReadableFormat(ttl)
     const remainingTimeString = ttl < 0 ? `Expired ${remainingTime} ago` : `${remainingTime} remaining`
     const isLicenseValid = licenseStatus !== LicenseStatus.EXPIRED
+    const isThemeDark = appTheme === AppThemeType.dark
 
     const cardRef = useRef<HTMLDivElement>(null)
 
@@ -70,12 +72,10 @@ export const DevtronLicenseCard = ({
     )
     const sheenPosition = useTransform(diagonalMovement, [-5, 5], [-100, 200])
 
-    const sheenOpacity = useTransform(sheenPosition, [-100, 50, 200], [0, 0.05, 0])
-    const sheenGradient = useMotionTemplate`linear-gradient(
-    55deg,
-    transparent,
-    rgba(255 255 255 / ${sheenOpacity}) ${sheenPosition}%,
-    transparent)`
+    const sheenOpacity = useTransform(sheenPosition, [-100, 50, 200], [0, isThemeDark ? 0.25 : 0.1, 0])
+    const sheenGradient = isThemeDark
+        ? useMotionTemplate`linear-gradient(55deg, transparent, rgba(122, 127, 131, ${sheenOpacity}) ${sheenPosition}%, transparent)`
+        : useMotionTemplate`linear-gradient(55deg, transparent, rgba(255, 255, 255, ${sheenOpacity}) ${sheenPosition}%, transparent)`
 
     return (
         <div className="flexbox-col p-8 br-16" style={{ backgroundColor: bgColor }}>
@@ -107,7 +107,7 @@ export const DevtronLicenseCard = ({
                                 </div>
                                 {licenseKey && <ClipboardButton content={licenseKey} onClick={onCopyButtonClick} />}
                             </div>
-                            <div className="flexbox dc__align-items-center dc__gap-4 flex-wrap">
+                            <div className="flexbox dc__align-items-center dc__gap-4 flex-wrap fs-12">
                                 <span className="font-ibm-plex-mono cn-9">{expiryDate}</span>
                                 <span className="cn-9">·</span>
                                 <span style={{ color: textColor }}>{remainingTimeString}</span>

src/Shared/Components/DevtronLicenseCard/utils.tsx

@@ -38,7 +38,7 @@ export const parseDevtronLicenseDTOIntoLicenseCardData = <isCentralDashboard ext
         licenseDTO || {}
 
     return {
-        enterpriseName: organisationMetadata?.name || '',
+        enterpriseName: organisationMetadata?.name || 'Devtron Enterprise',
         expiryDate: expiry ? moment(expiry).format(DATE_TIME_FORMATS['DD/MM/YYYY']) : '',
         ttl,
         licenseStatus: getDevtronLicenseStatus({ ttl, reminderThreshold }),

src/Shared/Helpers.tsx

@@ -1087,14 +1087,14 @@ export const getCentralAPIHealthObjectFromLocalStorage = (): CentralAPILocalConf
         return {
             lastUpdatedDate: lastUpdatedDate || '',
             updateCount: updateCount || 0,
-            isConnected: isConnected || null,
+            isConnected: isConnected || false,
         }
     } catch {
         localStorage.removeItem(CENTRAL_API_LOCAL_STORAGE_KEY)
         return {
             lastUpdatedDate: '',
             updateCount: 0,
-            isConnected: null,
+            isConnected: false,
         }
     }
 }

src/Shared/constants.tsx

@@ -521,7 +521,7 @@ export const DC_DELETE_SUBTITLES = {
 }
 
 export const EULA_LINK = 'https://devtron.ai/end-user-license-agreement-eula'
-export const CONTACT_SUPPORT_LINK = 'https://share.hsforms.com/1Yp3bvPAaRCaHUEH5vtMjEQ4368n'
+export const CONTACT_SUPPORT_LINK = 'https://devtron.ai/enterprise-support'
 
 export const enum DeleteComponentsName {
     Cluster = 'cluster',