forked from Kieran/zap.stream
feat: new login dialog header
This commit is contained in:
parent
3b0345a845
commit
aa4c8378a1
@ -98,17 +98,25 @@ export function LoginSignup({ close }: { close: () => void }) {
|
||||
return (
|
||||
<>
|
||||
<h2>
|
||||
<FormattedMessage defaultMessage="Login" />
|
||||
<FormattedMessage defaultMessage="Create an Account" />
|
||||
</h2>
|
||||
<button type="button" className="btn btn-primary" onClick={createAccount}>
|
||||
<h3>
|
||||
<FormattedMessage defaultMessage="No emails, just awesomeness!" />
|
||||
</h3>
|
||||
<button type="button" className="btn btn-primary btn-block" onClick={createAccount}>
|
||||
<FormattedMessage defaultMessage="Create Account" />
|
||||
</button>
|
||||
<div className="or-divider">
|
||||
<hr/>
|
||||
<FormattedMessage defaultMessage="OR" />
|
||||
<hr/>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-primary"
|
||||
className="btn btn-primary btn-block"
|
||||
onClick={doLoginNsec}
|
||||
>
|
||||
Enter Nsec
|
||||
<FormattedMessage defaultMessage="Login with Private Key (insecure)" />
|
||||
</button>
|
||||
{error && <b className="error">{error}</b>}
|
||||
</>
|
||||
@ -132,7 +140,7 @@ export function LoginSignup({ close }: { close: () => void }) {
|
||||
<Icon name="camera-plus" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="username">
|
||||
<div className="paper">
|
||||
<input type="text" placeholder="Username" value={username} onChange={e => setUsername(e.target.value)} />
|
||||
</div>
|
||||
|
@ -17,6 +17,7 @@ body {
|
||||
--text-danger: #ff563f;
|
||||
--surface: #222;
|
||||
--border: #171717;
|
||||
--border-2: #393939;
|
||||
--gradient-purple: linear-gradient(135deg, #882bff 0%, #f83838 100%);
|
||||
--gradient-yellow: linear-gradient(270deg, #adff27 0%, #ffd027 100%);
|
||||
--gradient-orange: linear-gradient(270deg, #ff5b27 0%, rgba(255, 182, 39, 0.99) 100%);
|
||||
@ -107,6 +108,11 @@ a {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
.btn-block {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.btn-small {
|
||||
@ -226,6 +232,7 @@ div.paper {
|
||||
.dialog-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
z-index: 2;
|
||||
background-color: #171717;
|
||||
@ -235,21 +242,45 @@ div.paper {
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 90vw;
|
||||
max-width: 450px;
|
||||
max-width: 430px;
|
||||
max-height: 85vh;
|
||||
padding: 25px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.dialog-content .header-image {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.dialog-content .content-inner {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 25px;
|
||||
box-sizing: border-box;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.dialog-content .username, .dialog-content .username input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.dialog-content div.paper {
|
||||
background: #262626;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.dialog-content h3 {
|
||||
.dialog-content h2 {
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
}
|
||||
.dialog-content h3 {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.dialog-content small {
|
||||
display: block;
|
||||
@ -304,3 +335,15 @@ div.paper {
|
||||
.secondary {
|
||||
color: #909090;
|
||||
}
|
||||
|
||||
.or-divider {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
.or-divider hr {
|
||||
width: 135px;
|
||||
border-color: var(--border-2);
|
||||
}
|
BIN
src/login-header.png
Normal file
BIN
src/login-header.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 179 KiB |
@ -15,6 +15,7 @@ import { Login } from "index";
|
||||
import { FormattedMessage } from "react-intl";
|
||||
import { EventPublisher } from "@snort/system";
|
||||
import { LoginType } from "login";
|
||||
import LoginHeader from "../login-header.png";
|
||||
|
||||
export function LayoutPage() {
|
||||
const navigate = useNavigate();
|
||||
@ -87,7 +88,10 @@ export function LayoutPage() {
|
||||
<Dialog.Portal>
|
||||
<Dialog.Overlay className="dialog-overlay" />
|
||||
<Dialog.Content className="dialog-content">
|
||||
<img src={LoginHeader} className="header-image"/>
|
||||
<div className="content-inner">
|
||||
<LoginSignup close={() => setShowLogin(false)} />
|
||||
</div>
|
||||
</Dialog.Content>
|
||||
</Dialog.Portal>
|
||||
</Dialog.Root>
|
||||
|
Loading…
Reference in New Issue
Block a user