Skip to content

Commit 8e7860b

Browse files
AbhishekA1509AbhishekA1509
authored
Merge pull request #647 from devtron-labs/feat/license-uat
feat: license uat
2 parents 42e34d9 + fe0a11b commit 8e7860b

File tree

10 files changed

+77
-59
lines changed

10 files changed

+77
-59
lines changed

‎src/Assets/IconV2/ic-devtron-header-logo.svg

Lines changed: 4 additions & 4 deletions
Loading

‎src/Shared/Components/DevtronLicenseCard/DevtronLicenseCard.tsx

Lines changed: 43 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,21 @@ import { useEffect, useRef } from 'react'
22
import { animate, motion, useMotionTemplate, useMotionValue, useTransform } from 'framer-motion'
33
import { ClipboardButton, getTTLInHumanReadableFormat } from '@Common/index'
44
import { ReactComponent as ICChatSupport } from '@IconsV2/ic-chat-circle-dots.svg'
5+
import { getThemeOppositeThemeClass } from '@Shared/Providers/ThemeProvider/utils'
56
import {
67
CONTACT_SUPPORT_LINK,
78
DevtronLicenseCardProps,
89
ENTERPRISE_SUPPORT_LINK,
910
getHandleOpenURL,
1011
LicenseStatus,
12+
useTheme,
1113
} from '@Shared/index'
1214
import { Button, ButtonVariantType } from '../Button'
1315
import { Icon } from '../Icon'
1416
import { getLicenseColorsAccordingToStatus } from './utils'
1517
import './licenseCard.scss'
1618

17-
const DAMPEN_FACTOR = 40
19+
const DAMPEN_FACTOR = 50
1820

