Skip to content

Commit

Permalink
refactor: Fix UI issue
Browse files Browse the repository at this point in the history
  • Loading branch information
@gitstart-sourcegraph
gitstart-sourcegraph committed May 3, 2024
1 parent 713ed62 commit f91210d
Show file tree
Hide file tree
Showing 5 changed files with 54 additions and 34 deletions.
6 changes: 5 additions & 1 deletion src/components/Enterprise/EnterpriseGradeSection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,11 @@ export const EnterpriseGradeSection: FunctionComponent<EnterpriseGradeSectionPro
<Heading size="h2" className="!leading-10 !tracking-[-1px]">
Guardrails to catch licensed code
</Heading>
<p className="mb-0 text-[18px] font-normal leading-[27px] -tracking-[0.25px]">
<p
className={classNames('mb-0 text-[18px] font-normal leading-[27px] -tracking-[0.25px]', {
'!font-sans': parentClassName,
})}
>
Sourcegraph automatically checks AI suggestions against open source code and highlights
matches to mitigate IP risk.
</p>
Expand Down
14 changes: 8 additions & 6 deletions src/components/HubSpotForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -277,13 +277,15 @@ export const HubSpotForm: FunctionComponent<HubSpotFormProps> = ({

const updateFormSubmissionSource = (newSource: string): void => {
const currentQuery = { ...router.query }
if (currentQuery.form_submission_source) {return}
if (currentQuery.form_submission_source) {
return
}

currentQuery.form_submission_source = newSource
// eslint-disable-next-line @typescript-eslint/no-floating-promises
router.replace({
query: currentQuery,
})
currentQuery.form_submission_source = newSource
// eslint-disable-next-line @typescript-eslint/no-floating-promises
router.replace({
query: currentQuery,
})
}

useEffect(() => {
Expand Down
33 changes: 20 additions & 13 deletions src/components/solutions/AutomationSection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,19 +9,26 @@ import { useWindowWidth } from '../../hooks/windowWidth'
interface AutomationSectionProps {
titleTextColor?: string
subTitleTextColor?: string
parentClassName?: string
}

export const AutomationSection: FunctionComponent<AutomationSectionProps> = ({ titleTextColor, subTitleTextColor }) => {
export const AutomationSection: FunctionComponent<AutomationSectionProps> = ({
titleTextColor,
subTitleTextColor,
parentClassName,
}) => {
const windowWidth = useWindowWidth()
const isMobile = windowWidth < breakpoints.md
return (
<ContentSection
parentClassName='md:!pt-3xl md:!px-lg md:!pb-md overflow-hidden !px-sm !py-md'
className='flex flex-col gap-6 xl:px-sm'
parentClassName={classNames(
parentClassName || 'md:!pt-3xl md:!px-lg md:!pb-md overflow-hidden !px-sm !py-md'
)}
className="flex flex-col gap-6 xl:px-sm"
>
<div className='w-full p-sm md:w-[822px]'>
<div className="w-full p-sm md:w-[822px]">
<Heading
size='h2'
size="h2"
className={classNames(
'!pb-4 !font-["Source_Sans_Pro"] !text-[43px] !font-semibold !leading-[43px] !-tracking-[1px] md:pb-0 md:!text-[40px] md:!leading-10',
titleTextColor ?? '!text-gray-700'
Expand All @@ -31,7 +38,7 @@ export const AutomationSection: FunctionComponent<AutomationSectionProps> = ({ t
</Heading>
<p
className={classNames(
'mb-1 text-2xl font-normal leading-[30px] -tracking-[0.25px] md:w-full flex',
'mb-1 flex text-2xl font-normal leading-[30px] -tracking-[0.25px] md:w-full',
subTitleTextColor ?? 'text-gray-500'
)}
>
Expand All @@ -40,17 +47,17 @@ export const AutomationSection: FunctionComponent<AutomationSectionProps> = ({ t
</p>
</div>
{isMobile && (
<div className='-mt-[126px] -mr-[112px]'>
<img className='w-full' src='/solutions/gitlab/tracker-graph.svg' alt='Code tracker graph' />
<div className="-mt-[126px] -mr-[112px]">
<img className="w-full" src="/solutions/gitlab/tracker-graph.svg" alt="Code tracker graph" />
</div>
)}
<div className='-mr-[204px] flex flex-row pt-0 md:mr-0 mdi:pt-5'>
<div className='z-40'>
<img src='/solutions/gitlab/batch-changes.svg' alt='Batch change' />
<div className="-mr-[204px] flex flex-row pt-0 md:mr-0 mdi:pt-5">
<div className="z-40">
<img src="/solutions/gitlab/batch-changes.svg" alt="Batch change" />
</div>
{!isMobile && (
<div className='relative -ml-[112px] -mt-[102px]'>
<img className='h-[426px]' src='/solutions/gitlab/tracker-graph.svg' alt='Code tracker graph' />
<div className="relative -ml-[112px] -mt-[102px]">
<img className="h-[426px]" src="/solutions/gitlab/tracker-graph.svg" alt="Code tracker graph" />
</div>
)}
</div>
Expand Down
25 changes: 14 additions & 11 deletions src/components/solutions/IntroCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,30 +28,33 @@ export const IntroCard: FunctionComponent<IntroCardProps> = ({
alt,
scaleMobileImage = false,
textColor,
buttonHref
buttonHref,
}) => {
const windowWidth = useWindowWidth()
const isMobile = windowWidth < breakpoints.md
return (
<ContentSection
parentClassName='!py-md !px-sm md:!py-3xl md:!px-20 overflow-hidden'
className='flex flex-col justify-between gap-6 md:flex-row xl:px-sm'
parentClassName="!py-md !px-sm md:!py-3xl md:!px-20 overflow-hidden"
className="flex flex-col justify-between gap-6 md:flex-row xl:px-sm"
>
<div className='flex flex-col gap-0 overflow-visible md:flex-row md:gap-2xl'>
<div className="flex flex-col gap-0 overflow-visible md:flex-row md:gap-2xl">
<div className={classNames('relative w-full md:w-[51%]', textColor ?? '!text-gray-700')}>
<Heading
size='h1'
className='max-w-[404px] !font-["Source_Sans_Pro"] !text-5xl !font-semibold !leading-[58px] !-tracking-[1px] md:max-w-full md:w-full md:!text-[52px] md:!leading-[62px] md:-tracking-[0.06rem]'
size="h1"
className='max-w-[404px] !font-["Source_Sans_Pro"] !text-5xl !font-semibold !leading-[58px] !-tracking-[1px] md:w-full md:max-w-full md:!text-[52px] md:!leading-[62px] md:-tracking-[0.06rem]'
>
{title}
</Heading>
<p className='text-wrap !mb-0 pb-md text-2xl font-normal !leading-[30px] -tracking-[0.25px] md:mt-2.5'>
<p className="text-wrap !mb-0 pb-md text-2xl font-normal !leading-[30px] -tracking-[0.25px] md:mt-2.5">
{description}
</p>
<Link
className='absolute z-10 -bottom-[32px] md:relative btn btn-primary flex w-3/4 justify-center bg-violet-500 xs:w-1/2 mdi:w-fit'
className={classNames(
'btn btn-primary absolute z-10 flex w-3/4 justify-center bg-violet-500 md:relative xs:w-1/2 mdi:w-fit',
{ '-bottom-[32px]': !buttonHref }
)}
href={buttonHref ?? '/contact/request-info-gitlab?form_submission_source=solutions-gitlab'}
title='Contact us'
title="Contact us"
>
{contactButtonLabel}
</Link>
Expand All @@ -65,8 +68,8 @@ export const IntroCard: FunctionComponent<IntroCardProps> = ({
/>
</div>
) : (
<div className='mb-0 w-full md:-mb-[42px] md:w-1/2'>
<img className='w-full md:w-[664px]' src={mainImageUrl} alt={alt} />
<div className="mb-0 w-full md:-mb-[42px] md:w-1/2">
<img className="w-full md:w-[664px]" src={mainImageUrl} alt={alt} />
</div>
)}
</div>
Expand Down
10 changes: 7 additions & 3 deletions src/pages/solutions/bitbucket.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,8 +58,8 @@ const Bitbucket: FunctionComponent = () => (
subTitleTextColor="!text-[#343A4D]"
explanationCardData={explanationCardData}
/>
<div className="mb-[64px]">
<EnterpriseGradeSection parentClassName="!py-0 !px-sm mdi:!py-0 mdi:!px-lg" />
<div className="relative -mt-[64px]">
<EnterpriseGradeSection parentClassName="!py-0 !px-sm mdi:!py-0 mdi:!px-lg !my-0 md:!py-0" />
</div>
<SearchDescriptionSection
title="The best code search tool for code hosted on Bitbucket"
Expand All @@ -71,7 +71,11 @@ const Bitbucket: FunctionComponent = () => (
<div className="!py-md md:!py-5xl">
<NineCaseStudySection />
</div>
<AutomationSection titleTextColor="!text-[#0F111A]" subTitleTextColor="!text-[#343A4D]" />
<AutomationSection
parentClassName="md:!px-lg md:!pb-0 overflow-hidden !px-sm !py-0"
titleTextColor="!text-[#0F111A]"
subTitleTextColor="!text-[#343A4D]"
/>
<ContactUsCta
buttonClassNames="!max-w-full"
parentClassNames="mdi:!py-5xl mdi:!px-0 !px-sm !py-md"
Expand Down

0 comments on commit f91210d

Please sign in to comment.