fix: share modal button styling, marketplace item chip style

Co-authored-by: David Ralph <me@davidcralph.co.uk>
2026-06-12 19:48:57 +02:00 · 2024-05-19 23:00:13 +01:00
parent 1088f5c30a
commit 3e79f21eba
6 changed files with 149 additions and 146 deletions
--- a/src/components/Elements/MainModal/scss/marketplace/_main.scss
+++ b/src/components/Elements/MainModal/scss/marketplace/_main.scss
@@ -69,6 +69,7 @@
      display: flex;
      flex-flow: column;
      gap: 5px;
+      align-items: center;

      .card-title {
        font-size: 18px;
@@ -92,7 +93,7 @@
        }

        border-radius: 150px;
-        padding: 2px 8px;
+        padding: 2px 15px;
        background-color: rgb(255 255 255 / 10%);
        border: 1px solid rgb(209 213 219 / 30%);
      }
@@ -126,7 +127,7 @@
      table-layout: fixed;
      width: 100%;
      max-width: 650px !important;
-      word-wrap: break-word !important;
+      word-wrap: break-word !important;    
    }
  }

@@ -136,7 +137,7 @@
    background-size: cover;
    border-radius: 15px;
    width: 30%;
-    max-width: 300px;
+    max-width: 250px;
    max-height: 600px;

    .front {
@@ -450,7 +451,9 @@ p.author {

  .title:hover {
    cursor: pointer;
+    text-decoration: underline;
  }
+
 }

 .createYourOwn {
--- a/src/components/Elements/MainModal/scss/marketplace/modules/_item.scss
+++ b/src/components/Elements/MainModal/scss/marketplace/modules/_item.scss
@@ -33,11 +33,10 @@ p.description {
    svg {
      @include themed {
        background-image: t($slightGradient);
+        box-shadow: t($boxShadow);
      }

-      background-clip: text;
-      -webkit-text-fill-color: transparent;
-      font-size: 20px;
+      padding: 7px;
      border-radius: 100%;
    }

--- a/src/components/Elements/ShareModal/ShareModal.jsx
+++ b/src/components/Elements/ShareModal/ShareModal.jsx
@@ -7,6 +7,8 @@ import { SiTencentqq } from 'react-icons/si';
 import Tooltip from '../Tooltip/Tooltip';
 import { toast } from 'react-toastify';

+import { Button } from 'components/Elements';
+
 import './sharemodal.scss';

 function ShareModal({ modalClose, data }) {
@@ -43,81 +45,77 @@ function ShareModal({ modalClose, data }) {
        </Tooltip>
      </div>
      <div className="shareButtons">
-        <Tooltip title="Twitter">
-          <button
-            onClick={() =>
-              window
-                .open(
-                  `https://twitter.com/intent/tweet?text=Check out ${data.name} on @getmue: ${data.url}`,
-                  '_blank',
-                )
-                .focus()
-            }
-          >
-            <FaTwitter />
-          </button>
-        </Tooltip>
-        <Tooltip title="Facebook">
-          <button
-            onClick={() =>
-              window
-                .open(`https://www.facebook.com/sharer/sharer.php?u=${data.url}`, '_blank')
-                .focus()
-            }
-          >
-            <FaFacebookF />
-          </button>
-        </Tooltip>
-        <Tooltip title="Email">
-          <button
-            onClick={() =>
-              window
-                .open(
-                  'mailto:email@example.com?subject=Check%20out%20this%20%on%20%Mue!&body=' +
-                    data.data.name +
-                    'on Mue: ' +
-                    data,
-                  '_blank',
-                )
-                .focus()
-            }
-          >
-            <MdEmail />
-          </button>
-        </Tooltip>
-        <Tooltip title="WeChat">
-          <button
-            onClick={() =>
-              window
-                .open(
-                  `https://api.qrserver.com/v1/create-qr-code/?size=154x154&data=${data.url}`,
-                  '_blank',
-                )
-                .focus()
-            }
-          >
-            <AiFillWechat />
-          </button>
-        </Tooltip>
-        <Tooltip title="Tencent QQ">
-          <button
-            onClick={() =>
-              window
-                .open(`https://connect.qq.com/widget/shareqq/index.html?url=${data.url}`, '_blank')
-                .focus()
-            }
-          >
-            <SiTencentqq />
-          </button>
-        </Tooltip>
+        <Button
+          onClick={() =>
+            window
+              .open(
+                `https://twitter.com/intent/tweet?text=Check out ${data.name} on @getmue: ${data.url}`,
+                '_blank',
+              )
+              .focus()
+          }
+          icon={<FaTwitter />}
+          tooltipTitle="Twitter"
+          type="icon"
+        />
+        <Button
+          onClick={() =>
+            window
+              .open(`https://www.facebook.com/sharer/sharer.php?u=${data.url}`, '_blank')
+              .focus()
+          }
+          icon={<FaFacebookF />}
+          tooltipTitle="Twitter"
+          type="icon"
+        />
+        <Button
+          onClick={() =>
+            window
+              .open(
+                'mailto:email@example.com?subject=Check%20out%20this%20%on%20%Mue!&body=' +
+                  data.data.name +
+                  'on Mue: ' +
+                  data,
+                '_blank',
+              )
+              .focus()
+          }
+          icon={<MdEmail />}
+          tooltipTitle="Email"
+          type="icon"
+        />
+        <Button
+          onClick={() =>
+            window
+              .open(
+                `https://api.qrserver.com/v1/create-qr-code/?size=154x154&data=${data.url}`,
+                '_blank',
+              )
+              .focus()
+          }
+          icon={<AiFillWechat />}
+          tooltipTitle="WeChat"
+          type="icon"
+        />
+        <Button
+          onClick={() =>
+            window
+              .open(`https://connect.qq.com/widget/shareqq/index.html?url=${data.url}`, '_blank')
+              .focus()
+          }
+          icon={<SiTencentqq />}
+          tooltipTitle="Tencent QQ"
+          type="icon"
+        />
      </div>
      <div className="copy">
        <input type="text" value={data.url} className="left field" readOnly />
-        <Tooltip title={variables.getMessage('modals.share.copy_link')} placement="top">
-          <button onClick={() => copyLink()}>
-            <MdContentCopy />
-          </button>
-        </Tooltip>
+        <Button
+          onClick={() => copyLink()}
+          icon={<MdContentCopy />}
+          tooltipTitle={variables.getMessage('modals.share.copy_link')}
+          type="icon"
+        />
      </div>
    </div>
  );
--- a/src/components/Elements/ShareModal/sharemodal.scss
+++ b/src/components/Elements/ShareModal/sharemodal.scss
@@ -38,6 +38,9 @@
    justify-content: space-between;
    display: flex;
    gap: 15px;
+    button {
+      width: 40px;
+    }
  }

  .copy {
@@ -45,6 +48,10 @@
    flex-flow: row;
    gap: 15px;

+    button {
+      width: 40px;
+    }
+
    input[type='text'] {
      @include themed {
        background: t($modal-sidebar);
--- a/src/features/marketplace/components/Items/Item.jsx
+++ b/src/features/marketplace/components/Items/Item.jsx
@@ -158,17 +158,9 @@ class Item extends PureComponent {
                </table>
                <div className="showMoreItems">
                  <span className="link" onClick={() => this.incrementCount('quotes')}>
-                    {this.state.count !== this.props.data.data.quotes.length ? (
-                      <>
-                        <MdExpandMore />{' '}
-                        {variables.getMessage('modals.main.marketplace.product.show_all')}
-                      </>
-                    ) : (
-                      <>
-                        <MdExpandLess />{' '}
-                        {variables.getMessage('modals.main.marketplace.product.show_less')}
-                      </>
-                    )}
+                    {this.state.count !== this.props.data.data.quotes.length
+                      ? variables.getMessage('modals.main.marketplace.product.show_all')
+                      : variables.getMessage('modals.main.marketplace.product.show_less')}
                  </span>
                </div>
              </>
@@ -193,17 +185,9 @@ class Item extends PureComponent {
                </table>
                <div className="showMoreItems">
                  <span className="link" onClick={() => this.incrementCount('settings')}>
-                    {this.state.count !== this.props.data.data.settings.length ? (
-                      <>
-                        <MdExpandMore />{' '}
-                        {variables.getMessage('modals.main.marketplace.product.show_all')}
-                      </>
-                    ) : (
-                      <>
-                        <MdExpandLess />{' '}
-                        {variables.getMessage('modals.main.marketplace.product.show_less')}
-                      </>
-                    )}
+                    {this.state.count !== this.props.data.data.settings.length
+                      ? variables.getMessage('modals.main.marketplace.product.show_all')
+                      : variables.getMessage('modals.main.marketplace.product.show_less')}
                  </span>
                </div>
              </>
@@ -248,10 +232,10 @@ class Item extends PureComponent {
                )}
              {this.props.data.data.quotes && this.props.data.data.language !== ''
                ? moreInfoItem(
-                  <MdTranslate />,
-                  variables.getMessage('modals.main.settings.sections.language.title'),
-                  this.props.data.data.language,
-                )
+                    <MdTranslate />,
+                    variables.getMessage('modals.main.settings.sections.language.title'),
+                    this.props.data.data.language,
+                  )
                : null}
              {moreInfoItem(
                <MdStyle />,
@@ -289,7 +273,7 @@ class Item extends PureComponent {
                  onClick={() =>
                    window.open(
                      variables.constants.REPORT_ITEM +
-                      this.props.data.data.display_name.split(' ').join('+'),
+                        this.props.data.data.display_name.split(' ').join('+'),
                      '_blank',
                    )
                  }
@@ -306,7 +290,9 @@ class Item extends PureComponent {
                    <span className="subtitle">
                      {variables.getMessage('modals.main.marketplace.product.part_of')}
                    </span>
-                    <span className="title" onClick={this.props.toggleFunction}>{this.props.data.data.in_collections[0].display_name}</span>
+                    <span className="title" onClick={this.props.toggleFunction}>
+                      {this.props.data.data.in_collections[0].display_name}
+                    </span>
                  </div>
                </div>
              )}
--- a/src/features/marketplace/components/Items/Items.jsx
+++ b/src/features/marketplace/components/Items/Items.jsx
@@ -4,6 +4,35 @@ import { MdAutoFixHigh, MdOutlineArrowForward, MdOutlineOpenInNew } from 'react-

 import { Button } from 'components/Elements';

+function filterItems(item, filter) {
+  const lowerCaseFilter = filter.toLowerCase();
+  return (
+    item.name?.toLowerCase().includes(lowerCaseFilter) ||
+    filter === '' ||
+    item.author?.toLowerCase().includes(lowerCaseFilter) ||
+    item.type?.toLowerCase().includes(lowerCaseFilter)
+  );
+}
+function Item({ item, toggleFunction, type, onCollection }) {
+  return (
+    <div className="item" onClick={() => toggleFunction(item)} key={item.name}>
+      <img className="item-back" alt="" draggable={false} src={item.icon_url} aria-hidden="true" />
+      <img className="item-icon" alt="icon" draggable={false} src={item.icon_url} />
+      <div className="card-details">
+        <span className="card-title">{item.display_name || item.name}</span>
+        <span className="card-subtitle">
+          {variables.getMessage('modals.main.marketplace.by', { author: item.author })}
+        </span>
+        {type === 'all' && !onCollection ? (
+          <span className="card-type">
+            {variables.getMessage('modals.main.marketplace.' + item.type)}
+          </span>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
 function Items({
  type,
  items,
@@ -13,30 +42,32 @@ function Items({
  onCollection,
  filter,
 }) {
+  const shouldShowCollection =
+    (!onCollection && (filter === null || filter === '')) ||
+    (type === 'collections' && !onCollection && (filter === null || filter === ''));
+
  return (
    <>
-      {(!onCollection &&
-        (filter === null || filter === '')) ||
-      (type === 'collections' && !onCollection && (filter === null || filter === '')) ? (
+      {shouldShowCollection && (
        <>
          <div
            className="collection"
            style={
-              collection.news
-                ? { backgroundColor: collection.background_colour }
+              collection?.news
+                ? { backgroundColor: collection?.background_colour }
                : {
-                    backgroundImage: `linear-gradient(to right, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.7), transparent, rgba(0, 0, 0, 0.7), rgba(0 ,0, 0, 0.9)), url('${collection.img}')`,
+                    backgroundImage: `linear-gradient(to right, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.7), transparent, rgba(0, 0, 0, 0.7), rgba(0 ,0, 0, 0.9)), url('${collection?.img}')`,
                  }
            }
          >
            <div className="content">
-              <span className="title">{collection.display_name}</span>
-              <span className="subtitle">{collection.description}</span>
+              <span className="title">{collection?.display_name}</span>
+              <span className="subtitle">{collection?.description}</span>
            </div>
-            {collection.news === true ? (
+            {collection?.news === true ? (
              <a
                className="btn-collection"
-                href={collection.news_link}
+                href={collection?.news_link}
                target="_blank"
                rel="noopener noreferrer"
              >
@@ -45,7 +76,7 @@ function Items({
            ) : (
              <Button
                type="collection"
-                onClick={() => collectionFunction(collection.name)}
+                onClick={() => collectionFunction(collection?.name)}
                icon={<MdOutlineArrowForward />}
                label={variables.getMessage('modals.main.marketplace.explore_collection')}
                iconPlacement={'right'}
@@ -53,38 +84,17 @@ function Items({
            )}
          </div>
        </>
-      ) : null}
+      )}
      <div className="items">
        {items
-          ?.filter(
-            (item) =>
-              item.name?.toLowerCase().includes(filter.toLowerCase()) ||
-              filter === '' ||
-              item.author?.toLowerCase().includes(filter.toLowerCase()) ||
-              item.type?.toLowerCase().includes(filter.toLowerCase()),
-          )
+          ?.filter((item) => filterItems(item, filter))
          .map((item) => (
-            <div className="item" onClick={() => toggleFunction(item)} key={item.name}>
-              <img
-                className="item-back"
-                alt=""
-                draggable={false}
-                src={item.icon_url}
-                aria-hidden="true"
-              />
-              <img className="item-icon" alt="icon" draggable={false} src={item.icon_url} />
-              <div className="card-details">
-                <span className="card-title">{item.display_name || item.name}</span>
-                <span className="card-subtitle">
-                  {variables.getMessage('modals.main.marketplace.by', { author: item.author })}
-                </span>
-                {type === 'all' && !onCollection ? (
-                  <span className="card-type">
-                    {variables.getMessage('modals.main.marketplace.' + item.type)}
-                  </span>
-                ) : null}
-              </div>
-            </div>
+            <Item
+              item={item}
+              toggleFunction={toggleFunction}
+              type={type}
+              onCollection={onCollection}
+            />
          ))}
      </div>
      <div className="loader"></div>