From 412d230ceeeedaaaf698566d256579449ae75182 Mon Sep 17 00:00:00 2001
From: Carlos Valente <34649812+cpvalente@users.noreply.github.com>
Date: Sat, 28 May 2022 16:25:56 +0200
Subject: [PATCH] Ux/134 (#139)

* ui/134: highlight active messages
* ui/134: create theming template
* ui/134: version bump
---
 client/package.json                                 |  2 +-
 client/src/features/control/message/InputRow.jsx    |  6 +++---
 .../control/message/MessageControl.module.scss      | 10 ++++++++++
 client/src/index.js                                 |  5 +++--
 client/src/theme/theme.js                           | 13 +++++++++++++
 server/package.json                                 |  2 +-
 6 files changed, 31 insertions(+), 7 deletions(-)
 create mode 100644 client/src/theme/theme.js

diff --git a/client/package.json b/client/package.json
index 7b7d00292..deacf75af 100644
--- a/client/package.json
+++ b/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",
diff --git a/client/src/features/control/message/InputRow.jsx b/client/src/features/control/message/InputRow.jsx
index 200d33a37..5850df296 100644
--- a/client/src/features/control/message/InputRow.jsx
+++ b/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>
   );
 }
 
diff --git a/client/src/features/control/message/MessageControl.module.scss b/client/src/features/control/message/MessageControl.module.scss
index e726c1b9e..c35cad3fd 100644
--- a/client/src/features/control/message/MessageControl.module.scss
+++ b/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;
+    }
   }
 }
 
diff --git a/client/src/index.js b/client/src/index.js
index a03cec694..8de4169d7 100644
--- a/client/src/index.js
+++ b/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>
diff --git a/client/src/theme/theme.js b/client/src/theme/theme.js
new file mode 100644
index 000000000..3bf45e935
--- /dev/null
+++ b/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;
diff --git a/server/package.json b/server/package.json
index 109c0f37b..ea45fad37 100644
--- a/server/package.json
+++ b/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",