add style to live mode

src/components/Board/Board.messages.js

@@ -206,5 +206,9 @@ export default defineMessages({
   live: {
     id: 'cboard.components.Board.live',
     defaultMessage: 'LIVE'
+  },
+  writeAndSay: {
+    id: 'cboard.components.Board.writeAndSay',
+    defaultMessage: 'Write and say'
   }
 });

src/components/Board/Output/SymbolOutput/SymbolOutput.css

@@ -18,6 +18,15 @@
   position: relative;
 }
 
+.LiveSymbolOutput__value {
+  display: flex;
+  height: 100%;
+  width: 130px;
+  padding: 3px 5px;
+  align-self: flex-end;
+  position: relative;
+}
+
 .SymbolOutput__symbol {
   color: #000;
 }

src/components/Board/Output/SymbolOutput/SymbolOutput.js

@@ -91,14 +91,22 @@ class SymbolOutput extends PureComponent {
       <div className="SymbolOutput">
         <Scroll {...other}>
           {symbols.map(({ image, label, type }, index) => (
-            <div className="SymbolOutput__value" key={index}>
+            <div
+              className={
+                type === 'live'
+                  ? 'LiveSymbolOutput__value'
+                  : 'SymbolOutput__value'
+              }
+              key={index}
+            >
               <Symbol
                 className="SymbolOutput__symbol"
                 image={image}
                 label={label}
                 type={type}
                 labelpos="Below"
                 onWrite={onWriteSymbol(index)}
+                intl={intl}
               />
               <div className="SymbolOutput__value__IconButton">
                 <IconButton

src/components/Board/Symbol/Symbol.css

@@ -7,6 +7,27 @@
   overflow: hidden;
   background: none;
 }
+.Symbol textarea {
+  align-self: flex-start;
+  text-align: center;
+  font-weight: 700;
+  max-height: 90%;
+  text-align-last: auto;
+}
+
+.is-dark .liveInput {
+  color: black;
+  background-color: white;
+}
+
+.is-dark .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline,
+.is-dark .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
+  border-color: black;
+}
+
+.is-dark .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: #78909c;
+}
 
 .SymbolOutput .scanner__focused {
   outline: 4px solid rgba(255, 0, 0, 1);

src/components/Board/Symbol/Symbol.js

@@ -2,7 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { isCordova } from '../../../cordova-util';
-import TextField from '@material-ui/core/TextField';
+import OutlinedInput from '@material-ui/core/OutlinedInput';
+import messages from '../Board.messages';
 
 import { LABEL_POSITION_BELOW } from '../../Settings/Display/Display.constants';
 import './Symbol.css';
@@ -18,11 +19,12 @@ const propTypes = {
   label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
   labelpos: PropTypes.string,
   type: PropTypes.string,
-  onWrite: PropTypes.func.isRequired
+  onWrite: PropTypes.func.isRequired,
+  intl: PropTypes.object
 };
 
 function Symbol(props) {
-  const { className, label, labelpos, type, onWrite, ...other } = props;
+  const { className, label, labelpos, type, onWrite, intl, ...other } = props;
 
   // Cordova path cannot be absolute
   const image =
@@ -32,19 +34,34 @@ function Symbol(props) {
 
   const symbolClassName = classNames('Symbol', className);
 
+  const handleKeyPress = event => {
+    if (event.key === 'Enter') {
+      event.preventDefault(); //prevent new line in next textArea
+      return;
+    }
+  };
+
   return (
     <div className={symbolClassName} {...other}>
       {props.type === 'live' && (
-        <TextField
-          id="outlined-multiline-static"
-          label=""
-          margin="dense"
+        <OutlinedInput
+          id="outlined-live-input"
+          margin="none"
+          color="primary"
           variant="filled"
+          placeholder={intl.formatMessage(messages.writeAndSay)}
           autoFocus={true}
           multiline
-          rows={4}
+          rows={5}
           defaultValue={label}
           onChange={onWrite}
+          fullWidth={true}
+          onKeyPress={handleKeyPress}
+          style={{
+            padding: '0.5em 0.8em 0.5em 0.8em',
+            height: '100%'
+          }}
+          className={'liveInput'}
         />
       )}
       {props.type !== 'live' &&

src/translations/src/cboard.json

@@ -154,6 +154,8 @@
   "cboard.components.Board.boardEditTitleCancel": "Cancel",
   "cboard.components.Board.boardEditTitleAccept": "Accept",
   "cboard.components.Board.userProfileLocked": "User Profile is locked, please unlock settings to see your user profile.",
+  "cboard.components.Board.live": "LIVE",
+  "cboard.components.Board.writeAndSay": "Write and say",
   "cboard.components.Board.ImageEditor.title": "Image editor",
   "cboard.components.Board.ImageEditor.rotateRight": "Rotate right",
   "cboard.components.Board.ImageEditor.cropImage": "Crop image",