Bids 3014/edit webhook dialog

frontend/assets/css/colors.scss

@@ -61,6 +61,7 @@
   --text-color-inverted: var(--light-grey);
   --text-color-disabled: var(--grey);
   --text-color-discreet: var(--dark-grey);
+  --text-color--error: var(--flashy-red);
 
   --button-color-active: var(--primary-orange);
   --button-color-hover: var(--primary-orange-hover);
@@ -73,6 +74,7 @@
 
   --button-secondary-color: var(--light-black);
   --button-secondary-hover-color: var(--light-grey-6);
+  --button-secondary-background-color--hover: var(--light-grey-4 );
   --button-secondary-background-color: var(--grey-4);
   --button-secondary-border-color: var(--light-grey-7);
 
@@ -176,10 +178,12 @@
 
     --button-secondary-color: var(--light-grey);
     --button-secondary-hover-color: var(--light-black);
+    --button-secondary-background-color--hover: var(--light-black);
     --button-secondary-background-color: var(--very-dark-grey);
     --button-secondary-border-color: var(--dark-grey);
 
     --checkbox-background-color: var(--light-grey);
+    --checkbox-border-color: var(--dark-grey);
 
     --container-background: var(--light-black);
     --container-color: var(--grey-4);

frontend/assets/css/prime.scss

@@ -18,6 +18,13 @@
   border: 1px solid var(--button-color-active);
   border-radius: var(--border-radius);
 
+  display: inline-flex;
+  flex-grow: 0;
+  justify-content: center;
+  align-items: center;
+
+  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
+
   &:not([data-secondary]) {
     color: var(--primary-contrast-color);
     background: var(--button-color-active);
@@ -29,12 +36,6 @@
     border-color: var(--button-secondary-border-color);
   }
 
