[DEV-11237] Updated button colors to match design, fixed icons and la…

…yout issues
prezly · Aug 10, 2023 · e40ac2b · e40ac2b
1 parent e7f0690
commit e40ac2b
Show file tree

Hide file tree

Showing 10 changed files with 40 additions and 42 deletions.
diff --git 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
@@ -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
@@ -13,14 +13,15 @@ export function Button({ node }: Props) {
     const { label, variant, layout, href } = node;
 
     return (
-        <button
+        <div
             className={classNames(styles.Button, {
                 [styles.active]: Boolean(href),
                 [styles.outline]: variant === 'outline',
-                [styles.fullWidth]: layout === 'full-width',
+                [styles.notWide]: layout !== 'wide',
             })}
+            role="button"
         >
             {label}
-        </button>
+        </div>
     );
 }
diff --git 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<FormState>) {
@@ -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
@@ -76,13 +76,13 @@ const BUTTON_LAYOUT_OPTIONS: OptionsGroupOption<ButtonBlockNode.ButtonLayout>[]
     },
     {
         value: 'right',
-        label: 'right',
+        label: 'Right',
         icon: ({ isActive }) => (
             <ButtonLayoutRight className={classNames(styles.icon, { [styles.active]: isActive })} />
         ),
     },
     {
-        value: 'full-width',
+        value: 'wide',
         label: 'Wide',
         icon: ({ isActive }) => (
             <ButtonLayoutWide className={classNames(styles.icon, { [styles.active]: isActive })} />
@@ -128,8 +128,8 @@ export function ButtonMenu({ onUpdate, onClose, onRemove, value, withNewTabOptio
             </Toolbox.Header>
 
             <Toolbox.Section>
-                <VStack spacing="2-5">
-                    <VStack spacing="2-5">
+                <VStack spacing="1-5">
+                    <VStack spacing="1-5">
                         <Toolbox.Caption>Text</Toolbox.Caption>
                         <Input
                             name="label"
@@ -139,8 +139,8 @@ export function ButtonMenu({ onUpdate, onClose, onRemove, value, withNewTabOptio
                         />
                     </VStack>
 
-                    <VStack spacing="2-5">
-                        <VStack spacing="2-5">
+                    <VStack spacing="1-5">
+                        <VStack spacing="1-5">
                             <Toolbox.Caption>Link</Toolbox.Caption>
                             <Input
                                 icon={Link}
@@ -167,8 +167,8 @@ export function ButtonMenu({ onUpdate, onClose, onRemove, value, withNewTabOptio
             </Toolbox.Section>
 
             <Toolbox.Section>
-                <VStack spacing="2-5">
-                    <VStack spacing="2-5">
+                <VStack spacing="2">
+                    <VStack spacing="1-5">
                         <Toolbox.Caption>Styling options</Toolbox.Caption>
                         <OptionsGroup
                             name="variant"
@@ -179,7 +179,7 @@ export function ButtonMenu({ onUpdate, onClose, onRemove, value, withNewTabOptio
                         />
                     </VStack>
 
-                    <VStack spacing="2-5">
+                    <VStack spacing="1-5">
                         <Toolbox.Caption>Alignment</Toolbox.Caption>
                         <OptionsGroup
                             name="layout"

diff --git a/packages/slate-editor/src/icons/ButtonLayoutCenter.svg b/packages/slate-editor/src/icons/ButtonLayoutCenter.svg
diff --git a/packages/slate-editor/src/icons/ButtonLayoutLeft.svg b/packages/slate-editor/src/icons/ButtonLayoutLeft.svg
diff --git a/packages/slate-editor/src/icons/ButtonLayoutRight.svg b/packages/slate-editor/src/icons/ButtonLayoutRight.svg
diff --git a/packages/slate-editor/src/icons/ButtonLayoutWide.svg b/packages/slate-editor/src/icons/ButtonLayoutWide.svg
diff --git 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;