fix link styles regression in about modal (#400)

This commit is contained in:
Red J Adaya 2024-09-20 01:43:32 +08:00 committed by GitHub
parent d2366df9db
commit a50431ce2b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 11 additions and 22 deletions

View File

@ -3,19 +3,4 @@
&.link-button { &.link-button {
text-decoration: none; text-decoration: none;
.button-inner {
display: flex;
border-radius: 6px;
padding: 8px 12px;
background-color: var(--button-grey-bg);
border: 1px solid var(--button-grey-border-color);
color: var(--button-grey-text-color);
i {
margin-right: 4px;
}
&:hover {
color: var(--button-grey-text-color);
}
}
} }

View File

@ -24,7 +24,7 @@ interface LinkButtonProps {
const LinkButton = ({ leftIcon, rightIcon, children, className, ...rest }: LinkButtonProps) => { const LinkButton = ({ leftIcon, rightIcon, children, className, ...rest }: LinkButtonProps) => {
return ( return (
<a {...rest} className={clsx("link-button", className)}> <a {...rest} className={clsx("button grey solid link-button", className)}>
<span className="button-inner"> <span className="button-inner">
{leftIcon && <span className="icon-left">{leftIcon}</span>} {leftIcon && <span className="icon-left">{leftIcon}</span>}
{children} {children}

View File

@ -2,14 +2,14 @@
// SPDX-License-Identifier: Apache-2.0 // SPDX-License-Identifier: Apache-2.0
.about-modal { .about-modal {
width: 445px;
padding-bottom: 34px; padding-bottom: 34px;
.modal-content { .content-wrapper .modal-content {
margin-bottom: 0; margin-bottom: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
padding: 0px 0px;
gap: 24px; gap: 24px;
.section-wrapper { .section-wrapper {
@ -43,15 +43,19 @@
} }
} }
.section:nth-child(3) { .section.links {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
gap: 7px; gap: 10px;
.wave-button-link { .button {
display: flex; display: flex;
align-items: center; align-items: center;
.icon-left {
margin-right: 5px;
}
i { i {
font-size: 16px; font-size: 16px;
} }

View File

@ -36,7 +36,7 @@ const AboutModal = ({}: AboutModalProps) => {
<br /> <br />
Update Channel: {updaterChannel} Update Channel: {updaterChannel}
</div> </div>
<div className="section"> <div className="section links">
<LinkButton <LinkButton
className="secondary solid" className="secondary solid"
href="https://github.com/wavetermdev/waveterm" href="https://github.com/wavetermdev/waveterm"