Merge pull request #1395 from glific/feature/floweditor-update

Updated floweditor with the latest version

package.json

@@ -16,7 +16,7 @@
     "@appsignal/react": "^1.0.7",
     "@date-io/date-fns": "1.x",
     "@draft-js-plugins/editor": "^4.1.0",
-    "@glific/flow-editor": "^1.11.9-15",
+    "@glific/flow-editor": "^1.13.9",
     "@jumpn/utils-graphql": "^0.6.0",
     "@material-ui/core": "^4.11.3",
     "@material-ui/icons": "^4.11.2",

src/index.css

@@ -1,40 +1,62 @@
 /* flow editor css */
+
 html {
-  font-family: 'heebo';
-  --curvature: 4px;
-  --curvature-widget: 4px;
-  --primary-rgb: 52, 152, 219;
-  --secondary-rgb: 0, 77, 129;
+  --font-family: 'Roboto', Helvetica, Arial, sans-serif;
+  --primary-rgb: 35, 135, 202;
+  --secondary-rgb: 140, 51, 140;
+  --tertiary-rgb: 135, 202, 35;
+
   --focus-rgb: 82, 168, 236;
   --error-rgb: 255, 99, 71;
-  --color-info: #c0d9eb;
-  --color-warning: #fff6c0;
-  --color-error: rgb(var(--error-rgb));
+  --success-rgb: 102, 186, 104;
+
+  --selection-light-rgb: 240, 240, 240;
+  --selection-dark-rgb: 180, 180, 180;
+
+  --select-input-height: inherit;
+
+  --curvature: 6px;
+  --curvature-widget: 6px;
+  --color-focus: #a4cafe;
+  --color-widget-bg: #fff;
+  --color-widget-bg-focused: #fff;
+  --color-widget-border: rgb(225, 225, 225);
+
+  /* primary colors, should be dark */
+  --color-selection: #f0f6ff;
+
+  --widget-box-shadow-focused: 0 0 0 3px rgba(164, 202, 254, 0.45);
+  --widget-box-shadow-focused-error: 0 0 0 3px rgba(var(--error-rgb), 0.3);
+
+  --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+
+  /* page text, borders, widgets */
   --color-text: #555;
   --color-widget-text: #555;
   --color-borders: rgba(0, 0, 0, 0.07);
-  --widget-box-shadow-focused: inset 0 1px 1px rgba(0, 0, 0, 0.075),
-    0 0 8px rgba(var(--focus-rgb), 0.6);
-  --widget-box-shadow-focused-error: inset 0 1px 1px rgba(var(--error-rgb), 0.075),
-    0 0 8px rgba(var(--error-rgb), 0.6);
-  --color-focus: rgba(var(--focus-rgb), 0.8);
-  --color-widget-bg: #fff;
-  --color-widget-bg-focused: #fff;
-  --color-widget-border: rgb(204, 204, 204);
-  --color-placeholder: var(--color-text-help);
+  --color-placeholder: #ccc;
+
+  /* light colors, panel backgrounds, selection, etc */
   --color-primary-light: #eee;
   --color-secondary-light: #ccc;
+
+  /* dark colors, nav bar, buttons, etc */
   --color-primary-dark: rgb(var(--primary-rgb));
   --color-secondary-dark: rgb(var(--secondary-rgb));
-  --color-text-light: rgba(255, 255, 255, 0.92);
+
+  /* light text goes over dark, dark over lights */
+  --color-text-light: rgba(255, 255, 255, 1);
   --color-text-dark: rgba(0, 0, 0, 0.5);
   --color-text-dark-secondary: rgba(0, 0, 0, 0.25);
-  --color-text-help: rgba(0, 0, 0, 0.45);
-  --color-selection: rgb(var(--primary-rgb));
+  --color-text-help: rgba(0, 0, 0, 0.35);
+
+  /* solid overlays with text */
   --color-overlay-dark: rgba(0, 0, 0, 0.2);
   --color-overlay-dark-text: rgba(255, 255, 255, 0.9);
   --color-overlay-light: rgba(0, 0, 0, 0.05);
   --color-overlay-light-text: rgba(0, 0, 0, 0.6);
+
+  /* links, buttons, and label badges */
   --color-link-primary: rgba(var(--primary-rgb), 0.8);
   --color-link-primary-hover: rgba(var(--primary-rgb), 0.9);
   --color-link-secondary: rgba(var(--secondary-rgb), 0.8);
@@ -43,16 +65,49 @@ html {
   --color-button-primary-text: var(--color-text-light);
   --color-button-secondary: var(--color-secondary-light);
   --color-button-secondary-text: var(--color-text-dark);
-  --color-button-disabled: rgba(0, 0, 0, 0.03);
+
+  --color-button-destructive: rgb(var(--error-rgb));
+  --color-button-destructive-text: var(--color-text-light);
+
+  --color-button-attention: #2ecc71;
+
   --color-label-primary: var(--color-primary-dark);
   --color-label-primary-text: var(--color-text-light);
   --color-label-secondary: rgba(0, 0, 0, 0.2);
   --color-label-secondary-text: rgba(255, 255, 255, 0.9);
 
-  --arrow-icon-color: rgba(0, 0, 0, 0.25);
-  --temba-select-selected-padding: 9px;
-  --temba-select-selected-line-height: 16px;
-  --temba-select-selected-font-size: 14px;
+  --color-nav-unselected: #fff;
+  --color-nav-selected-bg: #fff;
+  --color-nav-selected-text: var(--color-primary-dark);
+
+  --color-info: #c0d9eb;
+  --color-warning: #fff6c0;
+  --color-error: rgb(var(--error-rgb));
+  --font-size: 14px;
+  --button-font-size: 1.125rem;
+
+  --header-bg: var(--color-primary-dark);
+
+  --temba-textinput-padding: 9px;
+  --temba-textinput-font-size: var(--font-size);
+
+  font-size: var(--font-size);
+  font-weight: 300;
+  font-family: var(--font-family);
+
+  --button-y: 6px;
+  --button-x: 14px;
+}
+
+temba-select:focus {
+  outline: none;
+  box-shadow: none;
+}
+
+.flatpickr-calendar {
+  margin-top: 28px;
+  margin-bottom: 28px;
+  margin-left: -13px;
 }
 
 #flow * {

yarn.lock

@@ -1431,10 +1431,10 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
-"@glific/flow-editor@^1.11.9-15":
-  version "1.11.9-15"
-  resolved "https://registry.yarnpkg.com/@glific/flow-editor/-/flow-editor-1.11.9-15.tgz#085363d042a11f88ee7d17949eba0506e6b4b7d4"
-  integrity sha512-sWsF66NScH/hP3OegmNgtaP4EHSPJB7bUJjLRn7v1j9Siq5FWH4Uqm2S+LbYyPTU5aBD71gv3NV/LG7bEsvgCw==
+"@glific/flow-editor@^1.13.9":
+  version "1.13.9"
+  resolved "https://registry.yarnpkg.com/@glific/flow-editor/-/flow-editor-1.13.9.tgz#9e20ac6d933ba81a9f31854a12461567976c0184"
+  integrity sha512-WnkPFiImMo2VP+xLhGuGShbTCdrRac1yTU1EQ2kaLxZvGe4GVrhve1unA7IKYq7IViv29Qnrb1fTGsw8bdGJ2w==
   dependencies:
     react "^16.8.6"
     react-dom "^16.8.6"