-  display: inline-flex;
-  flex-grow: 0;
-  justify-content: center;
-  align-items: center;
-
-  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
 
   &.p-disabled {
     color: var(--button-text-color-disabled);
@@ -172,6 +173,7 @@
     width: 20px;
     height: 20px;
     border-radius: var(--border-radius);
+    border: 1px solid var(--checkbox-border-color);
     background: var(--checkbox-background-color);
     &.p-highlight:not(:hover) {
       background: var(--primary-color);
@@ -487,10 +489,10 @@
   border: 1px solid var(--input-border-color);
   color: var(--input-active-text-color);
   border-radius: 0 0 var(--border-radius) var(--border-radius);
+  transform: translateY(-1px);
   &.header {
     border-radius: var(--border-radius);
   }
-  transform: translateY(-1px);
   &.table {
     background: var(--background-color);
   }

frontend/components/bc/BcButton.vue

@@ -0,0 +1,68 @@
+<script lang="ts" setup>
+
+const props =defineProps<{
+  /**
+   * ℹ️ should only be used rarely, e.g. in cases where the action should not be triggerd twice
+   */
+  isDisabled?: boolean,
+  /**
+   * ♿️ buttons that are aria-disabled are still perceivable by screen readers
+   * as they can still be focused on 
+   */
+  isAriaDisabled?: boolean,
+  variant?: 'secondary' // | 'red'
+}>()
+
+const shouldAppearDisabled = computed(() => props.isDisabled || props.isAriaDisabled)
+</script>
+
+<template> 
+  <Button 
+    type="button"
+    :disabled="isDisabled"
+    :aria-disabled="isAriaDisabled"
+    :class="{
+      'bc-button--secondary': !shouldAppearDisabled && variant === 'secondary',
+      'bc-button--disabled': shouldAppearDisabled,
+      // 'bc-button--red': variant === 'red'
+    }"
+  >
+    <slot/>
+    <span
+      v-if="$slots.icon"
+      class="bc-button__icon"
+    >
+      <slot name="icon"/>
+    </span>
+  </Button>
+
+ </template>
+
+<style lang="scss" scoped>
+  .bc-button--secondary {
+    border-color: var(--button-secondary-border-color);
+    background-color: var(--button-secondary-background-color);
+    color: var(--button-secondary-color);
+    &:hover {
+      background-color: var(--button-secondary-background-color--hover);
+      border-color: var(--button-secondary-border-color);
+    }
+    &:active {
+      background-color: var(--button-secondary-background-color);
+      border-color: var(--button-secondary-border-color);
+    }
+  }
+  .bc-button--disabled {
+    &,
+    &:hover,
+    &:focus {
+      background-color: var(--button-color-disabled);
+      border-color: var(--button-color-disabled);
+      color: var(--button-text-color-disabled);
+      cursor: not-allowed;
+    }
+  }
+  .bc-button__icon {
+    margin-left: var(--padding-small);
+  }
+</style>

frontend/components/bc/BcFaq.vue

@@ -11,6 +11,7 @@ const { t: $t } = useI18n()
 
 const questions = computed(() => {
   const list = []
+  // eslint-disable-next-line no-constant-condition
   while (true) {
     const path: string = `${props.translationPath}.${(list.length)}`
     const question = tD($t, `${path}.question`)

frontend/components/bc/BcTooltip.vue

@@ -13,8 +13,12 @@ interface Props {
   scrollContainer?: string // query selector for scrollable parent container
   dontOpenPermanently?: boolean
   hoverDelay?: number
+  tooltipWidth?: `${number}px` | `${number}%`
+  tooltipTextAlign?: 'left' | 'center' | 'right'
 }
 
+const toolTipTextAlignWithDefault = computed(() => props.tooltipTextAlign || 'center')
+
 const props = defineProps<Props>()
 const bcTooltipOwner = ref<HTMLElement | null>(null)
 const bcTooltip = ref<HTMLElement | null>(null)
@@ -222,14 +226,14 @@ onUnmounted(() => {
   >
     <slot />
     <Teleport v-if="isOpen" to="body">
-      <div class="bc-tooltip-wrapper" :style="pos" :class="tooltipClass">
+      <div class="bc-tooltip-wrapper" :style="{...pos, ...{ width: tooltipWidth }}"  :class="tooltipClass">
         <div
-          ref="bcTooltip"
-          class="bc-tooltip"
-          :class="classList"
-          @click="$event.stopImmediatePropagation()"
-          @mouseover="instantHoverTooltip(true)"
-          @mouseleave="bounceHoverTooltip(false, false, true)"
+        ref="bcTooltip"
+        class="bc-tooltip"
+        :class="classList"
+        @click="$event.stopImmediatePropagation()"
+        @mouseover="instantHoverTooltip(true)"
+        @mouseleave="bounceHoverTooltip(false, false, true)"
         >
           <slot name="tooltip">
             <span>
@@ -296,7 +300,7 @@ onUnmounted(() => {
   flex-wrap: wrap;
   opacity: 0;
   transition: opacity 1s;
-  text-align: center;
+  text-align: v-bind(toolTipTextAlignWithDefault);
   padding: 9px 12px;
   border-radius: var(--border-radius);
   background: var(--tt-bg-color);

frontend/components/bc/BcTranslation.vue

@@ -0,0 +1,55 @@
+<script lang="ts" setup>
+import type { MessageSchema } from '~/i18n.config';
+import type { KeyPaths } from '~/types/helper';
+
+defineProps<{
+  /**
+   * The path to the key in the translation file (e.g. en.json)
+   */
+  keypath: KeyPaths<MessageSchema>,
+  linkpath?: KeyPaths<MessageSchema>,
+  tag?: keyof HTMLElementTagNameMap
+   /**
+   * URL to link to
+   * 
+   * @example
+   * 
+   * Translation key has to be under `${keypath}._link`
+   * 
+   *  // en.json
+   * {
+   *  "notifications": {
+   *   "template": "For further information {_link}"
+   *   "_link": "Click here"
+   * }
+   */
+  to?: string,
+}>()
+
+</script>
+
+<template>
+  <I18nT 
+    :keypath
+    scope="global"
+    :tag="tag || 'span'"
+  >
+    <template #_link>
+      <slot
+        v-if="to && linkpath"
+        name="_link"
+      >
+        <BcLink
+          class="link"
+          target="_blank"
+          :to
+        >
+          {{ $t(linkpath) }}
+        </BcLink>
+      </slot>
+    </template>
+  </I18nT>
+</template>
+
+<style lang="scss" scoped>
+</style>

frontend/components/bc/NetworkSelector.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { MultiBarItem } from '~/types/multiBar'
 import { IconNetwork } from '#components'
-import { ChainInfo, ChainIDs } from '~/types/network'
+import { ChainInfo, type ChainIDs } from '~/types/network'
 
 const props = defineProps<{
   readonlyNetworks?: ChainIDs[]

frontend/components/bc/SearchbarGeneral.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { SearchbarShape, type SearchbarColors, SearchbarPurpose, ResultType, type ResultSuggestion, pickHighestPriorityAmongBestMatchings } from '~/types/searchbar'
+import { type SearchbarShape, type SearchbarColors, SearchbarPurpose, ResultType, type ResultSuggestion, pickHighestPriorityAmongBestMatchings } from '~/types/searchbar'
 
 defineProps<{
   barShape: SearchbarShape,

frontend/components/bc/form/BcForm.vue

@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+
+</script>
+
+<template>
+  <form class="bc-form">
+    <slot/>
+  </form>
+</template>
+
+<style lang="scss" scoped>
+.bc-form {
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--padding-small);
+}
+</style>

frontend/components/bc/form/BcFormRow.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+
+</script>
+
+<template>
+  <div class="bc-form-row">
+    <slot/>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.bc-form-row {
+  display: grid;
+  justify-content: space-between;
+  align-items: center;
+  grid-template-columns: 1fr auto;
+  row-gap: var(--padding-small);
+
+  grid-template-areas: 
+    "label input"
+    "error error";
+}
+</style>