From 15a4c903ba35b36113c73022cec52ead34c117b1 Mon Sep 17 00:00:00 2001
From: Kuchuk Andrey <kreezag@gmail.com>
Date: Sun, 10 Dec 2023 15:05:16 +0400
Subject: [PATCH 1/2] add mixin to use common code styles

---
 assets/mixins.scss                                           | 4 ++++
 .../ray/ui/ray-application-log/ray-application-log.vue       | 5 ++++-
 src/entities/sentry/ui/preview-card/preview-card.vue         | 4 ++--
 .../sentry/ui/sentry-exception/sentry-exception-frame.vue    | 3 ++-
 src/shared/ui/value-dump/value-dump.vue                      | 5 ++++-
 5 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/assets/mixins.scss b/assets/mixins.scss
index ac624609..d4a66119 100644
--- a/assets/mixins.scss
+++ b/assets/mixins.scss
@@ -95,3 +95,7 @@
       transform: translate(24px, 0);
     }
 }
+
+@mixin code-example {
+  @apply text-white border bg-gray-800 p-2 border-gray-300 dark:border-gray-600;
+}
diff --git a/src/entities/ray/ui/ray-application-log/ray-application-log.vue b/src/entities/ray/ui/ray-application-log/ray-application-log.vue
index 2ef5afd6..92904ecf 100644
--- a/src/entities/ray/ui/ray-application-log/ray-application-log.vue
+++ b/src/entities/ray/ui/ray-application-log/ray-application-log.vue
@@ -13,7 +13,10 @@ defineProps<Props>();
 </template>
 
 <style lang="scss" scoped>
+@import "assets/mixins";
+
 .ray-application-log {
-  @apply p-3 border border-gray-300 dark:border-gray-600 bg-gray-800 flex w-full overflow-auto;
+  @include code-example();
+  @apply flex w-full overflow-auto;
 }
 </style>
