fix: problems discovered during initial 7.0 testing

- Missing translation string for "form" on about page
- Donate button doesn't open in new tab
- Line after choose search engine should only appear on custom
- Line in search setting should not appear when on custom too
- Refresh button on refresh notice does not look great, hover is same as background
- Cards for e.g source and effects need transition
- Version info icon needs hover effect or show on hover
- Back button tooltip only appears on the hovering of the icon

pnpm-lock.yaml

@@ -10,9 +10,9 @@ specifiers:
   '@floating-ui/react-dom': ^1.0.1
   '@fontsource/lexend-deca': 4.5.12
   '@fontsource/montserrat': 4.5.13
-  '@mui/material': 5.11.1
+  '@mui/material': 5.11.4
   '@sentry/react': ^7.21.1
-  '@vitejs/plugin-react': 3.0.0
+  '@vitejs/plugin-react': 3.0.1
   embla-carousel-autoplay: ^7.0.5
   embla-carousel-react: ^7.0.5
   eslint: ^8.30.0
@@ -33,7 +33,7 @@ specifiers:
   stylelint: ^14.16.0
   stylelint-config-prettier-scss: ^0.0.1
   stylelint-config-standard-scss: ^6.1.0
-  vite: 4.0.3
+  vite: 4.0.4
 
 dependencies:
   '@eartharoid/i18n': 1.2.1
@@ -42,7 +42,7 @@ dependencies:
   '@floating-ui/react-dom': 1.1.2_biqbaboplfbrettd7655fr4n2y
   '@fontsource/lexend-deca': 4.5.12
   '@fontsource/montserrat': 4.5.13
-  '@mui/material': 5.11.1_5rzy53przelm5jchjmb5vr6dxy
+  '@mui/material': 5.11.4_5rzy53przelm5jchjmb5vr6dxy
   '@sentry/react': 7.29.0_react@18.2.0
   embla-carousel-autoplay: 7.0.5
   embla-carousel-react: 7.0.5_react@18.2.0
@@ -61,7 +61,7 @@ devDependencies:
   '@commitlint/cli': 17.4.1
   '@commitlint/config-conventional': 17.4.0
   '@eartharoid/deep-merge': 0.0.2
-  '@vitejs/plugin-react': 3.0.0_vite@4.0.3
+  '@vitejs/plugin-react': 3.0.1_vite@4.0.4
   eslint: 8.31.0
   eslint-config-react-app: 7.0.1_eslint@8.31.0
   husky: 8.0.3
@@ -70,7 +70,7 @@ devDependencies:
   stylelint: 14.16.1
   stylelint-config-prettier-scss: 0.0.1_stylelint@14.16.1
   stylelint-config-standard-scss: 6.1.0_stylelint@14.16.1
-  vite: 4.0.3_sass@1.57.1
+  vite: 4.0.4_sass@1.57.1
 
 packages:
 
@@ -2064,8 +2064,8 @@ packages:
       '@jridgewell/sourcemap-codec': 1.4.14
     dev: true
 
-  /@mui/base/5.0.0-alpha.111_biqbaboplfbrettd7655fr4n2y:
+  /@mui/base/5.0.0-alpha.113_biqbaboplfbrettd7655fr4n2y:
-    resolution: {integrity: sha512-2wfIPpl97S4dPzD0QOM3UIzQ/EuXCYQvHmXxTpfKxev/cfkzOe7Ik/McoYUBbtM1bSOqH3W276R/L2LF9cyXqQ==}
+    resolution: {integrity: sha512-XSjvyQWATM8uk+EJZvYna8D21kOXC42lwb3q4K70btuGieKlCIQLaHTTDV2OfD4+JfT4o3NJy3I4Td2co31RZA==}
     engines: {node: '>=12.0.0'}
     peerDependencies:
       '@types/react': ^17.0.0 || ^18.0.0
@@ -2091,8 +2091,8 @@ packages:
     resolution: {integrity: sha512-jWVwGM3vG4O0sXcW0VcIl+njCWbGCBF5vvjRpuKJajrz51AD7D6+fP1SkInZXVk5pRHf6Bnk/Yj9Of9gXxb/hA==}
     dev: false
 
