diff --git a/src/components/Elements/MainModal/scss/index.scss b/src/components/Elements/MainModal/scss/index.scss
index 9fbc1aa5..b5b9e6b9 100644
--- a/src/components/Elements/MainModal/scss/index.scss
+++ b/src/components/Elements/MainModal/scss/index.scss
@@ -49,13 +49,16 @@
padding: 0.5em;
border-radius: 12px;
cursor: pointer;
+ transition: 0.5s;
svg {
font-size: 2em;
}
&:hover {
- background: rgb(121 121 121 / 22.6%);
+ @include themed {
+ background: t($modal-sidebarActive);
+ }
}
}
diff --git a/src/components/Elements/MainModal/scss/marketplace/modules/_item.scss b/src/components/Elements/MainModal/scss/marketplace/modules/_item.scss
index 29b1eab0..8568b385 100644
--- a/src/components/Elements/MainModal/scss/marketplace/modules/_item.scss
+++ b/src/components/Elements/MainModal/scss/marketplace/modules/_item.scss
@@ -22,42 +22,51 @@ p.description {
.item {
flex: 1 0 40% !important;
}
+ .infoItem {
+ display: flex;
+ flex-flow: row;
+ align-items: center;
+ gap: 15px;
+ flex: 1 0 44%;
- @include themed {
- background: t($modal-sidebar);
- box-shadow: t(boxshadow);
- border-radius: t($borderRadius);
- padding: 15px;
-
- .infoItem {
- display: flex;
- flex-flow: row;
- align-items: center;
- gap: 15px;
- flex: 1 0 44%;
-
- svg {
- font-size: 25px;
- color: t($subColor);
- }
-
- .text {
- display: flex;
- flex-flow: column;
+ svg {
+ @include themed() {
+ background-image: t($slightGradient);
}
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ font-size: 20px;
+ border-radius: 100%;
}
- .header {
- text-transform: uppercase;
+ .text {
+ display: flex;
+ flex-flow: column;
+ }
+ }
+
+ .header {
+ text-transform: uppercase;
+ @include themed {
color: t($subColor);
}
+ }
- span {
+ span {
+ @include themed {
color: t($color);
}
}
+
+ @include themed {
+ background: t($modal-sidebar);
+ box-shadow: 0 0 0 1px t($modal-sidebarActive);
+ border-radius: t($borderRadius);
+ padding: 15px;
+ }
}
+
.showMoreItems {
display: flex;
flex-flow: column;
@@ -65,3 +74,9 @@ p.description {
align-items: center;
gap: 10px;
}
+
+.marketplaceDescription {
+ display: flex;
+ flex-flow: column;
+ gap: 15px;
+}
\ No newline at end of file
diff --git a/src/components/Elements/MainModal/scss/modules/_modalTabContent.scss b/src/components/Elements/MainModal/scss/modules/_modalTabContent.scss
index 72496b13..61a730a2 100644
--- a/src/components/Elements/MainModal/scss/modules/_modalTabContent.scss
+++ b/src/components/Elements/MainModal/scss/modules/_modalTabContent.scss
@@ -148,6 +148,11 @@ table {
gap: 25px;
padding: 25px;
justify-content: space-between;
+ @include themed {
+ background: t($modal-sidebar);
+ border-radius: t($borderRadius);
+ box-shadow: 0 0 0 1px t($modal-sidebarActive);
+ }
div:nth-child(1) {
display: flex;
@@ -157,15 +162,13 @@ table {
}
.icon {
- border-radius: 100%;
- display: grid;
- place-items: center;
- padding: 15px;
- font-size: 25px;
-
- @include themed {
- background: t($modal-sidebarActive);
+ @include themed() {
+ background-image: t($slightGradient);
+ box-shadow: t($boxShadow);
}
+ padding: 15px;
+ border-radius: 100%;
+ font-size: 25px;
}
.messageText {
@@ -190,11 +193,6 @@ table {
.messageAction {
float: right;
}
-
- @include themed {
- background: t($modal-sidebar);
- border-radius: t($borderRadius);
- }
}
.messagesContainer {
diff --git a/src/components/Elements/ShareModal/sharemodal.scss b/src/components/Elements/ShareModal/sharemodal.scss
index 3d772a11..0ff88b7b 100644
--- a/src/components/Elements/ShareModal/sharemodal.scss
+++ b/src/components/Elements/ShareModal/sharemodal.scss
@@ -87,19 +87,6 @@
outline: none;
}
- .close {
- padding: 15px;
- place-items: center;
- display: grid;
- cursor: pointer;
-
- &:hover {
- @include themed {
- background: t($modal-sidebar);
- border-radius: t($borderRadius);
- }
- }
- }
}
.shareHeader {
@@ -107,4 +94,20 @@
flex-flow: row;
justify-content: space-between;
align-items: center;
+ .close {
+ padding: 15px;
+ place-items: center;
+ display: grid;
+ cursor: pointer;
+ transition: 0.3s;
+ @include themed {
+ border-radius: t($borderRadius);
+ }
+
+ &:hover {
+ @include themed {
+ background: t($modal-sidebarActive);
+ }
+ }
+ }
}
diff --git a/src/features/background/components/Favourite.jsx b/src/features/background/components/Favourite.jsx
index 0702bd71..002a9320 100644
--- a/src/features/background/components/Favourite.jsx
+++ b/src/features/background/components/Favourite.jsx
@@ -23,6 +23,7 @@ class Favourite extends PureComponent {
this.setState({
favourited: this.buttons.unfavourited,
});
+ this.props.tooltipText(variables.getMessage('widgets.quote.favourite'));
variables.stats.postEvent('feature', 'Background favourite');
} else {
const type = localStorage.getItem('backgroundType');
@@ -91,6 +92,7 @@ class Favourite extends PureComponent {
this.setState({
favourited: this.buttons.favourited,
});
+ this.props.tooltipText(variables.getMessage('widgets.quote.unfavourite'));
variables.stats.postEvent('feature', 'Background unfavourite');
}
}
@@ -100,6 +102,12 @@ class Favourite extends PureComponent {
return null;
}
+ this.props.tooltipText(
+ localStorage.getItem('favourite')
+ ? variables.getMessage('widgets.quote.unfavourite')
+ : variables.getMessage('widgets.quote.favourite'),
+ );
+
return this.state.favourited;
}
}
diff --git a/src/features/background/components/PhotoInformation.jsx b/src/features/background/components/PhotoInformation.jsx
index cea2440b..f9e2bc83 100644
--- a/src/features/background/components/PhotoInformation.jsx
+++ b/src/features/background/components/PhotoInformation.jsx
@@ -63,6 +63,7 @@ function PhotoInformation({ info, url, api }) {
const [other, setOther] = useState(false);
const [shareModal, openShareModal] = useState(false);
const [excludeModal, openExcludeModal] = useState(false);
+ const [favouriteTooltipText, setFavouriteTooltipText] = useState(variables.getMessage('widgets.quote.favourite'));
if (info.hidden === true || !info.credit) {
return null;
@@ -207,7 +208,7 @@ function PhotoInformation({ info, url, api }) {
)}
+