mirrors/mue
1
0
Fork 0
mirror of https://github.com/mue/mue.git synced 2026-07-14 04:24:01 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: share modal button styling, marketplace item chip style

Browse Source 
Co-authored-by: David Ralph <me@davidcralph.co.uk>
This commit is contained in:
alexsparkes
2024-05-19 23:00:13 +01:00
parent 1088f5c30a
commit 3e79f21eba
6 changed files with 149 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/Elements/MainModal/scss/marketplace/_main.scss
View File

@@ -69,6 +69,7 @@
display: flex;
flex-flow: column;
gap: 5px;
align-items: center;
.card-title {
font-size: 18px;
@@ -92,7 +93,7 @@
}
border-radius: 150px;
padding: 2px 8px;
padding: 2px 15px;
background-color: rgb(255 255 255 / 10%);
border: 1px solid rgb(209 213 219 / 30%);
}
@@ -126,7 +127,7 @@
table-layout: fixed;
width: 100%;
max-width: 650px !important;
word-wrap: break-word !important;
word-wrap: break-word !important;
}
}
@@ -136,7 +137,7 @@
background-size: cover;
border-radius: 15px;
width: 30%;
max-width: 300px;
max-width: 250px;
max-height: 600px;
.front {
@@ -450,7 +451,9 @@ p.author {
.title:hover {
cursor: pointer;
text-decoration: underline;
}
}
.createYourOwn {

5
src/components/Elements/MainModal/scss/marketplace/modules/_item.scss
View File

@@ -33,11 +33,10 @@ p.description {
svg {
@include themed {
background-image: t($slightGradient);
box-shadow: t($boxShadow);
}
background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 20px;
padding: 7px;
border-radius: 100%;
}

142
src/components/Elements/ShareModal/ShareModal.jsx
View File

@@ -7,6 +7,8 @@ import { SiTencentqq } from 'react-icons/si';
import Tooltip from '../Tooltip/Tooltip';
import { toast } from 'react-toastify';
import { Button } from 'components/Elements';
import './sharemodal.scss';
function ShareModal({ modalClose, data }) {
@@ -43,81 +45,77 @@ function ShareModal({ modalClose, data }) {
</Tooltip>
</div>
<div className="shareButtons">
<Tooltip title="Twitter">
<button
onClick={() =>
window
.open(
`https://twitter.com/intent/tweet?text=Check out ${data.name} on @getmue: ${data.url}`,
'_blank',
)
.focus()
}
>
<FaTwitter />
</button>
</Tooltip>
<Tooltip title="Facebook">
<button
onClick={() =>
window
.open(`https://www.facebook.com/sharer/sharer.php?u=${data.url}`, '_blank')
.focus()
}
>
<FaFacebookF />
</button>
</Tooltip>
<Tooltip title="Email">
<button
onClick={() =>
window
.open(
'mailto:email@example.com?subject=Check%20out%20this%20%on%20%Mue!&body=' +
data.data.name +
'on Mue: ' +
data,
'_blank',
)
.focus()
}
>
<MdEmail />
</button>
</Tooltip>
<Tooltip title="WeChat">
<button
onClick={() =>
window
.open(
`https://api.qrserver.com/v1/create-qr-code/?size=154x154&data=${data.url}`,
'_blank',
)
.focus()
}
>
<AiFillWechat />
</button>
</Tooltip>
<Tooltip title="Tencent QQ">
<button
onClick={() =>
window
.open(`https://connect.qq.com/widget/shareqq/index.html?url=${data.url}`, '_blank')
.focus()
}
>
<SiTencentqq />
</button>
</Tooltip>
<Button
onClick={() =>
window
.open(
`https://twitter.com/intent/tweet?text=Check out ${data.name} on @getmue: ${data.url}`,
'_blank',
)
.focus()
}
icon={<FaTwitter />}
tooltipTitle="Twitter"
type="icon"
/>
<Button
onClick={() =>
window
.open(`https://www.facebook.com/sharer/sharer.php?u=${data.url}`, '_blank')
.focus()
}
icon={<FaFacebookF />}
tooltipTitle="Twitter"
type="icon"
/>
<Button
onClick={() =>
window
.open(
'mailto:email@example.com?subject=Check%20out%20this%20%on%20%Mue!&body=' +
data.data.name +
'on Mue: ' +
data,
'_blank',
)
.focus()
}
icon={<MdEmail />}
tooltipTitle="Email"
type="icon"
/>
<Button
onClick={() =>
window
.open(
`https://api.qrserver.com/v1/create-qr-code/?size=154x154&data=${data.url}`,
'_blank',
)
.focus()
}
icon={<AiFillWechat />}
tooltipTitle="WeChat"
type="icon"
/>
<Button
onClick={() =>
window
.open(`https://connect.qq.com/widget/shareqq/index.html?url=${data.url}`, '_blank')
.focus()
}
icon={<SiTencentqq />}
tooltipTitle="Tencent QQ"
type="icon"
/>
</div>
<div className="copy">
<input type="text" value={data.url} className="left field" readOnly />
<Tooltip title={variables.getMessage('modals.share.copy_link')} placement="top">
<button onClick={() => copyLink()}>
<MdContentCopy />
</button>
</Tooltip>
<Button
onClick={() => copyLink()}
icon={<MdContentCopy />}
tooltipTitle={variables.getMessage('modals.share.copy_link')}
type="icon"
/>
</div>
</div>
);

7
src/components/Elements/ShareModal/sharemodal.scss
View File

@@ -38,6 +38,9 @@
justify-content: space-between;
display: flex;
gap: 15px;
button {
width: 40px;
}
}
.copy {
@@ -45,6 +48,10 @@
flex-flow: row;
gap: 15px;
button {
width: 40px;
}
input[type='text'] {
@include themed {
background: t($modal-sidebar);