fix: css modification around icon

Author: shivani170

src/Pages/App/CreateAppModal/AppClone/AppCloneList.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react'
 
 import {
+    Button,
     ComponentSizeType,
     DetectBottom,
     GenericInfoCardBorderVariant,
@@ -36,6 +37,18 @@ export const AppCloneList = ({ handleCloneAppClick, isJobView }: AppCloneListPro
         }
     }
 
+    const handleCreateFromScratch = () => {
+        // TODO: Implement create from scratch functionality
+    }
+
+    const renderCreateFromScratchButton = () => (
+        <Button
+            dataTestId="create-app-modal-create-from-scratch-btn"
+            text="Create from scratch"
+            onClick={handleCreateFromScratch}
+        />
+    )
+
     return (
         <div className="flex-grow-1 flexbox-col dc__overflow-auto">
             <div className="flexbox-col dc__gap-12 pt-20 px-20">
@@ -46,6 +59,9 @@ export const AppCloneList = ({ handleCloneAppClick, isJobView }: AppCloneListPro
                     initialSearchText={searchKey}
                     size={ComponentSizeType.medium}
                     handleEnter={handleSearch}
+                    inputProps={{
+                        placeholder: `Search ${isJobView ? 'job' : 'application'}`,
+                    }}
                 />
             </div>
             <div className="flex-grow-1 flexbox-col dc__gap-12 p-20 dc__overflow-auto">
@@ -59,7 +75,8 @@ export const AppCloneList = ({ handleCloneAppClick, isJobView }: AppCloneListPro
                     handleClearFilters={clearFilters}
                     emptyStateConfig={{
                         title: 'Nothing to Clone… Yet!',
-                        subTitle: `Looks like you haven’t created any ${isJobView ? 'job' : 'application'} to clone. Go ahead and start fresh — your first app awaits!`,
+                        subTitle: `You haven’t created any ${isJobView ? 'job' : 'application'} to clone. Kick things off by crafting one from scratch—it’s quick and easy!`,
+                        renderButton: renderCreateFromScratchButton,
                     }}
                 />
                 {hasMoreData && isLoadingMoreJobList && <GenericInfoListSkeleton />}

src/Pages/App/CreateAppModal/AppClone/useDevtronCloneList.tsx

@@ -117,7 +117,7 @@ export const useDevtronCloneList = ({ handleCloneAppClick, isJobView }: AppClone
                     title: jobName,
                     description: description.description,
                     author: description.createdBy,
-                    Icon: getAppIconWithBackground(APP_TYPE.JOB, 20),
+                    Icon: getAppIconWithBackground(APP_TYPE.JOB, 40),
                     onClick: () => handleCloneAppClick({ appId: jobId, appName: jobName }),
                 }
             })
@@ -130,7 +130,7 @@ export const useDevtronCloneList = ({ handleCloneAppClick, isJobView }: AppClone
             return {
                 id: String(id),
                 title: name,
-                Icon: getAppIconWithBackground(APP_TYPE.DEVTRON_APPS, 20),
+                Icon: getAppIconWithBackground(APP_TYPE.DEVTRON_APPS, 40),
                 onClick: () => handleCloneAppClick({ appId: id, appName: name }),
                 author: createdBy,
                 description,

src/Pages/App/CreateAppModal/ApplicationInfoForm.tsx

@@ -69,6 +69,8 @@ const ApplicationInfoForm = ({
         })
     }
 
+    const isMandatoryTag = formState.tags.some((tag) => tag.data.tagKey.required)
+
     return (
         // key is required for ensuring autoFocus on name on creation method change
         <div className="flexbox-col dc__gap-16 p-20 br-8 border__secondary bg__primary" key={selectedCreationMethod}>
@@ -113,7 +115,9 @@ const ApplicationInfoForm = ({
                     <ICCaretLeftSmall
                         className={`scn-7 dc__no-shrink dc__transition--transform ${isTagsAccordionExpanded ? 'dc__flip-270' : 'dc__flip-180'}`}
                     />
-                    <span className="fs-13 fw-6 lh-20 cn-9">Add tags to {isJobView ? 'job' : 'application'}</span>
+                    <span className={`fs-13 fw-6 lh-20 cn-9 ${isMandatoryTag ? 'dc__required-field' : ''}`}>
+                        Add tags to {isJobView ? 'job' : 'application'}
+                    </span>
                 </button>
                 <div className={!isTagsAccordionExpanded ? 'dc__hide-section' : ''}>
                     {MandatoryTagsContainer ? (

src/Pages/App/CreateAppModal/ApplicationSelectionList.tsx

@@ -21,7 +21,6 @@ import {
     CreationMethodType,
 } from './types'
 import UpdateTemplateConfig from './UpdateTemplateConfig'
-import { getBreadcrumbText } from './utils'
 
 const TemplateList = importComponentFromFELibrary('TemplateList', null, 'function')
 
@@ -80,9 +79,21 @@ export const ApplicationSelectionList = ({
         }
     }
 
+    const getBreadcrumbText = () => {
+        if (isCreationMethodTemplate) {
+            return 'Templates'
+        }
+
+        if (isJobView) {
+            return 'Clone Job'
+        }
+
+        return 'Clone Application'
+    }
+
     const renderAppInfoForm = () => {
         const goBack = isCreationMethodTemplate ? goBackToTemplatesList : goBackToAppCloneList
-        const breadcrumbText = getBreadcrumbText(selectedCreationMethod)
+        const breadcrumbText = getBreadcrumbText()
         const breadcrumbDataTestId = isCreationMethodTemplate ? 'template-list-breadcrumb' : 'clone-list-breadcrumb'
         const icon = isCreationMethodTemplate ? (
             <Icon name="ic-app-template" color={null} />
@@ -108,14 +119,14 @@ export const ApplicationSelectionList = ({
                         showAriaLabelInTippy={false}
                         onClick={goBack}
                     />
-                    <div className="flex left dc__gap-4">
+                    <div className="flex left dc__gap-6">
                         <Button
                             dataTestId={breadcrumbDataTestId}
                             variant={ButtonVariantType.text}
                             text={breadcrumbText}
                             onClick={goBack}
                         />
-                        <span>/</span>
+                        <span className="fs-13">/</span>
                         <p className="m-0 flex left dc__gap-6">
                             {icon}
                             <span className="fs-13 lh-20 fw-6 cn-9 dc__truncate">{name}</span>

src/Pages/App/CreateAppModal/HeaderSection.tsx

@@ -22,7 +22,7 @@ import { HeaderSectionProps } from './types'
 
 const HeaderSection = ({ isJobView, handleClose, isCloseDisabled }: HeaderSectionProps) => (
     <div className="flex flex-align-center flex-justify border__primary--bottom py-12 px-20">
-        <h2 className="fs-16 fw-6 lh-1-43 m-0">Create {isJobView ? 'Job' : 'Devtron Application'}</h2>
+        <h2 className="fs-16 fw-6 lh-1-43 m-0 cn-9">Create {isJobView ? 'Job' : 'Devtron Application'}</h2>
         <Button
             onClick={handleClose}
             dataTestId={`close-create-custom${isJobView ? 'job' : 'app'}-wing`}

src/Pages/App/CreateAppModal/Sidebar.tsx

@@ -32,7 +32,7 @@ const Sidebar = ({
 
     const renderAppContent = () => (
         <div className="flexbox-col dc__gap-24">
-            <p className="m-0" />
+            <p className="m-0">In Devtron, an &quot;Application&quot; represents your software project or service.</p>
             <p className="m-0">
                 It serves as a container for your deployment configurations, environments, and other settings. Define
                 your application to start managing and monitoring its deployment efficiently.
@@ -80,7 +80,7 @@ const Sidebar = ({
             <div className="divider__secondary--horizontal" />
             <ModalSidebarPanel
                 heading={null}
-                documentationLink={isJobView ? DOCUMENTATION.JOB_CRONJOB : DOCUMENTATION.APP_CREATE}
+                documentationLink={isJobView ? DOCUMENTATION.JOBS : DOCUMENTATION.APP_CREATE}
                 rootClassName="w-100 dc__no-background-imp"
             >
                 {isJobView ? renderJobContent() : renderAppContent()}

src/Pages/App/CreateAppModal/utils.tsx

@@ -76,7 +76,7 @@ export const getCreateMethodConfig = (
 
     return [
         {
-            label: `Blank ${labelSuffix}`,
+            label: 'Create from Scratch',
             value: CreationMethodType.blank,
             startIcon: (
                 <Icon
@@ -116,17 +116,6 @@ export const getCreateMethodConfig = (
     ]
 }
 
-export const getBreadcrumbText = (selectedCreationMethod: CreationMethodType) => {
-    switch (selectedCreationMethod) {
-        case CreationMethodType.template:
-            return 'Templates'
-        case CreationMethodType.clone:
-            return 'Clone Application'
-        default:
-            return 'Clone Job'
-    }
-}
-
 export const getNoItemSelectToastText = (selectedCreationMethod: CreationMethodType) => {
     if (selectedCreationMethod === CreationMethodType.template) {
         return 'Please select a template to create app'

src/config/constants.ts

@@ -380,6 +380,7 @@ export const DOCUMENTATION = {
     GLOBAL_CONFIG_USER: `${DOCUMENTATION_HOME_PAGE}${DOCUMENTATION_VERSION}/getting-started/global-configurations/authorization/user-access`,
     HOME_PAGE: DOCUMENTATION_HOME_PAGE,
     HYPERION: `${DOCUMENTATION_HOME_PAGE}/#hyperion`,
+    JOBS: `${DOCUMENTATION_HOME_PAGE}${DOCUMENTATION_VERSION}/usage/jobs`,
     JOB_CRONJOB: `${DOCUMENTATION_HOME_PAGE}${DOCUMENTATION_VERSION}/usage/applications/creating-application/deployment-template/job-and-cronjob`,
     JOB_SOURCE_CODE: `${DOCUMENTATION_HOME_PAGE}${DOCUMENTATION_VERSION}/usage/jobs/configuration-job`,
     JOB_WORKFLOW_EDITOR: `${DOCUMENTATION_HOME_PAGE}${DOCUMENTATION_VERSION}/usage/jobs/workflow-editor-job`,