frontend: update style (fix button appearance)

frontend/src/App.css

@@ -12,14 +12,28 @@ input.instantUpdate {
 }
 .navbarOffset {
   padding-top: 60px !important;
-  right: 20;
 }
-/* .toastContainer {
+.toastContainer {
-  position: fixed;
+  position: fixed !important;
-} */
+  padding: 5px;
+}
 .notificationToast {
   background-color: rgba(114, 214, 253, 0.5) !important;
 }
 .exceptionToast {
   background-color: rgba(216, 41, 18, 0.678) !important;
 }
+.buttonComponent {
+  float: left !important;
+  margin-right: 10px !important;
+}
+.stringComponent {
+  float: left !important;
+  margin-right: 10px !important;
+}
+.numberComponent {
+    float: left !important;
+    margin-right: 10px !important;
+    width: 270px !important;
+}
+

frontend/src/components/AsyncMethodComponent.tsx

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

frontend/src/components/ButtonComponent.tsx

@@ -37,7 +37,7 @@ export const ButtonComponent = React.memo((props: ButtonComponentProps) => {
   return (
     <div className={'buttonComponent'} id={id}>
       {process.env.NODE_ENV === 'development' && (
-        <p>Render count: {renderCount.current}</p>
+        <div>Render count: {renderCount.current}</div>
       )}
 
       <DocStringComponent docString={docString} />
@@ -49,7 +49,7 @@ export const ButtonComponent = React.memo((props: ButtonComponentProps) => {
         value={parentPath}
         disabled={readOnly}
         onChange={(e) => setChecked(e.currentTarget.checked)}>
-        <p>{buttonName}</p>
+        {buttonName}
       </ToggleButton>
     </div>
   );

frontend/src/components/ColouredEnumComponent.tsx

@@ -42,7 +42,7 @@ export const ColouredEnumComponent = React.memo((props: ColouredEnumComponentPro
   return (
     <div className={'enumComponent'} id={id}>
       {process.env.NODE_ENV === 'development' && (
-        <p>Render count: {renderCount.current}</p>
+        <div>Render count: {renderCount.current}</div>
       )}
       <DocStringComponent docString={docString} />
       <Row>

frontend/src/components/ConnectionToast.tsx

@@ -68,7 +68,7 @@ export const ConnectionToast = React.memo(
     const { message, bg, delay } = getToastContent();
 
     return (
-      <ToastContainer position="bottom-center">
+      <ToastContainer position="bottom-center" className="toastContainer">
         <Toast
           show={show}
           onClose={handleClose}

frontend/src/components/EnumComponent.tsx

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

frontend/src/components/ImageComponent.tsx

@@ -31,6 +31,9 @@ export const ImageComponent = React.memo((props: ImageComponentProps) => {
 
   return (
     <div className={'imageComponent'} id={id}>
+      {process.env.NODE_ENV === 'development' && (
+        <div>Render count: {renderCount.current}</div>
+      )}
       <Card>
         <Card.Header
           onClick={() => setOpen(!open)}

frontend/src/components/ListComponent.tsx

@@ -26,7 +26,7 @@ export const ListComponent = React.memo((props: ListComponentProps) => {
   return (
     <div className={'listComponent'} id={id}>
       {process.env.NODE_ENV === 'development' && (
-        <p>Render count: {renderCount.current}</p>
+        <div>Render count: {renderCount.current}</div>
       )}
       <DocStringComponent docString={docString} />
       {value.map((item, index) => {

frontend/src/components/MethodComponent.tsx

@@ -76,7 +76,7 @@ export const MethodComponent = React.memo((props: MethodProps) => {
   return (
     <div className="align-items-center methodComponent" id={id}>
       {process.env.NODE_ENV === 'development' && (
-        <p>Render count: {renderCount.current}</p>
+        <div>Render count: {renderCount.current}</div>
       )}
       <h5 onClick={() => setHideOutput(!hideOutput)} style={{ cursor: 'pointer' }}>
         Function: {name}
@@ -84,11 +84,9 @@ export const MethodComponent = React.memo((props: MethodProps) => {
       </h5>
       <Form onSubmit={execute}>
         {args}
-        <div>
+        <Button variant="primary" type="submit">
-          <Button variant="primary" type="submit">
+          Execute
-            Execute
+        </Button>
-          </Button>
-        </div>
       </Form>
 
       <Collapse in={!hideOutput}>

frontend/src/components/NotificationsComponent.tsx

@@ -25,10 +25,7 @@ export const Notifications = React.memo((props: NotificationProps) => {
   } = props;
 
   return (
-    <ToastContainer
+    <ToastContainer className="navbarOffset toastContainer" position="top-end">
-      className="navbarOffset toastContainer"
-      position="top-end"
-      style={{ position: 'fixed' }}>
       {showNotification &&
         notifications.map((notification) => (
           <Toast

frontend/src/components/NumberComponent.tsx

@@ -289,8 +289,8 @@ export const NumberComponent = React.memo((props: NumberComponentProps) => {
 
   return (
     <div className="numberComponent" id={id}>
-      {process.env.NODE_ENV === 'development' && showName && (
+      {process.env.NODE_ENV === 'development' && (
-        <p>Render count: {renderCount.current}</p>
+        <div>Render count: {renderCount.current}</div>
       )}
       <DocStringComponent docString={docString} />
       <div className="d-flex">

frontend/src/components/SliderComponent.tsx

@@ -106,7 +106,7 @@ export const SliderComponent = React.memo((props: SliderComponentProps) => {
   return (
     <div className="sliderComponent" id={id}>
       {process.env.NODE_ENV === 'development' && (
-        <p>Render count: {renderCount.current}</p>
+        <div>Render count: {renderCount.current}</div>
       )}
 
       <DocStringComponent docString={docString} />

frontend/src/components/StringComponent.tsx

@@ -60,7 +60,7 @@ export const StringComponent = React.memo((props: StringComponentProps) => {
   return (
     <div className={'stringComponent'} id={id}>
       {process.env.NODE_ENV === 'development' && (
-        <p>Render count: {renderCount.current}</p>
+        <div>Render count: {renderCount.current}</div>
       )}
       <DocStringComponent docString={docString} />
       <InputGroup>