1921
export const DevtronLicenseCard = ({
2022
enterpriseName,
@@ -26,6 +28,7 @@ export const DevtronLicenseCard = ({
2628
ttl,
2729
}: DevtronLicenseCardProps) => {
2830
const { bgColor, textColor } = getLicenseColorsAccordingToStatus(licenseStatus)
31+
const { appTheme } = useTheme()
2932
const remainingTime = getTTLInHumanReadableFormat(ttl)
3033
const remainingTimeString = ttl < 0 ? `Expired ${remainingTime} ago` : `${remainingTime} remaining`
3134
const isLicenseValid = licenseStatus !== LicenseStatus.EXPIRED
@@ -76,40 +79,48 @@ export const DevtronLicenseCard = ({
7679

7780
return (
7881
<div className="flexbox-col p-8 br-16" style={{ backgroundColor: bgColor }}>
79-
<motion.div
80-
className="license-card border__secondary-translucent flexbox-col br-12 h-200 bg__tertiary dc__overflow-hidden"
81-
ref={cardRef}
82-
style={{ rotateX, rotateY, backgroundImage: sheenGradient }}
83-
>
84-
<div className="p-20 flexbox-col dc__content-space flex-grow-1">
85-
<div className="flexbox dc__content-space dc__gap-72">
86-
<span className="font-merriweather cn-9 fs-16 fw-7 lh-1-5 dc__ellipsis-right__2nd-line">
87-
{enterpriseName}
88-
</span>
89-
<Icon name="ic-devtron" color="N900" size={24} />
90-
</div>
91-
<div className="flexbox-col dc__gap-4">
92-
<div className="flexbox dc__align-items-center dc__gap-6">
93-
<Icon name="ic-key" color={null} size={16} />
94-
<div className="flex dc__gap-4 cn-7 fs-16 fw-5 lh-1-5 font-ibm-plex-mono">
95-
<span>&bull;&bull;&bull;&bull;</span>
96-
<span>{licenseSuffix || licenseKey?.slice(-8)}</span>
97-
</div>
98-
{licenseKey && <ClipboardButton content={licenseKey} />}
82+
<div style={{ perspective: '1000px' }}>
83+
<motion.div
84+
className={`license-card shadow__overlay border__secondary flexbox-col br-12 h-200 dc__overflow-hidden bg__tertiary ${getThemeOppositeThemeClass(appTheme)}`}
85+
ref={cardRef}
86+
style={{
87+
rotateX,
88+
rotateY,
89+
backgroundImage: sheenGradient,
90+
transformStyle: 'preserve-3d',
91+
transform: 'translateZ(0)',
92+
}}
93+
>
94+
<div className="p-20 flexbox-col dc__content-space flex-grow-1">
95+
<div className="flexbox dc__content-space dc__gap-72">
96+
<span className="font-merriweather cn-9 fs-16 fw-7 lh-1-5 dc__ellipsis-right__2nd-line">
97+
{enterpriseName}
98+
</span>
99+
<Icon name="ic-devtron" color="N900" size={24} />
99100
</div>
100-
<div className="flexbox dc__align-items-center dc__gap-4 flex-wrap">
101-
<span className="font-ibm-plex-mono">{expiryDate}</span>
102-
<span>•</span>
103-
<span style={{ color: textColor }}>{remainingTimeString}</span>
101+
<div className="flexbox-col dc__gap-4">
102+
<div className="flexbox dc__align-items-center dc__gap-6">
103+
<Icon name="ic-key" color={null} size={16} />
104+
<div className="flex dc__gap-4 cn-7 fs-16 fw-5 lh-1-5 cn-9 font-ibm-plex-mono">
105+
<span>&bull;&bull;&bull;&bull;</span>
106+
<span>{licenseSuffix || licenseKey?.slice(-8)}</span>
107+
</div>
108+
{licenseKey && <ClipboardButton content={licenseKey} />}
109+
</div>
110+
<div className="flexbox dc__align-items-center dc__gap-4 flex-wrap">
111+
<span className="font-ibm-plex-mono cn-9">{expiryDate}</span>
112+
<span className="cn-9">·</span>
113+
<span style={{ color: textColor }}>{remainingTimeString}</span>
114+
</div>
104115
</div>
105116
</div>
106-
</div>
107-
{isTrial && (
108-
<span className="trial-license-badge flexbox dc__align-items-center px-20 py-6 cn-9 fs-11 fw-5 lh-1-5">
109-
TRIAL LICENSE
110-
</span>
111-
)}
112-
</motion.div>
117+
{isTrial && (
118+
<span className="trial-license-badge flexbox dc__align-items-center px-20 py-6 cn-9 fs-11 fw-5 lh-1-5">
119+
TRIAL LICENSE
120+
</span>
121+
)}
122+
</motion.div>
123+
</div>
113124
{licenseStatus !== LicenseStatus.ACTIVE && (
114125
<div className="p-16 fs-13 lh-1-5 flexbox-col dc__gap-8">
115126
<div className="flexbox dc__gap-8">

‎src/Shared/Components/DevtronLicenseCard/licenseCard.scss

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,5 @@
11
.license-card {
2-
background: radial-gradient(340.2% 100% at 0% 0%) !important;
3-
box-shadow:
4-
0px 1px 1px 0px rgba(0, 0, 0, 0.04),
5-
0px 2px 6px 0px rgba(0, 0, 0, 0.04),
6-
0px 4px 12px 0px rgba(0, 0, 0, 0.1);
7-
2+
83
.trial-license-badge {
94
background-color: var(--bg-hover);
105
letter-spacing: 0.55px;

‎src/Shared/Components/Header/HeaderWithCreateButton/HeaderWithCreateButon.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -78,8 +78,8 @@ export const HeaderWithCreateButton = ({ headerName }: HeaderWithCreateButtonPro
7878

7979
const renderCreateSelectionModal = () => (
8080
<Modal
81-
rootClassName={`create-modal-wrapper${showingLicenseBar ? '__with-bar' : ''}
82-
${window._env_.FEATURE_PROMO_EMBEDDED_BUTTON_TEXT ? 'create-modal-wrapper--try-devtron' : ''}`}
81+
rootClassName={`create-modal-wrapper ${showingLicenseBar ? 'with-bar' : ''}
82+
${window._env_.FEATURE_PROMO_EMBEDDED_BUTTON_TEXT ? 'create-modal-wrapper--try-devtron' : ''}`}
8383
onClick={handleCreateButton}
8484
>
8585
<div

‎src/Shared/Components/Header/HeaderWithCreateButton/HeaderWithCreateButton.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
overflow: hidden;
2222

2323
// Adding 28px for license bar/ announcement banner
24-
&__with-bar {
24+
&.with-bar {
2525
top: 87px;
2626
}
2727

‎src/Shared/Components/Header/PageHeader.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -275,7 +275,7 @@ const PageHeader = ({
275275
{showTabs && renderHeaderTabs()}
276276
{showHelpCard && (
277277
<HelpNav
278-
className={`help-card__more-option${showingLicenseBar ? '__with-bar' : ''} ${window._env_.K8S_CLIENT ? 'k8s-client-view' : ''}`}
278+
className={`help-card__more-option ${showingLicenseBar ? 'with-bar' : ''} ${window._env_.K8S_CLIENT ? 'k8s-client-view' : ''}`}
279279
setShowHelpCard={setShowHelpCard}
280280
serverInfo={currentServerInfo.serverInfo}
281281
fetchingServerInfo={currentServerInfo.fetchingServerInfo}
@@ -297,7 +297,7 @@ const PageHeader = ({
297297
)}
298298
{showLogOutCard && (
299299
<LogoutCard
300-
className={`logout-card__more-option${showingLicenseBar ? '__with-bar' : ''} mt-8`}
300+
className={`logout-card__more-option ${showingLicenseBar ? 'with-bar' : ''} mt-8`}
301301
userFirstLetter={email}
302302
setShowLogOutCard={setShowLogOutCard}
303303
showLogOutCard={showLogOutCard}

‎src/Shared/Components/Header/pageHeader.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
right: 65px;
2020

2121
/* Adding 28px for license bar/ announcement banner */
22-
&__with-bar {
22+
&.with-bar {
2323
top: 79px;
2424
}
2525
}
@@ -34,7 +34,7 @@
3434
right: 29px;
3535

3636
/* Adding 28px for license bar/ announcement banner */
37-
&__with-bar {
37+
&.with-bar {
3838
top: 79px;
3939
}
40-
}
40+
}

‎src/Shared/Components/LoginBanner/LoginBanner.tsx

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -114,18 +114,25 @@ const LoginBanner = () => {
114114
const { quote, name, designation, iconName } = TESTIMONIAL_CARD_DATA[currentIndex]
115115

116116
return (
117-
<div className="flexbox-col br-12 border__primary dc__position-rel dc__overflow-hidden">
117+
<div className="flexbox-col br-12 border__primary dc__position-rel dc__overflow-hidden bg__primary">
118118
<div className="flexbox-col flex-grow-1 pt-32 pl-32 dc__content-space">
119119
<div className="flex h-36 w-130 dc__fill-available-space dc__zi-2">
120120
<Icon name="ic-devtron-header-logo" color="N900" />
121121
</div>
122122
<AnimatedBackground />
123-
<img className="dc__zi-2" src={LoginBannerImg} alt="login-image" />
123+
<img
124+
className="dc__position-abs dc__top-180"
125+
src={LoginBannerImg}
126+
alt="login-image"
127+
style={{
128+
maxHeight: '90%',
129+
}}
130+
/>
124131
</div>
125-
<div className="p-40 dc__backdrop-filter bg__primary flex dc__gap-12">
132+
<div className="p-40 dc__backdrop-filter bg__primary flex dc__gap-12 dc__zi-2">
126133
<div className="flexbox-col dc__align-items-center h-100 dc__gap-8">
127134
<Icon name="ic-quote" color="N900" />
128-
<div className="border__primary w-1 flex-grow-1" />
135+
<div className="border__primary--left w-1 flex-grow-1" />
129136
</div>
130137
<motion.div
131138
key={currentIndex}
@@ -143,7 +150,7 @@ const LoginBanner = () => {
143150
}}
144151
className="flexbox-col dc__gap-20"
145152
>
146-
<div className="fs-14 fw-4 lh-1-5 cn-9 dc__truncate--clamp-4">{quote}</div>
153+
<div className="fs-14 fw-4 lh-1-5 cn-9 dc__truncate--clamp-4">{quote}&quot;</div>
147154
<div className="flex dc__content-space">
148155
<div>
149156
<div className="fs-13 fw-6 lh-1-5 cn-9">{name}</div>

‎src/Shared/Components/LoginBanner/constants.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export const TESTIMONIAL_CARD_DATA: TestimonialCardConfig[] = [
1414
iconName: 'ic-livspace',
1515
},
1616
{
17-
quote: "Prior to Devtron, managing multiple environments consistently was a challenge. Devtron's built-in features for consistent configurations across environments have been a huge win for us. We're confident that every deployment is identical, which has reduced discrepancies and improved our application’s resiliency. Plus, the rollback functionality has saved us countless hours of downtime. It's a single-click solution that gets us back on track quickly. Devtron has significantly enhanced our CI/CD pipeline, allowing us to achieve our goal of faster, more reliable deployments while reducing operational overhead.",
17+
quote: "Prior to Devtron, managing multiple environments consistently was a challenge. Devtron's built-in features for consistent configurations across environments have been a huge win for us. We're confident that every deployment is identical, which has reduced discrepancies and improved our application’s resiliency.",
1818
designation: 'Engineering Manager at Delhivery',
1919
name: 'Vinay Mishra',
2020
iconName: 'ic-delhivery',
@@ -32,8 +32,8 @@ export const TESTIMONIAL_CARD_DATA: TestimonialCardConfig[] = [
3232
iconName: 'ic-73strings',
3333
},
3434
{
35-
quote: 'Partnering with Devtron has revolutionized the way we deliver solutions to our customers. Their Kubernetes-native platform has empowered us to automate and scale our deployments, reducing time-to-market and significantly boosting DevOps efficiency. The collaboration has not only streamlined our processes but also enhanced our ability to serve customers with agility and precision.',
36-
designation: 'CPT at Apica',
35+
quote: 'Partnering with Devtron has revolutionized the way we deliver solutions to our customers. Their Kubernetes-native platform has empowered us to automate and scale our deployments, reducing time-to-market and significantly boosting DevOps efficiency.',
36+
designation: 'CPTO at Apica',
3737
name: 'Ranjan Parthasarathy',
3838
iconName: 'ic-apica',
3939
},
@@ -44,7 +44,7 @@ export const TESTIMONIAL_CARD_DATA: TestimonialCardConfig[] = [
4444
iconName: 'ic-spinny',
4545
},
4646
{
47-
quote: "Managing our complex Kubernetes environment used to be a major bottleneck. We were juggling 15+ pre-prod environments, and it felt like we needed to double our DevOps team just to keep up. Then we discovered Devtron and it has completely streamlined our SDLC processes! We've been able to efficiently manage all those environments without adding any additional DevOps resources. We've seen a significant reduction in lead time, and our developers are much happier now that they have self-service access and can onboard new applications effortlessly. Devtron has helped us become more agile and efficient, so we can focus on what really matters: delivering value to our users.",
47+
quote: 'Managing our complex Kubernetes environment used to be a major bottleneck. We were juggling 15+ pre-prod environments, and it felt like we needed to double our DevOps team just to keep up. Then we discovered Devtron and it has completely streamlined our SDLC processes!',
4848
designation: 'Director Architect at Tata1MG',
4949
name: 'Pankaj Pandey',
5050
iconName: 'ic-tata1mg',

‎src/Shared/Providers/ThemeProvider/utils.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,11 @@ export const getThemeConfigFromLocalStorage = (): ThemeConfigType => {
7272

7373
export const getComponentSpecificThemeClass = (appTheme: AppThemeType) => `component-specific-theme__${appTheme}`
7474

75+
export const getThemeOppositeThemeClass = (appTheme: AppThemeType) =>
76+
appTheme === AppThemeType.dark
77+
? `component-specific-theme__${AppThemeType.light}`
78+
: `component-specific-theme__${AppThemeType.dark}`
79+
7580
export const getThemePreferenceText = (themePreference: ThemePreferenceType): string => {
7681
switch (themePreference) {
7782
case 'auto':

0 commit comments

Comments
 (0)