Browse Source

fix(ui):stacktrace dark mode styles (#43813)

## Before
<img width="1065" alt="CleanShot 2023-01-27 at 15 29 28@2x"
src="https://user-images.githubusercontent.com/1900676/215224906-30baa907-a2da-4c01-94dd-6e960dfc05a5.png">


## After

<img width="664" alt="CleanShot 2023-01-27 at 15 23 11@2x"
src="https://user-images.githubusercontent.com/1900676/215224661-650ebff0-be3d-4dd7-b72c-f52bf3de684b.png">
Robin Rendle 2 years ago
parent
commit
14bb9f761c

+ 2 - 1
static/app/components/events/interfaces/frame/context.tsx

@@ -313,7 +313,8 @@ const StyledContextLine = styled(ContextLine)`
   }
 
   &.active {
-    background-color: ${p => p.theme.gray400};
+    background: ${p => p.theme.stacktraceActiveBackground};
+    color: ${p => p.theme.stacktraceActiveText};
   }
 
   &.active.partial:before {

+ 0 - 4
static/app/styles/global.tsx

@@ -141,10 +141,6 @@ const styles = (theme: Theme, isDark: boolean) => css`
         .traceback {
           border-color: ${theme.border};
 
-          ol.context > li {
-            color: ${theme.subText};
-          }
-
           &.in-app-traceback {
             .frame {
               &.leads-to-app {

+ 4 - 0
static/app/utils/theme.tsx

@@ -914,6 +914,8 @@ export const lightTheme = {
   button: generateButtonTheme(lightColors, lightAliases),
   tag: generateTagTheme(lightColors),
   level: generateLevelTheme(lightColors),
+  stacktraceActiveBackground: lightColors.gray500,
+  stacktraceActiveText: lightColors.white,
   prismVariables: generatePrismVariables(prismLight, lightAliases.backgroundSecondary),
   prismDarkVariables: generatePrismVariables(prismDark, darkAliases.backgroundElevated),
   sidebar: {
@@ -941,6 +943,8 @@ export const darkTheme: Theme = {
   level: generateLevelTheme(darkColors),
   prismVariables: generatePrismVariables(prismDark, darkAliases.backgroundSecondary),
   prismDarkVariables: generatePrismVariables(prismDark, darkAliases.backgroundSecondary),
+  stacktraceActiveBackground: darkColors.gray200,
+  stacktraceActiveText: darkColors.white,
   sidebar: {
     ...commonTheme.sidebar,
     background: sidebarBackground.dark,

+ 0 - 2
static/less/group-detail.less

@@ -658,7 +658,6 @@ div.traceback > ul {
 
     > li {
       font-family: @font-family-code;
-      color: #222;
       line-height: 24px;
       font-size: 12px;
       white-space: pre;
@@ -702,7 +701,6 @@ div.traceback > ul {
       > li.active {
         position: relative;
         z-index: 0;
-        color: #fff;
         list-style-type: inherit;
         border-radius: 0;
       }