diff --git a/website/src/components/Header.tsx b/website/src/components/Header.tsx index d366e031dc1..070e12ae56f 100644 --- a/website/src/components/Header.tsx +++ b/website/src/components/Header.tsx @@ -67,7 +67,7 @@ export default class Header extends React.Component { return ( <> {this.props.isHome && ( -
+
Track what really matters to you and your team. 🎉 Show me Code Insights! diff --git a/website/src/components/IconItem.tsx b/website/src/components/IconItem.tsx index a1aada8c7a5..6f1d54191f1 100644 --- a/website/src/components/IconItem.tsx +++ b/website/src/components/IconItem.tsx @@ -3,7 +3,7 @@ import React from 'react' export const IconItem: React.FunctionComponent<{ className?: string icon: React.ComponentType<{ className?: string }> - color: 'blue' | 'brand-cyan' | 'brand-orange' | 'brand-purple' | 'green' | 'red' | 'white' + color: 'primary' | 'sky-blue' | 'vivid-violet' | 'green' | 'vermillion' | 'white' children: React.ReactNode }> = ({ className = '', icon: Icon, color, children }) => (
diff --git a/website/src/components/Install/install.module.scss b/website/src/components/Install/install.module.scss index 47d7b77e250..91ce184eae3 100644 --- a/website/src/components/Install/install.module.scss +++ b/website/src/components/Install/install.module.scss @@ -2,7 +2,7 @@ @keyframes flashBackground { 0% { - background: $light-yellow; + background: $yellow-mist; } 100% { background-color: none; diff --git a/website/src/components/Jumbotron.tsx b/website/src/components/Jumbotron.tsx index 6091f7fc335..fe62a35f542 100644 --- a/website/src/components/Jumbotron.tsx +++ b/website/src/components/Jumbotron.tsx @@ -3,7 +3,7 @@ import React from 'react' export const COLORS = { white: '', dark: 'bg-black text-light', - purple: 'bg-purple text-light', + purple: 'bg-vivid-violet text-light', } export const Jumbotron: React.FunctionComponent<{ diff --git a/website/src/components/QuoteCarousel/index.tsx b/website/src/components/QuoteCarousel/index.tsx index 8db8d84cebc..2f9587ac1c3 100644 --- a/website/src/components/QuoteCarousel/index.tsx +++ b/website/src/components/QuoteCarousel/index.tsx @@ -32,7 +32,11 @@ export const QuoteCarousel: FunctionComponent = ({ items, au return (
- carouselHook.moveCarousel('decrement')} /> + carouselHook.moveCarousel('decrement')} + />
{carouselItems.map(item => ( @@ -54,16 +58,20 @@ export const QuoteCarousel: FunctionComponent = ({ items, au ))}
- carouselHook.moveCarousel()} /> + carouselHook.moveCarousel()} />
- carouselHook.moveCarousel('decrement')} /> + carouselHook.moveCarousel('decrement')} + />
- carouselHook.moveCarousel()} /> + carouselHook.moveCarousel()} />
diff --git a/website/src/components/TestimonialCarousel.tsx b/website/src/components/TestimonialCarousel.tsx index e895b5eb10e..eea3c712a79 100644 --- a/website/src/components/TestimonialCarousel.tsx +++ b/website/src/components/TestimonialCarousel.tsx @@ -4,7 +4,7 @@ import slugify from 'slugify' export enum CarouselColors { dark = 'bg-black text-light', - purple = 'bg-purple text-light', + purple = 'bg-vivid-violet text-light', } interface Author { diff --git a/website/src/components/blog/LinkPost.tsx b/website/src/components/blog/LinkPost.tsx index da8f4c5c59f..a32c44778b0 100644 --- a/website/src/components/blog/LinkPost.tsx +++ b/website/src/components/blog/LinkPost.tsx @@ -52,7 +52,7 @@ export const LinkPost: React.FunctionComponent = ({ {title}
-
+
{post.frontmatter.publishDate} diff --git a/website/src/components/content/ContentSection.tsx b/website/src/components/content/ContentSection.tsx index 3befe62d748..aed8c6df924 100644 --- a/website/src/components/content/ContentSection.tsx +++ b/website/src/components/content/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', diff --git a/website/src/components/product/OpenSourcePrivacyFeatureItem.tsx b/website/src/components/product/OpenSourcePrivacyFeatureItem.tsx index 3d72b2acf80..5910f94d614 100644 --- a/website/src/components/product/OpenSourcePrivacyFeatureItem.tsx +++ b/website/src/components/product/OpenSourcePrivacyFeatureItem.tsx @@ -4,7 +4,7 @@ import React from 'react' import { IconItem } from '../IconItem' export const OpenSourcePrivacyFeatureItem: React.FunctionComponent<{}> = () => ( - +

Open source, self-managed, & privacy-respectful

Sourcegraph is{' '} diff --git a/website/src/css/_colors.scss b/website/src/css/_colors.scss index 6947331a3a2..b01129b5bdc 100644 --- a/website/src/css/_colors.scss +++ b/website/src/css/_colors.scss @@ -1,33 +1,31 @@ -/* Sourcegraph Brand Colors */ -$sg-space-black: #000000; -$blue: #2c7ef6; -$red: #dc3545; -$purple: #5033e1; -$white: #ffffff; -$gray: #6c757d; -$brand-purple: #a112ff; -$brand-cyan: #00cbec; -$brand-orange: #ff5543; -$brand-primary-blue: #2a66e2; -$logo-purple: #b200f8; +/** + * Sourcegraph Brand Colors + * See: https://handbook.sourcegraph.com/departments/marketing/brand/brand_guidelines/color/ + */ -// Sourcegraph Brand Secondary Colors -$brand-onahau: #c7ffff; -$brand-mint: #8fedcf; -$brand-fog: #e8d1ff; -// TODO: consolidate and name more brand colours +// Sourcegraph Primary Colors +$sky-blue: #00cbec; +$vivid-violet: #a112ff; +$vermillion: #ff5543; -$body-bg: #f9f9f9; -$body-color: #222233; +// Sourcegraph Secondary Colors +$yellow-mist: #fff2cf; +$red-mist: #ffc9c9; +$violet-mist: #e8d1ff; +$plum-mist: #bfbfff; +$blue-mist: #c7ffff; +$green-mist: #c4ffe8; +$mint: #8fedcf; +$blurple: #5033e1; +$pacific-blue: #00a1c7; -$nav-bg-color: #f9f9f9; +// Sourcegraph Colors for Website UI +$pale-sky: #6c757d; +$space-black: #000000; -$dark-13: #000000; -$dark-12: #07090d; -$dark-11: #0e121b; -$dark-10: #151c28; +// Colors not listed in our Brand Guidelines $dark-9: #1d2535; -$dark-8: #242e42; +$dark-8: #222233; $dark-5: #39496a; $dark-3: #475c85; @@ -37,52 +35,85 @@ $light-5: #a2b0cd; $light-6: #afbcd4; $light-8: #cad2e2; $light-9: #d7ddea; -$light-gray-0: #ddd; +$light-gray-0: #dddddd; $light-gray-1: #dee2e6; -$light-gray-2: #f9fafb; -$light-10: #e4e9f1; -$light-11: #f2f4f8; - -$red-7: #f03e3e; +$light-gray-2: #e4e9f1; +$light-gray-3: #f2f4f8; +$light-gray-4: #f9fafb; +$light-gray-5: #f5f5f5; -$indigo-5: #5c7cfa; +$green-1: #d3f9d8; +$green-5: #51cf66; +$green-7: #37b24d; +$green-9: #2b8a3e; -$light-green: #bceee9; -$light-green2: #c4ffe8; +$alabaster: #f9f9f9; $light-blue: #d5e6f7; -$light-blue2: #bfbfff; -$light-yellow: #fff2cf; -$light-red: #ffc9c9; -$blue-3: #72c3fc; -$blue-7: #1c7cd6; -$blue-mist: #c7ffff; -$wild-sand: #f5f5f5; +$light-green: #bceee9; +$turquoise: #66d9e8; +$malibu: #72c3fc; +$curious-blue: #1c7cd6; +$cornflower-blue: #5c7cfa; +$dodger-blue: #2c7ef6; -$cyan-2: #00a1c7; -$cyan-3: #66d9e8; +/** + * Bootstrap Theme Colors + * This allows us to use text-{colorName} and bg-{colorName} utility classes + */ +$theme-colors: ( + // Bootstrap overrides + 'primary': $blurple, -$teal-7: #0ca678; + // Sourcegraph Primary Colors + 'sky-blue': $sky-blue, + 'vivid-violet': $vivid-violet, + 'vermillion': $vermillion, -$green-1: #d3f9d8; -$green-5: #51cf66; -$green-7: #37b24d; -$green-9: #2b8a3e; + // Sourcegraph Secondary Colors + 'yellow-mist': $yellow-mist, + 'red-mist': $red-mist, + 'violet-mist': $violet-mist, + 'plum-mist': $plum-mist, + 'blue-mist': $blue-mist, + 'green-mist': $green-mist, + 'mint': $mint, + 'blurple': $blurple, + 'pacific-blue': $pacific-blue, + + // Sourcegraph Colors for Website UI + 'pale-sky': $pale-sky, + 'black': $space-black, + + // Colors not listed in our Brand Guidelines + 'dark-9': $dark-9, + 'dark-8': $dark-8, + 'dark-5': $dark-5, + 'dark-3': $dark-3, + + 'light-1': $light-1, + 'light-2': $light-2, + 'light-5': $light-5, + 'light-6': $light-6, + 'light-8': $light-8, + 'light-9': $light-9, + 'light-gray-0': $light-gray-0, + 'light-gray-1': $light-gray-1, + 'light-gray-2': $light-gray-2, + 'light-gray-3': $light-gray-3, + 'light-gray-4': $light-gray-4, + 'light-gray-5': $light-gray-5, + + 'green-1': $green-1, + 'green-5': $green-5, + 'green-7': $green-7, + 'green-9': $green-9, -.bg-light-gray { - background-color: $light-gray-2; -} -.bg-light-gray2 { - background-color: $light-11; -} -.bg-black { - background-color: $sg-space-black; -} -.bg-purple { - background-color: $logo-purple; -} -.bg-light-transparent { - background-color: transparentize($light-11, 0.3); -} -.bg-unset { - background-color: unset; -} + 'alabaster': $alabaster, + 'light-blue': $light-blue, + 'light-green': $light-green, + 'turquoise': $turquoise, + 'malibu': $malibu, + 'curious-blue': $curious-blue, + 'cornflower-blue': $cornflower-blue, + 'dodger-blue': $dodger-blue +); diff --git a/website/src/css/_gradients.scss b/website/src/css/_gradients.scss index c61b2cf3835..370bfcf2657 100644 --- a/website/src/css/_gradients.scss +++ b/website/src/css/_gradients.scss @@ -1,91 +1,94 @@ @use 'sass:color'; @import '@styles/colors'; -@mixin BgGradientPrimary { - background-image: radial-gradient(circle at 50% 0px, $blue-7, darken($blue, 9%)); -} -@mixin BgGradientGreenBlue { - background: linear-gradient(90deg, $light-green 0%, $light-blue 100%); -} -@mixin BgGradientBlueGreen { - background: linear-gradient(90deg, $light-blue 0%, $light-green 100%); -} -@mixin BgGradientOnahauMint { +/** + * Sourcegraph Brand Gradients + * See: https://handbook.sourcegraph.com/departments/marketing/brand/brand_guidelines/color/#gradients + */ + +/** + * Sourcegraph Gradients + * Note: These are slightly adjusted and not true to the Brand Guidelines + * due to following Figma designs provided. + */ +@mixin GradientVenusSaturated { background: linear-gradient( 90deg, - color.adjust($brand-onahau, $alpha: -0.7) 14.33%, - color.adjust($brand-mint, $alpha: -0.7) 81.79% + color.adjust($blue-mist, $alpha: -0.7) 14.33%, + color.adjust($mint, $alpha: -0.7) 81.79% ); } -@mixin BgGradientOnahauFog { +@mixin GradientVenusRadial { + background: radial-gradient(ellipse at top left, rgba($blue-mist, 0.5), transparent), + radial-gradient(ellipse at bottom right, rgba($green-mist, 0.5), transparent); +} +@mixin GradientSaturnSaturated { background: linear-gradient( 90deg, - color.adjust($brand-onahau, $alpha: -0.7) 14.33%, - color.adjust($brand-fog, $alpha: -0.7) 81.79% + color.adjust($blue-mist, $alpha: -0.7) 14.33%, + color.adjust($violet-mist, $alpha: -0.7) 81.79% ); } -@mixin BgGradientBluePurple { - background: linear-gradient(90deg, $light-blue 0%, $brand-fog 100%); + +// Gradients not listed in our Brand Guidelines +@mixin GradientGreenBlue { + background: linear-gradient(90deg, $light-green 0%, $light-blue 100%); } -@mixin BgGradientPurpleYellow { - background: linear-gradient(90deg, $brand-fog 0%, $light-yellow 100%); +@mixin GradientBlueGreen { + background: linear-gradient(90deg, $light-blue 0%, $light-green 100%); } -@mixin BgGradientFogBlue2 { - background: linear-gradient(90deg, $brand-fog 0%, $light-blue2 100%); +@mixin GradientBlueVioletMist { + background: linear-gradient(90deg, $light-blue 0%, $violet-mist 100%); } -@mixin BgGradientYellowGreen2 { - background: linear-gradient(90deg, $light-yellow 0%, $light-green2 100%); +@mixin GradientVioletYellowMist { + background: linear-gradient(90deg, $violet-mist 0%, $yellow-mist 100%); } -@mixin BgGradientGreen2Red { - background: linear-gradient(90deg, $light-green 0%, $light-red 100%); +@mixin GradientYellowGreenMist { + background: linear-gradient(90deg, $yellow-mist 0%, $green-mist 100%); } -@mixin BgGradientRedBlue2 { - background: linear-gradient(90deg, $light-red 0%, $light-blue2 100%); +@mixin GradientGreenRedMist { + background: linear-gradient(90deg, $light-green 0%, $red-mist 100%); } -@mixin BgGradientBlue2Blue { - background: linear-gradient(90deg, $light-blue2 0%, $light-blue 100%); +@mixin GradientRedPlumMist { + background: linear-gradient(90deg, $red-mist 0%, $plum-mist 100%); } -@mixin BgGradientBlueMist { - background: radial-gradient(ellipse at top left, rgba($blue-mist, 0.5), transparent), - radial-gradient(ellipse at bottom right, rgba($light-green2, 0.5), transparent); +@mixin GradientPlumMistBlue { + background: linear-gradient(90deg, $plum-mist 0%, $light-blue 100%); } -.bg-gradient-primary { - @include BgGradientPrimary; +// Sourcegraph Gradients - utility classes +.bg-gradient-venus-saturated { + @include GradientVenusSaturated; } -.bg-gradient-green-blue { - @include BgGradientGreenBlue; -} -.bg-gradient-blue-green { - @include BgGradientBlueGreen; +.bg-gradient-venus-radial { + @include GradientVenusRadial; } -.bg-gradient-onahau-mint { - @include BgGradientOnahauMint; +.bg-gradient-saturn-saturated { + @include GradientSaturnSaturated; } -.bg-gradient-onahau-fog { - @include BgGradientOnahauFog; -} -.bg-gradient-blue-purple { - @include BgGradientBluePurple; + +// Gradients not listed in our Brand Guidelines - utility classes +.bg-gradient-green-blue { + @include GradientGreenBlue; } -.bg-gradient-purple-yellow { - @include BgGradientPurpleYellow; +.bg-gradient-blue-green { + @include GradientBlueGreen; } -.bg-gradient-fog-blue2 { - @include BgGradientFogBlue2; +.bg-gradient-blue-violet-mist { + @include GradientBlueVioletMist; } -.bg-gradient-yellow-green2 { - @include BgGradientYellowGreen2; +.bg-gradient-violet-yellow-mist { + @include GradientVioletYellowMist; } -.bg-gradient-green2-red { - @include BgGradientGreen2Red; +.bg-gradient-yellow-green-mist { + @include GradientYellowGreenMist; } -.bg-gradient-red-blue2 { - @include BgGradientRedBlue2; +.bg-gradient-green-red-mist { + @include GradientGreenRedMist; } -.bg-gradient-blue2-blue { - @include BgGradientBlue2Blue; +.bg-gradient-red-plum-mist { + @include GradientRedPlumMist; } -.bg-gradient-blue-mist { - @include BgGradientBlueMist; +.bg-gradient-plum-mist-blue { + @include GradientPlumMistBlue; } diff --git a/website/src/css/_typography.scss b/website/src/css/_typography.scss deleted file mode 100644 index ec07f6e02ed..00000000000 --- a/website/src/css/_typography.scss +++ /dev/null @@ -1,12 +0,0 @@ -@import '@styles/colors'; - -$colors: ( - 'blue7': $blue-7, - 'gray': $gray, -); - -@each $name, $glyph in $colors { - .text-#{$name} { - color: $glyph; - } -} diff --git a/website/src/css/components/_ComparisonTable.scss b/website/src/css/components/_ComparisonTable.scss index 8a701c160e2..a52d3a93e16 100644 --- a/website/src/css/components/_ComparisonTable.scss +++ b/website/src/css/components/_ComparisonTable.scss @@ -28,7 +28,7 @@ &__close { svg path { - fill: $red-7; + fill: $vermillion; } margin-right: 0.5rem; } diff --git a/website/src/css/components/_CustomCarousel.scss b/website/src/css/components/_CustomCarousel.scss index 05ad8759dce..35a0787bd31 100644 --- a/website/src/css/components/_CustomCarousel.scss +++ b/website/src/css/components/_CustomCarousel.scss @@ -37,7 +37,7 @@ li { cursor: pointer; - color: $sg-space-black; + color: $space-black; margin: 30px 0; } diff --git a/website/src/css/components/_Header.scss b/website/src/css/components/_Header.scss index d491d45894a..02a8ee9ff2d 100644 --- a/website/src/css/components/_Header.scss +++ b/website/src/css/components/_Header.scss @@ -40,10 +40,10 @@ color: $white; } &.btn-outline-primary { - color: $blue; + color: $blurple; &:hover { - background-color: $blue; + background-color: $blurple; color: $white; } } @@ -51,7 +51,7 @@ .right-nav { .nav-link.btn-simple { - color: $blue; + color: $blurple; } .nav-link.btn { font-weight: bold; @@ -88,7 +88,7 @@ font-weight: normal; &:hover { color: $navbar-light-hover-color !important; - background-color: $nav-bg-color !important; + background-color: $white !important; } } /* Adjust dropdown arrow positioning */ @@ -125,5 +125,5 @@ /* Hello bar */ .background-purple { - background-color: $purple; + background-color: $blurple; } diff --git a/website/src/css/components/_IconItem.scss b/website/src/css/components/_IconItem.scss index 9a15bacc92f..3dc8a9500fb 100644 --- a/website/src/css/components/_IconItem.scss +++ b/website/src/css/components/_IconItem.scss @@ -10,12 +10,11 @@ margin-right: 0.5rem; padding: 0.125rem; - @include icon-item-color('blue', $primary); - @include icon-item-color('brand-cyan', $brand-cyan); - @include icon-item-color('brand-purple', $brand-purple); - @include icon-item-color('brand-orange', $brand-orange); - @include icon-item-color('green', $green); - @include icon-item-color('red', $red); + @include icon-item-color('primary', $primary); + @include icon-item-color('sky-blue', $sky-blue); + @include icon-item-color('vivid-violet', $vivid-violet); + @include icon-item-color('green', $green-5); + @include icon-item-color('vermillion', $vermillion); @include icon-item-color('white', $white); } } diff --git a/website/src/css/components/_LeadershipSection.scss b/website/src/css/components/_LeadershipSection.scss index 271d8fc4cb7..7e3b6eacfb0 100644 --- a/website/src/css/components/_LeadershipSection.scss +++ b/website/src/css/components/_LeadershipSection.scss @@ -18,7 +18,7 @@ padding: 0.3rem; } &-social a:hover { - color: #6c757d; + color: $pale-sky; } &-social li:first-child { padding-left: 0; diff --git a/website/src/css/components/_SelfHostedSection.scss b/website/src/css/components/_SelfHostedSection.scss index 5160fba39c6..d381ad77387 100644 --- a/website/src/css/components/_SelfHostedSection.scss +++ b/website/src/css/components/_SelfHostedSection.scss @@ -6,7 +6,7 @@ width: 100%; outline: none; resize: none; - background-color: $light-11; + background-color: $light-gray-3; min-height: 150px; padding: 1.5rem; } @@ -45,7 +45,7 @@ padding-left: 1.5rem; } &__action { - background-color: $light-11; + background-color: $light-gray-3; border: 1px solid $light-gray-1 !important; padding: 1.5rem; min-height: 150px; diff --git a/website/src/css/components/_TemplateCodeBlock.scss b/website/src/css/components/_TemplateCodeBlock.scss index 8c2e2a740df..514a6c994ad 100644 --- a/website/src/css/components/_TemplateCodeBlock.scss +++ b/website/src/css/components/_TemplateCodeBlock.scss @@ -15,13 +15,13 @@ } .code { - background-color: $light-11; + background-color: $light-gray-3; font-family: sfmono-regular, consolas, menlo, dejavu sans mono, monospace; font-size: 11px; border: 1px solid #dfe2e6; } .keyword { - color: $blue; + color: $dodger-blue; } } diff --git a/website/src/css/components/blog/_BlogPost.scss b/website/src/css/components/blog/_BlogPost.scss index ad80ee26fd5..3a05943c576 100644 --- a/website/src/css/components/blog/_BlogPost.scss +++ b/website/src/css/components/blog/_BlogPost.scss @@ -17,7 +17,6 @@ } &__read-more { - color: $blue-7; font-weight: bold; } diff --git a/website/src/css/components/blog/_PostsList.scss b/website/src/css/components/blog/_PostsList.scss index ac3aca82ac7..b5163cbea71 100644 --- a/website/src/css/components/blog/_PostsList.scss +++ b/website/src/css/components/blog/_PostsList.scss @@ -5,7 +5,7 @@ &-title { font-size: $h5-font-size; &-link { - color: $body-color; + color: $dark-8; } } } diff --git a/website/src/css/components/product/_GitLabIntegrationSection.scss b/website/src/css/components/product/_GitLabIntegrationSection.scss index 377011439a6..204456dc68d 100644 --- a/website/src/css/components/product/_GitLabIntegrationSection.scss +++ b/website/src/css/components/product/_GitLabIntegrationSection.scss @@ -8,7 +8,7 @@ } &__new-badge { - color: $light-11; + color: $light-gray-3; background-color: #dc3545; border: 1px solid transparent; padding: 0.15rem 0.75rem; @@ -25,7 +25,7 @@ font-size: 1.35rem; p { - border-left: 3px solid $brand-cyan; + border-left: 3px solid $sky-blue; padding-left: 1rem; text-indent: 0.4em; diff --git a/website/src/css/pages/__white_papers.scss b/website/src/css/pages/__white_papers.scss index b156e24a511..aea854a2150 100644 --- a/website/src/css/pages/__white_papers.scss +++ b/website/src/css/pages/__white_papers.scss @@ -72,7 +72,7 @@ p { padding-left: 1rem; - border-left: 3px solid $brand-cyan; + border-left: 3px solid $sky-blue; font-weight: 600; font-size: 1.2rem; line-height: 1.3; diff --git a/website/src/css/pages/_about.scss b/website/src/css/pages/_about.scss index ea41e758846..7e70f5a1d5d 100644 --- a/website/src/css/pages/_about.scss +++ b/website/src/css/pages/_about.scss @@ -5,7 +5,7 @@ &__plan { padding: 3rem 0; - background-color: $light-10; + background-color: $light-gray-2; &-container { background-color: #ffffff; padding: 2rem 2rem; @@ -34,7 +34,7 @@ border-radius: 0.25rem; padding-right: 1rem; margin: 0 0 1rem 1rem; - background: $light-11; + background: $light-gray-3; display: flex; img { margin-bottom: 0; diff --git a/website/src/css/pages/_batch-changes.scss b/website/src/css/pages/_batch-changes.scss index accc536e29c..f70d1e024e7 100644 --- a/website/src/css/pages/_batch-changes.scss +++ b/website/src/css/pages/_batch-changes.scss @@ -2,8 +2,8 @@ &__hero-and-header { background-image: url('/batch-changes/hero_illustration.svg'), url('/batch-changes/hero_background.svg'), // Fallback while the SVGs are loading - radial-gradient(ellipse at bottom right, rgba($indigo-5, 0.5), transparent), - radial-gradient(ellipse at bottom left, rgba($cyan-3, 0.5), transparent); + radial-gradient(ellipse at bottom right, rgba($cornflower-blue, 0.5), transparent), + radial-gradient(ellipse at bottom left, rgba($turquoise, 0.5), transparent); background-repeat: no-repeat, no-repeat; background-size: auto 113%, 100% 100%; background-position: center right 15%, top left; diff --git a/website/src/css/pages/_code-insights.scss b/website/src/css/pages/_code-insights.scss index b472ec470f2..ec35f963623 100644 --- a/website/src/css/pages/_code-insights.scss +++ b/website/src/css/pages/_code-insights.scss @@ -28,7 +28,7 @@ &::before { background-image: url('/code-insights/code-insights-page-bg.svg'), // Fallback while the SVGs are loading - radial-gradient(ellipse at bottom left, rgba($light-green2, 0.5), transparent); + radial-gradient(ellipse at bottom left, rgba($green-mist, 0.5), transparent); background-position: top left; @media only screen and (max-width: 990px) { transform: rotate(180deg); @@ -70,7 +70,6 @@ border-radius: 45%; padding: 1rem; background-color: $white; - color: $cyan-2; } } @@ -88,15 +87,9 @@ } .btn-link { - color: $brand-primary-blue; text-decoration: none; } - .btn-primary { - color: $white; - background-color: $brand-primary-blue; - } - .tab-section { @media only screen and (max-width: 768px) { display: none; @@ -146,7 +139,7 @@ font-size: 1.5rem; line-height: 1.4rem; cursor: pointer; - color: $sg-space-black; + color: $space-black; display: block; margin: 10px 0 10px 10px; font-size: 18px; diff --git a/website/src/css/pages/_content.scss b/website/src/css/pages/_content.scss index 8943766e91b..f4194fe5659 100644 --- a/website/src/css/pages/_content.scss +++ b/website/src/css/pages/_content.scss @@ -2,8 +2,8 @@ &__title { text-align: center; padding: 2rem; - border-bottom: 1px solid $light-11; - background-color: $light-11; + border-bottom: 1px solid $light-gray-3; + background-color: $light-gray-3; } &__body { diff --git a/website/src/css/pages/_jobs.scss b/website/src/css/pages/_jobs.scss index 06b2eb4de05..1c4cb21a306 100644 --- a/website/src/css/pages/_jobs.scss +++ b/website/src/css/pages/_jobs.scss @@ -76,7 +76,7 @@ .handbook-benefits-link { text-decoration: underline; - color: $sg-space-black; + color: $space-black; } .icon { @@ -98,7 +98,7 @@ } li { - background-color: $sg-space-black; + background-color: $space-black; width: 10px; height: 10px; border-radius: 5px; @@ -241,7 +241,7 @@ .carousel-control-prev-icon, .carousel-control-next-icon, .carousel-indicators li { - background-color: $sg-space-black; + background-color: $space-black; } } } diff --git a/website/src/css/pages/_podcast.scss b/website/src/css/pages/_podcast.scss index cd930b6216a..b8af3816c3e 100644 --- a/website/src/css/pages/_podcast.scss +++ b/website/src/css/pages/_podcast.scss @@ -21,7 +21,7 @@ border-top: 1px solid $dark-5; border-bottom: 1px solid $dark-5; color: black; - background-color: $blue-3; + background-color: $malibu; padding-top: 1em; padding-bottom: 1em; &-highlight { @@ -51,13 +51,13 @@ &__content-option { margin: 1.5em 0 1.5em 0; - color: $blue-3; + color: $malibu; a { padding-top: 0.5em; padding-bottom: 0.5em; padding-right: 1em; padding-left: 1em; - color: $blue-3; + color: $malibu; &:first-child { margin-left: -1em; @@ -66,8 +66,8 @@ border-radius: 0.5em; } a.podcast__content-option-selected { - text-shadow: 0 0 0.9px $blue-3, 0 0 0.9px $blue-3; - border: 1px solid $blue-3; + text-shadow: 0 0 0.9px $malibu, 0 0 0.9px $malibu; + border: 1px solid $malibu; box-sizing: border-box; } } @@ -92,13 +92,13 @@ font-size: 2.5em; margin: 0.75em auto 0.75em auto; font-weight: 100; - color: $blue-3; + color: $malibu; a { - color: $blue-3; + color: $malibu; } a:hover { text-decoration: none; - border-bottom: 2px solid $blue-3; + border-bottom: 2px solid $malibu; } } diff --git a/website/src/css/pages/_sales.scss b/website/src/css/pages/_sales.scss index 12fb49d2f3f..0aec0a44be9 100644 --- a/website/src/css/pages/_sales.scss +++ b/website/src/css/pages/_sales.scss @@ -73,7 +73,7 @@ } .panel { - background: $light-10; + background: $light-gray-2; border-radius: 0.5rem; padding: 2rem; &__help { diff --git a/website/src/css/pages/_universal-code-search.scss b/website/src/css/pages/_universal-code-search.scss index c9f1210e074..64aa44290da 100644 --- a/website/src/css/pages/_universal-code-search.scss +++ b/website/src/css/pages/_universal-code-search.scss @@ -5,6 +5,6 @@ } &__btn { - background-color: $brand-cyan; + background-color: $sky-blue; } } diff --git a/website/src/css/pages/product/_code-change-management.scss b/website/src/css/pages/product/_code-change-management.scss index b3765ea6fdf..4c27c82693a 100644 --- a/website/src/css/pages/product/_code-change-management.scss +++ b/website/src/css/pages/product/_code-change-management.scss @@ -8,7 +8,7 @@ top: -0.3rem; right: -6rem; content: 'Private beta'; - color: $light-11; + color: $light-gray-3; background-color: #dc3545; text-transform: uppercase; border: 1px solid transparent; diff --git a/website/src/css/styles.scss b/website/src/css/styles.scss index 8a3334dd6a5..f4d641618c1 100644 --- a/website/src/css/styles.scss +++ b/website/src/css/styles.scss @@ -8,6 +8,8 @@ @import 'colors'; +/* ==================== Bootstrap Overrides ==================== */ + $font-family-sans-serif: source-sans-pro, sans-serif; /* Adobe Source Sans Pro */ $font-family-monospace: source-code-pro, monospace; /* Adobe Source Code Pro for code */ $font-family-base: $font-family-sans-serif; @@ -64,9 +66,9 @@ $display4-size: 1.75rem; $navbar-nav-link-padding-x: $spacer * 0.75; $navbar-light-color: $dark; -$navbar-light-hover-color: $blue; +$navbar-light-hover-color: $blurple; $navbar-dark-color: $light; -$navbar-dark-hover-color: $blue; +$navbar-dark-hover-color: $blurple; $nav-tabs-border-width: 0; @@ -74,13 +76,13 @@ $btn-padding-x: 1.5rem; $btn-font-weight: 600; $input-bg: transparent; -$input-color: $body-color; +$input-color: $dark-8; $input-box-shadow: none; -$input-border-color: $brand-primary-blue; +$input-border-color: $blurple; $input-border-width: 3px; $input-focus-bg: $input-bg; -$input-focus-color: $body-color; -$input-placeholder-color: $body-color; +$input-focus-color: $dark-8; +$input-placeholder-color: $dark-8; $input-focus-border-color: darken($component-active-bg, 25%); $input-focus-box-shadow: none; @@ -97,7 +99,7 @@ $card-spacer-x: 1.25 * $spacer; $grid-gutter-width: 2rem; :root { - --body-color: #{$body-color}; + --body-color: #{$dark-8}; --border-color: #{$border-color}; } @@ -123,6 +125,8 @@ $grid-gutter-width: 2rem; @import 'node_modules/bootstrap/scss/dropdown'; @import 'node_modules/bootstrap/scss/carousel'; +/* ==================== Layout ==================== */ + html, body, #___gatsby { @@ -149,29 +153,16 @@ body, body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; + background-color: $alabaster; } +/* ==================== Icons ==================== */ + .material-icons { margin-right: 4px; fill: currentColor; } -.popover { - /* Prevent a child element with non-rounded corners from extruding. - overflow: hidden; */ - border: 0; -} - -.text-sans-serif { - font-family: $font-family-sans-serif; -} - -.popover-body { - border: solid 1px $gray-200; - box-shadow: rgba(0, 0, 0, 0.1) 0 0 9px 3px; - background-color: $white; -} - /* Formats an icon so that it appears inline in the text with height matching the text */ .icon-inline { /* SVGs already include padding to account for text baseline, @@ -194,20 +185,7 @@ img.icon-inline, fill: currentColor; } -.img-drop-shadow { - max-width: calc(100% - 10px); - max-height: 100vh; - box-shadow: 0 4px 18px 0 #0000001a, 0 6px 20px 0 #00000017; - margin: 40px auto; - display: block; - vertical-align: middle; - border-style: none; -} - -code.border { - background-color: $light-11; - font-size: 80%; -} +/* ==================== Tables ==================== */ table { width: 100%; @@ -235,6 +213,8 @@ table { background-color: $white; } +/* ==================== BEM Pages/Components ==================== */ + @import 'components/blog/BlogPost'; @import 'components/blog/LinkPost'; @import 'components/blog/PodcastPost'; @@ -287,11 +267,8 @@ table { @import 'pages/code-insights'; @import 'gradients'; @import 'spacing'; -@import 'typography'; -.virtual-br::before { - content: '\A'; -} +/* ==================== Typography ==================== */ .font-size-base { font-size: $font-size-base !important; @@ -299,9 +276,40 @@ table { .font-family-base { font-family: $font-family-base !important; } +.font-size-medium { + font-size: 1.2em; + line-height: 1.95em; +} +.font-size-large { + font-size: 4.5em; + line-height: 1.25em; +} +.font-size-extra-large { + font-size: 6em; + line-height: 1.25em; +} +.text-sans-serif { + font-family: $font-family-sans-serif; +} +.text-decoration-underline { + text-decoration: underline; + &:hover { + text-decoration: none; + } +} -.list-spaced > li { - margin-bottom: 1rem; +/* ==================== Bootstrap Components ==================== */ + +.popover { + /* Prevent a child element with non-rounded corners from extruding. + overflow: hidden; */ + border: 0; +} + +.popover-body { + border: solid 1px $gray-200; + box-shadow: rgba(0, 0, 0, 0.1) 0 0 9px 3px; + background-color: $white; } .nav-tabs { @@ -310,19 +318,28 @@ table { border-bottom-width: 1px; } -.font-size-medium { - font-size: 1.2em; - line-height: 1.95em; +/* ==================== Misc ==================== */ + +.virtual-br::before { + content: '\A'; } -.font-size-large { - font-size: 4.5em; - line-height: 1.25em; +.img-drop-shadow { + max-width: calc(100% - 10px); + max-height: 100vh; + box-shadow: 0 4px 18px 0 #0000001a, 0 6px 20px 0 #00000017; + margin: 40px auto; + display: block; + border-style: none; } -.font-size-extra-large { - font-size: 6em; - line-height: 1.25em; +code.border { + background-color: $light-gray-3; + font-size: 80%; +} + +.list-spaced > li { + margin-bottom: 1rem; } .blog-image { @@ -331,10 +348,3 @@ table { border: 1px solid var(--border-color); max-width: 100%; } - -.text-decoration-underline { - text-decoration: underline; - &:hover { - text-decoration: none; - } -} diff --git a/website/src/css/templates/_PostTemplate.scss b/website/src/css/templates/_PostTemplate.scss index 3db48abfbb4..08463664d57 100644 --- a/website/src/css/templates/_PostTemplate.scss +++ b/website/src/css/templates/_PostTemplate.scss @@ -9,7 +9,7 @@ &-title { &-link { - color: $body-color; + color: $dark-8; } } diff --git a/website/src/pages/accelerate-dev-onboarding.tsx b/website/src/pages/accelerate-dev-onboarding.tsx index b32042e1017..be2a6936ae9 100644 --- a/website/src/pages/accelerate-dev-onboarding.tsx +++ b/website/src/pages/accelerate-dev-onboarding.tsx @@ -59,7 +59,7 @@ const AccelerateDevOnboarding: FunctionComponent = props => {

-
+

Learn how Convoy increases the efficiency and confidence of entry level developers diff --git a/website/src/pages/case-studies/nutanix-fixed-log4j-with-sourcegraph.tsx b/website/src/pages/case-studies/nutanix-fixed-log4j-with-sourcegraph.tsx index 286a2dd5f12..e8308118461 100644 --- a/website/src/pages/case-studies/nutanix-fixed-log4j-with-sourcegraph.tsx +++ b/website/src/pages/case-studies/nutanix-fixed-log4j-with-sourcegraph.tsx @@ -25,7 +25,7 @@ const NutanixCaseStudy: FunctionComponent = props => ( >
@@ -45,11 +45,11 @@ const NutanixCaseStudy: FunctionComponent = props => (
-
+
- +
Use case
@@ -64,7 +64,7 @@ const NutanixCaseStudy: FunctionComponent = props => (
- +
Challenge
@@ -80,7 +80,7 @@ const NutanixCaseStudy: FunctionComponent = props => (
- +
Solution
@@ -98,11 +98,11 @@ const NutanixCaseStudy: FunctionComponent = props => (
-
+
- +
Results
@@ -131,7 +131,7 @@ const NutanixCaseStudy: FunctionComponent = props => ( As the Technical Director of Solution Engineering at Nutanix, Jon Kohler understands the complexity involved in securing the multitude of applications and solutions required to power such a large organization. “Security is something that we care about intensely here at Nutanix,” Jon said, - “because it’s part of our bedrock. It's why customers like us, and we have to take it seriously.” + “because it's part of our bedrock. It's why customers like us, and we have to take it seriously.”

Log4j: The vulnerability that rocked an industry @@ -206,7 +206,7 @@ const NutanixCaseStudy: FunctionComponent = props => (

- +
+

Results

-

{'<'} 5 min

+

{'<'} 5 min

Nutanix was able to see where JMSAppender existed, fix it, and send out a release in less than 5 minutes.

-

4 days

+

4 days

Nutanix was able to deliver patches to its customers that fully remediated the Log4j vulnerability.

-

100% confidence

+

100% confidence

Nutanix was able to confidently identify every instance of Log4j across its sprawling codebase. @@ -320,7 +320,7 @@ const NutanixCaseStudy: FunctionComponent = props => ( about="Nutanix has 20,000 customers, an annual revenue of nearly $1.394 billion, and over 6,000 employees. Organizations around the world rely on Nutanix software as a single platform to manage any app at any scale for their hybrid multicloud environments." /> -

+
diff --git a/website/src/pages/cloud-beta.tsx b/website/src/pages/cloud-beta.tsx index 190465233ce..24280bd265a 100644 --- a/website/src/pages/cloud-beta.tsx +++ b/website/src/pages/cloud-beta.tsx @@ -15,14 +15,14 @@ const items = [ itemClass: 'd-block', }, { - backgroundClass: 'bg-gradient-blue-purple', + backgroundClass: 'bg-gradient-blue-violet-mist', buttonLabel: 'Accelerate velocity', text: 'Streamline collaboration across teams, even while apart: find and reuse code, search for best practices for unfamiliar libraries or APIs, share links to code with teammates, and catch more bugs through better code reviews—and fix them faster, too.', headerClass: '', itemClass: 'd-none', }, { - backgroundClass: 'bg-gradient-purple-yellow', + backgroundClass: 'bg-gradient-violet-yellow-mist', buttonLabel: 'Mitigate risks', text: 'Identify and mitigate issues across your entire codebase: monitor the introduction of vulnerable dependencies, hunt down outdated practices and patterns, and reduce the time it takes to search for bugs and security concerns.', headerClass: '', @@ -71,7 +71,7 @@ export const CloudBetaPage: React.FunctionComponent = props => (
} > - +
diff --git a/website/src/pages/code-insights.tsx b/website/src/pages/code-insights.tsx index d5450916205..e3b4428038e 100644 --- a/website/src/pages/code-insights.tsx +++ b/website/src/pages/code-insights.tsx @@ -378,7 +378,7 @@ export const CodeInsightsPage: React.FunctionComponent = props => (
-
+
@@ -404,7 +404,7 @@ export const CodeInsightsPage: React.FunctionComponent = props => (
-
+

@@ -417,7 +417,7 @@ export const CodeInsightsPage: React.FunctionComponent = props => (
- +
Set goals
@@ -426,7 +426,7 @@ export const CodeInsightsPage: React.FunctionComponent = props => (
- +
Plan proactively
@@ -439,7 +439,7 @@ export const CodeInsightsPage: React.FunctionComponent = props => (
- +
{'Track ownership & trends'}
@@ -448,7 +448,7 @@ export const CodeInsightsPage: React.FunctionComponent = props => (
- +
Celebrate progress
@@ -478,7 +478,7 @@ export const CodeInsightsPage: React.FunctionComponent = props => ( {/* Use Cases */} -
+

Popular Code Insights templates

@@ -532,7 +532,7 @@ export const CodeInsightsPage: React.FunctionComponent = props => (
{/* Use Cases Carousel */} -
+

Popular Code Insights templates

@@ -577,7 +577,7 @@ export const CodeInsightsPage: React.FunctionComponent = props => (
-
+
diff --git a/website/src/pages/fixing-vulnerabilities.tsx b/website/src/pages/fixing-vulnerabilities.tsx index d7c94efb524..cbc781af622 100644 --- a/website/src/pages/fixing-vulnerabilities.tsx +++ b/website/src/pages/fixing-vulnerabilities.tsx @@ -56,7 +56,7 @@ const FixingVulnerabilities: FunctionComponent = props => {
-
+

Cloudflare proves to auditors that its code isn't vulnerable diff --git a/website/src/pages/get-started/getStarted.module.scss b/website/src/pages/get-started/getStarted.module.scss index 44390c9b572..3c8b5ea0692 100644 --- a/website/src/pages/get-started/getStarted.module.scss +++ b/website/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; } diff --git a/website/src/pages/get-started/self-hosted.tsx b/website/src/pages/get-started/self-hosted.tsx index 2df36d81871..e73ef75629a 100644 --- a/website/src/pages/get-started/self-hosted.tsx +++ b/website/src/pages/get-started/self-hosted.tsx @@ -29,7 +29,7 @@ export const SelfHostedPage: FunctionComponent = props => ( heroAndHeaderClassName={styles.hero} hideGetStartedButton={true} > -
+
diff --git a/website/src/pages/guides/continuous-developer-onboarding/index.module.scss b/website/src/pages/guides/continuous-developer-onboarding/index.module.scss index 04619e78617..7ddca39bfba 100644 --- a/website/src/pages/guides/continuous-developer-onboarding/index.module.scss +++ b/website/src/pages/guides/continuous-developer-onboarding/index.module.scss @@ -13,5 +13,5 @@ } .formContainer { - background: $wild-sand; + background: $light-gray-5; } diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx index 656583283f7..8be1990060a 100644 --- a/website/src/pages/index.tsx +++ b/website/src/pages/index.tsx @@ -1,16 +1,26 @@ -import { Link } from 'gatsby' +import React, { FunctionComponent } from 'react' + +import { Link, PageProps } from 'gatsby' + import ArrowRightBoxIcon from 'mdi-react/ArrowRightBoxIcon' import ArrowRightIcon from 'mdi-react/ArrowRightIcon' -import * as React from 'react' + +import Layout from '../components/Layout' import { ContentSection } from '../components/content/ContentSection' import { IntegrationsSection } from '../components/IntegrationsSection' -import Layout from '../components/Layout' import { CustomerLogosSectionAnimated } from '../components/product/CustomerLogosSectionAnimated' import { SelfHostedSection } from '../components/SelfHostedSection' import { buttonStyle, buttonLocation } from '../tracking' -const Index: React.FunctionComponent = (props: any) => ( - +const Index: FunctionComponent = props => ( +
diff --git a/website/src/pages/jobs.tsx b/website/src/pages/jobs.tsx index bbd6d09ac1b..aa5d83c8c2c 100644 --- a/website/src/pages/jobs.tsx +++ b/website/src/pages/jobs.tsx @@ -58,7 +58,7 @@ const CareersPage = props => {
-

Let’s build the future together.

+

Let's build the future together.

We're developing the world's most advanced code search navigation platform with brilliant dreamers around the globe. @@ -88,7 +88,7 @@ const CareersPage = props => { Happy, healthy, and always in the flow.

- 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.

@@ -154,11 +154,11 @@ const CareersPage = props => {

- +

- Just because we’re remote doesn’t mean we’re apart
+ Just because we're remote doesn't mean we're apart
#life-at-sourcegraph

@@ -167,11 +167,11 @@ const CareersPage = props => {
- +

- We’re moving fast to create a world in which everyone can code + We're moving fast to create a world in which everyone can code

@@ -179,7 +179,7 @@ const CareersPage = props => {
- +

@@ -192,7 +192,7 @@ const CareersPage = props => {

- +

@@ -205,7 +205,7 @@ const CareersPage = props => {

- +

Creating the next generation of Sourcegraph coders, one baby at a time

@@ -311,7 +311,7 @@ const CareersPage = props => { -
+
diff --git a/website/src/pages/use-cases/onboarding.tsx b/website/src/pages/use-cases/onboarding.tsx index 5affb9736bb..da9666d6410 100644 --- a/website/src/pages/use-cases/onboarding.tsx +++ b/website/src/pages/use-cases/onboarding.tsx @@ -176,7 +176,7 @@ const UseCasePage: FunctionComponent = props => (
- +

Find answers across all repositories

Codebases grow increasingly complex over time. Sourcegraph enables developers to search @@ -184,7 +184,7 @@ const UseCasePage: FunctionComponent = props => (

- +

Share knowledge quickly with links to specific code

Knowledge sharing takes time. With Sourcegraph, developers can share links directly to @@ -192,7 +192,7 @@ const UseCasePage: FunctionComponent = props => (

- +

Navigate and understand large codebases

Make new codebases approachable, not aggravating. Search across all your repositories in one @@ -203,7 +203,7 @@ const UseCasePage: FunctionComponent = props => (

-
+
@@ -253,7 +253,7 @@ const UseCasePage: FunctionComponent = props => (
-
+
= props => (
-
+
diff --git a/website/src/pages/use-cases/useCases.module.scss b/website/src/pages/use-cases/useCases.module.scss index 5b613049df4..a99839313ae 100644 --- a/website/src/pages/use-cases/useCases.module.scss +++ b/website/src/pages/use-cases/useCases.module.scss @@ -1,5 +1,4 @@ @import '@styles/colors'; -@import '@styles/gradients'; .header-and-hero { background: url('/customers-page-bg.svg') no-repeat; @@ -10,7 +9,7 @@ position: relative; background-image: url('/code-insights/code-insights-page-bg.svg'), // Fallback while the SVGs are loading - radial-gradient(ellipse at bottom left, rgba($light-green2, 0.5), transparent); + radial-gradient(ellipse at bottom left, rgba($green-mist, 0.5), transparent); background-repeat: no-repeat; background-size: cover; } diff --git a/website/src/pages/use-cases/vulnerabilities.tsx b/website/src/pages/use-cases/vulnerabilities.tsx index d99370e7ca3..493781ffc4d 100644 --- a/website/src/pages/use-cases/vulnerabilities.tsx +++ b/website/src/pages/use-cases/vulnerabilities.tsx @@ -219,7 +219,7 @@ const UseCasePage: FunctionComponent = props => (
- +

Reduce time to discovery and resolution

Find every instance of a vulnerability and start remediating in minutes instead of days or @@ -227,7 +227,7 @@ const UseCasePage: FunctionComponent = props => (

- +

Automate fixing, merging, and deploying fixes

Automate PRs to fix vulnerabilities across your entire codebase so you can be 100% confident @@ -235,7 +235,7 @@ const UseCasePage: FunctionComponent = props => (

- +

Alert for risky code changes & known vulnerabilities

Get on top of vulnerabilities by monitoring your repositories for commits when risky @@ -246,7 +246,7 @@ const UseCasePage: FunctionComponent = props => (

-
+
@@ -307,13 +307,13 @@ const UseCasePage: FunctionComponent = props => (
-
+
-
+