V0.5.0 - Overhaul for settings page

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,10 @@
+## Summary
+
+## New Features
+
+## Updates
+
+## Additional Info
+
+- [ ] Does this update require migration? (If yes, add extra details)
+- [ ] Are there any other PRs that need to be merged? (If yes, add extra details)

app/app.jsx

@@ -44,9 +44,7 @@ const App = () => {
   if (page === 'settings') {
     return (
       <GlobalLayout>
-        <Navigation activeUrl="settings">
-          <Setttings />
-        </Navigation>
+        <Setttings />
       </GlobalLayout>
     );
   }

app/components/icons/faCircleCheck.jsx

@@ -0,0 +1,30 @@
+// import dependencies
+import PropTypes from 'prop-types';
+
+const FaCircleCheck = ({ height, width, checkColor = 'white' }) => (
+  <svg
+    stroke="currentColor"
+    fill="currentColor"
+    strokeWidth="0"
+    viewBox="0 0 512 512"
+    height={`${height}px`}
+    width={`${width}px`}
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241"></path>
+    <path
+      fill={checkColor}
+      d="M256 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"
+    ></path>
+  </svg>
+);
+
+FaCircleCheck.displayName = 'FaCircleCheck';
+
+FaCircleCheck.propTypes = {
+  width: PropTypes.number,
+  height: PropTypes.number,
+  checkColor: PropTypes.string,
+};
+
+export default FaCircleCheck;

app/components/icons/faUserCircle.jsx

@@ -0,0 +1,25 @@
+// import dependencies
+import PropTypes from 'prop-types';
+
+const FaUserCircle = ({ width = 25, height = 25 }) => (
+  <svg
+    stroke="currentColor"
+    fill="currentColor"
+    strokeWidth="0"
+    viewBox="0 0 496 512"
+    height={`${height}px`}
+    width={`${width}px`}
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 96c48.6 0 88 39.4 88 88s-39.4 88-88 88-88-39.4-88-88 39.4-88 88-88zm0 344c-58.7 0-111.3-26.6-146.5-68.2 18.8-35.4 55.6-59.8 98.5-59.8 2.4 0 4.8.4 7.1 1.1 13 4.2 26.6 6.9 40.9 6.9 14.3 0 28-2.7 40.9-6.9 2.3-.7 4.7-1.1 7.1-1.1 42.9 0 79.7 24.4 98.5 59.8C359.3 421.4 306.7 448 248 448z"></path>
+  </svg>
+);
+
+FaUserCircle.displayName = 'FaUserCircle';
+
+FaUserCircle.propTypes = {
+  width: PropTypes.number,
+  height: PropTypes.number,
+};
+
+export default FaUserCircle;

app/components/icons/faUsers.jsx

@@ -0,0 +1,25 @@
+// import dependencies
+import PropTypes from 'prop-types';
+
+const FaUsers = ({ height = 25, width = 25 }) => (
+  <svg
+    stroke="currentColor"
+    fill="currentColor"
+    strokeWidth="0"
+    viewBox="0 0 640 512"
+    height={`${height}px`}
+    width={`${width}px`}
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm448 0c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm32 32h-64c-17.6 0-33.5 7.1-45.1 18.6 40.3 22.1 68.9 62 75.1 109.4h66c17.7 0 32-14.3 32-32v-32c0-35.3-28.7-64-64-64zm-256 0c61.9 0 112-50.1 112-112S381.9 32 320 32 208 82.1 208 144s50.1 112 112 112zm76.8 32h-8.3c-20.8 10-43.9 16-68.5 16s-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48v-28.8c0-63.6-51.6-115.2-115.2-115.2zm-223.7-13.4C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z"></path>
+  </svg>
+);
+
+FaUsers.displayName = 'FaUsers';
+
+FaUsers.propTypes = {
+  width: PropTypes.number,
+  height: PropTypes.number,
+};
+
+export default FaUsers;

app/components/icons/index.jsx

@@ -1,6 +1,11 @@
 import BsTable from './bsTable';
 import FaCheck from './faCheck';
+import FaChevronDown from './faChevronDown';
+import FaChevronLeft from './faChevronLeft';
+import FaChevronRight from './faChevronRight';
 import FaChevronUp from './faChevronUp';
+import FaCircleCheck from './faCircleCheck';
+import FaUserCircle from './faUserCircle';
 import FaClose from './faClose';
 import FaCog from './faCog';
 import FaEllipsisVertical from './faEllipsisVertical';
@@ -12,15 +17,27 @@ import FaTrash from './faTrash';
 import FiLayout from './fiLayout';
 import HiStatusOffline from './hiStatusOffline';
 import HiStatusOnline from './hiStatusOnline';
+import IoArrowBack from './ioArrowBack';
+import IoColorPalette from './ioColorPalette';
 import IoGrid from './ioGrid';
+import LiaSyncSolid from './liaSyncSolid';
 import MdEdit from './mdEdit';
+import MdErrorOutline from './mdErrorOutline';
+import MdEye from './mdEye';
+import MdEyeOff from './mdEyeOff';
+import MdHelpCircle from './mdHelpCircle';
 import PiListFill from './piListFill';
 import StatusLogo from './statusLogo';
 
 export {
   BsTable,
   FaCheck,
+  FaChevronDown,
+  FaChevronLeft,
+  FaChevronRight,
+  FaCircleCheck,
   FaChevronUp,
+  FaUserCircle,
   FaClose,
   FaCog,
   FaEllipsisVertical,
@@ -32,8 +49,15 @@ export {
   FiLayout,
   HiStatusOffline,
   HiStatusOnline,
+  IoArrowBack,
+  IoColorPalette,
   IoGrid,
+  LiaSyncSolid,
   MdEdit,
+  MdErrorOutline,
+  MdEye,
+  MdEyeOff,
+  MdHelpCircle,
   PiListFill,
   StatusLogo,
 };

app/components/icons/ioArrowBack.jsx

@@ -0,0 +1,31 @@
+// import dependencies
+import PropTypes from 'prop-types';
+
+const IoArrowBack = ({ height = 25, width = 25 }) => (
+  <svg
+    stroke="currentColor"
+    fill="currentColor"
+    strokeWidth="0"
+    viewBox="0 0 512 512"
+    height={`${height}px`}
+    width={`${width}px`}
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill="none"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="48"
+      d="M244 400 100 256l144-144M120 256h292"
+    ></path>
+  </svg>
+);
+
+IoArrowBack.displayName = 'IoArrowBack';
+
+IoArrowBack.propTypes = {
+  height: PropTypes.number,
+  width: PropTypes.number,
+};
+
+export default IoArrowBack;

app/components/icons/ioColorPalette.jsx

@@ -0,0 +1,25 @@
+// import dependencies
+import PropTypes from 'prop-types';
+
+const IoColorPalette = ({ height = 25, width = 25 }) => (
+  <svg
+    stroke="currentColor"
+    fill="currentColor"
+    strokeWidth="0"
+    viewBox="0 0 512 512"
+    height={`${height}px`}
+    width={`${width}px`}
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M430.1 347.9c-6.6-6.1-16.3-7.6-24.6-9-11.5-1.9-15.9-4-22.6-10-14.3-12.7-14.3-31.1 0-43.8l30.3-26.9c46.4-41 46.4-108.2 0-149.2-34.2-30.1-80.1-45-127.8-45-55.7 0-113.9 20.3-158.8 60.1-83.5 73.8-83.5 194.7 0 268.5 41.5 36.7 97.5 55 152.9 55.4h1.7c55.4 0 110-17.9 148.8-52.4 14.4-12.7 12-36.6.1-47.7zM120 216c0-17.7 14.3-32 32-32s32 14.3 32 32-14.3 32-32 32-32-14.3-32-32zm40 126c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm64-161c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm72 219c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48zm24-208c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32z"></path>
+  </svg>
+);
+
+IoColorPalette.displayName = 'IoColorPalette';
+
+IoColorPalette.propTypes = {
+  height: PropTypes.number,
+  width: PropTypes.number,
+};
+
+export default IoColorPalette;

app/components/icons/liaSyncSolid.jsx

@@ -0,0 +1,25 @@
+// import dependencies
+import PropTypes from 'prop-types';
+
+const LiaSyncSolid = ({ height, width }) => (
+  <svg
+    stroke="currentColor"
+    fill="currentColor"
+    strokeWidth="0"
+    viewBox="0 0 32 32"
+    height={`${height}px`}
+    width={`${width}px`}
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M 16 4 C 10.886719 4 6.617188 7.160156 4.875 11.625 L 6.71875 12.375 C 8.175781 8.640625 11.710938 6 16 6 C 19.242188 6 22.132813 7.589844 23.9375 10 L 20 10 L 20 12 L 27 12 L 27 5 L 25 5 L 25 8.09375 C 22.808594 5.582031 19.570313 4 16 4 Z M 25.28125 19.625 C 23.824219 23.359375 20.289063 26 16 26 C 12.722656 26 9.84375 24.386719 8.03125 22 L 12 22 L 12 20 L 5 20 L 5 27 L 7 27 L 7 23.90625 C 9.1875 26.386719 12.394531 28 16 28 C 21.113281 28 25.382813 24.839844 27.125 20.375 Z"></path>
+  </svg>
+);
+
+LiaSyncSolid.displayName = 'LiaSyncSolid';
+
+LiaSyncSolid.propTypes = {
+  width: PropTypes.number,
+  height: PropTypes.number,
+};
+
+export default LiaSyncSolid;

app/components/icons/mdEye.jsx

@@ -0,0 +1,25 @@
+// import dependencies
+import PropTypes from 'prop-types';
+
+const MdEye = ({ width = 25, height = 25 }) => (
+  <svg
+    stroke="currentColor"
+    fill="currentColor"
+    strokeWidth="0"
+    viewBox="0 0 512 512"
+    height={`${height}px`}
+    width={`${width}px`}
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M256 105c-101.8 0-188.4 62.4-224 151 35.6 88.6 122.2 151 224 151s188.4-62.4 224-151c-35.6-88.6-122.2-151-224-151zm0 251.7c-56 0-101.8-45.3-101.8-100.7S200 155.3 256 155.3 357.8 200.6 357.8 256 312 356.7 256 356.7zm0-161.1c-33.6 0-61.1 27.2-61.1 60.4s27.5 60.4 61.1 60.4 61.1-27.2 61.1-60.4-27.5-60.4-61.1-60.4z"></path>
+  </svg>
+);
+
+MdEye.displayName = 'MdEye';
+
+MdEye.propTypes = {
+  width: PropTypes.number,
+  height: PropTypes.number,
+};
+
+export default MdEye;

app/components/icons/mdEyeOff.jsx

@@ -0,0 +1,25 @@
+// import dependencies
+import PropTypes from 'prop-types';
+
+const MdEyeOff = ({ width = 25, height = 25 }) => (
+  <svg
+    stroke="currentColor"
+    fill="currentColor"
+    strokeWidth="0"
+    viewBox="0 0 512 512"
+    height={`${height}px`}
+    width={`${width}px`}
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M256.1 144.8c56.2 0 101.9 45.3 101.9 101.1 0 13.1-2.6 25.5-7.3 37l59.5 59c30.8-25.5 55-58.4 69.9-96-35.3-88.7-122.3-151.6-224.2-151.6-28.5 0-55.8 5.1-81.1 14.1l44 43.7c11.6-4.6 24.1-7.3 37.3-7.3zM52.4 89.7l46.5 46.1 9.4 9.3c-33.9 26-60.4 60.8-76.3 100.8 35.2 88.7 122.2 151.6 224.1 151.6 31.6 0 61.7-6.1 89.2-17l8.6 8.5 59.7 59 25.9-25.7L78.2 64 52.4 89.7zM165 201.4l31.6 31.3c-1 4.2-1.6 8.7-1.6 13.1 0 33.5 27.3 60.6 61.1 60.6 4.5 0 9-.6 13.2-1.6l31.6 31.3c-13.6 6.7-28.7 10.7-44.8 10.7-56.2 0-101.9-45.3-101.9-101.1 0-15.8 4.1-30.7 10.8-44.3zm87.8-15.7l64.2 63.7.4-3.2c0-33.5-27.3-60.6-61.1-60.6l-3.5.1z"></path>
+  </svg>
+);
+
+MdEyeOff.displayName = 'MdEyeOff';
+
+MdEyeOff.propTypes = {
+  width: PropTypes.number,
+  height: PropTypes.number,
+};
+
+export default MdEyeOff;

app/components/icons/mdHelpCircle.jsx

@@ -0,0 +1,25 @@
+// import dependencies
+import PropTypes from 'prop-types';
+
+const MdHelpCircle = ({ width = 24, height = 24 }) => (
+  <svg
+    stroke="currentColor"
+    fill="currentColor"
+    strokeWidth="0"
+    viewBox="0 0 512 512"
+    height={`${height}px`}
+    width={`${width}px`}
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M256 48C141.2 48 48 141.2 48 256s93.2 208 208 208 208-93.2 208-208S370.8 48 256 48zm21 333h-42v-42h42v42zm-.2-63h-41.6c0-67 62.4-62.2 62.4-103.8 0-22.9-18.7-41.7-41.6-41.7S214.4 192 214.4 214h-41.6c0-46 37.2-83 83.2-83s83.2 37.1 83.2 83.1c0 52-62.4 57.9-62.4 103.9z"></path>
+  </svg>
+);
+
+MdHelpCircle.displayName = 'MdHelpCircle';
+
+MdHelpCircle.propTypes = {
+  width: PropTypes.number,
+  height: PropTypes.number,
+};
+
+export default MdHelpCircle;

app/components/modal/monitor/pages/http/statusCodes.jsx

@@ -17,6 +17,8 @@ const MonitorHttpStatusCodes = ({
     code.includes(selectSearch)
   );
 
+  const monitorStatusCodes = Array.isArray(selectedIds) ? selectedIds : [];
+
   return (
     <>
       <label className="text-input-label">Accepted Status Codes</label>
@@ -26,7 +28,7 @@ const MonitorHttpStatusCodes = ({
           isOpen={selectIsOpen}
           toggleSelect={toggleSelect}
         >
-          {selectedIds.join(', ')}
+          {monitorStatusCodes?.join(', ')}
         </Select.Trigger>
         <Select.List
           fullWidth
@@ -39,7 +41,7 @@ const MonitorHttpStatusCodes = ({
               key={code}
               onClick={() => handleStatusCodeSelect(code)}
               showDot
-              isSelected={selectedIds.includes(code)}
+              isSelected={monitorStatusCodes.includes(code)}
             >
               {code}
             </Select.Item>