fix: welcome modal bugs, about tab issues

src/components/modals/main/Main.jsx

@@ -20,7 +20,9 @@ const renderLoader = (current) => (
         <div className="emptyMessage">
           <div className="loaderHolder">
             <div id="loader"></div>
-            <span className="subtitle">{variables.language.getMessage(variables.languagecode, 'modals.main.loading')}</span>
+            <span className="subtitle">
+              {variables.language.getMessage(variables.languagecode, 'modals.main.loading')}
+            </span>
           </div>
         </div>
       </div>

src/components/modals/main/scss/marketplace/_main.scss

@@ -23,6 +23,7 @@
     align-items: center;
     gap: 15px;
     transition: 0.5s;
+
     @include themed() {
       background: t($modal-sidebar);
       box-shadow: 0 0 0 1px t($modal-sidebarActive);
@@ -30,27 +31,34 @@
         background: t($modal-sidebarActive);
       }
     }
+
     .tags {
       margin-top: 7px;
     }
+
     img {
       height: 80% !important;
       width: auto !important;
       border-radius: 12px;
+
       @include themed() {
         background: t($modal-sidebar);
       }
+
       padding: 5px;
     }
 
     .card-details {
       display: flex;
       flex-flow: column;
+
       .card-title {
         font-size: 18px;
       }
+
       .card-subtitle {
         font-size: 12px;
+
         @include themed() {
           color: t($subColor);
         }
@@ -63,43 +71,52 @@
   display: flex;
   flex-flow: row;
   justify-content: space-between;
+
   .itemShowcase {
     display: flex;
     flex-flow: column;
     gap: 15px;
     width: 50%;
+
     .description {
       max-lines: 3;
       font-size: 16px;
     }
+
     img {
       width: 100%;
       height: auto;
     }
   }
+
   .itemInfo {
     display: flex;
     flex-flow: column;
     gap: 15px;
     width: 170px;
+
     img {
       width: 100%;
       height: auto;
       border-radius: 12px;
+
       @include themed() {
         box-shadow: 0 0 0 3px t($modal-sidebarActive);
       }
     }
     .divider {
       text-transform: uppercase;
+
       @include themed() {
         color: t($subColor);
       }
     }
+
     .iconButtons {
       display: flex;
       flex-flow: row;
       justify-content: space-between;
+
       svg {
         @include basicIconButton(11px, 1.3rem, modal);
       }
@@ -114,6 +131,7 @@
   gap: 15px;
   align-items: center;
 }
+
 .tag {
   padding: 2px 10px 2px 10px;
   border-radius: 12px;
@@ -123,6 +141,7 @@
   @include themed() {
     background: t($modal-sidebar);
     box-shadow: 0 0 0 3px t($modal-sidebarActive);
+
     span {
       &:before {
         content: '#';
@@ -130,6 +149,7 @@
         margin-right: 5px;
       }
     }
+
     &:hover {
       background: t($modal-sidebarActive);
     }
@@ -142,9 +162,11 @@
   font-size: 12px;
   display: grid;
   place-items: center;
+
   @include themed() {
     background: t($modal-sidebar);
     box-shadow: 0 0 0 3px t($modal-sidebarActive);
+
     span {
       &:before {
         content: '+';
@@ -152,6 +174,7 @@
         margin-right: 5px;
       }
     }
+
     &:hover {
       background: t($modal-sidebarActive);
     }
@@ -253,17 +276,20 @@ p.author {
   display: flex;
   flex-direction: column;
   align-items: center;
+
   @include themed() {
     background: t($modal-sidebar);
     box-shadow: 0 0 0 4px t($modal-sidebarActive);
     border-radius: t($borderRadius);
     padding: 15px;
   }
+
   .topRow {
     display: flex;
     flex-flow: column;
     align-items: center;
   }
+
   .subtitle {
     text-align: justify;
   }
@@ -281,11 +307,13 @@ p.author {
   padding: 15px;
   gap: 15px;
   justify-content: space-between;
+
   @include themed() {
     background: t($modal-sidebar);
     border-radius: t($borderRadius);
     box-shadow: 0 0 0 4px t($modal-sidebarActive);
   }
+
   .tags {
     max-width: 50%;
   }
@@ -364,4 +392,3 @@ p.author {
     border-radius: t($borderRadius);
   }
 }
-

src/components/modals/main/settings/sections/About.jsx

@@ -23,8 +23,8 @@ export default class About extends PureComponent {
       loading: this.getMessage('modals.main.loading'),
       image:
         localStorage.getItem('theme') === 'dark'
-          ? './././icons/mue_dark.svg'
-          : './././icons/mue_light.svg',
+          ? 'public/icons/mue_dark.png'
+          : 'public/icons/mue_light.png',
     };
     this.controller = new AbortController();
   }
@@ -177,7 +177,12 @@ export default class About extends PureComponent {
             {this.getMessage('modals.main.settings.sections.about.contact_us')}
           </span>
           <div className="aboutContact">
-            <a class="donateButton" href="https://muetab.com/contact">
+            <a
+              class="donateButton"
+              href="https://muetab.com/contact"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
               <MdContactPage />
               Form
             </a>

src/components/modals/main/settings/sections/background/Background.jsx

@@ -207,7 +207,10 @@ export default class BackgroundSettings extends PureComponent {
           category="background"
           element="#backgroundImage"
         />
-        <SettingsItem title="Display" subtitle="Change how background and photo information are loaded">
+        <SettingsItem
+          title="Display"
+          subtitle="Change how background and photo information are loaded"
+        >
           <Checkbox
             name="ddgProxy"
             text={getMessage('modals.main.settings.sections.background.ddg_image_proxy')}