fix(ui): Remove uses of Orange #29360

vuluongj20 · 2021-10-15T20:07:08Z

Orange is no longer an accent color in the official design system. It should be replaced with Pink or Yellow, depending on the context. Note: this does not include the color orange in chartPalette -- that's a different palette where orange is still useful for differentiation.

See comments below for before/after screenshots.

Orange is no longer an accent color in the official design system. It should be replaced with Pink or Yellow, depending on the context.

vuluongj20 · 2021-10-15T20:07:43Z

static/app/components/charts/worldMapChart.tsx

          borderColor: theme.backgroundSecondary,
          emphasis: {
-            areaColor: theme.orange300,
+            areaColor: theme.pink300,


This looks good to me. 👍

vuluongj20 · 2021-10-15T20:08:11Z

static/app/components/events/errorLevel.tsx

 function getLevelColor({level = '', theme}) {
  const COLORS = {
-    error: theme.orange400,
+    error: theme.pink300,


vuluongj20 · 2021-10-15T20:09:13Z

static/app/components/events/errorLevel.tsx

+    error: theme.pink300,
    info: theme.blue300,
-    warning: theme.orange300,
+    warning: theme.yellow300,


Yellow means "warning". This is more inline with the error level indicator in the Issues Index page, which uses yellow for "warning".

github-actions · 2021-10-15T20:09:58Z

size-limit report

Path	Base Size (f87c691)	Current Size	Change
src/sentry/static/sentry/dist/entrypoints/app.js	52.75 KB	52.73 KB	-0.04% 🔽
src/sentry/static/sentry/dist/entrypoints/sentry.css	70.89 KB	70.89 KB	0%

vuluongj20 · 2021-10-15T20:11:08Z

static/app/components/events/errorLevel.tsx

  };

-  return `background-color: ${COLORS[level] || theme.orange400};`;
+  return `background-color: ${COLORS[level] || theme.pink300};`;


Default status is error, which has been updated to Pink 300.

vuluongj20 · 2021-10-15T20:11:30Z

static/app/components/events/interfaces/breadcrumbs/utils.tsx

    case BreadcrumbType.WARNING:
      return {
-        color: 'orange400',
+        color: 'yellow300',


vuluongj20 · 2021-10-15T20:11:42Z

static/app/components/events/interfaces/breadcrumbs/utils.tsx

    case BreadcrumbType.SESSION:
      return {
-        color: 'orange300',
+        color: 'pink300',


vuluongj20 · 2021-10-15T20:12:10Z

static/app/components/events/interfaces/frame/line.tsx

-  border-color: ${p => p.theme.orange500};
-  color: ${p => p.theme.orange500};
+  border-color: ${p => p.theme.pink200};
+  color: ${p => p.theme.pink300};


vuluongj20 · 2021-10-15T20:12:22Z

static/app/components/events/interfaces/frame/lineV2/default.tsx

-  border-color: ${p => p.theme.orange500};
-  color: ${p => p.theme.orange500};
+  border-color: ${p => p.theme.pink200};
+  color: ${p => p.theme.pink300};


vuluongj20 · 2021-10-15T20:12:46Z

static/app/components/group/suggestedOwnerHovercard.tsx

  path: theme.purple300,
  tag: theme.blue300,
-  codeowners: theme.orange300,
+  codeowners: theme.pink300,


vuluongj20 · 2021-10-15T20:13:22Z

static/app/components/onboardingWizard/task.tsx

  font-size: ${p => p.theme.fontSizeMedium};
  font-weight: bold;
-  color: ${p => p.theme.orange400};
+  color: ${p => p.theme.pink300};


vuluongj20 · 2021-10-15T20:14:03Z

static/app/components/onboardingWizard/taskConfig.tsx

  flex-grow: 1;
  font-size: ${p => p.theme.fontSizeMedium};
-  color: ${p => p.theme.orange400};
+  color: ${p => p.theme.pink300};


vuluongj20 · 2021-10-15T20:14:25Z

static/app/components/onboardingWizard/task.tsx

      })}
    >
-      <IconLock color="orange400" />
+      <IconLock color="pink300" />


vuluongj20 · 2021-10-15T20:15:08Z

static/app/components/onboardingWizard/task.tsx

 SkippedIndicator.defaultProps = {
  isCircled: true,
-  color: 'orange400',
+  color: 'pink300',


vuluongj20 · 2021-10-15T20:15:35Z

static/app/components/searchSyntax/renderer.tsx

  border-right: none;
  margin: -1px 0;
-  color: ${p => p.theme.orange400};
+  color: ${p => p.theme.pink300};


vuluongj20 · 2021-10-15T20:15:49Z

static/app/components/searchSyntax/renderer.tsx

      position: absolute;
      top: -5px;
-      color: ${p => p.theme.orange400};
+      color: ${p => p.theme.pink300};


vuluongj20 · 2021-10-15T20:16:15Z

static/app/styles/pulsingIndicator.tsx

    top: -46px;
    left: -46px;
-    border: 4px solid ${p.theme.orange300};
+    border: 4px solid ${p.theme.pink200};


vuluongj20 · 2021-10-15T20:19:35Z

static/app/utils/theme.tsx

  alpha: {
    background: `linear-gradient(90deg, ${colors.pink300}, ${colors.yellow300})`,
-    indicatorColor: colors.orange400,
+    indicatorColor: colors.pink300,


vuluongj20 · 2021-10-15T20:20:31Z

static/app/utils/theme.tsx

-    background: colors.orange100,
-    iconColor: colors.orange400,
+    background: colors.pink100,
+    iconColor: colors.pink300,


vuluongj20 · 2021-10-15T20:21:10Z

static/app/views/organizationIntegrations/constants.tsx

  [INSTALLED]: 'success',
  [NOT_INSTALLED]: 'gray300',
-  [PENDING]: 'orange300',
+  [PENDING]: 'pink300',


vuluongj20 · 2021-10-15T20:22:08Z

static/app/views/settings/project/projectFilters/projectFiltersChart.tsx

 const STAT_OPS = {
  'browser-extensions': {title: t('Browser Extension'), color: theme.gray200},
-  cors: {title: 'CORS', color: theme.orange400},
+  cors: {title: 'CORS', color: theme.yellow300},


The CORS quantity in the graphs below.

vuluongj20 · 2021-10-15T20:22:27Z

static/app/views/settings/settingsIndex.tsx

              <HomePanelHeader>
                <ExternalHomeLink isCentered href={LINKS.DOCUMENTATION}>
-                  <HomeIcon color="orange400">
+                  <HomeIcon color="pink300">


priscilawebdev

left one suggestion, but it looks good to me

priscilawebdev · 2021-10-18T07:04:09Z

static/app/components/events/attachmentViewers/logFileViewer.tsx

  green: theme.green300,
-  yellowDim: theme.yellow300,
-  yellow: theme.orange300,
+  yellowDim: theme.pink200,


maybe we should add a todo here? I think it would be nice if we update the names on the backend too

Hardcoding the value of orange400 into the "error" issue level. We will still remove orange from the theme object and everywhere else in the app. This is necessary because we have used orange400 to convey this error level since almost the beginning of Sentry, so changing it to a different color could confuse existing users.

Fixing lint error: "Type 'undefined' cannot be used as an index type". Since `p.level` is potentially undefined, we should use a ternary operator to provide a default cause when it is and avoid the error.

fix(ui): Remove orange from theme

2973291

Orange is no longer an accent color in the official design system. It should be replaced with Pink or Yellow, depending on the context.

vuluongj20 requested a review from a team as a code owner October 15, 2021 20:07

vuluongj20 requested a review from a team October 15, 2021 20:07

vuluongj20 commented Oct 15, 2021

View reviewed changes

static/app/components/onboardingWizard/task.tsx

})}

>

<IconLock color="orange400" />

<IconLock color="pink300" />

Copy link

Contributor Author

vuluongj20 Oct 15, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

vuluongj20 commented Oct 15, 2021

View reviewed changes

vuluongj20 requested review from dashed, evanpurkhiser and priscilawebdev October 15, 2021 20:22

vuluongj20 changed the title ~~fix(ui): Remove orange from theme~~ fix(ui): Remove uses of Orange Oct 15, 2021

Merge branch 'master' into vuluong/remove-orange-color

b8713e7

vercel bot deployed to Preview – storybook October 15, 2021 20:24 View deployment

vercel bot deployed to Preview – sentry October 15, 2021 20:24 View deployment

priscilawebdev approved these changes Oct 18, 2021

View reviewed changes

dashed approved these changes Oct 19, 2021

View reviewed changes

Merge branch 'master' into vuluong/remove-orange-color

fb5aaeb

vercel bot deployed to Preview – sentry October 19, 2021 17:25 View deployment

vercel bot deployed to Preview – storybook October 19, 2021 17:25 View deployment

vercel bot deployed to Preview – sentry October 28, 2021 22:31 View deployment

vercel bot deployed to Preview – storybook October 28, 2021 22:31 View deployment

Merge branch 'master' into vuluong/remove-orange-color

4ff6b74

vercel bot deployed to Preview – storybook October 28, 2021 22:40 View deployment

vercel bot deployed to Preview – sentry October 28, 2021 22:40 View deployment

fix: lint error in errorLevel.tsx

d9df8c6

Fixing lint error: "Type 'undefined' cannot be used as an index type". Since `p.level` is potentially undefined, we should use a ternary operator to provide a default cause when it is and avoid the error.

vercel bot deployed to Preview – sentry October 28, 2021 22:59 View deployment

vercel bot deployed to Preview – storybook October 28, 2021 22:59 View deployment

vuluongj20 merged commit 7d91819 into master Oct 28, 2021

vuluongj20 deleted the vuluong/remove-orange-color branch October 28, 2021 23:34

github-actions bot locked and limited conversation to collaborators Nov 13, 2021

Uh oh!

fix(ui): Remove uses of Orange #29360

fix(ui): Remove uses of Orange #29360

Uh oh!

Conversation

vuluongj20 commented Oct 15, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

vuluongj20 Oct 15, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Oct 15, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

size-limit report

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

priscilawebdev left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

vuluongj20 commented Oct 15, 2021 •

edited

Loading

vuluongj20 Oct 15, 2021 •

edited

Loading

github-actions bot commented Oct 15, 2021 •

edited

Loading