fix: various fixes

src/components/modals/main/scss/index.scss

@@ -170,6 +170,12 @@ h5 {
   gap: 20px;
   justify-content: center;
   align-items: center;
+  .link {
+    display: flex;
+    flex-flow: row;
+    gap: 15px;
+    align-items: center;
+  }
 }
 
 .marketplaceCondition {

src/components/modals/main/scss/modules/_sidebar.scss

@@ -6,7 +6,7 @@
     left: 0;
     position: sticky;
     margin: 0;
-    padding: 0;
+    padding: 0 5px 0 5px;
     background: t($modal-sidebar);
     border-radius: 12px 0 0 12px;
     overflow-y: auto;
@@ -73,3 +73,8 @@
     }
   }
 }
+
+.css-j204z7-MuiFormControlLabel-root {
+  margin-left: 0 !important;
+  margin-right: 0 !important;
+}

src/components/modals/main/settings/Header.jsx

@@ -63,17 +63,6 @@ class Header extends PureComponent {
           )}
           <span className="mainTitle">{this.props.title}</span>
           <div className="headerActions">
-            <button
-              className="sideload"
-              onClick={() =>
-                window.open(
-                  variables.constants.BUG_REPORT + this.props.title.split(' ').join('+'),
-                  '_blank',
-                )
-              }
-            >
-              {variables.getMessage('modals.main.settings.sections.header.report_issue')} <MdFlag />
-            </button>
             {this.props.switch && (
               <button className="sideload" onClick={() => this.changeSetting()}>
                 {this.state[this.props.setting] ? (
@@ -89,6 +78,17 @@ class Header extends PureComponent {
                 )}
               </button>
             )}
+            <button
+              className="sideload"
+              onClick={() =>
+                window.open(
+                  variables.constants.BUG_REPORT + this.props.title.split(' ').join('+'),
+                  '_blank',
+                )
+              }
+            >
+              {variables.getMessage('modals.main.settings.sections.header.report_issue')} <MdFlag />
+            </button>
           </div>
         </div>
         {this.props.zoomSetting && (

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

@@ -1,6 +1,8 @@
 import variables from 'modules/variables';
 import { PureComponent } from 'react';
 
+import { MdOutlineOpenInNew } from 'react-icons/md';
+
 import Radio from '../Radio';
 
 import languages from 'modules/languages.json';
@@ -67,9 +69,26 @@ export default class LanguageSettings extends PureComponent {
   render() {
     return (
       <>
-        <span className="mainTitle">
-          {variables.getMessage('modals.main.settings.sections.language.title')}
-        </span>
+        <div className="flexTopMarketplace topAddons">
+          <span className="mainTitle">
+            {variables.getMessage('modals.main.settings.sections.language.title')}
+          </span>
+          <div className="headerActions">
+            {/*<a className="link" href="" target="_blank" rel="noopener noreferrer">
+              Improve
+              <MdOutlineOpenInNew />
+    </a>*/}
+            <a
+              className="link"
+              href="https://hosted.weblate.org/new-lang/mue/mue-tab/"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Add translation
+              <MdOutlineOpenInNew />
+            </a>
+          </div>
+        </div>
         <div className="languageSettings">
           <Radio name="language" options={languages} element=".other" />
         </div>

src/components/modals/welcome/Welcome.jsx

@@ -41,7 +41,7 @@ class WelcomeModal extends PureComponent {
       });
     }
 
-    if (this.state.buttonText === variables.getMessage('modals.main.addons.create.finish.title')) {
+    if (this.state.buttonText === variables.getMessage('modals.welcome.buttons.finish')) {
       return this.props.modalClose();
     }
 
@@ -79,7 +79,7 @@ class WelcomeModal extends PureComponent {
         buttonText:
           Number(welcomeTab) !== this.state.finalTab + 1
             ? variables.getMessage('modals.welcome.buttons.next')
-            : variables.getMessage('modals.welcome.buttons.next'),
+            : variables.getMessage('modals.welcome.buttons.finish'),
       });
     }
 

src/components/modals/welcome/WelcomeSections.jsx

@@ -150,9 +150,8 @@ class WelcomeSections extends PureComponent {
             alt="Example Mue setup"
             draggable={false}
           />
+          <span className="shareYourMue">#shareyourmue</span>
         </div>
-
-        <span className="link">#shareyourmue</span>
         <div className="welcomeNotice">
           <div className="icon">
             <MdOutlineWavingHand />
@@ -220,6 +219,15 @@ class WelcomeSections extends PureComponent {
           GitHub
           <MdOutlineOpenInNew />
         </a>
+        <a
+          href={variables.constants.WEBLATE_URL}
+          className="link"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Weblate
+          <MdOutlineOpenInNew />
+        </a>
         <div className="languageSettings">
           <Radio name="language" options={languages} category="welcomeLanguage" />
         </div>

src/components/modals/welcome/welcome.scss

@@ -72,14 +72,17 @@
     margin: 5px;
     transition: 0.2s ease-in-out;
     cursor: pointer;
+    border-radius: 10px 10px 0x 0;
     &:hover {
-      background: #7575e5;
+      background: #dd4038;
+      border-radius: 10px;
+      border-bottom: 2px solid #dd4038;
     }
   }
 
   .active {
-    background: #5352ed;
-    border-bottom: 2px solid #5352ed;
+    background: #d21a11;
+    border-bottom: 2px solid #d21a11;
     border-radius: 10px;
   }
 }
@@ -192,12 +195,23 @@ a.privacy {
 }
 
 .examples {
+  display: flex;
+  flex-flow: column;
+  .shareYourMue {
+    width: fit-content;
+  }
   img {
-    width: 60%;
+    max-width: 60%;
+    border-radius: 10px 10px 10px 0px;
+  }
+}
 
-    @include themed {
-      border-radius: t($borderRadius);
-    }
+.shareYourMue {
+  padding: 8px 20px 8px 20px;
+  border-radius: 0px 0px 10px 10px;
+  letter-spacing: 2px;
+  @include themed {
+    background-color: t($modal-sidebarActive);
   }
 }
 
@@ -249,9 +263,10 @@ a.privacy {
   }
 
   .icon {
-    @include themed {
+    background: linear-gradient(238.7deg, #ff5c25 13.8%, #d21a11 49.49%, #ff456e 87.48%);
+    /*@include themed {
       background-color: t($modal-sidebarActive);
-    }
+    }*/
 
     height: 50px !important;
     width: 50px !important;
@@ -260,6 +275,8 @@ a.privacy {
     place-items: center;
     text-align: center;
     flex-shrink: 0;
+    color: #f18d91;
+    font-size: 24px;
   }
 
   .text {

src/components/widgets/background/scss/_photoinformation.scss

@@ -311,6 +311,8 @@
 
     height: 50px;
     width: 50px;
+    flex-grow: 0;
+    flex-shrink: 0;
     border-radius: 12px;
     display: flex;
     align-items: center;

src/modules/constants.js

@@ -10,6 +10,7 @@ export const WEBSITE_URL = 'https://muetab.com';
 export const PRIVACY_URL = 'https://muetab.com/privacy';
 export const BLOG_POST = 'https://blog.muetab.com/posts/version-7-0';
 export const TRANSLATIONS_URL = 'https://docs.muetab.com/translations/';
+export const WEBLATE_URL = 'https://hosted.weblate.org/projects/mue/mue-tab/';
 export const REPORT_ITEM =
   'https://github.com/mue/marketplace/issues/new?assignees=&labels=item+report&template=item-report.md&title=%5BItem+Report%5D+';
 export const BUG_REPORT =

src/scss/_variables.scss

@@ -36,7 +36,7 @@ $modal: (
   'tab-active': rgb(219 219 219 / 72%),
   'sidebar-dark': rgb(53 59 72),
   'tab-active-dark': rgb(65 71 84 / 90%),
-  'modal-link': #5352ed,
+  'modal-link': #d21a11,
   'modal-link-dark': #3498db,
 );
 $button-colours: (
@@ -66,7 +66,7 @@ $themes: (
     'modal-sidebar': rgb(240 240 240 / 100%),
     'modal-sidebarActive': rgb(219 219 219 / 72%),
     'modal-secondaryColour': #fafafa,
-    'link': rgb(83 82 237 / 100%),
+    'link': #5352ed,
   ),
   dark: (
     'weather': #e7e7e7,