setUsername(e.target.value)} />
diff --git a/src/index.css b/src/index.css
index da04b4a..787fa77 100644
--- a/src/index.css
+++ b/src/index.css
@@ -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);
+}
\ No newline at end of file
diff --git a/src/login-header.png b/src/login-header.png
new file mode 100644
index 0000000..61220d1
Binary files /dev/null and b/src/login-header.png differ
diff --git a/src/pages/layout.tsx b/src/pages/layout.tsx
index 4bffe4d..bb90c4d 100644
--- a/src/pages/layout.tsx
+++ b/src/pages/layout.tsx
@@ -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() {
- setShowLogin(false)} />
+
+
+ setShowLogin(false)} />
+