adding interface elements for the new message

diff --git a/dist/js/glma-mobile-notifications.js b/dist/js/glma-mobile-notifications.js
index d60d168..cf1edfb 100755 (executable)
--- a/dist/js/glma-mobile-notifications.js
+++ b/dist/js/glma-mobile-notifications.js
@@ -190,7 +190,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var reac
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-dom */ \"./node_modules/react-dom/index.js\");\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react-redux */ \"./node_modules/react-redux/es/index.js\");\n/* harmony import */ var react_router_dom__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! react-router-dom */ \"./node_modules/react-router-dom/esm/react-router-dom.js\");\n/* harmony import */ var _material_ui_core_TextField__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @material-ui/core/TextField */ \"./node_modules/@material-ui/core/esm/TextField/index.js\");\n/* harmony import */ var _material_ui_core_styles__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @material-ui/core/styles */ \"./node_modules/@material-ui/core/esm/styles/index.js\");\n/* harmony import */ var _material_ui_core_Input__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @material-ui/core/Input */ \"./node_modules/@material-ui/core/esm/Input/index.js\");\n/* harmony import */ var _material_ui_core_OutlinedInput__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @material-ui/core/OutlinedInput */ \"./node_modules/@material-ui/core/esm/OutlinedInput/index.js\");\n/* harmony import */ var _material_ui_core_FilledInput__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @material-ui/core/FilledInput */ \"./node_modules/@material-ui/core/esm/FilledInput/index.js\");\n/* harmony import */ var _material_ui_core_InputLabel__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! @material-ui/core/InputLabel */ \"./node_modules/@material-ui/core/esm/InputLabel/index.js\");\n/* harmony import */ var _material_ui_core_MenuItem__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! @material-ui/core/MenuItem */ \"./node_modules/@material-ui/core/esm/MenuItem/index.js\");\n/* harmony import */ var _material_ui_core_FormHelperText__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! @material-ui/core/FormHelperText */ \"./node_modules/@material-ui/core/esm/FormHelperText/index.js\");\n/* harmony import */ var _material_ui_core_FormControl__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! @material-ui/core/FormControl */ \"./node_modules/@material-ui/core/esm/FormControl/index.js\");\n/* harmony import */ var _material_ui_core_Select__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! @material-ui/core/Select */ \"./node_modules/@material-ui/core/esm/Select/index.js\");\n/* harmony import */ var _Util__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ../../Util */ \"./js/Util.js\");\n/* harmony import */ var _material_ui_core_Button__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! @material-ui/core/Button */ \"./node_modules/@material-ui/core/esm/Button/index.js\");\n/* harmony import */ var _functional_ImageContainer__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ../functional/ImageContainer */ \"./js/components/functional/ImageContainer.jsx\");\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }\n\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance\"); }\n\nfunction _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i[\"return\"] != null) _i[\"return\"](); } finally { if (_d) throw _e; } } return _arr; }\n\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nvar useStyles = Object(_material_ui_core_styles__WEBPACK_IMPORTED_MODULE_5__[\"makeStyles\"])(function (theme) {\n  return {\n    container: {\n      display: 'flex',\n      flexWrap: 'wrap'\n    },\n    textField: {\n      marginLeft: theme.spacing(1),\n      marginRight: theme.spacing(1)\n    },\n    dense: {\n      marginTop: theme.spacing(2)\n    },\n    menu: {\n      width: 200\n    },\n    formControl: {\n      margin: theme.spacing(1),\n      minWidth: 120\n    },\n    selectEmpty: {\n      marginTop: theme.spacing(2)\n    },\n    button: {\n      margin: theme.spacing(1),\n      color: \"white\",\n      background: \"#0568B3\"\n    },\n    input: {\n      display: 'none'\n    }\n  };\n});\n\nvar NewNotification = function NewNotification(props) {\n  var inputLabel = Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useRef\"])(null);\n  var classes = useStyles();\n\n  var _useState = Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useState\"])(0),\n      _useState2 = _slicedToArray(_useState, 2),\n      labelWidth = _useState2[0],\n      setLabelWidth = _useState2[1];\n\n  Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useEffect\"])(function () {\n    _Util__WEBPACK_IMPORTED_MODULE_14__[\"default\"].MediaLibrary();\n    setLabelWidth(inputLabel.current.offsetWidth);\n  }, []);\n  /* Categories for each */\n\n  var _useState3 = Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useState\"])({\n    categories: [10]\n  }),\n      _useState4 = _slicedToArray(_useState3, 2),\n      values = _useState4[0],\n      setValues = _useState4[1];\n\n  function handleChange(event) {\n    setValues(function (oldValues) {\n      return _extends({}, oldValues, _defineProperty({}, event.target.name, event.target.value));\n    });\n  }\n\n  return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_0___default.a.Fragment, null, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_material_ui_core_TextField__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n    id: \"outlined-search\",\n    label: \"Search field\",\n    type: \"search\",\n    className: classes.textField,\n    margin: \"normal\",\n    variant: \"outlined\"\n  }), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_material_ui_core_FormControl__WEBPACK_IMPORTED_MODULE_12__[\"default\"], {\n    variant: \"outlined\",\n    className: classes.formControl\n  }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_material_ui_core_InputLabel__WEBPACK_IMPORTED_MODULE_9__[\"default\"], {\n    ref: inputLabel,\n    htmlFor: \"outlined-age-simple\"\n  }, \"Categories\"), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_material_ui_core_Select__WEBPACK_IMPORTED_MODULE_13__[\"default\"], {\n    multiple: true,\n    value: values.categories,\n    onChange: handleChange,\n    input: react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_material_ui_core_OutlinedInput__WEBPACK_IMPORTED_MODULE_7__[\"default\"], {\n      labelWidth: labelWidth,\n      name: \"categories\",\n      id: \"outlined-categories\"\n    })\n  }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_material_ui_core_MenuItem__WEBPACK_IMPORTED_MODULE_10__[\"default\"], {\n    value: ''\n  }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"em\", null, \"None\")), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_material_ui_core_MenuItem__WEBPACK_IMPORTED_MODULE_10__[\"default\"], {\n    value: 10\n  }, \"Tenx\"), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_material_ui_core_MenuItem__WEBPACK_IMPORTED_MODULE_10__[\"default\"], {\n    value: 20\n  }, \"Twenty\"), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_material_ui_core_MenuItem__WEBPACK_IMPORTED_MODULE_10__[\"default\"], {\n    value: 30\n  }, \"Thirty\"))), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n    id: \"glm-message-image-container\"\n  }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_material_ui_core_Button__WEBPACK_IMPORTED_MODULE_15__[\"default\"], {\n    variant: \"contained\",\n    className: [\"upload-custom-img\", classes.button]\n  }, \"Add Image\"), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_functional_ImageContainer__WEBPACK_IMPORTED_MODULE_16__[\"default\"], null), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_material_ui_core_Button__WEBPACK_IMPORTED_MODULE_15__[\"default\"], {\n    variant: \"contained\",\n    className: [\"hidden\", \"delete-custom-img\", classes.button]\n  }, \"Remove Image\")));\n};\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (Object(react_redux__WEBPACK_IMPORTED_MODULE_2__[\"connect\"])(null, null)(NewNotification));\n\n//# sourceURL=webpack:///./js/components/container/NewNotification.jsx?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-dom */ \"./node_modules/react-dom/index.js\");\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react-redux */ \"./node_modules/react-redux/es/index.js\");\n/* harmony import */ var react_router_dom__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! react-router-dom */ \"./node_modules/react-router-dom/esm/react-router-dom.js\");\n/* harmony import */ var _material_ui_core_TextField__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @material-ui/core/TextField */ \"./node_modules/@material-ui/core/esm/TextField/index.js\");\n/* harmony import */ var _material_ui_core_styles__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @material-ui/core/styles */ \"./node_modules/@material-ui/core/esm/styles/index.js\");\n/* harmony import */ var _material_ui_core_Input__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @material-ui/core/Input */ \"./node_modules/@material-ui/core/esm/Input/index.js\");\n/* harmony import */ var _material_ui_core_OutlinedInput__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @material-ui/core/OutlinedInput */ \"./node_modules/@material-ui/core/esm/OutlinedInput/index.js\");\n/* harmony import */ var _material_ui_core_FilledInput__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @material-ui/core/FilledInput */ \"./node_modules/@material-ui/core/esm/FilledInput/index.js\");\n/* harmony import */ var _material_ui_core_InputLabel__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! @material-ui/core/InputLabel */ \"./node_modules/@material-ui/core/esm/InputLabel/index.js\");\n/* harmony import */ var _material_ui_core_MenuItem__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! @material-ui/core/MenuItem */ \"./node_modules/@material-ui/core/esm/MenuItem/index.js\");\n/* harmony import */ var _material_ui_core_FormHelperText__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! @material-ui/core/FormHelperText */ \"./node_modules/@material-ui/core/esm/FormHelperText/index.js\");\n/* harmony import */ var _material_ui_core_FormControl__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! @material-ui/core/FormControl */ \"./node_modules/@material-ui/core/esm/FormControl/index.js\");\n/* harmony import */ var _material_ui_core_Select__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! @material-ui/core/Select */ \"./node_modules/@material-ui/core/esm/Select/index.js\");\n/* harmony import */ var _Util__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ../../Util */ \"./js/Util.js\");\n/* harmony import */ var _material_ui_core_Button__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! @material-ui/core/Button */ \"./node_modules/@material-ui/core/esm/Button/index.js\");\n/* harmony import */ var _functional_ImageContainer__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ../functional/ImageContainer */ \"./js/components/functional/ImageContainer.jsx\");\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }\n\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance\"); }\n\nfunction _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i[\"return\"] != null) _i[\"return\"](); } finally { if (_d) throw _e; } } return _arr; }\n\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nvar useStyles = Object(_material_ui_core_styles__WEBPACK_IMPORTED_MODULE_5__[\"makeStyles\"])(function (theme) {\n  return {\n    container: {\n      display: 'flex',\n      flexWrap: 'wrap'\n    },\n    textField: {// marginLeft: theme.spacing(1),\n      // marginRight: theme.spacing(1),\n    },\n    dense: {\n      marginTop: theme.spacing(2)\n    },\n    menu: {\n      width: 200\n    },\n    formControl: {\n      margin: theme.spacing(1),\n      minWidth: 120\n    },\n    selectEmpty: {\n      marginTop: theme.spacing(2)\n    },\n    button: {\n      margin: theme.spacing(1),\n      color: \"white\",\n      background: \"#0568B3\"\n    },\n    input: {\n      display: 'none'\n    }\n  };\n});\n\nvar NewNotification = function NewNotification(props) {\n  var inputLabel = Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useRef\"])(null);\n  var classes = useStyles();\n\n  var _useState = Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useState\"])(0),\n      _useState2 = _slicedToArray(_useState, 2),\n      labelWidth = _useState2[0],\n      setLabelWidth = _useState2[1];\n\n  Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useEffect\"])(function () {\n    _Util__WEBPACK_IMPORTED_MODULE_14__[\"default\"].MediaLibrary();\n    setLabelWidth(inputLabel.current.offsetWidth);\n  }, []);\n  /* Categories for each */\n\n  var _useState3 = Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useState\"])({\n    categories: [10]\n  }),\n      _useState4 = _slicedToArray(_useState3, 2),\n      values = _useState4[0],\n      setValues = _useState4[1];\n\n  function handleChange(event) {\n    setValues(function (oldValues) {\n      return _extends({}, oldValues, _defineProperty({}, event.target.name, event.target.value));\n    });\n  }\n\n  return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_0___default.a.Fragment, null, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_material_ui_core_TextField__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n    id: \"outlined-search\",\n    label: \"Notification Headline\",\n    type: \"search\",\n    className: classes.textField,\n    margin: \"normal\",\n    variant: \"outlined\"\n  }), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_material_ui_core_FormControl__WEBPACK_IMPORTED_MODULE_12__[\"default\"], {\n    variant: \"outlined\",\n    className: classes.formControl\n  }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_material_ui_core_InputLabel__WEBPACK_IMPORTED_MODULE_9__[\"default\"], {\n    ref: inputLabel,\n    htmlFor: \"outlined-age-simple\"\n  }, \"Categories\"), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_material_ui_core_Select__WEBPACK_IMPORTED_MODULE_13__[\"default\"], {\n    multiple: true,\n    value: values.categories,\n    onChange: handleChange,\n    input: react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_material_ui_core_OutlinedInput__WEBPACK_IMPORTED_MODULE_7__[\"default\"], {\n      labelWidth: labelWidth,\n      name: \"categories\",\n      id: \"outlined-categories\"\n    })\n  }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_material_ui_core_MenuItem__WEBPACK_IMPORTED_MODULE_10__[\"default\"], {\n    value: ''\n  }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"em\", null, \"None\")), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_material_ui_core_MenuItem__WEBPACK_IMPORTED_MODULE_10__[\"default\"], {\n    value: 10\n  }, \"Tenx\"), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_material_ui_core_MenuItem__WEBPACK_IMPORTED_MODULE_10__[\"default\"], {\n    value: 20\n  }, \"Twenty\"), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_material_ui_core_MenuItem__WEBPACK_IMPORTED_MODULE_10__[\"default\"], {\n    value: 30\n  }, \"Thirty\"))), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n    id: \"glm-message-image-container\"\n  }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_material_ui_core_Button__WEBPACK_IMPORTED_MODULE_15__[\"default\"], {\n    variant: \"contained\",\n    className: [\"upload-custom-img\", classes.button]\n  }, \"Add Image\"), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_functional_ImageContainer__WEBPACK_IMPORTED_MODULE_16__[\"default\"], null), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_material_ui_core_Button__WEBPACK_IMPORTED_MODULE_15__[\"default\"], {\n    variant: \"contained\",\n    className: [\"hidden\", \"delete-custom-img\", classes.button]\n  }, \"Remove Image\")), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_material_ui_core_TextField__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n    id: \"outlined-search\",\n    label: \"Notification Message\",\n    type: \"search\",\n    className: classes.textField,\n    margin: \"normal\",\n    variant: \"outlined\",\n    multiline: true,\n    rows: 4,\n    rowsMax: 4,\n    fullWidth: true\n  }));\n};\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (Object(react_redux__WEBPACK_IMPORTED_MODULE_2__[\"connect\"])(null, null)(NewNotification));\n\n//# sourceURL=webpack:///./js/components/container/NewNotification.jsx?");
 
 /***/ }),
 

