diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 00000000..9361eff3
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+ plugins: {},
+};
diff --git a/src/components/modals/main/marketplace/Items.jsx b/src/components/modals/main/marketplace/Items.jsx
index 6c5675e8..4e148c8c 100644
--- a/src/components/modals/main/marketplace/Items.jsx
+++ b/src/components/modals/main/marketplace/Items.jsx
@@ -22,7 +22,7 @@ function Items({
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}')`,
}
}
>
@@ -71,6 +71,7 @@ function Items({
{item.display_name || item.name}
{item.author}
+ {item.type}
))}
diff --git a/src/components/modals/main/scss/marketplace/_main.scss b/src/components/modals/main/scss/marketplace/_main.scss
index 4e11d2cf..812b1e50 100644
--- a/src/components/modals/main/scss/marketplace/_main.scss
+++ b/src/components/modals/main/scss/marketplace/_main.scss
@@ -15,17 +15,18 @@
.item {
position: relative;
border-radius: 12px;
- height: 70px;
width: auto;
padding: 10px;
cursor: pointer;
- display: flex;
- align-items: center;
- gap: 15px;
transition: 0.5s;
+ display: flex;
+ flex-flow: column;
+ align-items: center;
+ text-align: center;
+ gap: 15px;
@include themed() {
- background: t($modal-sidebar);
+ background: t($modal-secondaryColour);
box-shadow: 0 0 0 1px t($modal-sidebarActive);
&:hover {
background: t($modal-sidebarActive);
@@ -56,6 +57,7 @@
.card-details {
display: flex;
flex-flow: column;
+ gap: 5px;
.card-title {
font-size: 18px;
@@ -202,18 +204,15 @@
padding: 50px;
@include themed() {
- border-radius: t($borderRadius);
- background: t($modal-sidebar);
- box-shadow: 0 0 0 4px t($modal-sidebarActive);
-
.sideloadIcon {
font-size: 50px;
color: t($subColor);
}
- button {
- display: flex;
- flex-flow: row;
- }
+ }
+
+ button {
+ display: flex;
+ flex-flow: row;
}
}
diff --git a/src/components/modals/main/scss/marketplace/modules/_item.scss b/src/components/modals/main/scss/marketplace/modules/_item.scss
index 7737fb77..01d3fd7b 100644
--- a/src/components/modals/main/scss/marketplace/modules/_item.scss
+++ b/src/components/modals/main/scss/marketplace/modules/_item.scss
@@ -30,7 +30,7 @@ p.description {
@include themed() {
background: t($modal-sidebar);
- box-shadow: 0 0 0 4px t($modal-sidebarActive);
+ box-shadow: t(boxShadow);
border-radius: t($borderRadius);
padding: 15px;
diff --git a/src/components/modals/main/scss/modules/_navbar.scss b/src/components/modals/main/scss/modules/_navbar.scss
index 54e06047..efbbbde9 100644
--- a/src/components/modals/main/scss/modules/_navbar.scss
+++ b/src/components/modals/main/scss/modules/_navbar.scss
@@ -1,6 +1,15 @@
.navbar-item {
flex-flow: row !important;
padding: 0 15px 0 15px;
+ @include themed() {
+ background: t($modal-secondaryColour) !important;
+ border-radius: t($borderRadius) !important;
+ box-shadow: t($boxShadow) !important;
+ border: 0px !important;
+ &:hover {
+ background: t($modal-sidebarActive) !important;
+ }
+ }
&:hover {
svg {
background: var(--tab-active);
diff --git a/src/components/modals/main/scss/settings/modules/tabs/_order.scss b/src/components/modals/main/scss/settings/modules/tabs/_order.scss
index c7b79722..0fa529d1 100644
--- a/src/components/modals/main/scss/settings/modules/tabs/_order.scss
+++ b/src/components/modals/main/scss/settings/modules/tabs/_order.scss
@@ -13,9 +13,9 @@
justify-content: space-between;
align-items: center;
- background: t($modal-sidebar);
- border: 3px solid t($modal-sidebarActive);
+ background: t($modal-secondaryColour);
border-radius: t($borderRadius);
+ box-shadow: t($boxShadow);
svg {
font-size: 1.3rem;
@@ -101,8 +101,9 @@
justify-content: center;
margin-top: 16px;
@include themed() {
- background: t($modal-sidebar);
+ background: t($modal-secondaryColour);
border-radius: t($borderRadius);
+ box-shadow: t($boxShadow);
}
.previewContainer {
@@ -141,7 +142,8 @@
margin: 20px 20px 0;
}
@include themed() {
- background: t($modal-sidebar);
+ background: t($modal-secondaryColour);
border-radius: t($borderRadius);
+ box-shadow: t($boxShadow);
}
-}
\ No newline at end of file
+}
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index fc6bbad4..ba19dde2 100644
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -16,6 +16,7 @@ $modal-sidebar: 'modal-sidebar';
$modal-sidebarActive: 'modal-sidebarActive';
$link: 'link';
$weather: 'weather';
+$modal-secondaryColour: 'modal-secondaryColour';
$theme-colours: (
'gradient': linear-gradient(90deg, #ffb032 0%, #dd3b67 100%),
@@ -69,6 +70,7 @@ $themes: (
'modal-background': #fff,
'modal-sidebar': rgba(240, 240, 240, 1),
'modal-sidebarActive': rgba(219, 219, 219, 0.72),
+ 'modal-secondaryColour': #fafafa,
'link': rgba(83, 82, 237, 1),
),
dark: (
@@ -81,9 +83,10 @@ $themes: (
'boxShadow': 0 0 0 1px #484848,
'btn-background': #222,
'btn-backgroundHover': #565656,
- 'modal-background': #2f3542,
- 'modal-sidebar': #353b48,
- 'modal-sidebarActive': rgba(65, 71, 84, 0.9),
+ 'modal-background': #0a0a0a,
+ 'modal-sidebar': #0e1013,
+ 'modal-sidebarActive': #333,
+ 'modal-secondaryColour': #111,
'link': rgb(115, 115, 255),
),
);
@@ -174,7 +177,8 @@ $themes: (
@include themed() {
@if $type == 'standard' {
background: t($modal-sidebar);
- border: 3px solid t($modal-sidebarActive);
+ box-shadow: t($boxShadow);
+ border: 0;
color: t($color);
&:hover {