Merge pull request #101 from buggregator/improve/light-theme-colors

bugfixes for ligth theme

Author: Kreezag

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;
+}

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>

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 {

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 {

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 = {

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 = {

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";
 

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 = {

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>