Adding StatusForm constraint and alert

css/statusmessage.css

@@ -24,6 +24,9 @@
   background: #500005;
 }
 
+.ui-dialog .ui-button-text {
+  height: 100%;
+}
 
 #edit-mediatabs input[type="radio"]:checked {
   background: #003b08;
@@ -55,7 +58,8 @@
   background-size: contain;
 }
 
-#edit-media-upload {
+#edit-media-upload,
+#status-form .form-item-media, #status-form input.form-file{
   display: inline-block;
   max-width: 32px;
   min-height: 32px;
@@ -72,3 +76,13 @@
   text-decoration: none;
   color: #333;
 }
+
+.ui-dialog {
+  font-size: 90%;
+}
+
+.ui-dialog-title {
+  background-size: contain;
+  background: url('/themes/kekistan/images/icons/alert.png') no-repeat;
+  padding: 2px 2.5em;
+}

js/statusmessage.js

@@ -74,6 +74,11 @@
     //If status message is empty, prevent submit and alert the user
     let statusPostButton = document.getElementById('edit-post');
 
+    let alertDialog = document.createElement('div');
+    alertDialog.id = 'status-dialog';
+    alertDialog.title = 'Status Alert';
+    alertDialog.innerHTML = '<p>Enter a status message</p>';
+
     statusPostButton.addEventListener('click', function() {
       let textBox = document.getElementById('edit-message');
       console.dir(textBox);
@@ -83,7 +88,8 @@
         event.preventDefault();
         event.stopPropagation();
         event.stopImmediatePropagation();
-        alert('Enter a status message');
+        // alert('Enter a status message');
+        $(alertDialog).dialog();
       } else {
         textBox.value = "";
       }