Ux/134 (#139)

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

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ontime-ui",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "private": true,
   "dependencies": {
     "@chakra-ui/react": "^2.0.0-next.3",

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;
+    }
   }
 }
 

client/src/index.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
-import './index.scss';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 import { BrowserRouter } from 'react-router-dom';
@@ -8,6 +7,8 @@ import { ChakraProvider } from '@chakra-ui/react';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import { AppContextProvider } from './app/context/AppContext';
 import SocketProvider from './app/context/socketContext';
+import theme from './theme/theme';
+import './index.scss';
 
 // Load Open Sans typeface
 require('typeface-open-sans');
@@ -19,7 +20,7 @@ const root = createRoot(container);
 
 root.render(
   <React.StrictMode>
-    <ChakraProvider resetCSS>
+    <ChakraProvider resetCSS theme={theme}>
       <SocketProvider>
         <QueryClientProvider client={queryClient}>
           <AppContextProvider>

client/src/theme/theme.js

@@ -0,0 +1,13 @@
+import { extendTheme } from '@chakra-ui/react';
+
+const theme = extendTheme({
+  components: {
+    Button: {
+      baseStyle: {
+        borderRadius: '4px',
+      },
+    },
+  },
+});
+
+export default theme;

server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ontime",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "author": "Carlos Valente",
   "description": "Time keeping for live events",
   "repository": "https://github.com/cpvalente/ontime",