update ui + add dono link

src/common/constants.ts

@@ -25,3 +25,105 @@ export const EventTypes = {
 export const PayloadNames = {
   SETTING_UPDATE: 'setting:update',
 };
+
+export const KeyCodes = {
+  backspace: 8,
+  tab: 9,
+  enter: 13,
+  shift: 16,
+  ctrl: 17,
+  alt: 18,
+  pausebreak: 19,
+  capslock: 20,
+  esc: 27,
+  space: 32,
+  pageup: 33,
+  pagedown: 34,
+  end: 35,
+  home: 36,
+  leftarrow: 37,
+  uparrow: 38,
+  rightarrow: 39,
+  downarrow: 40,
+  insert: 45,
+  delete: 46,
+  0: 48,
+  1: 49,
+  2: 50,
+  3: 51,
+  4: 52,
+  5: 53,
+  6: 54,
+  7: 55,
+  8: 56,
+  9: 57,
+  a: 65,
+  b: 66,
+  c: 67,
+  d: 68,
+  e: 69,
+  f: 70,
+  g: 71,
+  h: 72,
+  i: 73,
+  j: 74,
+  k: 75,
+  l: 76,
+  m: 77,
+  n: 78,
+  o: 79,
+  p: 80,
+  q: 81,
+  r: 82,
+  s: 83,
+  t: 84,
+  u: 85,
+  v: 86,
+  w: 87,
+  x: 88,
+  y: 89,
+  z: 90,
+  leftwindowkey: 91,
+  rightwindowkey: 92,
+  selectkey: 93,
+  numpad0: 96,
+  numpad1: 97,
+  numpad2: 98,
+  numpad3: 99,
+  numpad4: 100,
+  numpad5: 101,
+  numpad6: 102,
+  numpad7: 103,
+  numpad8: 104,
+  numpad9: 105,
+  multiply: 106,
+  add: 107,
+  subtract: 109,
+  decimalpoint: 110,
+  divide: 111,
+  f1: 112,
+  f2: 113,
+  f3: 114,
+  f4: 115,
+  f5: 116,
+  f6: 117,
+  f7: 118,
+  f8: 119,
+  f9: 120,
+  f10: 121,
+  f11: 122,
+  f12: 123,
+  numlock: 144,
+  scrolllock: 145,
+  semicolon: 186,
+  equalsign: 187,
+  comma: 188,
+  dash: 189,
+  period: 190,
+  forwardslash: 191,
+  graveaccent: 192,
+  openbracket: 219,
+  backslash: 220,
+  closebracket: 221,
+  singlequote: 222,
+};

src/content/modules/allow-screenshot/index.ts

@@ -1,8 +1,8 @@
-import { KeyCode } from '@nextui-org/react';
+import { KeyCodes } from '../../../common/constants';
 import { EventTypes, SettingIds } from '../../../common/constants';
 import settings from '../../lib/settings';
 
-const Keys = new Set([KeyCode.Ctrl, KeyCode.Alt, KeyCode.Meta, KeyCode.Shift]);
+const Keys = new Set([KeyCodes.ctrl, KeyCodes.alt, KeyCodes.leftwindowkey, KeyCodes.shift, KeyCodes.rightwindowkey]);
 
 function preventPropogation(event: KeyboardEvent) {
   if (!Keys.has(event.keyCode) && event.key !== 'PrintScreen') {

src/content/modules/always-present/index.ts

@@ -1,5 +1,5 @@
 import { EventTypes, SettingIds } from '../../../common/constants';
-import dom from '../../../content/observers/dom';
+import dom from '../../observers/dom';
 import settings from '../../lib/settings';
 import styles from './styles.module.css';
 

src/content/modules/save-image/index.ts

@@ -1,6 +1,6 @@
 import { EventTypes, SettingIds } from '../../../common/constants';
 import settings from '../../lib/settings';
-import dom from '../../../content/observers/dom';
+import dom from '../../observers/dom';
 import styles from './styles.module.css';
 
 const MEDIA_CONTENT_SELECTOR = 'div[aria-label="media content"]';

src/content/modules/settings-menu/components/Modal.tsx

@@ -1,29 +1,62 @@
 import React from 'react';
-import { Modal, Button, Text } from '@nextui-org/react';
+import { Modal, Button, Text, Divider, StyledButtonGroup } from '@nextui-org/react';
 import AllowScreenshot from './AllowScreenshot';
 import PreventTypingNotification from './PreventTyping';
 import SaveImage from './SaveImage';
 import styles from './Modal.module.css';
 import AlwaysPresent from './AlwaysPresent';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faClose, faCoffee, faGhost, faHeart } from '@fortawesome/free-solid-svg-icons';
 
 export default function App({ visible, closeHandler }: { visible: boolean; closeHandler: () => void }) {
   return (
-    <Modal closeButton aria-labelledby="modal-title" open={visible} onClose={closeHandler}>
-      <Modal.Header>
+    <Modal aria-labelledby="modal-title" open={visible} onClose={closeHandler}>
+      <Modal.Header
+        style={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          padding: 20,
+        }}
+      >
         <Text id="modal-title" size={18}>
           Better Snapchat
         </Text>
+        <Button light auto onPress={() => closeHandler()} icon={<FontAwesomeIcon icon={faClose} />} />
       </Modal.Header>
-      <Modal.Body>
+      <Divider />
+      <Modal.Body style={{ padding: 20 }}>
         <div className={styles.checkboxColumn}>
           <AllowScreenshot />
           <PreventTypingNotification />
           <SaveImage />
           <AlwaysPresent />
         </div>
       </Modal.Body>
-      <Modal.Footer>
-        <Button flat auto onPress={closeHandler}>
+      <Divider />
+      <Modal.Footer
+        style={{ padding: 20, display: 'flex', justifyContent: 'space-between', flexDirection: 'row', gap: 20 }}
+      >
+        <Button
+          flat
+          color="warning"
+          onPress={() => {
+            window.open('https://www.buymeacoffee.com/dclstn', '_blank');
+          }}
+        >
+          <div
+            style={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              alignItems: 'center',
+              gap: 10,
+            }}
+          >
+            <FontAwesomeIcon icon={faCoffee} />
+            <Text color="inherit">Buy me a Coffee</Text>
+          </div>
+        </Button>
+        <Button flat auto onClick={() => closeHandler()}>
           Close
         </Button>
       </Modal.Footer>