form buttons styling

packages/web/src/widgets/FormStyledButton.js

@@ -0,0 +1,61 @@
+// @ts-nocheck
+import React from 'react';
+import styled from 'styled-components';
+import theme from '../theme';
+
+const ButtonInput = styled.input`
+  // height: ${theme.toolBar.height - 5}px;
+   border: 1px solid #2e6da4;
+  padding: 5px;
+  margin: 2px;
+  width: 100px;
+  //background-color: #777;
+  background-color: #337ab7;
+  // border-color: #2e6da4; 
+  color: white;
+  border-radius: 2px;
+
+  ${(props) =>
+    !props.disabled &&
+    `
+  &:hover {
+    background-color: #286090;
+  }
+
+  &:active:hover {
+    background-color: #204d74;
+  }
+  `}
+
+  ${(props) =>
+    props.disabled &&
+    `
+    background-color: #ccc;
+    color: gray;
+  `}
+  
+`;
+
+export default function FormStyledButton({
+  onClick = undefined,
+  type = 'button',
+  value,
+  disabled = undefined,
+  ...other
+}) {
+  return (
+    <ButtonInput
+      type={type}
+      onClick={
+        onClick
+          ? () => {
+              if (!disabled && onClick) onClick();
+            }
+          : undefined
+      }
+      disabled={disabled}
+      value={value}
+      {...other}
+    />
+  );
+}