feat: new colour picker

- General Fixes
- Event UI change
- Marketplace Collection UI Changes

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

src/components/Elements/AddModal/AddModal.jsx

@@ -4,6 +4,7 @@ import { useState, memo } from 'react';
 import { TextareaAutosize } from '@mui/material';
 import { MdAddLink, MdClose } from 'react-icons/md';
 import { Tooltip } from 'components/Elements';
+
 function AddModal({ urlError, iconError, addLink, closeModal, edit, editData, editLink }) {
   const [name, setName] = useState(edit ? editData.name : '');
   const [url, setUrl] = useState(edit ? editData.url : '');

src/components/Elements/MainModal/scss/marketplace/_main.scss

@@ -433,15 +433,17 @@ p.author {
 }
 
 .inCollection {
-  background-image: linear-gradient(to left, transparent, #000),
-    url('https://external-preview.redd.it/JyhsEoGMhKIMi3kvfBS24L0IllAO_KrIm4UI-dA1Ax4.jpg?auto=webp&s=b5adf9859b2c1855a5b3085f9453a6e878548505');
+  // background-image: linear-gradient(to left, transparent, #000),
+  //  url('https://external-preview.redd.it/JyhsEoGMhKIMi3kvfBS24L0IllAO_KrIm4UI-dA1Ax4.jpg?auto=webp&s=b5adf9859b2c1855a5b3085f9453a6e878548505');
   display: flex;
   flex-flow: column;
   gap: 15px;
   padding: 15px;
+  margin-top: 15px;
 
   @include themed {
-    box-shadow: 0 0 0 4px t($modal-sidebarActive);
+    background-color: t($modal-secondaryColour);
+    box-shadow: 0 0 0 1px t($modal-sidebarActive);
     border-radius: t($borderRadius);
   }
 }

src/components/Elements/MainModal/scss/modules/_modalTabContent.scss

@@ -52,7 +52,6 @@
 
         button {
           margin-top: 10px;
-          width: 283px;
         }
 
         .link {
@@ -67,22 +66,22 @@
   }
 }
 
-.activityButtons {
-  place-content: space-between space-between !important;
-  align-items: flex-end !important;
-  flex-flow: row wrap !important;
-
-  button:not(:first-child) {
-    width: 40% !important;
-    height: 99px !important;
-    flex-flow: column-reverse !important;
+.resetDataButtonsLayout {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-gap: 20px;  
+  
+  :nth-child(1) {
+    grid-column: span 2;
   }
 
   button {
     @include modal-button(standard);
+    padding: 5px 10px 5px 10px;
   }
 }
 
+
 table {
   border-collapse: separate;
 

src/components/Elements/ResetModal/ResetModal.jsx

@@ -2,7 +2,7 @@ import { memo } from 'react';
 import variables from 'config/variables';
 import { MdClose, MdRestartAlt } from 'react-icons/md';
 import { setDefaultSettings } from 'utils/settings';
-import { Tooltip } from 'components/Elements';
+import { Tooltip, Button } from 'components/Elements';
 
 function ResetModal({ modalClose }) {
   const reset = () => {
@@ -32,14 +32,8 @@ function ResetModal({ modalClose }) {
         {variables.getMessage('modals.main.settings.sections.advanced.reset_modal.information')}
       </span>
       <div className="resetFooter">
-        <button className="textButton" onClick={modalClose}>
-          <MdClose />
-          {variables.getMessage('modals.main.settings.sections.advanced.reset_modal.cancel')}
-        </button>
-        <button onClick={() => reset()}>
-          <MdRestartAlt />
-          {variables.getMessage('modals.main.settings.buttons.reset')}
-        </button>
+        <Button type="secondary" onClick={modalClose} icon={<MdClose />} label={variables.getMessage('modals.main.settings.sections.advanced.reset_modal.cancel')} />
+        <Button type="settings" onClick={() => reset()} icon={<MdRestartAlt />} label={variables.getMessage('modals.main.settings.buttons.reset')} />
       </div>
     </div>
   );