style(checkbox): Match mui design

Co-authored-by: David Ralph <me@davidcralph.co.uk>

src/components/Elements/MainModal/scss/settings/modules/tabs/_changelog.scss

@@ -1,18 +1,3 @@
-.updateChangelog {
-  max-width: 75%;
-  margin-top: 15px;
-  white-space: pre-wrap;
-  font-size: 18px;
-
-  a {
-    color: var(--modal-link);
-
-    &:hover {
-      opacity: 0.8;
-    }
-  }
-}
-
 .changelogtab {
   .mainTitle {
     margin: 0 !important;
@@ -21,4 +6,10 @@
   img {
     max-width: 95%;
   }
+
+  a {
+    &:hover {
+      opacity: 0.8;
+    }
+  }
 }

src/components/Form/Settings/Checkbox/Checkbox.jsx

@@ -1,6 +1,7 @@
 import variables from 'config/variables';
 import { useEffect, useState } from 'react';
 import { Checkbox as CheckboxUI, Field, Label } from '@headlessui/react';
+import { MdCheckBox } from "react-icons/md";
 import EventBus from 'utils/eventbus';
 
 const Checkbox = (props) => {
@@ -36,25 +37,14 @@ const Checkbox = (props) => {
   };
 
   return (
-    <Field className="flex flex-row-reverse items-center gap-2">
+    <Field className="w-[300px] h-9 my-1 flex flex-row-reverse items-center gap-2 justify-between text-left">
       <CheckboxUI
         checked={checked}
         onChange={handleChange}
         disabled={props.disabled || false}
-        className="group block size-4 rounded border bg-white data-[checked]:bg-blue-500"
+        className="border border-[#484848] bg-white/5 group size-4 rounded data-[checked]:bg-neutral-900 cursor-pointer grid place-content-center"
       >
-        <svg
-          className="stroke-white opacity-0 group-data-[checked]:opacity-100"
-          viewBox="0 0 14 14"
-          fill="none"
-        >
-          <path
-            d="M3 8L6 11L11 3.5"
-            strokeWidth={2}
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          />
-        </svg>
+          <MdCheckBox className="stroke-white opacity-0 group-data-[checked]:opacity-100 size-6" />
       </CheckboxUI>
       <Label>{props.text}</Label>
     </Field>

src/features/marketplace/views/Added.jsx

@@ -11,7 +11,7 @@ import { Dropdown, FileUpload } from 'components/Form/Settings';
 import { Header, CustomActions } from 'components/Layout/Settings';
 import { Button } from 'components/Elements';
 
-import { install, uninstall, urlParser } from 'utils/marketplace';
+import { install, uninstall } from 'utils/marketplace';
 
 export default class Added extends PureComponent {
   constructor() {
@@ -100,7 +100,7 @@ export default class Added extends PureComponent {
           type: info.data.type,
           display_name: info.data.name,
           author: info.data.author,
-          description: urlParser(info.data.description.replace(/\n/g, '<br>')),
+          description: info.data.description,
           //updated: info.updated,
           version: info.data.version,
           icon: info.data.screenshot_url,

src/features/marketplace/views/Browse.jsx

@@ -16,7 +16,7 @@ import Dropdown from '../../../components/Form/Settings/Dropdown/Dropdown';
 import { Header } from 'components/Layout/Settings';
 import { Button } from 'components/Elements';
 
-import { install, urlParser, uninstall } from 'utils/marketplace';
+import { install, uninstall } from 'utils/marketplace';
 
 class Marketplace extends PureComponent {
   constructor() {
@@ -98,7 +98,7 @@ class Marketplace extends PureComponent {
           type: info.data.type,
           display_name: info.data.name,
           author: info.data.author,
-          description: urlParser(info.data.description.replace(/\n/g, '<br>')),
+          description: info.data.description,
           //updated: info.updated,
           version: info.data.version,
           icon: info.data.screenshot_url,

src/features/marketplace/views/ItemPage.jsx

@@ -23,6 +23,8 @@ import { ShareModal } from 'components/Elements';
 import placeholderIcon from 'assets/icons/marketplace-placeholder.png';
 import { Items } from '../components/Items/Items';
 
+import Markdown from 'markdown-to-jsx';
+
 class ItemPage extends PureComponent {
   constructor(props) {
     super(props);
@@ -230,10 +232,7 @@ class ItemPage extends PureComponent {
               <span className="title">
                 {variables.getMessage('modals.main.marketplace.product.description')}
               </span>
-              <span
-                className="subtitle"
-                dangerouslySetInnerHTML={{ __html: this.props.data.description }}
-              />
+              <Markdown>{this.props.data.data.description}</Markdown>
             </div>
             {this.props.data.data.quotes && (
               <>

src/features/misc/sections/Changelog.jsx

@@ -111,7 +111,9 @@ class Changelog extends PureComponent {
           <span className="mainTitle">{this.state.title}</span>
           <span className="subtitle">Released on {this.state.date}</span>
         </div>
-        <Markdown>{this.state.content}</Markdown>
+        <Markdown options={{ overrides: { a: { props: { target: '_blank' } } } }}>
+          {this.state.content}
+        </Markdown>
       </article>
     );
   }

src/utils/marketplace/index.js

@@ -1,5 +1,4 @@
 import { install } from './install';
 import { uninstall } from './uninstall';
-import { urlParser } from './urlParser';
 
-export { install, uninstall, urlParser };
+export { install, uninstall };

src/utils/marketplace/urlParser.js

@@ -1,13 +0,0 @@
-// based on https://stackoverflow.com/questions/37684/how-to-replace-plain-urls-with-links
-export function urlParser(input) {
-  const urlPattern =
-    /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,63}\b([-a-zA-Z0-9()!@:%_+.~#?&//=]*)/g;
-  const emailPattern = /\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Z|a-z]{2,}\b/g;
-
-  const replaceUrl = (url) => `<br/><a class="link" href="${url}" target="_blank">${url}</a>`;
-  const replaceEmail = (email) => `<a class="link" href="mailto:${email}">${email}</a>`;
-
-  const replacedUrls = input.replace(urlPattern, replaceUrl);
-  const replacedEmails = replacedUrls.replace(emailPattern, replaceEmail);
-  return replacedEmails;
-}