added scss, moved style to style files

buggregator · Nov 29, 2021 · a9deade · a9deade
1 parent 1c8c6a0
commit a9deade
Show file tree

Hide file tree

Showing 68 changed files with 363,569 additions and 710 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,11 +18,13 @@
  "@tailwindcss/typography": "^0.3.0",
  "@vue/compiler-sfc": "^3.0.5",
  "axios": "^0.21",
- "fsevents": "^2.3.2",
  "laravel-mix": "^6.0.6",
  "lodash": "^4.17.19",
  "postcss": "^8.1.14",
  "postcss-import": "^12.0.1",
+ "resolve-url-loader": "^4.0.0",
+ "sass": "^1.43.5",
+ "sass-loader": "^12.3.0",
  "tailwindcss": "^2.0.1",
  "vue": "^3.0.5",
  "vue-loader": "^16.1.2"
@@ -46,5 +48,8 @@
  "xterm": "^4.14.1",
  "xterm-addon-fit": "^0.5.0",
  "ziggy-js": "^1.4.0"
+ },
+ "optionalDependencies": {
+ "fsevents": "^2.3.2"
  }
 }
diff --git a/public/css/app.css b/public/css/app.css
diff --git a/public/js/app.js b/public/js/app.js
diff --git a/public/mix-manifest.json b/public/mix-manifest.json
@@ -1,4 +1,4 @@
 {
- "/js/app.js": "/js/app.js?id=9e6165aa8ebbbc6addf3",
- "/css/app.css": "/css/app.css?id=4b26a4a540016cd897b8"
+ "/js/app.js": "/js/app.js",
+ "/css/app.css": "/css/app.css"
 }
diff --git a/resources/css/app.css b/resources/css/app.css
diff --git a/resources/css/components/left-sidebar.css b/resources/css/components/left-sidebar.css
diff --git a/resources/css/components/screens.css b/resources/css/components/screens.css
diff --git a/resources/css/components/smtp.css b/resources/css/components/smtp.css
diff --git a/resources/css/components/welcome-block.css b/resources/css/components/welcome-block.css
diff --git a/resources/js/Components/Event.vue b/resources/js/Components/Event.vue
@@ -19,7 +19,7 @@
  {{ event.app }}
  </Label>
 
- <div v-if="hasLabels" class="flex gap-2">
+ <div v-if="hasLabels" class="flex gap-2 flex-wrap">
  <Label v-for="label in labels" :color="event.color">
  {{ label }}
  </Label>

diff --git a/resources/js/Components/Layout/Colors.vue b/resources/js/Components/Layout/Colors.vue
@@ -1,6 +1,6 @@
 <template>
- <div class="flex flex-row flex-wrap items-center gap-2">
- <button v-if="hasSelectedColors" class="w-4 h-4 text-red-700 -ml-6" @click="clear">
+ <div class="filters__colors">
+ <button v-if="hasSelectedColors" class="filters__btn-clear" @click="clear">
  <svg xmlns="http:https://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><g id="close"><path id="x" d="M18.717 6.697l-1.414-1.414-5.303 5.303-5.303-5.303-1.414 1.414 5.303 5.303-5.303 5.303 1.414 1.414 5.303-5.303 5.303 5.303 1.414-1.414-5.303-5.303z"/></g></svg>
  </button>
  <div v-else class="w-4 h-4 -ml-6"></div>

diff --git a/resources/js/Components/Layout/Labels.vue b/resources/js/Components/Layout/Labels.vue
@@ -1,13 +1,13 @@
 <template>
- <section class="event-type-filters">
+ <div class="filters__label-list">
  <Label @click="toggleLabel(label)"
  v-for="label in labels"
- class="filter-label"
+ class="filters__label-item"
  :class="{'active': selectedLabels.includes(label)}"
  >
  {{ label }}
  </Label>
- </section>
+ </div>
 </template>
 
 <script>
