From 4920ae7b8051d13084d9c061e759619ff6079b09 Mon Sep 17 00:00:00 2001 From: alexsparkes Date: Sat, 7 Jan 2023 23:48:44 +0000 Subject: [PATCH] feat: modernisation of modal theme colours --- postcss.config.js | 3 +++ .../modals/main/marketplace/Items.jsx | 3 ++- .../modals/main/scss/marketplace/_main.scss | 25 +++++++++---------- .../main/scss/marketplace/modules/_item.scss | 2 +- .../modals/main/scss/modules/_navbar.scss | 9 +++++++ .../scss/settings/modules/tabs/_order.scss | 12 +++++---- src/scss/_variables.scss | 12 ++++++--- 7 files changed, 42 insertions(+), 24 deletions(-) create mode 100644 postcss.config.js 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 {