diff --git a/src/components/Elements/MainModal/scss/modules/_modalTabContent.scss b/src/components/Elements/MainModal/scss/modules/_modalTabContent.scss index 843d7a97..88068015 100644 --- a/src/components/Elements/MainModal/scss/modules/_modalTabContent.scss +++ b/src/components/Elements/MainModal/scss/modules/_modalTabContent.scss @@ -7,77 +7,76 @@ @include modal-button(standard); } */ - padding: 1rem 2rem 5rem; - display: flex; - flex-direction: column; - width: 100%; - height: 100%; - overflow-y: auto; - - @include themed { + padding: 1rem 2rem 5rem; + display: flex; + flex-direction: column; + width: 100%; + // height: 100%; + overflow-y: auto; + @include themed { background: t($modal-background); margin: 0; border-radius: t($borderRadius); - } + } - @extend %tabText; + @extend %tabText; - hr { - width: 100%; - background: rgb(196 196 196 / 74%); - outline: none; + hr { + width: 100%; + background: rgb(196 196 196 / 74%); + outline: none; + } + + .settingsRow { + display: flex; + align-items: center; + justify-content: space-between; + transition: 0.4s ease-in-out; + padding-top: 2rem; + padding-bottom: 2rem; + + @include themed { + border-bottom: 1px solid t($modal-border); } - .settingsRow { + &.settingsNoBorder { + border-bottom: none; + } + + &:last-child { + margin-bottom: 2rem; + } + + .content { display: flex; - align-items: center; - justify-content: space-between; - transition: 0.4s ease-in-out; - padding-top: 2rem; - padding-bottom: 2rem; + flex-flow: column; + max-width: 50%; + gap: 5px; + } - @include themed { - border-bottom: 1px solid t($modal-border); + .action { + display: flex; + flex-flow: column; + align-items: flex-end; + width: 300px; + gap: 10px; + + button { + margin-top: 10px; } - &.settingsNoBorder { - border-bottom: none; - } - - &:last-child { - margin-bottom: 2rem; - } - - .content { + .link { + margin-top: 10px; display: flex; - flex-flow: column; - max-width: 50%; - gap: 5px; - } - - .action { - display: flex; - flex-flow: column; - align-items: flex-end; - width: 300px; - gap: 10px; - - button { - margin-top: 10px; - } - - .link { - margin-top: 10px; - display: flex; - flex-flow: row; - gap: 15px; - align-items: center; - } + flex-flow: row; + gap: 15px; + align-items: center; } } } +} .resetDataButtonsLayout { display: grid; diff --git a/src/components/Elements/MainModal/scss/settings/modules/tabs/_order.scss b/src/components/Elements/MainModal/scss/settings/modules/tabs/_order.scss index b912ff01..acaf0e79 100644 --- a/src/components/Elements/MainModal/scss/settings/modules/tabs/_order.scss +++ b/src/components/Elements/MainModal/scss/settings/modules/tabs/_order.scss @@ -126,7 +126,7 @@ &:hover { transform: translateY(-4px); - box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); + // box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); .image-nav-buttons { opacity: 1; diff --git a/src/features/background/options/Custom.jsx b/src/features/background/options/Custom.jsx index f5f9201a..51910712 100644 --- a/src/features/background/options/Custom.jsx +++ b/src/features/background/options/Custom.jsx @@ -10,9 +10,10 @@ import { MdFolder, MdChevronLeft, MdChevronRight, - MdDelete, - MdInfo, + MdImage, } from 'react-icons/md'; +import { BiSolidFilm } from 'react-icons/bi'; + import EventBus from 'utils/eventbus'; import { compressAccurately, filetoDataURL } from 'image-conversion'; import videoCheck from '../api/videoCheck'; @@ -802,9 +803,7 @@ const CustomSettings = memo(() => { justifyContent: 'center', }} > - + ) : ( @@ -813,12 +812,31 @@ const CustomSettings = memo(() => { ) ) : ( - {bg.name + <> + {bg.name +
+ +
+ )}