@@ -32,7 +32,6 @@ export default {
  setup() {
  const store = useStore();
 
-
  const labels = computed(() => store.getters.availableLabels)
  const selectedLabels = computed(() => store.state.selectedLabels)
 

diff --git a/resources/js/Components/Layout/Main.vue b/resources/js/Components/Layout/Main.vue
@@ -1,13 +1,13 @@
 <template>
- <Head :title="title"/>
- <div class="flex h-screen items-stretch">
- <div class="w-10 md:w-14 lg:w-16 flex-none">
+ <Head :title="title"></Head>
+ <div class="main-layout">
+ <div class="main-layout__sidebar">
  <LeftSidebar class="w-10 md:w-14 lg:w-16 fixed h-screen">
  <slot name="left-sidebar"></slot>
  </LeftSidebar>
  </div>
 
- <div class="flex flex-col h-full flex-1" :class="classes">
+ <div class="main-layout__content" :class="classes">
  <slot></slot>
  </div>
  </div>

diff --git a/resources/js/Components/Layout/Screens.vue b/resources/js/Components/Layout/Screens.vue
@@ -1,23 +1,23 @@
 <template>
  <div class="screens">
- <h3 class="screen-title" v-if="currentScreen">
+ <h3 class="screens__title" v-if="currentScreen">
  <span class="text-xs">{{ currentScreen }}</span>
  </h3>
 
- <nav class="buttons">
+ <nav class="screens__nav">
  <template v-for="screen in screens">
- <WsConnectionIcon class="current" v-if="currentScreen == screen"/>
- <div v-else class="screen" @click="switchScreen(screen)">
+ <WsConnectionIcon class="screens__screen-current" v-if="currentScreen == screen"/>
+ <div v-else class="screens__screen" @click="switchScreen(screen)">
  <svg class="fill-current" xmlns="http:https://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill-rule="evenodd" clip-rule="evenodd" d="M4 0a4 4 0 0 0-4 4v12a4 4 0 0 0 4 4h12a4 4 0 0 0 4-4V4a4 4 0 0 0-4-4H4ZM2 4c0-1.1.9-2 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4Zm8 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"/></svg>
  </div>
  </template>
 
- <button @click="newScreen" class="new-screen">
+ <button @click="newScreen" class="screens__btn-new">
  <svg class="fill-current" xmlns="http:https://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 4a4 4 0 0 1 4-4h12a4 4 0 0 1 4 4v12a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4Zm4-2a2 2 0 0 0-2 2v12c0 1.1.9 2 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H4Zm6 2c.6 0 1 .4 1 1v4h4a1 1 0 1 1 0 2h-4v4a1 1 0 1 1-2 0v-4H5a1 1 0 1 1 0-2h4V5c0-.6.4-1 1-1Z" /></svg>
  </button>
  </nav>
 
- <button @click="clearEvents" class="clear-events">
+ <button @click="clearEvents" class="screens__btn-clear">
  Clear screen
  </button>
  </div>

diff --git a/resources/js/Components/Layout/Sidebar/Left.vue b/resources/js/Components/Layout/Sidebar/Left.vue
@@ -1,17 +1,18 @@
 <template>
  <section class="left-sidebar">
- <nav>
+ <nav class="left-sidebar__nav">
  <Link
  v-for="link in links"
  :href="link.href"
  :title="link.title"
  :class="{'active': isActive(link)}"
+ class="left-sidebar__link"
  >
  <span v-html="link.icon"></span>
  </Link>
  </nav>
 
- <div class="divide-y divide-gray-300">
+ <div class="left-sidebar__info">
  <WsConnectionIcon class="p-3 md:p-4 lg:p-5"/>
  <Logout />
  </div>

diff --git a/resources/js/Components/Layout/Sidebar/Logout.vue b/resources/js/Components/Layout/Sidebar/Logout.vue
@@ -1,6 +1,6 @@
 <template>
- <form v-if="isLoggedIn" :action="route('logout')" method="post">
- <button type="submit" title="Logout" class="block p-3 md:p-4 lg:p-5 hover:bg-blue-500 hover:text-white text-gray-500">
+ <form v-if="isLoggedIn" :action="route('logout')" method="post" class="logout">
+ <button type="submit" title="Logout" class="logout__btn-submit">
  <span>
  <svg class="fill-current w-full h-full" xmlns="http:https://www.w3.org/2000/svg" viewBox="0 0 24 22"><path d="M6 0a6 6 0 0 0-6 6v10a6 6 0 0 0 6 6h12a6 6 0 0 0 6-6v-.5a1 1 0 1 0-2 0v.5a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V6a4 4 0 0 1 4-4h12a4 4 0 0 1 4 4v.5a1 1 0 1 0 2 0V6a6 6 0 0 0-6-6H6Zm8.4 4.9a1 1 0 0 0-1.5.8v3c0 .6-.5 1-1 1H6.2a1.2 1.2 0 0 0 0 2.5H12c.5 0 1 .5 1 1v3a1 1 0 0 0 1.5 1l9.1-5.3a1 1 0 0 0 0-1.8L14.4 5Z"/></svg>
  </span>

diff --git a/resources/js/Components/Layout/Tips.vue b/resources/js/Components/Layout/Tips.vue
@@ -1,20 +1,20 @@
 <template>
- <div class="mt-6 p-6 bg-white dark:bg-gray-900 rounded-l text-muted border">
- <h3 class="text-xl font-bold mb-3">{{ name }} {{ version }}</h3>
- <ul class="flex flex-col space-y-2">
- <li class="flex space-x-3 items-center">
+ <div class="tips">
+ <h3 class="tips__title">{{ name }} {{ version }}</h3>
+ <ul class="tips__list">
+ <li class="tips__item">
  <svg width="25" height="25" viewBox="0 0 1024 1024" fill="none" xmlns="http:https://www.w3.org/2000/svg">
  <path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)" fill="#333"/>
  </svg>
- <a href="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/debugger-server/debugger" target="_blank" class="text-blue-600 dark:text-blue-200 underline">Github repository</a>
+ <a href="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/debugger-server/debugger" target="_blank" class="tips__link">Github repository</a>
  </li>
- <li class="flex space-x-3 items-center">
+ <li class="tips__item">
  <svg width="25" height="25" xmlns="http:https://www.w3.org/2000/svg" fill="#2563eb" viewBox="0 0 204.4 204.4"><path d="M110 48V0H33c-2 0-4 2-4 5v195c0 2 2 4 4 4h138c3 0 5-2 5-4V61h-52c-7 0-14-6-14-13zm-2 121H62v-10h46v10zm35-25H62v-10h81v10zm0-25H62v-10h81v10zm0-25H62V84h81v10zm-23-46V10l44 41h-40c-2 0-4-1-4-3z"/></svg>
- <span>Read the docs <a href="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/spatie/ray" target="_blank" class="text-blue-600 dark:text-blue-200 underline">spatie/ray</a></span>
+ <span>Read the docs <a href="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/spatie/ray" target="_blank" class="tips__link">spatie/ray</a></span>
  </li>
- <li class="flex space-x-3 items-center">
+ <li class="tips__item">
  <svg width="25" height="22" viewBox="0 0 256 230" xmlns="http:https://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet"><path d="M251.22 187.856c5.785 10.045 6.345 20.608 1.538 28.958-4.8 8.357-14.192 13.143-25.768 13.143h-21.816c.259-4.068.431-8.17.431-12.302 0-4.628-.215-9.198-.531-13.754l14.35-.014c3.528 0 6.38-2.867 6.38-6.403a6.46 6.46 0 0 0-.768-3.053l-91.46-158.97a6.349 6.349 0 0 0-5.54-3.24 6.374 6.374 0 0 0-5.461 3.09l-14.522 25.243c44.134 33.27 73.804 84.813 77.864 143.333.316 4.548.531 9.119.531 13.753 0 4.132-.172 8.228-.424 12.302h-71.246c.388-4.053.611-8.148.611-12.302 0-4.649-.273-9.233-.776-13.753-3.52-32.206-19.286-60.748-42.503-80.89l-10.003 17.376c17.54 16.325 29.512 38.558 32.767 63.514.59 4.505.92 9.09.92 13.753 0 4.154-.273 8.264-.74 12.302H29.01c-11.576 0-20.968-4.793-25.768-13.15-4.807-8.35-4.247-18.905 1.538-28.958l13.56-23.238a79.42 79.42 0 0 1 20.715 16.052l-8.083 13.768a6.523 6.523 0 0 0-.77 3.054 6.383 6.383 0 0 0 6.382 6.395l32.033.015c-2.687-15.356-9.772-29.21-19.918-40.183-5.979-6.445-12.963-11.9-20.738-16.074l35.77-62.15a151.427 151.427 0 0 1 21.564 14.624c30.827 25.013 51.644 61.955 55.416 103.776h19.172c-3.91-48.892-28.477-92.006-64.937-120.548a171.205 171.205 0 0 0-21.672-14.457l30.532-53.045C109.583 5.77 118.42 0 128.036 0c9.607 0 18.438 5.77 24.223 15.823l98.961 172.033z" fill="#FB2D26"/></svg>
- <span>Sentry DSN <a href="https://docs.sentry.io/product/sentry-basics/dsn-explainer/" target="_blank" class="text-blue-600 dark:text-blue-200 underline">{{ sentryDsn }}</a></span>
+ <span>Sentry DSN <a href="https://docs.sentry.io/product/sentry-basics/dsn-explainer/" target="_blank" class="tips__link">{{ sentryDsn }}</a></span>
  </li>
  </ul>
  </div>

diff --git a/resources/js/Components/Ray/Event.vue b/resources/js/Components/Ray/Event.vue
@@ -1,6 +1,6 @@
 <template>
- <Event :event="event">
- <div class="flex flex-col justify-items-stretch w-full divide-y">
+ <Event :event="event" class="event--ray event-ray">
+ <div class="event-ray__wrap">
  <EventPayload
  v-for="payload in event.payloads"
  :payload="payload"

diff --git a/resources/js/Components/Ray/Origin.vue b/resources/js/Components/Ray/Origin.vue
@@ -1,7 +1,7 @@
 <template>
- <div class="flex space-x-4 items-center">
- <Host v-if="origin.hostname" :name="origin.hostname" />
- <span class="text-muted underline text-2xs cursor-help" :title="`${origin.file}:${origin.line_number}`">
+ <div class="event-footer">
+ <Host v-if="origin.hostname" :name="origin.hostname" class="event-footer__host"/>
+ <span class="event-footer__name" :title="`${origin.file}:${origin.line_number}`">
  {{ filename }}:{{ origin.line_number }}
  </span>
  </div>

diff --git a/resources/js/Components/Ray/Payload.vue b/resources/js/Components/Ray/Payload.vue
@@ -1,12 +1,12 @@
 <template>
-  <component
-  class="flex-grow"
-  :is="component"
-  :payload="payload"
-  :disabled="disabled"
-  v-on:disable="$emit('disable')"
-  v-on:delete="deleteEvent"
-  ></component>
+ <component
+ class="flex-grow"
+ :is="component"
+ :payload="payload"
+ :disabled="disabled"
+ v-on:disable="$emit('disable')"
+ v-on:delete="deleteEvent"
+ ></component>
 </template>
 
 <script>

diff --git a/resources/js/Components/Ray/Payloads/ApplicationLog.vue b/resources/js/Components/Ray/Payloads/ApplicationLog.vue
@@ -1,5 +1,5 @@
 <template>
- <CodeSnippet>
+ <CodeSnippet class="event-ray__application">
  {{ payload.content.value }}
  </CodeSnippet>
 </template>