feat: updating frontend styling

- forms will have red background colour when "instant  update" is enabled
- button styling is in css file now

frontend/src/App.css

@@ -0,0 +1,8 @@
+input.instantUpdate {
+  background-color: rgba(255, 0, 0, 0.1);
+}
+
+.numberComponentButton {
+  padding: 0.15em 6px !important;
+  font-size: 0.70rem !important;
+}

frontend/src/App.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useReducer, useState } from 'react';
-import { Navbar, Button, Form, Nav, Offcanvas, Container } from 'react-bootstrap';
+import { Navbar, Form, Offcanvas, Container } from 'react-bootstrap';
 import { hostname, port, socket } from './socket';
 import {
   DataServiceComponent,

frontend/src/components/AsyncMethodComponent.tsx

@@ -72,7 +72,7 @@ export const AsyncMethodComponent = React.memo((props: AsyncMethodProps) => {
 
   return (
     <div
-      className="col-5 align-items-center method"
+      className="col-5 align-items-center asyncMethodComponent"
       id={parent_path.concat('.' + name)}>
       {process.env.NODE_ENV === 'development' && (
         <p>Render count: {renderCount.current}</p>

frontend/src/components/ButtonComponent.tsx

@@ -27,7 +27,7 @@ export const ButtonComponent = React.memo((props: ButtonComponentProps) => {
   };
 
   return (
-    <div className={'button'} id={parent_path.concat('.' + name)}>
+    <div className={'buttonComponent'} id={parent_path.concat('.' + name)}>
       {process.env.NODE_ENV === 'development' && (
         <p>Render count: {renderCount.current}</p>
       )}

frontend/src/components/DataServiceComponent.tsx

@@ -17,7 +17,7 @@ export const DataServiceComponent = React.memo(
     const [open, setOpen] = useState(true);
 
     return (
-      <div className="App">
+      <div className="dataServiceComponent">
         <Card className="mb-3">
           <Card.Header
             onClick={() => setOpen(!open)}

frontend/src/components/EnumComponent.tsx

@@ -25,7 +25,7 @@ export const EnumComponent = React.memo((props: EnumComponentProps) => {
   };
 
   return (
-    <div className={'component boolean'} id={parent_path.concat('.' + name)}>
+    <div className={'enumComponent'} id={parent_path.concat('.' + name)}>
       {process.env.NODE_ENV === 'development' && (
         <p>Render count: {renderCount.current}</p>
       )}

frontend/src/components/ListComponent.tsx

@@ -20,7 +20,7 @@ export const ListComponent = React.memo((props: ListComponentProps) => {
   const { name, parent_path, value, docString, isInstantUpdate } = props;
 
   return (
-    <div className={'component list'} id={parent_path.concat(name)}>
+    <div className={'listComponent'} id={parent_path.concat(name)}>
       {process.env.NODE_ENV === 'development' && (
         <p>Render count: {renderCount.current}</p>
       )}

frontend/src/components/MethodComponent.tsx

@@ -54,7 +54,7 @@ export const MethodComponent = React.memo((props: MethodProps) => {
 
   return (
     <div
-      className="col-5 align-items-center method"
+      className="col-5 align-items-center methodComponent"
       id={parent_path.concat('.' + name)}>
       {process.env.NODE_ENV === 'development' && (
         <p>Render count: {renderCount.current}</p>

frontend/src/components/NumberComponent.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useRef, useState } from 'react';
 import { Form, InputGroup, Button } from 'react-bootstrap';
 import { emit_update } from '../socket';
 import { DocStringComponent } from './DocStringComponent';
+import '../App.css';
 
 // TODO: add button functionality
 
@@ -223,7 +224,7 @@ export const NumberComponent = React.memo((props: NumberComponentProps) => {
   };
 
   return (
-    <div className={'number component'} id={parent_path.concat(name)}>
+    <div className={'numberComponent'} id={parent_path.concat(name)}>
       {process.env.NODE_ENV === 'development' && (
         <p>Render count: {renderCount.current}</p>
       )}
@@ -239,19 +240,15 @@ export const NumberComponent = React.memo((props: NumberComponentProps) => {
               name={parent_path.concat(name)}
               onKeyDown={handleKeyDown}
               onBlur={handleBlur}
+              className={isInstantUpdate && !readOnly ? 'instantUpdate' : ''}
             />
           </InputGroup>
           {!readOnly && (
             <div className="d-flex flex-column">
-              <Button
-                style={{ padding: '0.2em 6px', fontSize: '0.70rem' }}
-                // className="mb-1"
-                variant="outline-secondary">
+              <Button className="numberComponentButton" variant="outline-secondary">
                 +
               </Button>
-              <Button
-                style={{ padding: '0.2em 6px', fontSize: '0.70rem' }}
-                variant="outline-secondary">
+              <Button className="numberComponentButton" variant="outline-secondary">
                 -
               </Button>
             </div>

frontend/src/components/SliderComponent.tsx

@@ -65,7 +65,7 @@ export const SliderComponent = React.memo((props: SliderComponentProps) => {
   };
 
   return (
-    <div className={'slider'} id={parent_path.concat('.' + name)}>
+    <div className={'sliderComponent'} id={parent_path.concat('.' + name)}>
       {process.env.NODE_ENV === 'development' && (
         <p>Render count: {renderCount.current}</p>
       )}

frontend/src/components/StringComponent.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useRef, useState } from 'react';
 import { Form, InputGroup } from 'react-bootstrap';
 import { emit_update } from '../socket';
 import { DocStringComponent } from './DocStringComponent';
+import '../App.css';
 
 // TODO: add button functionality
 
@@ -50,7 +51,7 @@ export const StringComponent = React.memo((props: StringComponentProps) => {
   };
 
   return (
-    <div className={'component boolean'} id={parent_path.concat(name)}>
+    <div className={'stringComponent'} id={parent_path.concat(name)}>
       {process.env.NODE_ENV === 'development' && (
         <p>Render count: {renderCount.current}</p>
       )}
@@ -67,6 +68,7 @@ export const StringComponent = React.memo((props: StringComponentProps) => {
               onChange={handleChange}
               onKeyDown={handleKeyDown}
               onBlur={handleBlur}
+              className={isInstantUpdate && !readOnly ? 'instantUpdate' : ''}
             />
           </InputGroup>
         </div>

src/pyDataService/frontend/asset-manifest.json

@@ -1,13 +1,13 @@
 {
   "files": {
-    "main.css": "/static/css/main.4da62354.css",
-    "main.js": "/static/js/main.35fa39a1.js",
+    "main.css": "/static/css/main.e914def1.css",
+    "main.js": "/static/js/main.d2fd5251.js",
     "index.html": "/index.html",
-    "main.4da62354.css.map": "/static/css/main.4da62354.css.map",
-    "main.35fa39a1.js.map": "/static/js/main.35fa39a1.js.map"
+    "main.e914def1.css.map": "/static/css/main.e914def1.css.map",
+    "main.d2fd5251.js.map": "/static/js/main.d2fd5251.js.map"
   },
   "entrypoints": [
-    "static/css/main.4da62354.css",
-    "static/js/main.35fa39a1.js"
+    "static/css/main.e914def1.css",
+    "static/js/main.d2fd5251.js"
   ]
 }

src/pyDataService/frontend/index.html

@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site displaying a pyDataService UI."/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>pyDataService App</title><script defer="defer" src="/static/js/main.35fa39a1.js"></script><link href="/static/css/main.4da62354.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site displaying a pyDataService UI."/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>pyDataService App</title><script defer="defer" src="/static/js/main.d2fd5251.js"></script><link href="/static/css/main.e914def1.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>