-  /@mui/material/5.11.1_5rzy53przelm5jchjmb5vr6dxy:
+  /@mui/material/5.11.4_5rzy53przelm5jchjmb5vr6dxy:
-    resolution: {integrity: sha512-yaZiXvcrl2vgUK+VO24780BWRgwdAMmAyuMVZnRTts1Yu0tWd6PjIYq2ZtaOlpj6/LbaSS+Q2kSfxYnDQ20CEQ==}
+    resolution: {integrity: sha512-ZL/czK9ynrQJ6uyDwQgK+j7m1iKA1XKPON+rEPupwAu/bJ1XJxD+H/H2bkMM8UpOkzaucx/WuMbJJGQ60l7gBg==}
     engines: {node: '>=12.0.0'}
     peerDependencies:
       '@emotion/react': ^11.5.0
@@ -2111,7 +2111,7 @@ packages:
       '@babel/runtime': 7.20.7
       '@emotion/react': 11.10.5_react@18.2.0
       '@emotion/styled': 11.10.5_hp5f5nkljdiwilp4rgxyefcplu
-      '@mui/base': 5.0.0-alpha.111_biqbaboplfbrettd7655fr4n2y
+      '@mui/base': 5.0.0-alpha.113_biqbaboplfbrettd7655fr4n2y
       '@mui/core-downloads-tracker': 5.11.4
       '@mui/system': 5.11.4_dovxhg2tvkkxkdnqyoum6wzcxm
       '@mui/types': 7.2.3
@@ -2519,8 +2519,8 @@ packages:
       eslint-visitor-keys: 3.3.0
     dev: true
 
-  /@vitejs/plugin-react/3.0.0_vite@4.0.3:
+  /@vitejs/plugin-react/3.0.1_vite@4.0.4:
-    resolution: {integrity: sha512-1mvyPc0xYW5G8CHQvJIJXLoMjl5Ct3q2g5Y2s6Ccfgwm45y48LBvsla7az+GkkAtYikWQ4Lxqcsq5RHLcZgtNQ==}
+    resolution: {integrity: sha512-mx+QvYwIbbpOIJw+hypjnW1lAbKDHtWK5ibkF/V1/oMBu8HU/chb+SnqJDAsLq1+7rGqjktCEomMTM5KShzUKQ==}
     engines: {node: ^14.18.0 || >=16.0.0}
     peerDependencies:
       vite: ^4.0.0
@@ -2530,7 +2530,7 @@ packages:
       '@babel/plugin-transform-react-jsx-source': 7.19.6_@babel+core@7.20.12
       magic-string: 0.27.0
       react-refresh: 0.14.0
-      vite: 4.0.3_sass@1.57.1
+      vite: 4.0.4_sass@1.57.1
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -5676,8 +5676,8 @@ packages:
       spdx-expression-parse: 3.0.1
     dev: true
 
-  /vite/4.0.3_sass@1.57.1:
+  /vite/4.0.4_sass@1.57.1:
-    resolution: {integrity: sha512-HvuNv1RdE7deIfQb8mPk51UKjqptO/4RXZ5yXSAvurd5xOckwS/gg8h9Tky3uSbnjYTgUm0hVCet1cyhKd73ZA==}
+    resolution: {integrity: sha512-xevPU7M8FU0i/80DMR+YhgrzR5KS2ORy1B4xcX/cXLsvnUWvfHuqMmVU6N0YiJ4JWGRJJsLCgjEzKjG9/GKoSw==}
     engines: {node: ^14.18.0 || >=16.0.0}
     hasBin: true
     peerDependencies:

src/components/helpers/tooltip/tooltip.scss

