Port over colour and gradient changes (#111)

* straight port of colour/gradient/style changes

* prettier

src/components/Blog/LinkPost.tsx

@@ -40,7 +40,7 @@ export const LinkPost: FunctionComponent<Props> = ({
                     </div>
                 )}
             </div>
-            <div className="card-footer bg-unset border-top-0 pt-0">
+            <div className="card-footer bg-transparent border-top-0 pt-0">
                 <Link href={url} passHref={true}>
                     {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
                     <a className={`text-muted ${titleLinkClassName}`}>{post.frontmatter.publishDate}</a>

src/components/Carousels/QuoteCarousel.tsx

@@ -34,7 +34,11 @@ export const QuoteCarousel: FunctionComponent<QuoteCarouselProps> = ({ items, au
     return (
         <div className="d-flex flex-lg-row align-items-lg-center flex-column justify-content-center align-items-center text-center h-xl-450 h-lg-450 h-md-450 h-sm-550 h-550 position-relative">
             <div className="d-lg-flex d-none align-items-center btn">
-                <ArrowLeftIcon className="mr-4" onClick={() => carouselHook.moveCarousel('decrement')} />
+                <ArrowLeftIcon
+                    className="mr-4"
+                    color="#808080"
+                    onClick={() => carouselHook.moveCarousel('decrement')}
+                />
             </div>
             <div className="px-lg-6">
                 {carouselItems.map(item => (
@@ -56,14 +60,18 @@ export const QuoteCarousel: FunctionComponent<QuoteCarouselProps> = ({ items, au
                 ))}
             </div>
             <div className="d-lg-flex d-none align-items-center btn">
-                <ArrowRightIcon className="ml-4" onClick={() => carouselHook.moveCarousel()} />
+                <ArrowRightIcon className="ml-4" color="#808080" onClick={() => carouselHook.moveCarousel()} />
             </div>
             <div className={`d-lg-none d-flex justify-content-center w-100 position-absolute ${styles.positionNav}`}>
                 <div className="btn">
-                    <ArrowLeftIcon className="mr-4" onClick={() => carouselHook.moveCarousel('decrement')} />
+                    <ArrowLeftIcon
+                        className="mr-4"
+                        color="#808080"
+                        onClick={() => carouselHook.moveCarousel('decrement')}
+                    />
                 </div>
                 <div className="btn">
-                    <ArrowRightIcon className="ml-4" onClick={() => carouselHook.moveCarousel()} />
+                    <ArrowRightIcon className="ml-4" color="#808080" onClick={() => carouselHook.moveCarousel()} />
                 </div>
             </div>
         </div>

src/components/CaseStudies/NewCaseStudyLayout.tsx

@@ -45,7 +45,7 @@ export const NewCaseStudyLayout: FunctionComponent<Props> = ({
         <>
             <div className={`${kebabCase(customer)}-${className} ${className}`}>
                 <CaseStudyJumbotron
-                    className="bg-gradient-onahau-fog text-black height-md-450 height-auto p-2"
+                    className="bg-gradient-saturn-saturated text-black height-md-450 height-auto p-2"
                     customer={customer}
                     color="white"
                 >

src/components/CaseStudies/UseChallengeSolutionResults.tsx

@@ -30,11 +30,11 @@ const ListItemType: FunctionComponent<ListItemProps> = ({ item }) => (
 
 export const UseChallengeSolutionResults: FunctionComponent<Props> = ({ useCases, challenges, solutions, results }) => (
     <section className="d-flex flex-column flex-md-row">
-        <div className="bg-light-gray-2 p-lg-6 p-md-5 px-1 py-5 col-sm-12 col-md-6">
+        <div className="bg-light-gray-4-2 p-lg-6 p-md-5 px-1 py-5 col-sm-12 col-md-6">
             <section className="max-w-xl-550 ml-xl-auto">
                 <div className="mb-5 ml-3 d-flex flex-column flex-md-row justify-content-lg-end">
                     <div className="d-flex bg-white align-self-center align-self-md-start col-1 col-md-2 justify-content-center align-items-center p-0 rounded-circle text-center p-1 max-w-50">
-                        <ClipboardTextOutlineIcon color="#00A1C7" size={40} className="p-1" />
+                        <ClipboardTextOutlineIcon size={40} className="p-1 text-blurple" />
                     </div>
                     <div className="pl-3 col-11 col-lg-9">
                         <h5 className="font-weight-bold">Use case</h5>
@@ -47,7 +47,7 @@ export const UseChallengeSolutionResults: FunctionComponent<Props> = ({ useCases
                 </div>
                 <div className="mb-5 ml-3 d-flex flex-column flex-md-row justify-content-lg-end">
                     <div className="d-flex bg-white align-self-center align-self-md-start col-1 col-md-2 justify-content-center align-items-center p-0 rounded-circle text-center p-1 max-w-50">
-                        <FlagOutlineIcon color="#00A1C7" size={40} className="p-1" />
+                        <FlagOutlineIcon size={40} className="p-1 text-blurple" />
                     </div>
                     <div className="pl-3 col-11 col-lg-9">
                         <h5 className="font-weight-bold">Challenge</h5>
@@ -60,7 +60,7 @@ export const UseChallengeSolutionResults: FunctionComponent<Props> = ({ useCases
                 </div>
                 <div className="mb-5 ml-3 d-flex flex-column flex-md-row justify-content-lg-end">
                     <div className="d-flex bg-white align-self-center align-self-md-start col-1 col-md-2 justify-content-center align-items-center p-0 rounded-circle text-center p-1 max-w-50">
-                        <CheckCircleOutlineIcon color="#00A1C7" size={40} className="p-1" />
+                        <CheckCircleOutlineIcon size={40} className="p-1 text-blurple" />
                     </div>
                     <div className="pl-3 col-11 col-lg-9">
                         <h5 className="font-weight-bold">Solution</h5>
@@ -73,11 +73,11 @@ export const UseChallengeSolutionResults: FunctionComponent<Props> = ({ useCases
                 </div>
             </section>
         </div>
-        <div className="bg-gradient-blue-mist p-lg-6 p-md-5 px-1 py-5 col-sm-12 col-md-6">
+        <div className="bg-gradient-venus-radial p-lg-6 p-md-5 px-1 py-5 col-sm-12 col-md-6">
             <section className="max-w-xl-550">
                 <div className="mb-5 ml-3 ml-lg-0 d-flex flex-column flex-md-row">
                     <div className="d-flex bg-white align-self-center align-self-md-start col-1 col-md-2 justify-content-center align-items-center p-0 rounded-circle text-center p-1 max-w-50">
-                        <ChartBarIcon color="#00A1C7" size={40} className="p-1" />
+                        <ChartBarIcon size={40} className="p-1 text-blurple" />
                     </div>
                     <div className="pl-3 col-11 col-lg-9">
                         <h5 className="font-weight-bold">Results</h5>

src/components/ContentSection.tsx

@@ -5,7 +5,7 @@ const COLORS = {
     white: 'bg-white text-dark',
     black: 'bg-black text-light',
     gray: 'bg-dark text-light',
-    purple: 'bg-purple text-light',
+    purple: 'bg-vivid-violet text-light',
     primary: 'bg-primary text-light',
     pink: 'bg-pink text-dark',
     'light-orange': 'bg-light-orange text-dark',

src/components/Install/install.module.scss

@@ -2,7 +2,7 @@
 
 @keyframes flashBackground {
     0% {
-        background: $light-yellow;
+        background: $yellow-mist;
     }
     100% {
         background-color: none;

src/components/Jumbotron/index.tsx

@@ -5,7 +5,7 @@ import styles from './jumbotron.module.scss'
 export const COLORS = {
     white: '',
     dark: 'bg-black text-light',
-    purple: 'bg-purple text-light',
+    purple: 'bg-vivid-violet text-light',
 }
 
 interface Props {

src/components/RequestDemoTrySourcegraph.tsx

@@ -11,9 +11,9 @@ interface Props {
 }
 
 export const RequestDemoTrySourcegraph: FunctionComponent<Props> = () => (
-    <div className="bg-light-gray2">
+    <div className="bg-light-gray-4-3">
         <ContentSection>
-            <div className="bg-light-gray2 row d-flex flex-column mx-4 mx-lg-0 py-7 align-items-lg-center align-items-left">
+            <div className="bg-light-gray-4-3 row d-flex flex-column mx-4 mx-lg-0 py-7 align-items-lg-center align-items-left">
                 <div className="mb-5 d-flex flex-column">
                     <h1 className="text-center font-weight-bold">Get started with Sourcegraph</h1>
                     <p className="text-center">Understand, fix, and automate changes across your entire codebase.</p>
@@ -23,7 +23,7 @@ export const RequestDemoTrySourcegraph: FunctionComponent<Props> = () => (
                         <div className="btn btn-primary">Request a demo</div>
                     </Link>
                     <Link href="/get-started" passHref={true}>
-                        <p className="mt-4 btn font-weight-bold text-blue7">Try Sourcegraph now</p>
+                        <p className="mt-4 btn font-weight-bold text-curious-blue">Try Sourcegraph now</p>
                     </Link>
                 </div>
             </div>

src/components/ThreeUpText.tsx

@@ -11,14 +11,14 @@ interface Props {
 }
 
 export const ThreeUpText: FunctionComponent<Props> = ({ title, results }) => (
-    <div className="bg-gradient-blue-mist py-lg-7 p-5">
+    <div className="bg-gradient-venus-radial py-lg-7 p-5">
         <section className="container-xl">
             <h2 className="text-center display-3 font-weight-bold">{title}</h2>
 
             <div className="mb-5 d-flex flex-wrap justify-content-center">
                 {results.map((result, index) => (
                     <div key={`result-${index + 1}-${result.subtitle}`} className="col-sm-12 col-md-4 text-center pt-5">
-                        <h3 className="pb-3 font-weight-bold text-blue7">{result.subtitle}</h3>
+                        <h3 className="pb-3 font-weight-bold text-curious-blue">{result.subtitle}</h3>
                         <p className="max-w-md-400 max-w-lg-250 max-w-xl-250 mx-auto">{result.description}</p>
                     </div>
                 ))}

src/pages/accelerate-dev-onboarding.tsx

@@ -57,7 +57,7 @@ const AccelerateDevOnboarding: FunctionComponent = () => {
                 </div>
             </div>
 
-            <div className="bg-gradient-onahau-fog text-center">
+            <div className="bg-gradient-saturn-saturated text-center">
                 <div className="container py-6 mw-650">
                     <h2 className="mb-4 font-weight-bold">
                         Learn how Convoy increases the efficiency and confidence of entry level developers

src/pages/case-studies/nutanix-fixed-log4j-with-sourcegraph.tsx

@@ -145,7 +145,7 @@ export const CaseStudy: FunctionComponent = () => (
                 </p>
             </ContentSection>
 
-            <ContentSection color="white" className="py-6 max-w-700 col-xl-5 text-gray text-center">
+            <ContentSection color="white" className="py-6 max-w-700 col-xl-5 text-pale-sky text-center">
                 <Blockquote
                     quote="It's nice when you can just run a report and say, 'Here it is,' or 'Here it isn't.' It's much
                     better than having to say, 'Well, boss, I think we got it all.'"

src/pages/fixing-vulnerabilities.tsx

@@ -53,7 +53,7 @@ const FixingVulnerabilities: FunctionComponent = () => {
                 </div>
             </div>
 
-            <div className="bg-gradient-onahau-mint text-center">
+            <div className="bg-gradient-venus-saturated text-center">
                 <div className="container py-6 mw-650">
                     <h2 className="mb-4 font-weight-bold">
                         Cloudflare proves to auditors that its code isn't vulnerable

src/pages/get-started/getStarted.module.scss

@@ -15,7 +15,7 @@
 
 // Get started page index specific
 .getStartedPage {
-    background: linear-gradient(90deg, $light-blue 0%, $brand-fog 50%, $light-blue 50%, $light-green 100%);
+    background: linear-gradient(90deg, $light-blue 0%, $violet-mist 50%, $light-blue 50%, $light-green 100%);
 
     section h1 {
         font-size: 2.25rem;
@@ -25,20 +25,20 @@
     // Self hosted section
     section:nth-of-type(1) {
         @media only screen and (max-width: 990px) {
-            @include BgGradientBluePurple;
+            @include GradientBlueVioletMist;
         }
     }
 
     // Cloud section
     section:nth-of-type(2) {
         @media only screen and (max-width: 990px) {
-            @include BgGradientBlueGreen;
+            @include GradientBlueGreen;
         }
     }
 }
 
 .mostPopularBadge {
-    background: $brand-purple;
+    background: $vivid-violet;
     padding: 7px 10px;
     font-size: 0.65rem;
     line-height: 0.815rem;
@@ -63,5 +63,5 @@
 
 // Cloud page specific
 .gitLab {
-    background-color: $purple;
+    background-color: $blurple;
 }

src/pages/get-started/self-hosted.tsx

@@ -30,7 +30,7 @@ export const SelfHostedPage: FunctionComponent = () => {
             heroAndHeaderClassName={styles.hero}
             hideGetStartedButton={true}
         >
-            <div className={`${styles.root} bg-gradient-blue-purple py-5`}>
+            <div className={`${styles.root} bg-gradient-blue-violet-mist py-5`}>
                 <div className="row container-xl mx-auto py-5">
                     <div className="col-lg-6">
                         <div>

src/pages/jobs.tsx

@@ -58,7 +58,7 @@ const CareersPage: FunctionComponent = () => {
                 <ContentSection className="hero-section">
                     <div className="row">
                         <div className="col-lg-10">
-                            <h1 className="display-2 title">Let’s build the future together.</h1>
+                            <h1 className="display-2 title">Let's build the future together.</h1>
                             <h1 className="display-2 font-weight-normal">
                                 We're developing the world's most advanced code search navigation platform with
                                 brilliant dreamers around the globe.
@@ -97,7 +97,7 @@ const CareersPage: FunctionComponent = () => {
                                 Happy, healthy, and always in the flow.
                             </h2>
                             <p className="col-lg-6 text-center mx-auto">
-                                Our Teammates are our most valuable resource. That’s why we provide total rewards that
+                                Our Teammates are our most valuable resource. That's why we provide total rewards that
                                 are highly competitive and allow you to thrive both personally and professionally.
                             </p>
                             <p className="text-center mt-3">
@@ -168,11 +168,11 @@ const CareersPage: FunctionComponent = () => {
                 </div>
 
                 <Carousel className="culture-carousel">
-                    <Carousel.Item className="bg-gradient-blue-purple">
+                    <Carousel.Item className="bg-gradient-blue-violet-mist">
                         <div className="row">
                             <h1 className="col-lg-6 my-auto">
                                 <p>
-                                    Just because we’re remote doesn’t mean we’re apart <br />
+                                    Just because we're remote doesn't mean we're apart <br />
                                     #life-at-sourcegraph
                                 </p>
                             </h1>
@@ -181,19 +181,19 @@ const CareersPage: FunctionComponent = () => {
                             </div>
                         </div>
                     </Carousel.Item>
-                    <Carousel.Item className="bg-gradient-purple-yellow">
+                    <Carousel.Item className="bg-gradient-violet-yellow-mist">
                         <div className="row">
                             <h1 className="col-lg-6 my-auto">
                                 <p>
-                                    We’re moving <i>fast</i> to create a world in which everyone can code
+                                    We're moving <i>fast</i> to create a world in which everyone can code
                                 </p>
                             </h1>
                             <div className="col-lg-6 img-container">
                                 <img src="/careers/culture2.png" alt="Group riding go karts" />
                             </div>
                         </div>
                     </Carousel.Item>
-                    <Carousel.Item className="bg-gradient-yellow-green2">
+                    <Carousel.Item className="bg-gradient-yellow-green-mist">
                         <div className="row">
                             <h1 className="col-lg-6 my-auto">
                                 <p>
@@ -206,7 +206,7 @@ const CareersPage: FunctionComponent = () => {
                             </div>
                         </div>
                     </Carousel.Item>
-                    <Carousel.Item className="bg-gradient-green2-red">
+                    <Carousel.Item className="bg-gradient-green-red-mist">
                         <div className="row">
                             <h1 className="col-lg-6 my-auto">
                                 <p>
@@ -222,7 +222,7 @@ const CareersPage: FunctionComponent = () => {
                             </div>
                         </div>
                     </Carousel.Item>
-                    <Carousel.Item className="bg-gradient-red-blue2">
+                    <Carousel.Item className="bg-gradient-red-plum-mist">
                         <div className="row">
                             <h1 className="col-lg-6 my-auto">
                                 <p>Creating the next generation of Sourcegraph coders, one baby at a time</p>
@@ -328,7 +328,7 @@ const CareersPage: FunctionComponent = () => {
                     </Carousel.Item>
                 </Carousel>
 
-                <div className="bg-gradient-onahau-fog py-8">
+                <div className="bg-gradient-saturn-saturated py-8">
                     <ContentSection>
                         <QuoteCarousel items={glassdoorReviewItems} autoAdvance={true} />
                     </ContentSection>