feat: marketplace improvements, remove Unsplash text, add Weather skeleton, replace Twitter with X, minor fixes etc

Co-authored-by: Alex Sparkes <alexsparkes@gmail.com>
Co-authored-by: Isaac <contact@eartharoid.me>

src/components/Elements/MainModal/backend/Tab.jsx

@@ -77,6 +77,7 @@ function Tab({ label, currentTab, onClick, navbarTab }) {
     variables.getMessage('modals.main.marketplace.all'),
     variables.getMessage('modals.main.settings.sections.experimental.title'),
   ].includes(label);
+
   const mue = [
     variables.getMessage('modals.main.marketplace.product.overview'),
     variables.getMessage('modals.main.addons.added'),

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

@@ -395,6 +395,10 @@ p.author {
 
     .subtitle {
       color: #ccc !important;
+      overflow: hidden;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 5;
     }
   }
 

src/components/Elements/MainModal/scss/marketplace/modules/_item.scss

@@ -47,7 +47,8 @@ p.description {
   }
 
   .header {
-    text-transform: uppercase;
+    // text-transform: uppercase;
+    font-size: small;
 
     @include themed {
       color: t($subColor);
@@ -68,6 +69,59 @@ p.description {
   }
 }
 
+.subHeader {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  width: calc(100% - 30px);
+  gap: 25px;
+
+  .items {
+    margin-top: 0 !important;
+  }
+
+  .item {
+    flex: 1 0 40% !important;
+  }
+
+  .infoItem {
+    display: flex;
+    flex-flow: row;
+    align-items: center;
+    gap: 15px;
+    flex: 1 0 44%;
+
+    svg {
+      @include themed {
+        background-image: t($slightGradient);
+        box-shadow: t($boxShadow);
+      }
+
+      padding: 7px;
+      border-radius: 100%;
+    }
+
+    .text {
+      display: flex;
+      flex-flow: column;
+    }
+  }
+
+  .header {
+    font-size: small;
+
+    @include themed {
+      color: t($subColor);
+    }
+  }
+
+  span {
+    @include themed {
+      color: t($color);
+    }
+  }
+}
+
 .showMoreItems {
   display: flex;
   flex-flow: column;
@@ -81,3 +135,10 @@ p.description {
   flex-flow: column;
   gap: 15px;
 }
+
+.moreFromCurator {
+  margin-top: 50px;
+  display: flex;
+  flex-flow: column;
+  gap: 15px;
+}

src/components/Elements/ShareModal/ShareModal.jsx

@@ -1,9 +1,9 @@
 import { memo } from 'react';
 import variables from 'config/variables';
 import { MdClose, MdEmail, MdContentCopy } from 'react-icons/md';
-import { FaTwitter, FaFacebookF } from 'react-icons/fa';
+import { FaFacebookF } from 'react-icons/fa';
 import { AiFillWechat } from 'react-icons/ai';
-import { SiTencentqq } from 'react-icons/si';
+import { SiTencentqq, SiX } from 'react-icons/si';
 import Tooltip from '../Tooltip/Tooltip';
 import { toast } from 'react-toastify';
 
@@ -49,13 +49,13 @@ function ShareModal({ modalClose, data }) {
           onClick={() =>
             window
               .open(
-                `https://twitter.com/intent/tweet?text=Check out ${data.name} on @getmue: ${data.url}`,
+                `https://x.com/intent/tweet?text=Check out ${data.name} on @getmue: ${data.url}`,
                 '_blank',
               )
               .focus()
           }
-          icon={<FaTwitter />}
-          tooltipTitle="Twitter"
+          icon={<SiX />}
+          tooltipTitle="X (Twitter)"
           type="icon"
         />
         <Button
@@ -65,7 +65,7 @@ function ShareModal({ modalClose, data }) {
               .focus()
           }
           icon={<FaFacebookF />}
-          tooltipTitle="Twitter"
+          tooltipTitle="Facebook"
           type="icon"
         />
         <Button

src/components/Form/Settings/ChipSelect/ChipSelect.jsx

@@ -25,35 +25,33 @@ function ChipSelect({ label, options }) {
   };
 
   return (
-    <div>
-      <FormControl>
-        <InputLabel id="chipSelect-label">{label}</InputLabel>
-        <Select
-          labelId="chipSelect-label"
-          id="chipSelect"
-          multiple
-          value={optionsSelected}
-          onChange={handleChange}
-          input={<OutlinedInput id="select-multiple-chip" label={label} />}
-          renderValue={(optionsSelected) => (
-            <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
-              {optionsSelected.map((value) => (
-                <Chip key={value} label={value} />
-              ))}
-            </Box>
-          )}
-        >
-          {options.map((option) => (
-            <MenuItem key={option.name} value={option.name}>
-              {option.name.charAt(0).toUpperCase() + option.name.slice(1)}{' '}
-              {option.count && `(${option.count})`}
-            </MenuItem>
-          ))}
-        </Select>
-      </FormControl>
-    </div>
+    <FormControl>
+      <InputLabel id="chipSelect-label">{label}</InputLabel>
+      <Select
+        labelId="chipSelect-label"
+        id="chipSelect"
+        multiple
+        value={optionsSelected}
+        onChange={handleChange}
+        input={<OutlinedInput id="select-multiple-chip" label={label} />}
+        renderValue={(optionsSelected) => (
+          <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
+            {optionsSelected.map((value) => (
+              <Chip key={value} label={value} />
+            ))}
+          </Box>
+        )}
+      >
+        {options.map((option) => (
+          <MenuItem key={option.name} value={option.name}>
+            {option.name.charAt(0).toUpperCase() + option.name.slice(1)}{' '}
+            {option.count && `(${option.count})`}
+          </MenuItem>
+        ))}
+      </Select>
+    </FormControl>
   );
 }
 
 const MemoizedChipSelect = memo(ChipSelect);
-export { ChipSelect as default, MemoizedChipSelect as ChipSelect };
+export { ChipSelect as default, MemoizedChipSelect as ChipSelect };