bruno/packages/bruno-app/src/components/Environments/ConfirmCloseEnvironment/index.js

import React from 'react';
import { IconAlertTriangle } from '@tabler/icons';
import Modal from 'components/Modal';
import Portal from 'components/Portal';

const ConfirmCloseEnvironment = ({ onCancel, onCloseWithoutSave, onSaveAndClose, isGlobal }) => {
  return (
    <Portal>
      <Modal
        size="md"
        title="Unsaved changes"
        disableEscapeKey={true}
        disableCloseOnOutsideClick={true}
        closeModalFadeTimeout={150}
        handleCancel={onCancel}
        hideFooter={true}
      >
        <div className="flex items-center font-normal">
          <IconAlertTriangle size={32} strokeWidth={1.5} className="text-yellow-600" />
          <h1 className="ml-2 text-lg font-medium">Hold on...</h1>
        </div>
        <div className="font-normal mt-4">
          You have unsaved changes in {isGlobal ? 'global' : 'collection'} environment settings.
        </div>

        <div className="flex justify-between mt-6">
          <div>
            <button className="btn btn-sm btn-danger" onClick={onCloseWithoutSave}>
              Don't Save
            </button>
          </div>
          <div>
            <button className="btn btn-close btn-sm mr-2" onClick={onCancel}>
              Cancel
            </button>
            <button className="btn btn-secondary btn-sm" onClick={onSaveAndClose}>
              Save
            </button>
          </div>
        </div>
      </Modal>
    </Portal>
  );
};

export default ConfirmCloseEnvironment;