diff --git a/res/rml/window.rcss b/res/rml/window.rcss index 24f616e500..55ea0294eb 100644 --- a/res/rml/window.rcss +++ b/res/rml/window.rcss @@ -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("" center center); - color: #ffcc00; +} + +icon.error { + decorator: text("" 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; } diff --git a/src/dusk/ui/modal.cpp b/src/dusk/ui/modal.cpp index cd46f68528..bb8ed9a473 100644 --- a/src/dusk/ui/modal.cpp +++ b/src/dusk/ui/modal.cpp @@ -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"); diff --git a/src/dusk/ui/modal.hpp b/src/dusk/ui/modal.hpp index 585966b98d..4d3c9e7870 100644 --- a/src/dusk/ui/modal.hpp +++ b/src/dusk/ui/modal.hpp @@ -18,6 +18,8 @@ public: Rml::String bodyRml; std::vector actions; std::function onDismiss; + bool isWarning = false; + bool isError = false; }; explicit Modal(Props props); diff --git a/src/dusk/ui/prelaunch.cpp b/src/dusk/ui/prelaunch.cpp index 02fabde70f..7ef7e5e66c 100644 --- a/src/dusk/ui/prelaunch.cpp +++ b/src/dusk/ui/prelaunch.cpp @@ -156,7 +156,7 @@ void try_push_verification_modal(Document& host) { modal.pop(); }; host.push(std::make_unique(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::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, })); }