fix: LSDV-5112: Fix the disable state of submission button (#1378)

Co-authored-by: juliosgarbi <[email protected]>

Author: juliosgarbi

src/common/Button/Button.styl

@@ -26,6 +26,8 @@
     --button-color rgba(#000, 0.5)
     pointer-events none
     background-color #efefef
+    box-shadow: inset 0px -1px 0px rgba(0,0,0,0.1);
+    border: 1px solid rgba(137, 128, 152, 0.16);
 
   &:hover
     box-shadow 0px 2px 4px rgba(#000, 0.05), inset 0px -1px 0px rgba(#000, 0.1), inset 0px 0px 0px 1px rgba(#000, 0.2)

src/common/Button/Button.tsx

@@ -18,7 +18,7 @@ export interface ButtonProps extends HTMLButtonProps {
   waiting?: boolean;
   icon?: JSX.Element;
   tag?: CNTagName;
-  look?: 'primary' | 'danger' | 'destructive' | 'alt' | 'outlined' | 'active';
+  look?: 'primary' | 'danger' | 'destructive' | 'alt' | 'outlined' | 'active' | 'disabled';
   primary?: boolean;
   danger?: boolean;
   style?: CSSProperties;

src/components/BottomBar/Controls.js

@@ -145,7 +145,7 @@ export const Controls = controlsInjector(observer(({ store, history, annotation
       buttons.push(
         <ButtonTooltip key="submit" title={title}>
           <Elem name="tooltip-wrapper">
-            <Button aria-label="submit" disabled={disabled || submitDisabled} look="primary" onClick={async () => {
+            <Button aria-label="submit" disabled={disabled || submitDisabled} look={(disabled || submitDisabled) ? 'disabled' : 'primary'} onClick={async () => {
               await store.commentStore.commentFormSubmit();
               store.submitAnnotation();
             }}>
@@ -160,7 +160,7 @@ export const Controls = controlsInjector(observer(({ store, history, annotation
       const isUpdate = sentUserGenerate || versions.result;
       const button = (
         <ButtonTooltip key="update" title="Update this task: [ Alt+Enter ]">
-          <Button aria-label="submit" disabled={disabled || submitDisabled} look="primary" onClick={async () => {
+          <Button aria-label="submit" disabled={disabled || submitDisabled} look={(disabled || submitDisabled) ? 'disabled' : 'primary'} onClick={async () => {
             await store.commentStore.commentFormSubmit();
             store.updateAnnotation();
           }}>