Browse Source

ref(panels): Remove box shadow (#49482)

There's not really a compelling reason why panels need to have a box
shadow. The borders are enough for marking boundaries. We should reserve
box shadows for overlays and interactive elements (buttons, inputs,…).

**Before ——**
<img width="543" alt="image"
src="https://github.com/getsentry/sentry/assets/44172267/0c3c1581-3204-4bf6-b4e5-377da95230d6">

**After ——**
<img width="543" alt="image"
src="https://github.com/getsentry/sentry/assets/44172267/9836c189-920e-41bb-9e86-1b52e86b814c">
Vu Luong 1 year ago
parent
commit
a4bcc1a235

+ 0 - 1
static/app/components/groupPreviewTooltip/stackTracePreview.tsx

@@ -234,7 +234,6 @@ const StackTracePreviewWrapper = styled('div')`
   .traceback {
     margin-bottom: 0;
     border: 0;
-    box-shadow: none;
   }
 `;
 

+ 0 - 1
static/app/components/panels/panel.tsx

@@ -22,7 +22,6 @@ const Panel = styled(
   border-radius: ${p => p.theme.panelBorderRadius};
   border: 1px
     ${p => (p.dashedBorder ? 'dashed' + p.theme.gray300 : 'solid ' + p.theme.border)};
-  box-shadow: ${p => (p.dashedBorder ? 'none' : p.theme.dropShadowMedium)};
   margin-bottom: ${space(2)};
   position: relative;
 `;

+ 0 - 1
static/app/views/discover/table/quickContext/eventContext.tsx

@@ -184,7 +184,6 @@ const StackTraceWrapper = styled('div')`
   .traceback {
     margin-bottom: 0;
     border: 0;
-    box-shadow: none;
   }
   border-radius: ${p => p.theme.borderRadius};
 `;

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

@@ -216,7 +216,6 @@
   padding-left: 0;
   border: 1px solid @trim-dark;
   border-radius: 0 6px 6px 6px;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
   margin-bottom: 20px;
 }
 

+ 1 - 1
static/less/layout.less

@@ -115,7 +115,7 @@ body.auth {
 
   .box {
     border: 0;
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
     border-radius: 4px;
     display: flex;
     width: 100%;

+ 0 - 1
static/less/shared-components.less

@@ -520,7 +520,6 @@ table.table.key-value {
   border: 1px solid @trim;
   border-radius: 3px;
   margin: 0 0 20px;
-  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03);
 
   .box-header {
     background: @white-dark;

+ 0 - 1
static/less/stream.less

@@ -7,7 +7,6 @@
   background: #fff;
   border: 1px solid @trim;
   border-top: 1px solid @trim;
-  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03);
   border-radius: 0 0 5px 5px;
 }