diff --git a/src/components/modals/main/marketplace/Items.jsx b/src/components/modals/main/marketplace/Items.jsx
index b56c8145..bc803b30 100644
--- a/src/components/modals/main/marketplace/Items.jsx
+++ b/src/components/modals/main/marketplace/Items.jsx
@@ -2,6 +2,8 @@ import variables from 'modules/variables';
import React, { memo } from 'react';
import { MdAutoFixHigh, MdOutlineArrowForward, MdOutlineOpenInNew } from 'react-icons/md';
+import Button from '../settings/Button';
+
function Items({
type,
items,
@@ -32,7 +34,7 @@ function Items({
{collection.news === true ? (
) : (
-
+ icon={
}
+ label={variables.getMessage('modals.main.marketplace.explore_collection')}
+ iconPlacement={'right'}
+ />
)}
>
diff --git a/src/components/modals/main/scss/marketplace/_main.scss b/src/components/modals/main/scss/marketplace/_main.scss
index 1cd9cfad..9a2beacd 100644
--- a/src/components/modals/main/scss/marketplace/_main.scss
+++ b/src/components/modals/main/scss/marketplace/_main.scss
@@ -412,33 +412,6 @@ p.author {
.items {
justify-content: center;
}
-
- button.collectionButton,
- a.collectionButton {
- display: flex;
- align-items: center;
- gap: 15px;
- padding: 1px 12px;
- backdrop-filter: blur(16px) saturate(180%);
- background-color: rgb(255 255 255 / 10%);
- border: 1px solid rgb(209 213 219 / 30%);
- color: #fff;
-
- &:hover {
- backdrop-filter: blur(16px) saturate(180%);
- background-color: rgb(17 25 40 / 20%);
- border: 1px solid rgb(255 255 255 / 12.5%);
- }
- }
-}
-
-a.collectionButton {
- height: 40px;
- text-decoration: none;
-
- @include themed {
- border-radius: t($borderRadius);
- }
}
.marketplaceRefresh {
diff --git a/src/components/modals/main/scss/marketplace/modules/_buttons.scss b/src/components/modals/main/scss/marketplace/modules/_buttons.scss
index ed1d9c7b..c2a89e03 100644
--- a/src/components/modals/main/scss/marketplace/modules/_buttons.scss
+++ b/src/components/modals/main/scss/marketplace/modules/_buttons.scss
@@ -37,6 +37,76 @@
}
.btn-navigation {
+ @include modal-button(standard);
+ padding: 0 15px;
+
+ @include themed {
+ background: t($modal-secondaryColour) !important;
+ border-radius: t($borderRadius) !important;
+ box-shadow: t($boxShadow) !important;
+ border: 0 !important;
+
+ &:hover {
+ background: t($modal-sidebarActive) !important;
+ }
+ }
+
+ &:hover {
+ svg {
+ background: var(--tab-active);
+ }
+
+ color: var(--modal-text);
+ }
+
+ span,
+ svg {
+ font-size: 1.1em !important;
+ }
+
+ svg {
+ font-size: 1.2em !important;
+ color: var(--photo-info);
+ }
+}
+
+/* safari fix */
+@supports (-webkit-hyphens: none) {
+ .btn-navigation {
+ display: inline-block !important;
+ }
+}
+
+.btn-navigation-active {
+ @include themed {
+ background: t($modal-sidebarActive) !important;
+ }
+}
+
+.btn-collection {
+ display: flex;
+ align-items: center;
+ gap: 15px;
+ padding: 1px 12px;
+ backdrop-filter: blur(16px) saturate(180%);
+ background-color: rgb(255 255 255 / 10%);
+ border: 1px solid rgb(209 213 219 / 30%);
+ color: #fff;
+
+ &:hover {
+ backdrop-filter: blur(16px) saturate(180%);
+ background-color: rgb(17 25 40 / 20%);
+ border: 1px solid rgb(255 255 255 / 12.5%);
+ }
+}
+
+a.btn-collection {
+ height: 40px;
+ text-decoration: none;
+
+ @include themed {
+ border-radius: t($borderRadius);
+ }
}
.flowReverse {
diff --git a/src/components/modals/main/scss/modules/_navbar.scss b/src/components/modals/main/scss/modules/_navbar.scss
index bd1c9c58..d3d39ea6 100644
--- a/src/components/modals/main/scss/modules/_navbar.scss
+++ b/src/components/modals/main/scss/modules/_navbar.scss
@@ -1,44 +1,3 @@
-.navbar-item {
- flex-flow: row !important;
- padding: 0 15px;
-
- @include themed {
- background: t($modal-secondaryColour) !important;
- border-radius: t($borderRadius) !important;
- box-shadow: t($boxShadow) !important;
- border: 0 !important;
-
- &:hover {
- background: t($modal-sidebarActive) !important;
- }
- }
-
- &:hover {
- svg {
- background: var(--tab-active);
- }
-
- color: var(--modal-text);
- }
-
- span,
- svg {
- font-size: 1.1em !important;
- }
-
- svg {
- font-size: 1.2em !important;
- color: var(--photo-info);
- }
-}
-
-/* safari fix */
-@supports (-webkit-hyphens: none) {
- .navbar-item {
- display: inline-block !important;
- }
-}
-
#modal {
display: flex;
align-items: flex-start;
@@ -51,9 +10,3 @@
gap: 25px;
margin-bottom: 1rem;
}
-
-.navbar-item-active {
- @include themed {
- background: t($modal-sidebarActive) !important;
- }
-}
diff --git a/src/components/modals/main/scss/modules/_tab-content.scss b/src/components/modals/main/scss/modules/_tab-content.scss
index a6ef4410..3c952a59 100644
--- a/src/components/modals/main/scss/modules/_tab-content.scss
+++ b/src/components/modals/main/scss/modules/_tab-content.scss
@@ -1,6 +1,8 @@
@import 'scss/variables';
.tab-content {
+ width: 100% !important;
+
button {
@include modal-button(standard);
}
diff --git a/src/components/modals/main/settings/Button.jsx b/src/components/modals/main/settings/Button.jsx
index 09913736..efd8d87a 100644
--- a/src/components/modals/main/settings/Button.jsx
+++ b/src/components/modals/main/settings/Button.jsx
@@ -1,7 +1,7 @@
import React, { forwardRef } from 'react';
import Tooltip from '../../../helpers/tooltip/Tooltip';
-const Button = forwardRef(({ icon, label, type, iconPlacement, onClick, children }, ref) => {
+const Button = forwardRef(({ icon, label, type, iconPlacement, onClick, active }, ref) => {
let className;
switch (type) {
@@ -14,6 +14,9 @@ const Button = forwardRef(({ icon, label, type, iconPlacement, onClick, children
case 'navigation':
className = 'btn-navigation';
break;
+ case 'collection':
+ className = 'btn-collection';
+ break;
default:
className = 'btn-default';
}
@@ -22,6 +25,10 @@ const Button = forwardRef(({ icon, label, type, iconPlacement, onClick, children
className += ' flowReverse';
}
+ if (active) {
+ className += ` ${className}-active`;
+ }
+
const button = (