make dialogues more "appealing"

resources/assets/less/yuuno/bem/dialogue.less

@@ -1,3 +1,7 @@
+.dialogues {
+    opacity: 0;
+}
+
 .dialogues:not(:empty) {
     background: fade(#000, 50%);
     position: fixed;
@@ -9,31 +13,61 @@
     justify-content: center;
     align-items: center;
     z-index: 2147483648; // fuck it
+    opacity: 1;
+    transition: opacity .2s;
 }
 
 .dialogue {
     font-family: @cute-font;
     display: inline-block;
-    background: #9475b2;
+    background: #c2affe;
     box-shadow: 0 0 5px #9475B2;
-    padding: 10px;
+    border: 1px solid #9475B2;
-    margin: 10px;
+    padding: 4px;
-    min-width: 200px;
+    min-width: 250px;
+    border-radius: 2px;
 
     &__buttons {
         text-align: right;
+        border-top: 1px solid #9475b2;
+        margin-top: 2px;
+        padding-top: 2px;
     }
 
     &__button {
         font-family: @cute-font;
-        background: #8364a1;
+        background: #b19eed;
-        border: 0 solid transparent;
+        border: 1px solid #9475B2;
         padding: 2px 4px;
         cursor: pointer;
         margin-left: 2px;
+        min-width: 50px;
+        border-radius: 3px;
+        transition: background .2s;
+
+        &:hover {
+            background: #c2affe;
+        }
+
+        &:active {
+            background: #a08ddc;
+        }
 
         &:last-child {
             font-weight: 700;
+            min-width: 70px;
         }
     }
+
+    &__title {
+        margin: -4px;
+        background: linear-gradient(90deg, rgba(148, 117, 178, .7), rgba(148, 117, 178, 0)) #C2AFFE;
+        margin-bottom: 4px;
+        padding: 2px 4px;
+    }
+
+    &__text {
+        white-space: pre;
+        padding: 3px 4px;
+    }
 }

resources/assets/less/yuuno/bem/news.less

@@ -2,7 +2,7 @@
     &__head {
         margin: -1px -2px;
         padding: 4px;
-        background: #C2AFFE;
+        background: #c2affe;
         color: inherit !important;
         font-weight: 700;
         display: block;

resources/assets/typescript/Sakura/Dialogue.ts

@@ -2,6 +2,7 @@ namespace Sakura
 {
     export class Dialogue
     {
+        public Title: string = null;
         public Text: string;
         private Type: DialogueType = DialogueType.Info;
         private Callbacks: Dictionary<DialogueButton, Function> = new Dictionary<DialogueButton, Function>();
@@ -29,9 +30,14 @@ namespace Sakura
 
             switch (this.Type) {
                 case DialogueType.Confirm:
+                case DialogueType.ConfirmNegative:
                     modifiers.push('confirm');
                     buttons.push(DialogueButton.No);
                     buttons.push(DialogueButton.Yes);
+
+                    if (this.Type === DialogueType.ConfirmNegative) {
+                        buttons = buttons.reverse();
+                    }
                     break;
 
                 default:
@@ -40,9 +46,15 @@ namespace Sakura
             }
 
             var container: HTMLDivElement = <HTMLDivElement>DOM.Create('div', DOM.BEM('dialogue', null, modifiers)),
+                title: HTMLDivElement = <HTMLDivElement>DOM.Create('div', DOM.BEM('dialogue', 'title')),
                 text: HTMLDivElement = <HTMLDivElement>DOM.Create('div', DOM.BEM('dialogue', 'text')),
                 buttonCont: HTMLDivElement = <HTMLDivElement>DOM.Create('div', DOM.BEM('dialogue', 'buttons'));
 
+            if (this.Title !== null) {
+                DOM.Append(title, DOM.Text(this.Title));
+                DOM.Append(container, title);
+            }
+
             DOM.Append(text, DOM.Text(this.Text));
             DOM.Append(container, text);
 

resources/assets/typescript/Sakura/DialogueType.ts

@@ -3,6 +3,7 @@ namespace Sakura
     export enum DialogueType
     {
         Info,
-        Confirm
+        Confirm,
+        ConfirmNegative
     }
 }

resources/views/yuuno/forum/topic.twig

@@ -69,6 +69,7 @@
                 });
                 deleter.AddCallback(0, function () {
                     var error = new Sakura.Dialogue;
+                    error.Title = "Error";
                     error.Text = "Deletion failed!";
                     error.AddCallback(Sakura.DialogueButton.Ok, function () {
                         this.Close();

resources/views/yuuno/master.twig

@@ -101,6 +101,7 @@
 
                             if (result.error) {
                                 var diag = new Sakura.Dialogue;
+                                diag.Title = "Login Error";
                                 diag.Text = result.error;
                                 diag.AddCallback(Sakura.DialogueButton.Ok, function () {
                                     this.Close();
@@ -120,7 +121,8 @@
                 <script>
                     function yuunoLogout() {
                         var confirm = new Sakura.Dialogue;
-                        confirm.SetType(Sakura.DialogueType.Confirm);
+                        confirm.SetType(Sakura.DialogueType.ConfirmNegative);
+                        confirm.Title = "Logout";
                         confirm.Text = "Are you sure?";
 
                         confirm.AddCallback(Sakura.DialogueButton.No, function () {
@@ -141,6 +143,7 @@
 
                                 if (result.error) {
                                     var error = new Sakura.Dialogue;
+                                    error.Title = "Logout Error";
                                     error.Text = result.error;
                                     error.SetType(Sakura.DialogueType.Info);
 

resources/views/yuuno/settings/advanced/deactivate.twig

@@ -13,7 +13,8 @@
     <script>
         function yuunoDeactivate(form) {
             var confirm = new Sakura.Dialogue;
-            confirm.SetType(Sakura.DialogueType.Confirm);
+            confirm.SetType(Sakura.DialogueType.ConfirmNegative);
+            confirm.Title = "Account Deactivation";
             confirm.Text = "Are you really sure? You can reactivate your account within 30 days of deactivated, after that it'll be permanently deleted!";
 
             confirm.AddCallback(Sakura.DialogueButton.No, function () {
@@ -32,6 +33,7 @@
 
                     if (result.error) {
                         var error = new Sakura.Dialogue;
+                        error.Title = "Account Deactivation";
                         error.Text = result.error;
                         error.SetType(Sakura.DialogueType.Info);
 

resources/views/yuuno/settings/master.twig

@@ -22,6 +22,7 @@
         updater.SetSend(forms);
         updater.AddCallback(0, function () {
             var resp = updater.JSON();
+            dialogue.Title = resp.error ? "Error" : "Information";
             dialogue.Text = resp.error || text || 'Updated!';
             dialogue.Display();
         });
@@ -32,6 +33,7 @@
 
     function updateSettingsConfirm(form, action) {
         var dialogue = new Sakura.Dialogue;
+        dialogue.Title = "Confirmation";
         dialogue.Text = "Are you sure?";
         dialogue.SetType(Sakura.DialogueType.Confirm);
         dialogue.AddCallback(Sakura.DialogueButton.No, function () {

resources/views/yuuno/user/profile.twig

@@ -153,6 +153,7 @@
 
                 if (result.error) {
                     var diag = new Sakura.Dialogue;
+                    diag.Title = "Error";
                     diag.Text = result.error;
                     diag.AddCallback(Sakura.DialogueButton.Ok, function () {
                         this.Close();

server.php

@@ -1,6 +1,6 @@
 <?php
 /*
- * mod_rewrite emulator for php's build in server
+ * mod_rewrite emulator for php's built in server
  */
 
 // Decode and parse the request uri