fix styling of subscribe button

This commit is contained in:
Tom
2023-05-01 19:01:53 +02:00
parent 0a0d6f4bf4
commit 809151c8f1
4 changed files with 130 additions and 15 deletions
+13 -2
View File
@@ -1458,6 +1458,7 @@ export const TopBar = styled.div`
padding: 6px 10px 5px;
background-repeat: repeat-x;
cursor: pointer;
font-size: 10pt !important;
}
.btn-wrap a {
@@ -1499,7 +1500,12 @@ export const TopBar = styled.div`
padding: 6px 10px 5px;
background-repeat: repeat-x;
cursor: pointer;
font-size: 16px;
font-size: 16px !important;
font-family: times new roman !important;
}
.subscribe-button-mobile {
margin-top: -5px !important;
}
.btn-wrap a {
@@ -1520,7 +1526,12 @@ export const TopBar = styled.div`
padding: 6px 10px 5px;
background-repeat: repeat-x;
cursor: pointer;
font-size: 16px;
font-size: 16px !important;
font-family: times new roman !important;
}
.subscribe-button-mobile {
margin-top: -5px !important;
}
.btn-wrap a {
+92 -2
View File
@@ -180,6 +180,16 @@ export const TopBar = styled.div`
.reply-stat {
margin-top: 5px;
}
.subscribe-button-desktop {
float: right;
margin-right: 10px;
margin-top: 3px;
}
.subscribe-button-mobile {
display: none;
}
}
@media (max-width: 480px) {
@@ -200,6 +210,19 @@ export const TopBar = styled.div`
hr {
display: none;
}
.subscribe-button-desktop {
display: none;
}
.subscribe-button-mobile {
margin-right: 10px;
float: right;
a {
cursor: pointer;
}
}
}
.return-button {
@@ -242,6 +265,15 @@ export const TopBar = styled.div`
a:hover, #button:hover {
color: red !important;
}
}
a, #subscribe {
color: #00e !important;
text-decoration: none;
}
a:hover, #subscribe:hover {
color: red !important;
}`;
case 'Yotsuba-B':
@@ -268,6 +300,15 @@ export const TopBar = styled.div`
a:hover, #button:hover {
color: red !important;
}
}
a, #subscribe {
color: #34345c !important;
text-decoration: none;
}
a:hover, #subscribe:hover {
color: #d00 !important;
}`;
case 'Futaba':
@@ -299,6 +340,16 @@ export const TopBar = styled.div`
.reply-stat {
font-size: 12pt;
bottom: 2px;
}
a, #subscribe {
color: #00e !important;
text-decoration: underline !important;
font-size: 12pt !important;
}
a:hover, #subscribe:hover {
color: red !important;
}`;
case 'Burichan':
@@ -330,6 +381,16 @@ export const TopBar = styled.div`
.reply-stat {
font-size: 12pt;
bottom: 2px;
}
a, #subscribe{
color: #34345c !important;
text-decoration: underline !important;
font-size: 12pt !important;
}
a:hover, #subscribe:hover {
color: red !important;
}`;
case 'Tomorrow':
@@ -362,6 +423,15 @@ export const TopBar = styled.div`
a:hover, #button:hover {
color: #5f89ab !important;
}
}
a, #subscribe {
color: #81a2be !important;
text-decoration: none;
}
a:hover, #subscribe:hover {
color: #5f89ab !important;
}`;
case 'Photon':
@@ -388,6 +458,15 @@ export const TopBar = styled.div`
a:hover, #button:hover {
color: #ff3300 !important;
}
}
a, #subscribe {
color: #f60 !important;
text-decoration: none;
}
a:hover, #subscribe:hover {
color: #ff3300 !important;
}`;
default:
return '';
@@ -407,6 +486,7 @@ export const TopBar = styled.div`
padding: 6px 10px 5px;
background-repeat: repeat-x;
cursor: pointer;
font-size: 10pt !important;
}
.btn-wrap a {
@@ -448,9 +528,14 @@ export const TopBar = styled.div`
padding: 6px 10px 5px;
background-repeat: repeat-x;
cursor: pointer;
font-size: 16px;
font-size: 16px !important;
font-family: times new roman !important;
}
.subscribe-button-mobile {
margin-top: -2px !important;
}
.btn-wrap a {
text-decoration: none !important;
border: none;
@@ -469,7 +554,12 @@ export const TopBar = styled.div`
padding: 6px 10px 5px;
background-repeat: repeat-x;
cursor: pointer;
font-size: 16px;
font-size: 16px !important;
font-family: times new roman !important;
}
.subscribe-button-mobile {
margin-top: -2px !important;
}
.btn-wrap a {
+11 -11
View File
@@ -463,20 +463,20 @@ const Board = () => {
<Link to={`/p/${selectedAddress}/catalog`}>Catalog</Link>
]
</div>
{feed.length > 0 ? (
<>
<span className="subscribe-button-desktop">
[
<button id="subscribe" style={{all: 'unset', cursor: 'pointer'}}>Subscribe</button>
]
</span>
<button className="subscribe-button-mobile btn-wrap">Subscribe</button>
</>
) : (
{feed.length > 0 ? (
<>
<span className="subscribe-button-desktop">
[
<button id="subscribe" style={{all: 'unset', cursor: 'pointer'}}>Subscribe</button>
]
</span>
<button className="subscribe-button-mobile btn-wrap">Subscribe</button>
</>
) : (
<div id="stats" style={{float: "right", marginTop: "5px"}}>
<span>Fetching IPFS...</span>
</div>
)}
)}
<div id="catalog-button-mobile">
<span className="btn-wrap">
<Link to={`/p/${selectedAddress}/catalog`}>Catalog</Link>
+14
View File
@@ -375,6 +375,20 @@ const Catalog = () => {
<Link to={`/p/${selectedAddress}`}>Return</Link>
]
</div>
{feed.length > 0 ? (
<>
<span className="subscribe-button-desktop">
[
<button id="subscribe" style={{all: 'unset', cursor: 'pointer'}}>Subscribe</button>
]
</span>
<button className="subscribe-button-mobile btn-wrap">Subscribe</button>
</>
) : (
<div id="stats" style={{float: "right", marginTop: "5px"}}>
<span>Fetching IPFS...</span>
</div>
)}
<div id="return-button-mobile">
<span className="btn-wrap-catalog btn-wrap">
<Link to={`/p/${selectedAddress}`}>Return</Link>