fix: share modal padding

- marketplace items performance issue
- font size on about photographers

src/components/helpers/sharemodal/ShareModal.jsx

@@ -25,7 +25,7 @@ function ShareModal({ modalClose, data }) {
   return (
     <div className="smallModal">
       <div className="shareHeader">
-        <p className="title">{variables.getMessage('widgets.quote.share')}</p>
+        <span className="title">{variables.getMessage('widgets.quote.share')}</span>
         <Tooltip title={variables.getMessage('modals.welcome.buttons.close')}>
           <div className="close" onClick={modalClose}>
             <MdClose />

src/components/helpers/sharemodal/sharemodal.scss

@@ -50,7 +50,7 @@
       @include themed() {
         background: t($modal-sidebar);
         border-radius: t($borderRadius);
-        box-shadow: 0 0 0 4px t($modal-sidebarActive);
+        box-shadow: 0 0 0 1px t($modal-sidebarActive);
         padding: 11px;
         flex: 1;
         color: t($color);
@@ -63,7 +63,7 @@
     @include themed() {
       background: t($modal-sidebar);
       border-radius: t($borderRadius);
-      box-shadow: 0 0 0 4px t($modal-sidebarActive);
+      box-shadow: 0 0 0 1px t($modal-sidebarActive);
       padding: 11px;
       flex: 1;
       color: t($color);

src/components/modals/main/scss/marketplace/_main.scss

@@ -94,8 +94,6 @@
 
         border-radius: 150px;
         padding: 2px 8px;
-        backdrop-filter: blur(16px) saturate(180%);
-        backdrop-filter: blur(16px) saturate(180%);
         background-color: rgb(255 255 255 / 10%);
         border: 1px solid rgb(209 213 219 / 30%);
       }

src/components/modals/main/scss/settings/modules/tabs/_about.scss

@@ -32,3 +32,13 @@
     }
   }
 }
+
+.subtitle-photographers {
+  font-size: 16px;
+  @include themed() {
+    color: t($color);
+    span {
+      color: t($subColor)
+    }
+  }
+}

src/components/modals/main/settings/sections/About.jsx

@@ -352,9 +352,9 @@ export default class About extends PureComponent {
           {!!this.state.loading ? <p>{this.state.loading}</p> : <></> }
           <ul>
             {this.state.photographers.map(({ name, count }) => <>
-              <li>
+              <li className="subtitle-photographers">
                 {name}
-                <span style={{ color: '#ccc' }}> ({count} images)</span>
+                <span> ({count} images)</span>
               </li>
             </>)}
           </ul>