@@ -80,6 +80,14 @@
 .infoTooltip {
   position: relative;
   display: grid;
+  svg {
+    cursor: pointer;
+    &:hover {
+      @include themed() {
+        color: t($color);
+      }
+    }
+  }
 }
 
 .infoTooltipTitle {

src/components/modals/main/marketplace/sections/Create.jsx

@@ -492,17 +492,14 @@ export default class Create extends PureComponent {
       <>
         <div className="flexTopMarketplace">
           {this.state.currentTab !== 1 && (
-            <div className="returnButton">
+            <Tooltip
-              <Tooltip
+              title={variables.getMessage('modals.main.marketplace.product.buttons.back')}
-                title={variables.getMessage('modals.main.marketplace.product.buttons.back')}
+              key="backArrow"
-                key="backArrow"
+            >
-              >
+              <div className="returnButton">
-                <MdArrowBack
+                <MdArrowBack className="backArrow" onClick={() => this.changeTab(1)} />
-                  className="backArrow"
+              </div>
-                  onClick={() => this.changeTab(1)}
+            </Tooltip>
-                />
-              </Tooltip>
-            </div>
           )}
           <span className="mainTitle">
             {variables.getMessage('modals.main.addons.create.other_title')}

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

@@ -211,6 +211,7 @@ h5 {
   justify-content: space-between;
   padding: 25px;
   margin-top: 20px;
+  transition: 0.5s;
   @include themed() {
     background: t($modal-sidebar);
     border-radius: t($borderRadius);
@@ -248,8 +249,9 @@ h5 {
   padding: 15px;
   gap: 15px;
   @include themed() {
-    background-color: t($modal-sidebarActive);
+    background-color: t($modal-secondaryColour);
     border-radius: t($borderRadius);
+    border: 1px solid t($modal-sidebarActive);
   }
   button {
     @include basicIconButton(5px, 5px, modal);

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

@@ -323,7 +323,6 @@ p.author {
   height: 48px;
   border-radius: 12px;
   cursor: pointer;
-  margin-right: 25px;
 
   svg {
     font-size: 2em;
@@ -336,6 +335,13 @@ p.author {
 
 .flexTopMarketplace {
   display: flex;
+  margin-bottom: 15px;
+  .tooltip {
+    margin-right: 25px;
+  }
+  .mainTitle {
+    margin-bottom: 0 !important;
+  }
 }
 
 .itemWarning {

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

@@ -183,7 +183,7 @@ export default class About extends PureComponent {
               rel="noopener noreferrer"
             >
               <MdContactPage />
-              Form
+              {variables.getMessage('modals.main.settings.sections.about.form_button')}
             </a>
             <Tooltip title={'Email'}>
               <a
@@ -224,6 +224,8 @@ export default class About extends PureComponent {
             <a
               className="donateButton"
               href={'https://opencollective.com/' + variables.constants.OPENCOLLECTIVE_USERNAME}
+              target="_blank"
+              rel="noopener noreferrer"
             >
               <BiDonateHeart />
               {variables.getMessage('modals.main.settings.sections.about.support_donate')}

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

@@ -111,6 +111,7 @@ export default class SearchSettings extends PureComponent {
           subtitle={variables.getMessage(
             'modals.main.settings.sections.search.search_engine_subtitle',
           )}
+          final={ this.state.customDisplay === 'none' ? true : false}
         >
           <Dropdown
             name="searchEngine"
@@ -128,7 +129,7 @@ export default class SearchSettings extends PureComponent {
           </Dropdown>
         </SettingsItem>
         <div style={{ display: this.state.customDisplay }}>
-          <SettingsItem title={variables.getMessage('modals.main.settings.sections.search.custom')}>
+          <SettingsItem title={variables.getMessage('modals.main.settings.sections.search.custom')} final={true}>
             <TextField
               label={variables.getMessage('modals.main.settings.sections.search.custom')}
               value={this.state.customValue}

src/scss/_variables.scss

@@ -254,7 +254,7 @@ $themes: (
 
     @if $type == 'modal' {
       background: t($modal-sidebar);
-      border: 3px solid t($modal-sidebarActive);
+      border: 1px solid t($modal-sidebarActive);
       color: t($color);
       border-radius: t($borderRadius);
 

src/translations/en_GB.json

@@ -473,6 +473,7 @@
             "support_mue": "Support Mue",
             "support_subtitle": "As Mue is entirely free, we rely on donations to cover the server bills and fund development",
             "support_donate": "Donate",
+            "form_button": "Form",
             "resources_used": {
               "title": "Resources used",
               "bg_images": "Offline background images"