diff --git a/js/components/container/NewNotification.jsx b/js/components/container/NewNotification.jsx
index 4a6299a..a892a2a 100755 (executable)
--- a/js/components/container/NewNotification.jsx
+++ b/js/components/container/NewNotification.jsx
@@ -22,8 +22,8 @@ const useStyles = makeStyles(theme => ({
                flexWrap: 'wrap',
        },
        textField: {
-               marginLeft: theme.spacing(1),
-               marginRight: theme.spacing(1),
+               // marginLeft: theme.spacing(1),
+               // marginRight: theme.spacing(1),
        },
        dense: {
                marginTop: theme.spacing(2),
@@ -73,13 +73,13 @@ const NewNotification = (props) => {
                <React.Fragment>
                        <TextField
                                id="outlined-search"
-                               label="Search field"
+                               label="Notification Headline"
                                type="search"
                                className={classes.textField}
                                margin="normal"
                                variant="outlined"
                        />
-
+                       
                        <FormControl variant="outlined" className={classes.formControl}>
                                <InputLabel ref={inputLabel} htmlFor="outlined-age-simple">
                                        Categories
@@ -103,7 +103,18 @@ const NewNotification = (props) => {
                                <ImageContainer />
                                <Button variant="contained" className={["hidden","delete-custom-img", classes.button]}>Remove Image</Button>
                        </div>
-                       
+                       <TextField
+                               id="outlined-search"
+                               label="Notification Message"
+                               type="search"
+                               className={classes.textField}
+                               margin="normal"
+                               variant="outlined"
+                               multiline={true}
+                               rows={4}
+                               rowsMax={4}
+                               fullWidth
+                       />
                </React.Fragment>
        )
 }