diff --git a/packages/slate-editor/src/extensions/button-block/ButtonBlockNode.ts b/packages/slate-editor/src/extensions/button-block/ButtonBlockNode.ts index 03cc177f7..61aa3fcd9 100644 --- a/packages/slate-editor/src/extensions/button-block/ButtonBlockNode.ts +++ b/packages/slate-editor/src/extensions/button-block/ButtonBlockNode.ts @@ -18,7 +18,7 @@ enum Layout { LEFT = 'left', RIGHT = 'right', CENTER = 'center', - FULL_WIDTH = 'full-width', + WIDE = 'wide', } enum Variant { diff --git a/packages/slate-editor/src/extensions/button-block/components/Button/Button.module.scss b/packages/slate-editor/src/extensions/button-block/components/Button/Button.module.scss index db8233704..2f4fec533 100644 --- a/packages/slate-editor/src/extensions/button-block/components/Button/Button.module.scss +++ b/packages/slate-editor/src/extensions/button-block/components/Button/Button.module.scss @@ -2,36 +2,34 @@ @import "styles/helpers"; .Button { - @include btn-unstyled; - + cursor: pointer; display: flex; padding: $spacing-1-5 $spacing-2; justify-content: center; align-items: center; border-radius: $border-radius-small; - width: max-content; color: $white; - background-color: $indigo-400; + background-color: rgba($color: $editor-link-color, $alpha: 0.5); font-size: $font-size-medium; font-weight: 600; line-height: 160%; + &.notWide { + width: max-content; + } + &.active { - background-color: $indigo-600; + background-color: $editor-link-color; } &.outline { - border: 2px solid $indigo-400; - color: $indigo-400; + border: 2px solid rgba($color: $editor-link-color, $alpha: 0.5); + color: rgba($color: $editor-link-color, $alpha: 0.5); background-color: $white; &.active { - color: $indigo-600; - border-color: $indigo-600; + color: $editor-link-color; + border-color: $editor-link-color; } } - - &.fullWidth { - width: 100%; - } } diff --git a/packages/slate-editor/src/extensions/button-block/components/Button/Button.tsx b/packages/slate-editor/src/extensions/button-block/components/Button/Button.tsx index 98533db37..42a216545 100644 --- a/packages/slate-editor/src/extensions/button-block/components/Button/Button.tsx +++ b/packages/slate-editor/src/extensions/button-block/components/Button/Button.tsx @@ -13,14 +13,15 @@ export function Button({ node }: Props) { const { label, variant, layout, href } = node; return ( - + ); } diff --git a/packages/slate-editor/src/extensions/button-block/components/ButtonBlockElement.tsx b/packages/slate-editor/src/extensions/button-block/components/ButtonBlockElement.tsx index d6cdfa20d..f5c90d8c5 100644 --- a/packages/slate-editor/src/extensions/button-block/components/ButtonBlockElement.tsx +++ b/packages/slate-editor/src/extensions/button-block/components/ButtonBlockElement.tsx @@ -17,10 +17,9 @@ interface Props extends RenderElementProps { export function ButtonBlockElement({ attributes, children, element, withNewTabOption }: Props) { const editor = useSlateStatic(); - const { layout: buttonLayout } = element; + const { layout } = element; - const align = buttonLayout === 'full-width' ? 'center' : buttonLayout; - const layout = buttonLayout === 'full-width' ? 'full-width' : 'contained'; + const align = layout === 'wide' ? 'center' : layout; const handleUpdate = useCallback( function (patch: Partial) { @@ -41,7 +40,6 @@ export function ButtonBlockElement({ attributes, children, element, withNewTabOp {...attributes} element={element} align={align} - layout={layout} overlay="autohide" // We have to render children or Slate will fail when trying to find the node. renderAboveFrame={children} @@ -61,7 +59,7 @@ export function ButtonBlockElement({ attributes, children, element, withNewTabOp withNewTabOption={withNewTabOption} /> )} - width={layout === 'contained' ? 'min-content' : undefined} + width={layout !== 'wide' ? 'min-content' : undefined} rounded void /> diff --git a/packages/slate-editor/src/extensions/button-block/components/ButtonBlockMenu.tsx b/packages/slate-editor/src/extensions/button-block/components/ButtonBlockMenu.tsx index ae35f4004..eca65c9f0 100644 --- a/packages/slate-editor/src/extensions/button-block/components/ButtonBlockMenu.tsx +++ b/packages/slate-editor/src/extensions/button-block/components/ButtonBlockMenu.tsx @@ -76,13 +76,13 @@ const BUTTON_LAYOUT_OPTIONS: OptionsGroupOption[] }, { value: 'right', - label: 'right', + label: 'Right', icon: ({ isActive }) => ( ), }, { - value: 'full-width', + value: 'wide', label: 'Wide', icon: ({ isActive }) => ( @@ -128,8 +128,8 @@ export function ButtonMenu({ onUpdate, onClose, onRemove, value, withNewTabOptio - - + + Text - - + + Link - - + + Styling options - + Alignment - - - - + + + diff --git a/packages/slate-editor/src/icons/ButtonLayoutLeft.svg b/packages/slate-editor/src/icons/ButtonLayoutLeft.svg index 86e13c871..e76698fe3 100644 --- a/packages/slate-editor/src/icons/ButtonLayoutLeft.svg +++ b/packages/slate-editor/src/icons/ButtonLayoutLeft.svg @@ -1,6 +1,6 @@ - - + + diff --git a/packages/slate-editor/src/icons/ButtonLayoutRight.svg b/packages/slate-editor/src/icons/ButtonLayoutRight.svg index 59c689e0b..96237b55e 100644 --- a/packages/slate-editor/src/icons/ButtonLayoutRight.svg +++ b/packages/slate-editor/src/icons/ButtonLayoutRight.svg @@ -1,6 +1,6 @@ - - + + diff --git a/packages/slate-editor/src/icons/ButtonLayoutWide.svg b/packages/slate-editor/src/icons/ButtonLayoutWide.svg index 1b658248f..208f10fe4 100644 --- a/packages/slate-editor/src/icons/ButtonLayoutWide.svg +++ b/packages/slate-editor/src/icons/ButtonLayoutWide.svg @@ -1,7 +1,7 @@ - - - + + + diff --git a/packages/slate-editor/src/styles/variables.scss b/packages/slate-editor/src/styles/variables.scss index 0f00cbd6a..d50226b85 100644 --- a/packages/slate-editor/src/styles/variables.scss +++ b/packages/slate-editor/src/styles/variables.scss @@ -74,3 +74,5 @@ $editor-selection-bg: #c7d2fe; $editor-selection-color: #3630a3; $editor-bookmark-card-height: 180px; + +$editor-link-color: #3c91ff;