fix: problem editor styling (#212)

* fix: test name

* fix: make horizontal paddings 24px

* fix: space between widgets

* fix: remove settings heading

* fix: remove button hover effects

* fix: font size

* fix: make buttons small

* fix: change theme

* fix: reset buttons

* refactor: add Button component

* fix: hints widget

* fix: hints widget

* fix: tooltip

* fix: make settings fixed width

* fix: modal heading

* fix: center header text

* fix: modal header

* fix: settings fonts

* fix: settings fonts

* fix: fonts

* fix: padding

* fix: alignments

* fix: package.json

* fix: package.json

* fix: lint

src/editors/sharedComponents/Button/hooks.js

@@ -0,0 +1,23 @@
+/* eslint-disable import/prefer-default-export */
+export const isVariantAdd = (variant) => variant === 'add';
+
+export const getButtonProps = ({ variant, className, Add }) => {
+  const variantClasses = {
+    default: 'shared-button',
+    add: 'shared-button pl-0 text-primary-500 button-variant-add',
+  };
+  const variantMap = {
+    add: 'tertiary',
+  };
+  const classes = [variantClasses[variant]];
+  if (className) { classes.push(className); }
+
+  const iconProps = {};
+  if (isVariantAdd(variant)) { iconProps.iconBefore = Add; }
+
+  return {
+    className: classes.join(' '),
+    variant: variantMap[variant] || variant,
+    ...iconProps,
+  };
+};

src/editors/sharedComponents/Button/index.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { string, node, arrayOf } from 'prop-types';
+import { Button as ParagonButton } from '@edx/paragon';
+import { Add } from '@edx/paragon/icons';
+
+import { getButtonProps } from './hooks';
+import './index.scss';
+
+const Button = ({
+  variant, className, text, children, ...props
+}) => (
+  <ParagonButton
+    {...getButtonProps({ variant, className, Add })}
+    {...props}
+  >
+    {children || text}
+  </ParagonButton>
+);
+Button.propTypes = {
+  variant: string,
+  className: string,
+  text: string,
+  children: node || arrayOf(node),
+};
+Button.defaultProps = {
+  variant: 'default',
+  className: null,
+  text: null,
+  children: null,
+};
+
+export default Button;

src/editors/sharedComponents/Button/index.scss

@@ -0,0 +1,13 @@
+.button-variant-add {
+  &:not(:disabled) {
+    &:not(.disabled) {
+      &:hover, &:active, &:focus {
+        background-color: transparent;
+
+        &:before {
+          display: none;
+        }
+      }
+    }
+  }
+}