chore: css fixes

Author: shivani170

src/Pages/GlobalConfigurations/DeploymentCharts/List/UploadChartModal.tsx

@@ -199,7 +199,7 @@ const UploadChartModal = ({ closeUploadPopup }: UploadChartModalType) => {
                 2. Image descriptor template file - .image_descriptor_template.json.
             </div>
             <div className="cn-7 fw-4 fs-14 cn-7 mb-20">3. Custom chart packaged in the *.tgz format.</div>
-            <div className="sidebar-action-container pr-20">
+            <div className="flexbox-col dc__align-start">
                 <div className="fw-6 fs-13 cn-9 mb-8">
                     📙 Need help?&nbsp;
                     <DocLink

src/components/CIPipelineN/Sidebar.tsx

@@ -403,7 +403,7 @@ export const Sidebar = ({
                     )}
                 </div>
             ) : (
-                <div className="sidebar-action-container pr-20 flexbox-col dc__gap-4">
+                <div className="flexbox-col dc__gap-4">
                     <div className="dc__uppercase fw-6 fs-12 cn-6">Trigger {isJobCard ? 'JOB' : 'BUILD'} PIPELINE</div>
                     <div>
                         <RadioGroup
@@ -448,7 +448,7 @@ export const Sidebar = ({
                 )}
 
             {!isCdPipeline && (
-                <div className="sidebar-action-container pr-20">
+                <div className="sidebar-action-container flexbox-col dc__align-start pr-20">
                     <div className="fw-6 fs-13 cn-9 mb-8">📙 Need help?</div>
                     <DocLink
                         docLinkKey={helpData.docLink}

src/components/app/details/triggerView/TriggerView.tsx

@@ -36,6 +36,7 @@ import {
     getEnvironmentListMinPublic,
     CIPipelineNodeType,
     DocLink,
+    getDocumentationUrl,
 } from '@devtron-labs/devtron-fe-common-lib'
 import ReactGA from 'react-ga4'
 import { withRouter, Route, Switch } from 'react-router-dom'
@@ -1430,11 +1431,9 @@ class TriggerView extends Component<TriggerViewProps, TriggerViewState> {
         return (
             <>
                 {APP_DETAILS.JOB_FULLY_NOT_CONFIGURED.subTitle}&nbsp;
-                <DocLink
-                    text={APP_DETAILS.NEED_HELP}
-                    docLinkKey="APP_CREATE"
-                    dataTestId="learn-more-about-creating-job-link"
-                />
+                <a href={getDocumentationUrl({ docLinkKey: 'APP_CREATE' })} target="_blank noopener noreferrer">
+                    {APP_DETAILS.NEED_HELP}
+                </a>
             </>
         )
     }

src/components/app/list-new/HelmAppList.tsx

@@ -31,6 +31,7 @@ import {
     useStickyEvent,
     getClassNameForStickyHeaderWithShadow,
     DocLink,
+    ComponentSizeType,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { Link } from 'react-router-dom'
 import Tippy from '@tippyjs/react'
@@ -469,10 +470,10 @@ const HelmAppList = ({
                             <span className="mr-8 flex">
                                 <InfoFillPurple className="icon-dim-20" />
                             </span>
-                            <span>
+                            <div className="flexbox">
                                 {SELECT_CLUSTER_FROM_FILTER_NOTE}&nbsp;
-                                <DocLink docLinkKey="HYPERION" dataTestId="learn-more-about-hyperion-link" />
-                            </span>
+                                <DocLink docLinkKey="HYPERION" dataTestId="learn-more-about-hyperion-link" size={ComponentSizeType.xs} />
+                            </div>
                         </div>
                     </div>
                 )}

src/components/charts/SavedValues/SavedValuesList.tsx

@@ -171,7 +171,7 @@ export default function SavedValuesList() {
     const renderSubtitleAndNewButton = (subtitleText: string): JSX.Element => {
         return (
             <>
-                <p className="fs-13 fw-4">
+                <p className="flexbox fs-13 fw-4">
                     {subtitleText}&nbsp;
                     <DocLink docLinkKey="CUSTOM_VALUES" dataTestId="preset-values-learn-more-link" />
                 </p>

src/components/charts/list/DiscoverCharts.tsx

@@ -30,6 +30,7 @@ import {
     Button,
     ComponentSizeType,
     ButtonVariantType,
+    getDocumentationUrl,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { Switch, Route, NavLink, useHistory, useLocation, useRouteMatch, Prompt } from 'react-router-dom'
 import Tippy from '@tippyjs/react'
@@ -751,11 +752,15 @@ const ChartListHeader = ({ charts }) => {
             </h3>
             <p className="mb-0 mt-4 pl-20" data-testid="chart-store-list-subheading">
                 Select chart to deploy. &nbsp;
-                <DocLink
-                    docLinkKey="CHART_LIST"
-                    dataTestId="chart-store-link"
-                    text="Learn more about deploying charts"
-                />
+                  <a
+                        href={getDocumentationUrl({ docLinkKey: 'CHART_GROUP' })}
+                        rel="noreferrer noopener"
+                        target="_blank"
+                        className="dc__link"
+                        data-testid="chart-group-link"
+                    >
+                        Learn more about chart groups
+                    </a>
             </p>
         </div>
     )
@@ -784,11 +789,15 @@ export const EmptyChartGroup = ({
                     {subTitle || 'Use chart groups to preconfigure and deploy frequently used charts together.'}
                 </div>
                 {!removeLearnMore && (
-                    <DocLink
-                        docLinkKey={'CHART_GROUP'}
-                        text="Learn more about chart groups"
-                        dataTestId="chart-group-link"
-                    />
+                    <a
+                        href={getDocumentationUrl({ docLinkKey: 'CHART_GROUP' })}
+                        rel="noreferrer noopener"
+                        target="_blank"
+                        className="dc__link"
+                        data-testid="chart-group-link"
+                    >
+                        Learn more about chart groups
+                    </a>
                 )}
                 {typeof onClickViewChartButton === 'function' ? (
                     <button type="button" onClick={onClickViewChartButton} className="cta ghosted flex mb-24 mt-24">
@@ -844,7 +853,6 @@ export const ChartGroupListMin = ({
                             'Use chart groups to pre-configure and deploy frequently used charts together.'
                         }
                         docLink='CHART_GROUP'
-                        docLinkText="Learn more"
                         dataTestId="chart-store"
                         showInfoIconTippy
                     />

src/components/ciPipeline/Webhook/WebhookDetailsModal.tsx

@@ -478,7 +478,6 @@ export const WebhookDetailsModal = ({ close, isTemplateView }: WebhookDetailType
                     text="How to generate API tokens?"
                     dataTestId="learn-more-about-generating-api-tokens"
                 />
-              
             )
         }
         return !showTokenSection ? (