Refactoring/rewrite of modal boxes handling

assets/sass/_board.sass

@@ -65,11 +65,10 @@ td.board-column-task-collapsed
 .board-add-icon
   float: left
   padding: 0 5px
-  a
+  i
     text-decoration: none
     color: link-color('primary')
-    font-size: size('xlarge')
-    line-height: 70%
+    font-size: size('large')
     &:focus, &:hover
       text-decoration: none
       color: red

assets/sass/_file_upload.sass

@@ -26,6 +26,6 @@
     padding-bottom: 8px
     border-bottom: 1px dotted #ddd
     width: 95%
-    &.file-error
+    .file-error
       font-weight: bold
       color: color('error')

assets/sass/_form.sass

@@ -1,13 +1,19 @@
 @import variables
 @import mixins
 
-form
-  margin-bottom: 20px
+fieldset
+  border: 1px solid #ccc
+  margin-top: 20px
+
+legend
+  font-weight: 500
+  font-size: size('medium')
 
 label
   cursor: pointer
   display: block
   margin-top: 10px
+  font-weight: 400
 
 input
   &[type="number"], &[type="date"], &[type="email"], &[type="password"], &[type="text"]:not(.input-addon-field)
@@ -19,7 +25,6 @@ input
     height: 25px
     padding-bottom: 0
     font-family: sans-serif
-    margin-top: 10px
     +appearance
     @include placeholder
       color: color('lighter')

assets/sass/_links.sass

@@ -10,3 +10,6 @@ a
   &:hover
     color: link-color('hover')
     text-decoration: none
+  .fa
+    text-decoration: none
+    color: color('primary')

assets/sass/_markdown_editor.sass

@@ -1,6 +1,7 @@
 @import variables
 
 .text-editor
+  margin-top: 10px
   a
     font-size: size('normal')
     color: color('light')
@@ -10,7 +11,12 @@
       color: link-color('primary')
   .text-editor-preview-area
     border: 1px solid color('lighter')
-    width: 400px
-    height: 200px
+    width: 700px
+    max-width: 99%
+    height: 250px
     overflow: auto
     padding: 2px
+  textarea
+    width: 700px
+    max-width: 98%
+    height: 250px

assets/sass/_modal.sass

@@ -1,7 +1,7 @@
 @import variables
 @import mixins
 
-#popover-container
+#modal-overlay
   position: fixed
   top: 0
   left: 0
@@ -11,25 +11,24 @@
   overflow: auto
   z-index: 100
 
-#popover-content
+#modal-box
   position: fixed
-  width: 950px
-  max-width: 95%
   max-height: calc(100% - 50px)
-  top: 5%
+  top: 2%
   left: 50%
   transform: translateX(-50%)
-  padding: 0 15px 15px
   background: #fff
   overflow: auto
+  border-radius: 5px
 
-#popover-content-header
+#modal-content
+  padding: 0 5px 5px
+
+#modal-header
   text-align: right
+  padding-right: 5px
 
-#popover-close-button
+#modal-close-button
   color: color('primary')
   &:hover
     color: color('error')
-
-.popover-form
-  margin-bottom: 0

assets/sass/_select_dropdown.sass

@@ -45,3 +45,8 @@
     top: 4px
     right: 5px
     cursor: pointer
+  .select-loading-icon
+    color: color('medium')
+    position: absolute
+    top: 4px
+    right: 5px

assets/sass/_task_form.sass

@@ -0,0 +1,32 @@
+@import variables
+
+.task-form-container
+  @include grid(100)
+
+.task-form-main-column
+  @include grid_width(60/100)
+  @include custom-device(1000px)
+    @include grid_width(1)
+
+  input[type="text"]
+    width: 700px
+    max-width: 99%
+
+.task-form-secondary-column
+  max-width: 250px
+  min-width: 200px
+  max-height: 600px
+  padding-left: 10px
+  overflow: auto
+  @include grid_width(20/100)
+  @include custom-device(1000px)
+    @include grid_width(1)
+    max-width: 99%
+    max-height: none
+  label:first-child
+    margin-top: 0
+    @include custom-device(1000px)
+      margin-top: 10px
+
+.task-form-bottom
+  @include grid_width(1)

assets/sass/app.sass

@@ -15,7 +15,7 @@
 @import select_dropdown
 @import suggest_menu
 @import dialog_box
-@import popover
+@import modal
 @import pagination
 @import header
 @import logo
@@ -41,6 +41,7 @@
 @import task_board_date
 @import task_tags
 @import task_summary
+@import task_form
 @import task_listing
 @import comment
 @import subtasks