Ux/134 (#139)

* ui/134: highlight active messages
* ui/134: create theming template
* ui/134: version bump

client/src/features/control/message/InputRow.jsx

@@ -3,14 +3,14 @@ import { Editable, EditableInput, EditablePreview } from '@chakra-ui/editable';
 import { Tooltip } from '@chakra-ui/tooltip';
 import { IconButton } from '@chakra-ui/button';
 import { IoSunny } from '@react-icons/all-files/io5/IoSunny';
-import style from './MessageControl.module.scss';
 import PropTypes from 'prop-types';
+import style from './MessageControl.module.scss';
 
 export default function InputRow(props) {
   const { label, placeholder, text, visible, actionHandler, changeHandler } = props;
 
   return (
-    <>
+    <div className={visible && style.inputRowActive}>
       <span className={style.label}>{label}</span>
       <div className={style.inputItems}>
         <Editable
@@ -34,7 +34,7 @@ export default function InputRow(props) {
           />
         </Tooltip>
       </div>
-    </>
+    </div>
   );
 }
 

client/src/features/control/message/MessageControl.module.scss

@@ -33,6 +33,16 @@
 
   .padleft {
     padding-left: 0.5em;
+    border-radius: 2px;
+  }
+
+  .inputRowActive {
+    .label {
+      color: $light-bg;
+    }
+    .inline {
+      background-color: $light-bg-transparent;
+    }
   }
 }