Add quick server button, dynamic price preview for custom server modal (#3815)

* Add quick server creation button, and dynamic pricing to custom server selection

* Remove test in compatibility card

* Lint + remove duplicate file

* Adjust z-index of popup

* $6 -> $5

* Dismiss prompt if the button is clicked

* Make "Create a server" disabled for now

* Use existing loaders type

packages/assets/icons/badge-check.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-badge-check-icon lucide-badge-check"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"/><path d="m9 12 2 2 4-4"/></svg>

packages/assets/icons/server-plus.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M22 12H2M11.1 4H7.2c-.8 0-1.5.4-1.8 1.1L2 12v6c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2v-6l-1.5-3M6 16h0M10 16h0M14.4 4h6M17.4 1v6"/></svg>

packages/assets/index.ts

@@ -44,6 +44,7 @@ import _AlignLeftIcon from './icons/align-left.svg?component'
 import _ArchiveIcon from './icons/archive.svg?component'
 import _ArrowBigUpDashIcon from './icons/arrow-big-up-dash.svg?component'
 import _AsteriskIcon from './icons/asterisk.svg?component'
+import _BadgeCheckIcon from './icons/badge-check.svg?component'
 import _BanIcon from './icons/ban.svg?component'
 import _BellIcon from './icons/bell.svg?component'
 import _BellRingIcon from './icons/bell-ring.svg?component'
@@ -163,6 +164,7 @@ import _ScanEyeIcon from './icons/scan-eye.svg?component'
 import _SearchIcon from './icons/search.svg?component'
 import _SendIcon from './icons/send.svg?component'
 import _ServerIcon from './icons/server.svg?component'
+import _ServerPlusIcon from './icons/server-plus.svg?component'
 import _SettingsIcon from './icons/settings.svg?component'
 import _ShareIcon from './icons/share.svg?component'
 import _ShieldIcon from './icons/shield.svg?component'
@@ -264,6 +266,7 @@ export const AlignLeftIcon = _AlignLeftIcon
 export const ArchiveIcon = _ArchiveIcon
 export const ArrowBigUpDashIcon = _ArrowBigUpDashIcon
 export const AsteriskIcon = _AsteriskIcon
+export const BadgeCheckIcon = _BadgeCheckIcon
 export const BanIcon = _BanIcon
 export const BellIcon = _BellIcon
 export const BellRingIcon = _BellRingIcon
@@ -383,6 +386,7 @@ export const ScanEyeIcon = _ScanEyeIcon
 export const SearchIcon = _SearchIcon
 export const SendIcon = _SendIcon
 export const ServerIcon = _ServerIcon
+export const ServerPlusIcon = _ServerPlusIcon
 export const SettingsIcon = _SettingsIcon
 export const ShareIcon = _ShareIcon
 export const ShieldIcon = _ShieldIcon

packages/assets/styles/classes.scss

@@ -822,10 +822,69 @@ a,
 
 // TOOLTIPS
 
+.v-popper--theme-dropdown,
+.v-popper--theme-dropdown.v-popper--theme-ribbit-popout {
+  .v-popper__inner {
+    border: 1px solid var(--color-button-bg) !important;
+    padding: var(--gap-sm) !important;
+    width: fit-content !important;
+    border-radius: var(--radius-md) !important;
+    background-color: var(--color-raised-bg) !important;
+    box-shadow: var(--shadow-floating) !important;
+  }
+
+  .v-popper__arrow-outer {
+    border-color: var(--color-button-bg) !important;
+  }
+
+  .v-popper__arrow-inner {
+    border-color: var(--color-raised-bg) !important;
+  }
+}
+
+.v-popper__popper[data-popper-placement='bottom-end'] .v-popper__wrapper {
+  transform-origin: top right;
+}
+
+.v-popper__popper[data-popper-placement='top-end'] .v-popper__wrapper {
+  transform-origin: bottom right;
+}
+
+.v-popper__popper[data-popper-placement='bottom-start'] .v-popper__wrapper {
+  transform-origin: top left;
+}
+
+.v-popper__popper[data-popper-placement='top-start'] .v-popper__wrapper {
+  transform-origin: bottom left;
+}
+
+.v-popper__popper.v-popper__popper--show-from .v-popper__wrapper {
+  transform: scale(0.85);
+  opacity: 0;
+}
+
+.v-popper__popper.v-popper__popper--show-to .v-popper__wrapper {
+  transform: scale(1);
+  opacity: 1;
+  transition:
+    transform 0.125s ease-in-out,
+    opacity 0.125s ease-in-out;
+}
+
+.v-popper__popper.v-popper__popper--hide-from .v-popper__wrapper {
+  transform: none;
+  opacity: 1;
+  transition: transform 0.0625s;
+}
+
+.v-popper__popper.v-popper__popper--hide-to .v-popper__wrapper {
+  //transform: scale(.9);
+}
+
 .v-popper--theme-tooltip {
   .v-popper__inner {
     background: var(--color-tooltip-bg) !important;
-    color: var(--color-tooltip-text) !important;
+    color: initial !important;
     padding: 0.5rem 0.5rem !important;
     border-radius: var(--radius-sm) !important;
     filter: drop-shadow(5px 5px 0.8rem rgba(0, 0, 0, 0.35));
@@ -840,6 +899,30 @@ a,
   }
 }
 
+.v-popper--theme-dismissable-prompt {
+  z-index: 10;
+
+  .v-popper__inner {
+    background: var(--color-raised-bg) !important;
+    border: 1px solid var(--color-button-border);
+    color: var(--color-tooltip-text) !important;
+    padding: 0.75rem 1rem !important;
+    border-radius: 0.75rem !important;
+    filter: drop-shadow(5px 5px 0.8rem rgba(0, 0, 0, 0.35));
+    font-size: 0.9rem;
+    font-weight: bold;
+    line-height: 1;
+  }
+
+  .v-popper__arrow-outer {
+    border-color: var(--color-button-border);
+  }
+
+  .v-popper__arrow-inner {
+    border-color: var(--color-raised-bg);
+  }
+}
+
 // MARKDOWN
 
 .markdown-body {
@@ -1205,65 +1288,6 @@ select {
   border-top-right-radius: var(--radius-md) !important;
 }
 
-.v-popper--theme-dropdown,
-.v-popper--theme-dropdown.v-popper--theme-ribbit-popout {
-  .v-popper__inner {
-    border: 1px solid var(--color-button-bg) !important;
-    padding: var(--gap-sm) !important;
-    width: fit-content !important;
-    border-radius: var(--radius-md) !important;
-    background-color: var(--color-raised-bg) !important;
-    box-shadow: var(--shadow-floating) !important;
-  }
-
-  .v-popper__arrow-outer {
-    border-color: var(--color-button-bg) !important;
-  }
-
-  .v-popper__arrow-inner {
-    border-color: var(--color-raised-bg) !important;
-  }
-}
-
-.v-popper__popper[data-popper-placement='bottom-end'] .v-popper__wrapper {
-  transform-origin: top right;
-}
-
-.v-popper__popper[data-popper-placement='top-end'] .v-popper__wrapper {
-  transform-origin: bottom right;
-}
-
-.v-popper__popper[data-popper-placement='bottom-start'] .v-popper__wrapper {
-  transform-origin: top left;
-}
-
-.v-popper__popper[data-popper-placement='top-start'] .v-popper__wrapper {
-  transform-origin: bottom left;
-}
-
-.v-popper__popper.v-popper__popper--show-from .v-popper__wrapper {
-  transform: scale(0.85);
-  opacity: 0;
-}
-
-.v-popper__popper.v-popper__popper--show-to .v-popper__wrapper {
-  transform: scale(1);
-  opacity: 1;
-  transition:
-    transform 0.125s ease-in-out,
-    opacity 0.125s ease-in-out;
-}
-
-.v-popper__popper.v-popper__popper--hide-from .v-popper__wrapper {
-  transform: none;
-  opacity: 1;
-  transition: transform 0.0625s;
-}
-
-.v-popper__popper.v-popper__popper--hide-to .v-popper__wrapper {
-  //transform: scale(.9);
-}
-
 .preview-radio {
   width: 100% !important;
   border-radius: var(--radius-md);