Merge pull request #616 from devtron-labs/feat/theme-confetti

AbhishekA1509 · web-flow · commit 1e11e537cc20 · 2025-03-10T19:44:24.000+05:30
feat: add confetti in confirmation modal and update page header css
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.8.9",
+    "version": "1.8.9-beta-2",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",
@@ -118,6 +118,7 @@
         "jsonpath-plus": "^10.3.0",
         "marked": "^13.0.3",
         "nanoid": "^3.3.8",
+        "react-canvas-confetti": "^2.0.7",
         "react-codemirror-merge": "4.23.6",
         "react-dates": "^21.8.0",
         "react-diff-viewer-continued": "^3.4.0",
diff --git a/src/Common/TippyCustomized.tsx b/src/Common/TippyCustomized.tsx
@@ -115,7 +115,7 @@ export const TippyCustomized = (props: TippyCustomizedProps) => {
                         {showCloseButton && (
                             <div className="icon-dim-16 ml-auto">
                                 <CloseIcon
-                                    className={`icon-dim-16 cursor ${isWhiteTheme ? 'fcn-9' : 'fcn-0'}`}
+                                    className={`icon-dim-16 cursor ${isWhiteTheme ? 'fcn-9' : 'icon-fill__white'}`}
                                     onClick={closeTippy}
                                 />
                             </div>
diff --git a/src/Shared/Components/Confetti/Confetti.component.tsx b/src/Shared/Components/Confetti/Confetti.component.tsx
@@ -0,0 +1,13 @@
+import { ComponentProps } from 'react'
+import Pride from 'react-canvas-confetti/dist/presets/pride'
+
+const Confetti = () => {
+    const decorateOptions: ComponentProps<typeof Pride>['decorateOptions'] = (options) => ({
+        ...options,
+        colors: ['#a864fd', '#29cdff', '#78ff44', '#ff718d', '#fdff6a'],
+    })
+
+    return <Pride autorun={{ speed: 60, duration: 500 }} decorateOptions={decorateOptions} />
+}
+
+export default Confetti
diff --git a/src/Shared/Components/Confetti/index.ts b/src/Shared/Components/Confetti/index.ts
@@ -0,0 +1 @@
+export { default as Confetti } from './Confetti.component'
diff --git a/src/Shared/Components/ConfirmationModal/ConfirmationModal.tsx b/src/Shared/Components/ConfirmationModal/ConfirmationModal.tsx
@@ -25,6 +25,7 @@ import { Button, ButtonStyleType, ButtonVariantType } from '../Button'
 import { Backdrop } from '../Backdrop'
 import { useConfirmationModalContext } from './ConfirmationModalContext'
 import { CustomInput } from '../CustomInput'
+import { Confetti } from '../Confetti'
 import './confirmationModal.scss'
 
 const ConfirmationModalBody = ({
@@ -38,6 +39,7 @@ const ConfirmationModalBody = ({
     handleClose,
     shouldCloseOnEscape = true,
     isLandscapeView = false,
+    showConfetti = false,
 }: ConfirmationModalBodyProps) => {
     const { registerShortcut, unregisterShortcut } = useRegisterShortcut()
 
@@ -159,6 +161,8 @@ const ConfirmationModalBody = ({
                     )}
                 </div>
             </motion.div>
+
+            {showConfetti && <Confetti />}
         </Backdrop>
     )
 }
diff --git a/src/Shared/Components/ConfirmationModal/types.ts b/src/Shared/Components/ConfirmationModal/types.ts
@@ -99,6 +99,10 @@ export type ConfirmationModalProps<isConfig extends boolean = false> = PropsWith
      * @deprecated Used to extend the width to 500px and remove gap between title and subTitle.
      */
     isLandscapeView?: boolean
+    /**
+     * @default false
+     */
+    showConfetti?: boolean
 }> &
     ButtonConfigAndVariantType<isConfig> &
     (isConfig extends false
diff --git a/src/Shared/Components/Header/PageHeader.tsx b/src/Shared/Components/Header/PageHeader.tsx
@@ -19,7 +19,7 @@ import Tippy from '@tippyjs/react'
 import './pageHeader.css'
 import ReactGA from 'react-ga4'
 import { ReactComponent as ICMediumPaintBucket } from '@IconsV2/ic-medium-paintbucket.svg'
-import { ReactComponent as ICCaretDown } from '@Icons/ic-caret-down.svg'
+import { ReactComponent as ICCaretDownSmall } from '@Icons/ic-caret-down-small.svg'
 import { ReactComponent as Close } from '@Icons/ic-close.svg'
 import { ReactComponent as Question } from '@Icons/ic-help-outline.svg'
 import { getAlphabetIcon, TippyCustomized, TippyTheme } from '../../../Common'
@@ -143,7 +143,7 @@ const PageHeader = ({
                 <span className="fs-13 cn-9" data-testid="go-to-get-started">
                     Help
                 </span>
-                <ICCaretDown
+                <ICCaretDownSmall
                     style={{ ['--rotateBy' as any]: `${180 * Number(showHelpCard)}deg` }}
                     className="scn-7 icon-dim-16 rotate pointer"
                 />
@@ -155,8 +155,8 @@ const PageHeader = ({
                     placement="bottom"
                     visible={showSwitchThemeLocationTippy}
                     Icon={ICMediumPaintBucket}
-                    iconClass="icon-dim-48 dc__no-shrink"
-                    iconSize={48}
+                    iconClass="icon-dim-40 dc__no-shrink"
+                    iconSize={40}
                     additionalContent={renderThemePreferenceLocationTippyContent()}
                     showCloseButton
                     trigger="manual"
@@ -170,8 +170,8 @@ const PageHeader = ({
                         onClick={onClickLogoutButton}
                         className="dc__transparent flex p-4 dc__gap-4 br-18 bg__secondary border__secondary"
                     >
-                        {getAlphabetIcon(email, 'm-0-imp')}
-                        <ICCaretDown
+                        {getAlphabetIcon(email, 'm-0-imp h-24 w-24-imp')}
+                        <ICCaretDownSmall
                             className={`scn-7 icon-dim-16 ${showLogOutCard ? 'dc__flip-180' : ''} dc__transition--transform`}
                         />
                     </button>
diff --git a/src/Shared/Components/LogoutCard.tsx b/src/Shared/Components/LogoutCard.tsx
@@ -29,7 +29,7 @@ interface LogoutCardType {
 }
 
 export const LOGOUT_CARD_BASE_BUTTON_CLASS =
-    'dc__unset-button-styles dc__content-space px-12 py-6 fs-13 fw-4 lh-20 cursor w-100 flex left br-4'
+    'dc__unset-button-styles dc__content-space px-12 py-8 fs-13 fw-4 lh-20 cursor w-100 flex left br-4'
 
 const LogoutCard = ({ className, userFirstLetter, setShowLogOutCard, showLogOutCard }: LogoutCardType) => {
     const history = useHistory()
diff --git a/src/Shared/Components/index.ts b/src/Shared/Components/index.ts
@@ -83,3 +83,4 @@ export * from './CustomInput'
 export * from './InfoBlock'
 export * from './CodeEditorWrapper'
 export * from './SSOProviderIcon'
+export * from './Confetti'
diff --git a/src/Shared/Providers/ThemeProvider/ThemeProvider.tsx b/src/Shared/Providers/ThemeProvider/ThemeProvider.tsx
@@ -31,7 +31,10 @@ export const ThemeProvider = ({ children }: ThemeProviderProps) => {
     const [showSwitchThemeLocationTippy, setShowSwitchThemeLocationTippy] = useState<boolean>(false)
     const [themeConfig, setThemeConfig] = useState<ThemeConfigType>(getThemeConfigFromLocalStorage)
 
-    const handleThemePreferenceChange: ThemeContextType['handleThemePreferenceChange'] = (updatedThemePreference) => {
+    const handleThemePreferenceChange: ThemeContextType['handleThemePreferenceChange'] = (
+        updatedThemePreference,
+        isLocalUpdate = false,
+    ) => {
         const updatedThemeConfig: ThemeConfigType = {
             appTheme:
                 updatedThemePreference === THEME_PREFERENCE_MAP.auto
@@ -40,8 +43,10 @@ export const ThemeProvider = ({ children }: ThemeProviderProps) => {
             themePreference: updatedThemePreference,
         }
         setThemeConfig(updatedThemeConfig)
-        setThemePreferenceInLocalStorage(updatedThemePreference)
-        logThemeToAnalytics(updatedThemeConfig)
+        if (!isLocalUpdate) {
+            setThemePreferenceInLocalStorage(updatedThemePreference)
+            logThemeToAnalytics(updatedThemeConfig)
+        }
     }
 
     const handleColorSchemeChange = () => {
diff --git a/src/Shared/Providers/ThemeProvider/index.ts b/src/Shared/Providers/ThemeProvider/index.ts
@@ -17,3 +17,4 @@
 export * from './ThemeProvider'
 export { AppThemeType } from './types'
 export { getComponentSpecificThemeClass, getThemePreferenceText } from './utils'
+export { THEME_PREFERENCE_STORAGE_KEY } from './constants'
diff --git a/src/Shared/Providers/ThemeProvider/types.ts b/src/Shared/Providers/ThemeProvider/types.ts
@@ -50,7 +50,13 @@ export interface ThemeContextType extends ThemeConfigType {
     handleShowSwitchThemeLocationTippyChange: (isVisible: boolean) => void
     showThemeSwitcherDialog: boolean
     handleThemeSwitcherDialogVisibilityChange: (isVisible: boolean) => void
-    handleThemePreferenceChange: (updatedThemePreference: ThemePreferenceType) => void
+    handleThemePreferenceChange: (
+        updatedThemePreference: ThemePreferenceType,
+        /**
+         * @description If update is local we won't update local storage and analytics
+         * */
+        isLocalUpdate?: boolean,
+    ) => void
 }
 
 export interface ThemeProviderProps {
diff --git a/src/Shared/Providers/ThemeProvider/utils.ts b/src/Shared/Providers/ThemeProvider/utils.ts
@@ -53,11 +53,6 @@ export const getThemeConfigFromLocalStorage = (): ThemeConfigType => {
             themePreference: THEME_PREFERENCE_MAP.auto,
         }
 
-        if (!selectedTheme) {
-            setThemePreferenceInLocalStorage(themeConfig.themePreference)
-            logThemeToAnalytics(themeConfig)
-        }
-
         return themeConfig
     }
 

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+export { default as Confetti } from './Confetti.component'`
Original file line number	Diff line number	Diff line change
`@@ -29,7 +29,7 @@ interface LogoutCardType {`
`29`	`29`	`}`
`30`	`30`
`31`	`31`	`export const LOGOUT_CARD_BASE_BUTTON_CLASS =`
`32`		`- 'dc__unset-button-styles dc__content-space px-12 py-6 fs-13 fw-4 lh-20 cursor w-100 flex left br-4'`
	`32`	`+ 'dc__unset-button-styles dc__content-space px-12 py-8 fs-13 fw-4 lh-20 cursor w-100 flex left br-4'`
`33`	`33`
`34`	`34`	`const LogoutCard = ({ className, userFirstLetter, setShowLogOutCard, showLogOutCard }: LogoutCardType) => {`
`35`	`35`	`const history = useHistory()`