diff --git a/src/entities/sentry/ui/preview-card/preview-card.vue b/src/entities/sentry/ui/preview-card/preview-card.vue
index 4c978947..30c7471a 100644
--- a/src/entities/sentry/ui/preview-card/preview-card.vue
+++ b/src/entities/sentry/ui/preview-card/preview-card.vue
@@ -77,8 +77,8 @@ const exception: Ref<Exception> = computed(() =>
 }
 
 .preview-card__text {
-  @include text-muted;
-  @apply text-sm break-all mb-3 p-3 dark:bg-gray-800 overflow-auto;
+  @include code-example();
+  @apply text-sm break-all mb-3 overflow-auto text-opacity-60;
 }
 
 .preview-card__frames {
diff --git a/src/entities/sentry/ui/sentry-exception/sentry-exception-frame.vue b/src/entities/sentry/ui/sentry-exception/sentry-exception-frame.vue
index 9e574867..7c1580e8 100644
--- a/src/entities/sentry/ui/sentry-exception/sentry-exception-frame.vue
+++ b/src/entities/sentry/ui/sentry-exception/sentry-exception-frame.vue
@@ -132,7 +132,8 @@ const toggleOpen = () => {
 }
 
 .sentry-exception-frame__body {
-  @apply bg-gray-900 p-2 overflow-x-scroll;
+  @include code-example();
+  @apply overflow-x-scroll;
 }
 
 .sentry-exception-frame__body-line {
diff --git a/src/shared/ui/value-dump/value-dump.vue b/src/shared/ui/value-dump/value-dump.vue
index a3f8d080..5260edce 100644
--- a/src/shared/ui/value-dump/value-dump.vue
+++ b/src/shared/ui/value-dump/value-dump.vue
@@ -55,11 +55,14 @@ onMounted(() => {
 </template>
 
 <style lang="scss" scoped>
+@import "assets/mixins";
+
 .value-dump {
   display: block;
 }
 
 .value-dump__html {
-  @apply border-gray-300 dark:border-gray-600 divide-gray-300 dark:divide-gray-600 font-mono py-2 px-2 md:px-3 lg:px-4 border bg-gray-900 text-white break-all text-2xs sm:text-xs md:text-sm lg:text-base;
+  @include code-example();
+  @apply divide-gray-300 dark:divide-gray-600 font-mono md:px-3 lg:px-4 break-all text-2xs sm:text-xs md:text-sm lg:text-base;
 }
 </style>

From 059048ccb2879e4ca73f68c8a4afb1fbc0aabc35 Mon Sep 17 00:00:00 2001
From: Kuchuk Andrey <kreezag@gmail.com>
Date: Sun, 10 Dec 2023 15:05:58 +0400
Subject: [PATCH 2/2] fix open sentry event page error

---
 src/screens/sentry/ui/sentry-page-app/sentry-page-app.vue       | 2 +-
 .../ui/sentry-page-breadcrumbs/sentry-page-breadcrumbs.vue      | 2 +-
 src/screens/sentry/ui/sentry-page-device/sentry-page-device.vue | 2 +-
 .../sentry/ui/sentry-page-request/sentry-page-request.vue       | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/screens/sentry/ui/sentry-page-app/sentry-page-app.vue b/src/screens/sentry/ui/sentry-page-app/sentry-page-app.vue
index 22e7e392..9c6fad2e 100644
--- a/src/screens/sentry/ui/sentry-page-app/sentry-page-app.vue
+++ b/src/screens/sentry/ui/sentry-page-app/sentry-page-app.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { SentryContextApp } from "~/src/entities/sentry/types";
+import type { SentryContextApp } from "~/src/entities/sentry/types";
 import { TableBaseRow, TableBase, CodeSnippet } from "~/src/shared/ui";
 
 type Props = {
diff --git a/src/screens/sentry/ui/sentry-page-breadcrumbs/sentry-page-breadcrumbs.vue b/src/screens/sentry/ui/sentry-page-breadcrumbs/sentry-page-breadcrumbs.vue
index 1de620c2..6a1c5f30 100644
--- a/src/screens/sentry/ui/sentry-page-breadcrumbs/sentry-page-breadcrumbs.vue
+++ b/src/screens/sentry/ui/sentry-page-breadcrumbs/sentry-page-breadcrumbs.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import moment from "moment";
-import { SentryBreadcrumb } from "~/src/entities/sentry/types";
+import type { SentryBreadcrumb } from "~/src/entities/sentry/types";
 import { CodeSnippet } from "~/src/shared/ui";
 
 type Props = {
diff --git a/src/screens/sentry/ui/sentry-page-device/sentry-page-device.vue b/src/screens/sentry/ui/sentry-page-device/sentry-page-device.vue
index 8f9d08a3..7910eb22 100644
--- a/src/screens/sentry/ui/sentry-page-device/sentry-page-device.vue
+++ b/src/screens/sentry/ui/sentry-page-device/sentry-page-device.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import moment from "moment";
-import { SentryDevice } from "~/src/entities/sentry/types";
+import type { SentryDevice } from "~/src/entities/sentry/types";
 import { useFormats } from "~/src/shared/lib/formats";
 import { TableBase, TableBaseRow, CodeSnippet } from "~/src/shared/ui";
 
diff --git a/src/screens/sentry/ui/sentry-page-request/sentry-page-request.vue b/src/screens/sentry/ui/sentry-page-request/sentry-page-request.vue
index 8cd726fb..a2a937e7 100644
--- a/src/screens/sentry/ui/sentry-page-request/sentry-page-request.vue
+++ b/src/screens/sentry/ui/sentry-page-request/sentry-page-request.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { SentryRequest } from "~/src/entities/sentry/types";
+import type { SentryRequest } from "~/src/entities/sentry/types";
 import { TableBase, TableBaseRow } from "~/src/shared/ui";
 
 type Props = {