Merge branch 'master' into customizable-TS

extensions/default/src/Panels/PanelMeasurementTable.tsx

@@ -160,7 +160,7 @@ export default function PanelMeasurementTable({
       showOverlay: true,
       content: Dialog,
       contentProps: {
-        title: 'Enter your annotation',
+        title: 'Annotation',
         noCloseButton: true,
         value: { label: measurement.label || '' },
         body: ({ value, setValue }) => {
@@ -175,18 +175,17 @@ export default function PanelMeasurementTable({
             }
           };
           return (
-            <div className="p-4 bg-primary-dark">
-              <Input
-                autoFocus
-                id="annotation"
-                className="mt-2 bg-black border-primary-main"
-                type="text"
-                containerClassName="mr-2"
-                value={value.label}
-                onChange={onChangeHandler}
-                onKeyPress={onKeyPressHandler}
-              />
-            </div>
+            <Input
+              label="Enter your annotation"
+              labelClassName="text-white text-[14px] leading-[1.2]"
+              autoFocus
+              id="annotation"
+              className="bg-black border-primary-main"
+              type="text"
+              value={value.label}
+              onChange={onChangeHandler}
+              onKeyPress={onKeyPressHandler}
+            />
           );
         },
         actions: [

extensions/default/src/Panels/createReportDialogPrompt.tsx

@@ -11,7 +11,7 @@ export default function createReportDialogPrompt(
   uiDialogService,
   { extensionManager }
 ) {
-  return new Promise(function (resolve, reject) {
+  return new Promise(function(resolve, reject) {
     let dialogId = undefined;
 
     const _handleClose = () => {
@@ -73,7 +73,7 @@ export default function createReportDialogPrompt(
       useLastPosition: false,
       showOverlay: true,
       contentProps: {
-        title: 'Provide a name for your report',
+        title: 'Create Report',
         value: {
           label: '',
           dataSourceName: extensionManager.activeDataSource,
@@ -102,38 +102,34 @@ export default function createReportDialogPrompt(
           };
           return (
             <>
-              <div className="p-4 bg-primary-dark">
-                {dataSourcesOpts.length > 1 && (
-                  <Select
-                    closeMenuOnSelect={true}
-                    className="mr-2 bg-black border-primary-main"
-                    options={dataSourcesOpts}
-                    placeholder={
-                      dataSourcesOpts.find(
-                        option => option.value === value.dataSourceName
-                      ).placeHolder
-                    }
-                    value={value.dataSourceName}
-                    onChange={evt => {
-                      setValue(v => ({ ...v, dataSourceName: evt.value }));
-                    }}
-                    isClearable={false}
-                  />
-                )}
-              </div>
-              <div className="p-4 bg-primary-dark">
-                <Input
-                  autoFocus
-                  className="mt-2 bg-black border-primary-main"
-                  type="text"
-                  placeholder="Enter Report Name"
-                  containerClassName="mr-2"
-                  value={value.label}
-                  onChange={onChangeHandler}
-                  onKeyPress={onKeyPressHandler}
-                  required
+              {dataSourcesOpts.length > 1 && (
+                <Select
+                  closeMenuOnSelect={true}
+                  className="mr-2 bg-black border-primary-main"
+                  options={dataSourcesOpts}
+                  placeholder={
+                    dataSourcesOpts.find(
+                      option => option.value === value.dataSourceName
+                    ).placeHolder
+                  }
+                  value={value.dataSourceName}
+                  onChange={evt => {
+                    setValue(v => ({ ...v, dataSourceName: evt.value }));
+                  }}
+                  isClearable={false}
                 />
-              </div>
+              )}
+              <Input
+                autoFocus
+                label="Enter the report name"
+                labelClassName="text-white text-[14px] leading-[1.2]"
+                className="bg-black border-primary-main"
+                type="text"
+                value={value.label}
+                onChange={onChangeHandler}
+                onKeyPress={onKeyPressHandler}
+                required
+              />
             </>
           );
         },