Redesign Modal

2026-07-07 20:11:46 -04:00 · 2026-05-06 19:12:20 -04:00
parent 47593d0eb4
commit b5f98f69db
4 changed files with 70 additions and 20 deletions
@@ -44,7 +44,7 @@ window.preset {
 }

 window.modal {
-    max-width: 816dp;
+    max-width: 640dp;
 }

 window[open] {
@@ -116,12 +116,6 @@ window content pane > spacer {
    pointer-events: none;
 }

-window modal {
-    padding: 32dp;
-    gap: 20dp;
-    flex: 0 1 auto;
-}
-
 scrollbarvertical {
    width: 8dp;
    margin: 4dp 4dp 4dp 0;
@@ -209,9 +203,8 @@ button:not(:disabled):active {
 }

 button.modal-btn {
-    font-size: 20dp;
-    padding: 16dp 10dp;
    flex: 1 1 0;
+    text-align: center;
 }

 select-button {
@@ -274,6 +267,8 @@ select-button input {
 }

 icon {
+    width: 1em;
+    height: 1em;
    font-family: "Material Symbols Rounded";
    font-weight: normal;
    display: inline-block;
@@ -281,10 +276,11 @@ icon {
 }

 icon.warning {
-    width: 1em;
-    height: 1em;
    decorator: text("&#xe002;" center center);
-    color: #ffcc00;
+}
+
+icon.error {
+    decorator: text("&#xe000;" center center);
 }

 .achievement-row {
@@ -422,19 +418,58 @@ button.preset-btn {

 .modal-dialog {
    display: flex;
-    flex-flow: column;
-    padding: 16dp;
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 24dp;
    gap: 20dp;
    flex: 0 1 auto;
+    width: 100%;
+    text-align: left;
+}
+
+.modal-header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    flex: 0 0 auto;
+    gap: 16dp;
+}
+
+.modal-header icon {
+    font-size: 24dp;
+    color: #92875B;
+}
+
+.modal-title {
+    display: block;
+    font-family: "Fira Sans Condensed";
+    font-weight: bold;
+    text-transform: uppercase;
+    font-size: 18dp;
+    color: #92875B;
+    flex: 1 1 auto;
+}
+
+.modal-body {
+    display: block;
+    width: 100%;
+    flex: 0 1 auto;
    min-width: 0;
+    font-size: 20dp;
+    color: #FFFFFF;
+    font-weight: normal;
 }

 .modal-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
+    justify-content: stretch;
    align-items: stretch;
    gap: 12dp;
-    padding-top: 12dp;
    width: 100%;
+    flex: 0 0 auto;
+    padding-top: 4dp;
 }
@@ -4,12 +4,23 @@ namespace dusk::ui {

 Modal::Modal(Props props)
    : WindowSmall("modal", "modal-dialog"), mProps(std::move(props)) {
-    auto* title = append(mDialog, "div");
-    title->SetClass("preset-title", true);
+    auto* header = append(mDialog, "div");
+    header->SetClass("modal-header", true);
+
+    auto* title = append(header, "div");
+    title->SetClass("modal-title", true);
    title->SetInnerRML(mProps.title);

+    if (mProps.isWarning) {
+        auto* icon = append(header, "icon");
+        icon->SetClass("warning", true);
+    } else if ( mProps.isError ) {
+        auto* icon = append(header, "icon");
+        icon->SetClass("error", true);
+    }
+
    auto* body = append(mDialog, "div");
-    body->SetClass("preset-intro", true);
+    body->SetClass("modal-body", true);
    body->SetInnerRML(mProps.bodyRml);

    auto* actions = append(mDialog, "div");
@@ -18,6 +18,8 @@ public:
        Rml::String bodyRml;
        std::vector<ModalAction> actions;
        std::function<void(Modal&)> onDismiss;
+        bool isWarning = false;
+        bool isError = false;
    };

    explicit Modal(Props props);
@@ -156,7 +156,7 @@ void try_push_verification_modal(Document& host) {
            modal.pop();
        };
        host.push(std::make_unique<Modal>(Modal::Props{
-            .title = "Disc verification",
+            .title = "Disc verification warning",
            .bodyRml = bodyRml,
            .actions =
                {
@@ -170,12 +170,13 @@ void try_push_verification_modal(Document& host) {
                    },
                },
            .onDismiss = dismiss,
+            .isWarning = true,
        }));
        return;
    }

    host.push(std::make_unique<Modal>(Modal::Props{
-        .title = "Disc verification",
+        .title = "Disc verification error",
        .bodyRml = state.errorString,
        .actions =
            {
@@ -185,6 +186,7 @@ void try_push_verification_modal(Document& host) {
                },
            },
        .onDismiss = dismiss,
+        .isError = true,
    }));
 }