d14bb2ea11
* feat: configure eslint rules by replicating those in the twenty-front package and introduce scripts for linting, formatting code and removing build output * fix: ensure each file of the extension package satisfies linting rules and disable some rules where necessary * fix: update relative imports to absolute imports throughout extension code with the defined tilde and at symbols * fix: import the updated ui module from the front package to the chrome extension package to prevent eslint rules from breaking subject to the recent merged changes into main * fix: commit the case change for files that were missed by Git in the earlier commits due to default configuration
59 lines
1.6 KiB
TypeScript
59 lines
1.6 KiB
TypeScript
/* eslint-disable @nx/workspace-no-hardcoded-colors */
|
|
const createNewButton = (
|
|
text: string,
|
|
onClickHandler: () => void,
|
|
): HTMLButtonElement => {
|
|
const newButton: HTMLButtonElement = document.createElement('button');
|
|
newButton.textContent = text;
|
|
|
|
// Write universal styles for the button
|
|
const buttonStyles = {
|
|
border: '1px solid black',
|
|
borderRadius: '20px',
|
|
backgroundColor: 'black',
|
|
color: 'white',
|
|
fontSize: '1.5rem',
|
|
fontWeight: '600',
|
|
padding: '0.45em 1em',
|
|
width: '15rem',
|
|
height: '32px',
|
|
};
|
|
|
|
// Apply common styles to the button.
|
|
Object.assign(newButton.style, buttonStyles);
|
|
|
|
// Apply common styles to specifc states of a button.
|
|
newButton.addEventListener('mouseenter', () => {
|
|
const hoverStyles = {
|
|
backgroundColor: '#5e5e5e',
|
|
borderColor: '#5e5e5e',
|
|
};
|
|
Object.assign(newButton.style, hoverStyles);
|
|
});
|
|
|
|
newButton.addEventListener('mouseleave', () => {
|
|
Object.assign(newButton.style, buttonStyles);
|
|
});
|
|
|
|
// Handle the click event.
|
|
newButton.addEventListener('click', async () => {
|
|
const { apiKey } = await chrome.storage.local.get('apiKey');
|
|
|
|
// If an api key is not set, the options page opens up to allow the user to configure an api key.
|
|
if (!apiKey) {
|
|
chrome.runtime.sendMessage({ action: 'openOptionsPage' });
|
|
return;
|
|
}
|
|
|
|
// Update content during the resolution of the request.
|
|
newButton.textContent = 'Saving...';
|
|
|
|
// Call the provided onClickHandler function to handle button click logic
|
|
onClickHandler();
|
|
});
|
|
|
|
return newButton;
|
|
};
|
|
|
|
export default createNewButton;
|