SGM-6995 - Adjust colors and button styles (#7045)

* refactor: Update colors and button styles Co-authored-by: gitstart-sourcegraph <gitstart-sourcegraph@users.noreply.github.com>
sourcegraph · Jul 2, 2024 · 4886489 · 4886489
1 parent 28442fa
commit 4886489
Show file tree

Hide file tree

Showing 65 changed files with 645 additions and 523 deletions.
diff --git a/src/components/Banner.tsx b/src/components/Banner.tsx
@@ -11,14 +11,14 @@ import Link from 'next/link'
  */
 export const Banner: FunctionComponent<{}> = () => (
     <div className="sg-border-gradient-banner z-[1000] border-b-1 bg-black py-[13px]">
-        <div className="mx-auto flex max-w-screen-xl flex-col items-center justify-center gap-y-[9px] gap-x-12 px-2 md:flex-row">
+        <div className="mx-auto flex max-w-screen-xl flex-col items-center justify-center gap-12 gap-y-[9px] px-2 md:flex-row">
             <p className="mb-0 text-center font-semibold leading-[22px] text-white">
                 Claude 3.5 Sonnet is now available for Cody
             </p>
             <Link
                 href="https://sourcegraph.com/blog/claude-3.5-sonnet-now-available-in-cody"
                 title="Claude 3.5 Sonnet is now available for Cody"
-                className="btn bg-transparent !px-0 !py-0 leading-[22px] text-violet-300"
+                className="btn btn-link-dark btn-link-icon bg-transparent !px-0 !py-0 leading-[22px] text-violet-300"
                 target="_blank"
             >
                 Learn more

diff --git a/src/components/Blockquote.tsx b/src/components/Blockquote.tsx
@@ -106,7 +106,10 @@ export const Blockquote: FunctionComponent<{
             {link?.href &&
                 (link?.href.includes('http') ? (
                     <a
-                        className={classNames('mt-8 flex', !border && center && 'justify-center')}
+                        className={classNames(
+                            'btn-link btn-link-icon mt-md flex',
+                            !border && center && 'justify-center'
+                        )}
                         href={link.href}
                         target="_blank"
                         rel="nofollow noreferrer"
@@ -116,19 +119,22 @@ export const Blockquote: FunctionComponent<{
                         data-button-type="cta"
                     >
                         {link.text}
-                        <ArrowRightIcon className="ml-3 inline" />
+                        <ArrowRightIcon className="link-icon" />
                     </a>
                 ) : (
                     <Link
                         href={link.href}
-                        className={classNames('mt-8 flex', !border && center && 'justify-center')}
+                        className={classNames(
+                            'btn-link btn-link-icon mt-md flex',
+                            !border && center && 'justify-center'
+                        )}
                         title={link.text}
                         data-button-style={buttonStyle.textWithArrow}
                         data-button-location={buttonLocation.body}
                         data-button-type="cta"
                     >
                         {link.text}
-                        <ArrowRightIcon className="ml-3 inline" />
+                        <ArrowRightIcon className="link-icon" />
                     </Link>
                 ))}
         </blockquote>

diff --git a/src/components/Blog/postTypes.tsx b/src/components/Blog/postTypes.tsx
@@ -17,7 +17,7 @@ export const BLOG_TYPE_TO_INFO: Record<BlogType, BlogTypeInfo> = {
         belowTitle: (
             <>
                 <p className="my-2 text-xl">Conversations, stories, and insights from dev tool creators</p>
-                <PodcastSubscribeLinks linkClassName="mx-1" />
+                <PodcastSubscribeLinks linkClassName="mx-1 btn-link" />
             </>
         ),
         baseUrl: '/podcast',

diff --git a/src/components/CaseStudies/CaseStudyCard.tsx b/src/components/CaseStudies/CaseStudyCard.tsx
@@ -1,7 +1,7 @@
 import { FunctionComponent } from 'react'
 
 import classNames from 'classnames'
-import ArrowRightIcon from 'mdi-react/ArrowRightIcon'
+import ChevronRightIcon from 'mdi-react/ChevronRightIcon'
 import Link from 'next/link'
 
 import { buttonStyle, buttonLocation } from '../../data/tracking'
@@ -122,7 +122,7 @@ export const CaseStudyCard: FunctionComponent<{
     logoClassName,
     titleClassName,
     linkClassName,
-    icon = <ArrowRightIcon size={20} className="ml-1 inline" />,
+    icon = <ChevronRightIcon className="link-icon" />,
 }) => (
     <div className="grow">
         <div className="md:pr-12">
@@ -167,7 +167,7 @@ export const CaseStudyCard: FunctionComponent<{
                     data-button-style={buttonStyle.text}
                     data-button-location={buttonLocation.body}
                     data-button-type="cta"
-                    className={classNames('font-bold no-underline hover:text-violet-300', linkClassName)}
+                    className={classNames('btn-link btn-link-icon', linkClassName)}
                 >
                     {linkText}
                     {icon}
@@ -179,7 +179,7 @@ export const CaseStudyCard: FunctionComponent<{
                     data-button-style={buttonStyle.text}
                     data-button-location={buttonLocation.body}
                     data-button-type="cta"
-                    className={classNames('font-bold no-underline hover:text-violet-300', linkClassName)}
+                    className={classNames('btn-link btn-link-icon', linkClassName)}
                 >
                     {linkText}
                     {icon}

diff --git a/src/components/CaseStudies/MoreCaseStudies.tsx b/src/components/CaseStudies/MoreCaseStudies.tsx
@@ -50,8 +50,7 @@ const MoreCaseStudies: FunctionComponent = () => (
                                 titleClassName="text-lg w-[298px]"
                                 logoClassName={std.logoSize}
                                 study={std}
-                                linkClassName="text-violet-500 hover:text-violet-400"
-                                icon={<ChevronRightIcon size={20} className="ml-1 inline" />}
+                                icon={<ChevronRightIcon size={20} className="link-icon" />}
                                 key={std.name}
                             />
                         </div>

diff --git a/src/components/CaseStudies/SidebarCta.tsx b/src/components/CaseStudies/SidebarCta.tsx
@@ -8,7 +8,7 @@ const SidebarCta: React.FC = () => (
             repositories.
         </p>
         <Link
-            className="btn btn-inverted-primary flex min-w-fit self-center rounded-md bg-white py-3 px-5 text-center text-base text-violet-500 hover:!bg-violet-400 md:self-start md:py-2 md:px-6"
+            className="btn btn-primary-dark flex min-w-fit self-center py-3 px-5 text-center text-base md:self-start md:py-2 md:px-6"
             href="/demo"
         >
             Meet with a product expert

diff --git a/src/components/Code-search/CodeSearchCard.tsx b/src/components/Code-search/CodeSearchCard.tsx
@@ -19,14 +19,14 @@ export const CodeSearchCard: FunctionComponent = () => (
                 free trial.
             </h3>
             <div className="flex max-w-[390px] flex-col flex-wrap gap-4 pt-4 sm:flex-row">
-                <Link href="/demo" className="btn btn-primary max-w-[220px]">
+                <Link href="/demo" className="btn btn-primary-dark max-w-[220px]">
                     Contact us for a demo
                 </Link>
                 <Link
                     href="/pricing?product=codeSearch"
-                    className="flex items-center justify-start gap-[10px] whitespace-nowrap font-semibold text-white hover:text-violet-300 hover:underline"
+                    className="btn-link-dark btn-link-icon flex items-center justify-start whitespace-nowrap font-semibold"
                 >
-                    See pricing <ChevronRightIcon />
+                    See pricing <ChevronRightIcon className="link-icon" />
                 </Link>
             </div>
         </div>

diff --git a/src/components/Compare/DemoComparisons.tsx b/src/components/Compare/DemoComparisons.tsx
@@ -51,11 +51,11 @@ export const DemoComparisons: FunctionComponent = () => (
                     <h3 className="mb-6 text-black">{assistant.name}</h3>
                     <Link
                         href={assistant.url}
-                        className="btn-link flex font-semibold tracking-[-0.25px]"
+                        className="btn-link btn-link-icon font-semibold tracking-[-0.25px]"
                         title="Learn more"
                     >
                         Learn more
-                        <KeyboardArrowRightIcon className="ml-3 inline" />
+                        <KeyboardArrowRightIcon className="link-icon" />
                     </Link>
                 </div>
             ))}

diff --git a/src/components/CoreFeatures.tsx b/src/components/CoreFeatures.tsx
@@ -162,7 +162,7 @@ export const CoreFeatures: FunctionComponent<TelemetryProps> = ({ telemetryRecor
                                 href={feature.ctaLink}
                                 target="_blank"
                                 rel="noreferrer"
-                                className="btn btn-outline-primary mt-2"
+                                className="btn btn-secondary mt-2"
                                 title={`Learn more about ${startCase(feature.productFeature)}`}
                                 data-button-style={buttonStyle.outline}
                                 data-button-location={buttonLocation.body}
@@ -173,7 +173,7 @@ export const CoreFeatures: FunctionComponent<TelemetryProps> = ({ telemetryRecor
                         ) : (
                             <Link
                                 href={feature.ctaLink}
-                                className="btn btn-outline-primary mt-2"
+                                className="btn btn-secondary mt-2"
                                 title={`Learn more about ${startCase(feature.productFeature)}`}
                                 data-button-style={buttonStyle.outline}
                                 data-button-location={buttonLocation.body}

diff --git a/src/components/Enterprise/CompanyUsingCodySection.tsx b/src/components/Enterprise/CompanyUsingCodySection.tsx
@@ -15,10 +15,10 @@ export const CompanyUsingCodySection: FunctionComponent = () => (
             <Link
                 href="https://sourcegraph.com/case-studies"
                 title="Cody"
-                className="btn p-0 text-center font-semibold !-tracking-[0.25px]  text-violet-500  hover:underline md:text-violet-500"
+                className="btn btn-link btn-link-icon p-0 text-center font-semibold !-tracking-[0.25px]"
             >
                 Read customer stories
-                <ChevronRightIcon className="!mb-0 ml-[10px] inline" />
+                <ChevronRightIcon className="link-icon" />
             </Link>
         </div>
         <div className="flex flex-wrap items-center justify-center gap-[42px] ">

diff --git a/src/components/Enterprise/EnterpriseGradeSection.tsx b/src/components/Enterprise/EnterpriseGradeSection.tsx
@@ -77,7 +77,7 @@ export const EnterpriseGradeSection: FunctionComponent<EnterpriseGradeSectionPro
                         <Link
                             href="/whitepapers/cody-security-and-legal"
                             title="Cody security & legal whitepaper"
-                            className="mx-[3px] text-black underline underline-offset-[4.3px] "
+                            className="btn-link mx-[3px]"
                         >
                             Cody security & legal whitepaper
                         </Link>

diff --git a/src/components/Enterprise/NineCaseStudySection.tsx b/src/components/Enterprise/NineCaseStudySection.tsx
@@ -30,10 +30,10 @@ export const NineCaseStudySection: FunctionComponent = () => (
                 <Link
                     href="https://sourcegraph.com/case-studies/how-sourcegraph-transformed-nine-development-workflow"
                     title="Case study"
-                    className="btn p-0 text-left  font-semibold !-tracking-[0.25px] text-white hover:underline  md:border-none  md:text-center "
+                    className="btn btn-link-dark btn-link-icon p-0 text-left  font-semibold !-tracking-[0.25px] md:text-center "
                 >
                     Read the case study
-                    <ChevronRightIcon className="!mb-0 ml-[10px] inline" />
+                    <ChevronRightIcon className="link-icon" />
                 </Link>
             </div>
         </div>

diff --git a/src/components/Enterprise/NutanixCaseStudySection.tsx b/src/components/Enterprise/NutanixCaseStudySection.tsx
@@ -37,10 +37,10 @@ export const NutanixCaseStudySection: FunctionComponent = () => (
                     <Link
                         href="https://sourcegraph.com/case-studies/nutanix-fixed-log4j-with-sourcegraph"
                         title="Case study"
-                        className="btn flex-end p-0 text-right font-semibold !-tracking-[0.25px] text-violet-500 hover:underline  md:mx-0 md:border-none  md:text-left "
+                        className="btn btn-link btn-link-icon p-0 text-right font-semibold !-tracking-[0.25px] md:mx-0 md:text-left"
                     >
                         Read the case study
-                        <ChevronRightIcon className="!mb-0 ml-[10px] inline" />
+                        <ChevronRightIcon className="link-icon" />
                     </Link>
                 </div>
             </div>

diff --git a/src/components/GetStartedButton.tsx b/src/components/GetStartedButton.tsx
@@ -19,7 +19,7 @@ export const GetStartedLinkButton: React.FunctionComponent<{
     <Link
         className={classNames(
             'btn whitespace-nowrap',
-            dark ? 'btn-inverted-primary' : 'btn-primary',
+            dark ? 'btn-primary-dark' : 'btn-primary',
             size === 'lg' && 'py-4',
             className
         )}

diff --git a/src/components/IdeModalContent.tsx b/src/components/IdeModalContent.tsx
@@ -47,7 +47,7 @@ export const IdeModalContent: FunctionComponent<Props> = ({
                 className="text-violet-500 underline underline-offset-[3.5px]"
             >
                 {' '}
-                Sign in.{' '}
+                Sign in.
             </Link>
         </p>
     </div>

diff --git a/src/components/Install/index.tsx b/src/components/Install/index.tsx
@@ -78,7 +78,7 @@ export const Install: FunctionComponent = () => {
                 </code>
 
                 <a
-                    className="inline-block text-lg"
+                    className="btn-link inline-block text-lg"
                     href="https://sourcegraph.com/docs"
                     title="Deploy to a server or cluster"
                     data-button-style={buttonStyle.text}

diff --git a/src/components/Layout/Header/Header.tsx b/src/components/Layout/Header/Header.tsx
@@ -93,10 +93,10 @@ const HEADER_CONTENT_THEME_CLASS: Record<
     },
     dark: {
         container: 'bg-black',
-        item: 'text-white hover:bg-white/25 focus:ring-white',
+        item: 'text-white hover:bg-violet-600 focus:ring-white',
         menu: 'bg-gray-700 ring-white',
         menuItem: 'text-white',
-        menuItemActive: 'bg-gray-600',
+        menuItemActive: 'bg-violet-600',
         divider: 'border-white/25',
         button: 'text-gray-300 hover:bg-gray-700 hover:text-white focus:ring-white',
         panel: 'border-white/25',
@@ -138,35 +138,23 @@ const HeaderContent: FunctionComponent<
                 handleEventSubmission={handleOpenModal}
                 id="topnav"
                 buttonLocation={buttonLocation.nav}
-                buttonClassName={classNames(
-                    '!font-semibold',
-                    dark ? 'btn-outline-white text-white hover:text-violet-300' : 'btn-link',
-                    'border-0'
-                )}
+                buttonClassName={classNames('!font-semibold', dark ? 'btn-link-dark' : 'btn-link', 'border-0')}
                 requestInfo={true}
             />
             <Link
                 onClick={() => handleOpenModal('login_click', false)}
                 id="topnav"
                 href="https://sourcegraph.com/sign-in?returnTo=/cody/manage"
                 title="Get started with Cody"
-                className={classNames(
-                    'btn text-center',
-                    dark
-                        ? 'btn-outline-white'
-                        : 'text-violet-500 outline outline-1 outline-violet-500 hover:text-violet-400 hover:outline-violet-400'
-                )}
+                className={classNames('btn', dark ? 'btn-secondary-dark' : 'btn-secondary')}
                 type="button"
             >
                 Login
             </Link>
             <button
                 id="topnav"
                 type="button"
-                className={classNames(
-                    'btn min-w-fit px-6 lg:px-4',
-                    dark ? 'btn-inverted-primary text-violet-500' : 'btn-primary'
-                )}
+                className={classNames('btn min-w-fit px-6 lg:px-4', dark ? 'btn-primary-dark' : 'btn-primary')}
                 title="Download Sourcegraph"
                 onClick={() => handleOpenModal('get_cody_nav_click', true)}
             >

diff --git a/src/components/Resources/ResourceCard.tsx b/src/components/Resources/ResourceCard.tsx
@@ -46,9 +46,9 @@ export const ResourceCard = forwardRef<HTMLAnchorElement, Card>(({ resource, cla
                 <div className="flex flex-grow flex-col px-4 py-6">
                     <h4 className="mb-6">{truncate(title, 97)}</h4>
                     <div className="mb-auto text-base">{truncate(description, 170)}</div>
-                    <div className="mt-2 font-semibold lowercase text-violet-500 first-letter:capitalize hover:text-violet-400">
+                    <div className="btn-link btn-link-icon mt-2 font-semibold">
                         {ctaText}
-                        <ChevronRightIcon className="ml-1 inline" />
+                        <ChevronRightIcon className="link-icon" />
                     </div>
                 </div>
             </div>

diff --git a/src/components/Resources/SidebarCta.tsx b/src/components/Resources/SidebarCta.tsx
@@ -8,7 +8,7 @@ const SidebarCta: React.FC = () => (
             repositories.
         </p>
         <Link
-            className="btn btn-inverted-primary flex min-w-fit self-center rounded-md bg-white py-3 px-5 text-center text-base text-violet-500 hover:!bg-violet-400 md:self-start md:py-2 md:px-6"
+            className="btn btn-primary-dark flex min-w-fit self-center py-3 px-5 text-center text-base md:self-start md:py-2 md:px-6"
             href="/demo"
         >
             Meet with a product expert

diff --git a/src/components/Solutions/QualtricsCard.tsx b/src/components/Solutions/QualtricsCard.tsx
@@ -44,10 +44,10 @@ export const QualtricsCard = (): JSX.Element => (
             <Link
                 href="https://sourcegraph.com/case-studies/qualtrics-speeds-up-unit-tests-and-code-understanding-with-cody"
                 title="Case study"
-                className="btn p-0 text-violet-500 hover:underline"
+                className="btn btn-link btn-link-icon p-0"
             >
                 Read the case study
-                <ChevronRightIcon className="!mb-0.5 ml-[10px] inline text-violet-500" />
+                <ChevronRightIcon className="link-icon" />
             </Link>
         </div>
     </ContentSection>

diff --git a/src/components/Video.tsx b/src/components/Video.tsx
@@ -55,7 +55,7 @@ export const Video: FunctionComponent<Video & TelemetryProps> = ({
             title={title}
             // GCS does not set cookies, so we don't want Cookiebot to block this video based on consent
             data-cookieconsent="ignore"
-            onPlay={() => telemetryRecorder.recordEvent('video', 'play', { privateMetadata: { title } })}
+            onPlay={() => telemetryRecorder?.recordEvent('video', 'play', { privateMetadata: { title } })}
         >
             <source type="video/webm" src={`${hosts[host]}${source.webm}.webm`} data-cookieconsent="ignore" />
             <source type="video/mp4" src={`${hosts[host]}${source.mp4}.mp4`} data-cookieconsent="ignore" />

diff --git a/src/components/cody/dual-theme/CodyIntroDualTheme.tsx b/src/components/cody/dual-theme/CodyIntroDualTheme.tsx
@@ -45,10 +45,7 @@ export const CodyIntroDualTheme: FunctionComponent<CodyIntroDualThemeProps> = ({
             </h3>
             <button
                 type="button"
-                className={classNames('btn btn-inverted-primary px-5 py-3', {
-                    'bg-violet-700 text-[#FFF]': isLight,
-                    'text-violet-500': !isLight,
-                })}
+                className={classNames('btn px-5 py-3', isLight ? 'btn-primary' : 'btn-primary-dark')}
                 title="Get Cody for free"
                 onClick={() => handleOpenModal('top')}
             >

diff --git a/src/components/cta/CallToActionContentSection.tsx b/src/components/cta/CallToActionContentSection.tsx
@@ -38,11 +38,9 @@ const Cta: FunctionComponent<Cta> = ({ text, ctaStyle, link }) => {
             title={text}
             href={link}
             className={classNames({
-                'btn bg-white text-blurple-400 hover:bg-blurple-400 hover:text-white':
-                    ctaStyle === 'primaryButtonWhite',
-                'btn border-white text-white hover:border-blurple-400 hover:bg-blurple-400':
-                    ctaStyle === 'outlineButtonLight',
-                'btn btn-link text-white hover:text-blurple-200': ctaStyle === 'link',
+                'btn btn-primary-dark': ctaStyle === 'primaryButtonWhite',
+                'btn btn-secondary-dark': ctaStyle === 'outlineButtonLight',
+                'btn btn-link-dark': ctaStyle === 'link',
             })}
             data-button-style={ctaTrackingStyle}
             data-button-location={buttonLocation.body}