diff --git a/component-library/src/components/custom/BccReact/BccReact.css b/component-library/src/components/custom/BccReact/BccReact.css index 4ad6d043..a0086912 100644 --- a/component-library/src/components/custom/BccReact/BccReact.css +++ b/component-library/src/components/custom/BccReact/BccReact.css @@ -1,24 +1,24 @@ @layer components { .bcc-react { - @apply center relative w-full overflow-visible; + @apply center relative h-8 w-full overflow-visible; } .bcc-react-toggle { @apply flex shrink-0 cursor-pointer items-center justify-center rounded-full transition; } .bcc-react-list { - @apply hide-scrollbar ml-2 flex h-10 max-w-fit flex-1 items-center gap-1.5 rounded-full; + @apply hide-scrollbar ml-2 flex max-w-fit flex-1 items-center gap-1.5 rounded-full py-0.5; } .bcc-react-list--limited { @apply min-w-0 overflow-x-auto; max-width: calc(var(--bcc-react-max-visible) * 3.25rem + (var(--bcc-react-max-visible) - 1) * 0.375rem); } .bcc-react-empty { - @apply heading-xs flex items-center; + @apply heading-sm flex items-center; } .bcc-react-selector-container { @apply absolute z-50 h-9; - @apply top-11 origin-top-left; + @apply top-9 origin-top-left; } .bcc-react-selector-container--top { @@ -81,12 +81,13 @@ } .bcc-react-emoji-list-item { - @apply clickable center my-1 flex h-8 min-w-7 shrink-0 gap-1 rounded-full px-2 py-1 drop-shadow transition-all hover:scale-105; + @apply clickable center shadow-raised dark:border-default flex h-8 min-w-7 shrink-0 gap-1 rounded-full px-2 py-1 transition-all hover:scale-105 dark:border; /* Default --not-selected */ @apply bg-accent-gray-subtler-default text-default; } .bcc-react-emoji-list-item .bcc-react-count { - @apply label-xs leading-none; + @apply label-xs; + line-height: var(--leading-md); } .bcc-react-emoji-list-item .bcc-react-emoji { @apply text-lg leading-none; diff --git a/component-library/src/components/custom/BccReact/BccReact.vue b/component-library/src/components/custom/BccReact/BccReact.vue index e2243b6a..7088e849 100644 --- a/component-library/src/components/custom/BccReact/BccReact.vue +++ b/component-library/src/components/custom/BccReact/BccReact.vue @@ -136,8 +136,8 @@ onMounted(() => { :class="[top ? 'rounded-b-full' : 'rounded-t-full']" @click="show = !show" > - - + +
renders reactions 1`] = ` "
-