UX fixes

[MAILPOET-2773]

assets/css/src/generic/_forms-input.scss

@@ -1,7 +1,3 @@
-input {
-  outline: none;
-}
-
 .mailpoet-form-input {
   align-items: center;
   background: $color-input-background;

assets/css/src/generic/_forms-select.scss

@@ -1,7 +1,3 @@
-select {
-  outline: none;
-}
-
 .mailpoet-form-select {
   height: auto;
   min-height: $form-control-height;
@@ -63,7 +59,7 @@ select {
 
 .mailpoet-form-react-select__single-value {
   color: $color-text !important;
-  max-width: 100%;
+  max-width: 97%; // leave space for narrow input to search another value
 }
 
 .mailpoet-form-react-select__multi-value {

assets/css/src/generic/_forms.scss

@@ -0,0 +1,8 @@
+input,
+select {
+  outline: none;
+}
+
+label[for] {
+  cursor: pointer;
+}

assets/css/src/mailpoet-plugin.scss

@@ -27,6 +27,7 @@
 @import 'generic/typography';
 @import 'generic/buttons';
 @import 'generic/buttons-spinners';
+@import 'generic/forms';
 @import 'generic/forms-checkbox';
 @import 'generic/forms-input';
 @import 'generic/forms-radio';

assets/js/src/common/form/toggle/toggle.tsx

@@ -11,7 +11,7 @@ const Toggle = ({
   onCheck,
   ...attributes
 }: Props) => (
-  <div
+  <label
     className={
       classnames({
         'mailpoet-form-toggle': true,
@@ -25,7 +25,7 @@ const Toggle = ({
       {...attributes}
     />
     <span className="mailpoet-form-toggle-control" />
-  </div>
+  </label>
 );
 
 export default Toggle;