Merge pull request #72 from buggregator/hotfix/66

Fixes problem with desktop preview of SMTP mail

Author: butschster

assets/mixins.scss

@@ -16,7 +16,7 @@
 }
 
 @mixin layout-body {
-  @apply flex flex-col flex-1 pt-12;
+  @apply flex flex-col flex-1 pt-12 h-full;
 }
 
 @mixin text-muted {

src/screens/smtp/ui/smtp-page/smtp-page.vue

@@ -187,7 +187,7 @@ const attachments = computed(() =>
 @import "assets/mixins";
 
 .smtp-page {
-  @apply relative flex-1 flex flex-col;
+  @apply relative flex-1 flex flex-col h-full;
 }
 
 .smtp-page__main {

src/shared/ui/icon-svg/icon-svg-originals/discord.svg

@@ -56,6 +56,14 @@ const props = defineProps<Props>();
       />
     </svg>
 
+    <svg v-else-if="name === 'discord'"
+         viewBox="0 -28.5 256 256" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid">
+      <path
+        d="M216.856 16.597A208.502 208.502 0 0 0 164.042 0c-2.275 4.113-4.933 9.645-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.809 207.809 0 0 0-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.094 161.094 0 0 0 79.735 175.3a136.413 136.413 0 0 1-21.846-10.632 108.636 108.636 0 0 0 5.356-4.237c42.122 19.702 87.89 19.702 129.51 0a131.66 131.66 0 0 0 5.355 4.237 136.07 136.07 0 0 1-21.886 10.653c4.006 8.02 8.638 15.67 13.873 22.848 21.142-6.58 42.646-16.637 64.815-33.213 5.316-56.288-9.08-105.09-38.056-148.36ZM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18Zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18Z"
+        />
+    </svg>
+
+
     <svg
       v-else-if="name === 'heartBeat'"
       xmlns="http://www.w3.org/2000/svg"
@@ -73,19 +81,19 @@ const props = defineProps<Props>();
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 489.8 489.8"
     >
-      <circle cx="245" cy="453.9" r="26.8" />
-      <circle cx="422.8" cy="453.9" r="26.8" />
-      <circle cx="67" cy="453.9" r="26.8" />
+      <circle cx="245" cy="453.9" r="26.8"/>
+      <circle cx="422.8" cy="453.9" r="26.8"/>
+      <circle cx="67" cy="453.9" r="26.8"/>
       <path
         d="M443 31c0-17-14-31-31-31H78C61 0 47 14 47 31v69c0 8 4 15 9 21-5 6-9 13-9 21v70c0 8 4 15 9 21-5 5-9 13-9 21v69c0 17 14 31 31 31h334c17 0 31-14 31-31v-69c0-8-3-16-9-21 6-6 9-13 9-22v-69c0-8-3-16-9-21 6-6 9-13 9-21V31zM65 31c0-7 6-13 12-13h335c7 0 13 6 13 13v69c0 6-6 12-13 12H78c-7 0-13-5-13-12V31zm360 111v70c0 6-6 12-13 12H78c-7 0-13-6-13-12v-70c0-6 6-12 13-12h334c7 0 13 6 13 12zm0 181c0 7-6 13-13 13H78c-7 0-13-6-13-13v-69c0-7 6-12 13-12h334c7 0 13 5 13 12v69z"
       />
-      <path d="M241 74h113c5 0 9-4 9-9s-4-9-9-9H241c-5 0-9 4-9 9s4 9 9 9z" />
-      <circle cx="148.8" cy="65.1" r="10.8" />
+      <path d="M241 74h113c5 0 9-4 9-9s-4-9-9-9H241c-5 0-9 4-9 9s4 9 9 9z"/>
+      <circle cx="148.8" cy="65.1" r="10.8"/>
       <path
         d="M241 186h113c5 0 9-4 9-9s-4-9-9-9H241c-5 0-9 4-9 9s4 9 9 9zM354 280H241c-5 0-9 4-9 9s4 9 9 9h113c5 0 9-4 9-9s-4-9-9-9z"
       />
-      <circle cx="148.8" cy="177" r="10.8" />
-      <circle cx="148.8" cy="288.9" r="10.8" />
+      <circle cx="148.8" cy="177" r="10.8"/>
+      <circle cx="148.8" cy="288.9" r="10.8"/>
       <path
         d="M423 418c-17 0-31 11-35 27H280c-4-13-13-22-26-26v-28c0-5-4-9-9-9s-9 4-9 9v28c-13 3-22 13-26 26H102a36 36 0 100 18h108a36 36 0 0070 0h108a36 36 0 1035-45zM67 472a18 18 0 010-36 18 18 0 010 36zm178 0a18 18 0 010-36 18 18 0 010 36zm178 0a18 18 0 010-36 18 18 0 010 36z"
       />
@@ -151,7 +159,7 @@ const props = defineProps<Props>();
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 12 12"
     >
-      <path d="M12 6c0 .6-.4 1-1 1H1a1 1 0 0 1 0-2h10c.6 0 1 .4 1 1Z" />
+      <path d="M12 6c0 .6-.4 1-1 1H1a1 1 0 0 1 0-2h10c.6 0 1 .4 1 1Z"/>
     </svg>
 
     <svg
@@ -171,8 +179,8 @@ const props = defineProps<Props>();
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 12 12"
     >
-      <path d="M6 0c.6 0 1 .4 1 1v10a1 1 0 1 1-2 0V1c0-.6.4-1 1-1Z" />
-      <path d="M12 6c0 .6-.4 1-1 1H1a1 1 0 0 1 0-2h10c.6 0 1 .4 1 1Z" />
+      <path d="M6 0c.6 0 1 .4 1 1v10a1 1 0 1 1-2 0V1c0-.6.4-1 1-1Z"/>
+      <path d="M12 6c0 .6-.4 1-1 1H1a1 1 0 0 1 0-2h10c.6 0 1 .4 1 1Z"/>
     </svg>
 
     <svg
@@ -354,7 +362,7 @@ const props = defineProps<Props>();
           y2="30"
           gradientUnits="userSpaceOnUse"
         >
-          <stop class="transition-all duration-200" stop-color="#FACC15" />
+          <stop class="transition-all duration-200" stop-color="#FACC15"/>
           <stop
             class="transition-all duration-200"
             offset="1"
@@ -385,7 +393,7 @@ const props = defineProps<Props>();
       <path
         d="M128 406c4 0 8-4 8-8V124a8 8 0 0 0-15 0v274c0 4 3 8 7 8zM384 264c-4 0-7 3-7 7v204c0 12-11 22-23 22H158c-12 0-22-10-22-22v-47a8 8 0 0 0-15 0v47c0 20 16 37 37 37h196c21 0 38-17 38-37V271c0-4-4-7-8-7zM354 0H158c-21 0-37 17-37 38v56a8 8 0 0 0 15 0V38c0-13 10-23 22-23h31c8 15 24 25 41 25h52c17 0 33-10 41-25h31c12 0 23 10 23 23v203a8 8 0 0 0 15 0V38c0-21-17-38-38-38zm-72 25h-52c-9 0-17-4-23-10h98c-6 6-14 10-23 10z"
       />
-      <path d="M287 478a8 8 0 0 0 0-15h-62a8 8 0 0 0 0 15h62z" />
+      <path d="M287 478a8 8 0 0 0 0-15h-62a8 8 0 0 0 0 15h62z"/>
     </svg>
 
     <svg
@@ -399,7 +407,7 @@ const props = defineProps<Props>();
       <path
         d="M90 61v284a8 8 0 0 0 15 0V69h302v103a8 8 0 0 0 15 0V61c0-4-3-7-7-7H97c-4 0-7 3-7 7zM90 432c0 4 3 8 7 8h318c4 0 7-4 7-8V202a8 8 0 0 0-15 0v223H105v-50a8 8 0 0 0-15 0v57zM233 467a23 23 0 1 0 46-1 23 23 0 0 0-46 1zm31 0a8 8 0 1 1-16 0 8 8 0 0 1 16 0zM288 42a8 8 0 0 0 0-15h-34a8 8 0 0 0 0 15h34z"
       />
-      <circle cx="225.6" cy="34.3" r="7.5" />
+      <circle cx="225.6" cy="34.3" r="7.5"/>
     </svg>
 
     <svg
@@ -462,12 +470,12 @@ const props = defineProps<Props>();
       stroke-linecap="round"
       stroke-linejoin="round"
     >
-      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+      <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
       <path
         d="M5 13a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v6a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-6z"
       />
-      <path d="M11 16a1 1 0 1 0 2 0a1 1 0 0 0 -2 0" />
-      <path d="M8 11v-4a4 4 0 1 1 8 0v4" />
+      <path d="M11 16a1 1 0 1 0 2 0a1 1 0 0 0 -2 0"/>
+      <path d="M8 11v-4a4 4 0 1 1 8 0v4"/>
     </svg>
 
     <svg
@@ -481,13 +489,13 @@ const props = defineProps<Props>();
       stroke-linecap="round"
       stroke-linejoin="round"
     >
-      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+      <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
       <path
         d="M15 11h2a2 2 0 0 1 2 2v2m0 4a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-6a2 2 0 0 1 2 -2h4"
       />
-      <path d="M11 16a1 1 0 1 0 2 0a1 1 0 0 0 -2 0" />
-      <path d="M8 11v-3m.719 -3.289a4 4 0 0 1 7.281 2.289v4" />
-      <path d="M3 3l18 18" />
+      <path d="M11 16a1 1 0 1 0 2 0a1 1 0 0 0 -2 0"/>
+      <path d="M8 11v-3m.719 -3.289a4 4 0 0 1 7.281 2.289v4"/>
+      <path d="M3 3l18 18"/>
     </svg>
   </div>
 </template>

src/shared/ui/icon-svg/icon-svg.vue

@@ -4,7 +4,6 @@ import { IconSvg } from "~/src/shared/ui";
 type Props = {
   iconName: string;
   title: string;
-  linkName: string;
   linkUrl: string;
 };
 
@@ -15,9 +14,8 @@ defineProps<Props>();
   <li class="page-placeholder-item">
     <IconSvg :name="iconName" class="page-placeholder-item__icon" />
     <span>
-      {{ title }}
       <a :href="linkUrl" class="page-placeholder-item__link" target="_blank">
-        {{ linkName }}
+        {{ title }}
       </a>
     </span>
   </li>

src/widgets/ui/page-placeholder/page-placeholder-item.vue

@@ -7,48 +7,19 @@ const getHostName = () => window?.location?.hostname || "localhost";
 const items = [
   {
     iconName: "github",
-    title: "Buggregator",
-    linkName: "Github",
+    title: "Github repository",
     linkUrl: "https://github.com/buggregator",
   },
-  {
-    iconName: "sentry",
-    title: "Sentry DSN",
-    linkName: `http://sentry@${getHost()}/1`,
-    linkUrl: "https://docs.sentry.io/product/sentry-basics/dsn-explainer/",
-  },
-  {
-    iconName: "inspector",
-    title: "Inspector URL",
-    linkName: `http://${getHost()}/api/inspector`,
-    linkUrl: "https://docs.inspector.dev/raw-php",
-  },
-  {
-    iconName: "docs",
-    title: "Var Dumper URL",
-    linkName: `tcp://${getHostName()}:9912`,
-    linkUrl:
-      "https://symfony.com/doc/current/components/var_dumper.html#the-dump-server",
-  },
   {
     iconName: "docs",
-    title: "Monolog",
-    linkName: `tcp://${getHostName()}:9913`,
-    linkUrl: "https://github.com/Seldaek/monolog/blob/main/doc/sockets.md",
+    title: "Documentation",
+    linkUrl: "https://docs.buggregator.dev",
   },
   {
-    iconName: "profiler",
-    title: "XHProf URL",
-    linkName: `http://${getHost()}/api/profiler/store`,
-    linkUrl: "https://github.com/spiral/profiler/tree/3.0",
-  },
-  {
-    iconName: "smtp",
-    title: "SMTP URL",
-    linkName: `smtp://${getHostName()}:1025`,
-    linkUrl:
-      "https://github.com/buggregator/spiral-app#3-fake-smtp-server-for-catching-mail",
-  },
+    iconName: "discord",
+    title: "Join our discord",
+    linkUrl: "https://discord.gg/vDsCD3EKUB",
+  }
 ];
 </script>