From 3da11bf47898befb6d61eee1f415c381788e4f75 Mon Sep 17 00:00:00 2001
From: Ben Ogle <ogle.ben@gmail.com>
Date: Tue, 4 Nov 2014 14:04:15 -0800
Subject: [PATCH] Update styles for modal panels.

---
 src/panel-container-element.coffee |  8 +++---
 src/workspace.coffee               |  1 +
 static/overlay.less                | 41 +++++++++++++++++-------------
 3 files changed, 28 insertions(+), 22 deletions(-)

diff --git a/src/panel-container-element.coffee b/src/panel-container-element.coffee
index fb5c6684e..5f83a6a81 100644
--- a/src/panel-container-element.coffee
+++ b/src/panel-container-element.coffee
@@ -11,14 +11,14 @@ class PanelContainerElement extends HTMLElement
     @subscriptions.add @model.onDidRemovePanel(@panelRemoved.bind(this))
     @subscriptions.add @model.onDidDestroy(@destroyed.bind(this))
 
-    @setAttribute('location', @model.getLocation())
-
   panelAdded: ({panel, index}) ->
+    panelElement = panel.getView()
+    panelElement.setAttribute('location', @model.getLocation())
     if index >= @childNodes.length
-      @appendChild(panel.getView())
+      @appendChild(panelElement)
     else
       referenceItem = @childNodes[index + 1]
-      @insertBefore(panel.getView(), referenceItem)
+      @insertBefore(panelElement, referenceItem)
 
   panelRemoved: ({panel, index}) ->
     @removeChild(@childNodes[index])
diff --git a/src/workspace.coffee b/src/workspace.coffee
index 944634575..d88f9196a 100644
--- a/src/workspace.coffee
+++ b/src/workspace.coffee
@@ -674,6 +674,7 @@ class Workspace extends Model
   #
   # Returns a {Panel}
   addModalPanel: (options={}) ->
+    # TODO: remove these default classes. They are to supoprt existing themes.
     options.className ?= 'overlay from-top'
     @addPanel('modal', options)
 
diff --git a/static/overlay.less b/static/overlay.less
index ee6f983ac..6bcd85ea7 100644
--- a/static/overlay.less
+++ b/static/overlay.less
@@ -1,6 +1,7 @@
 @import "ui-variables";
 
-.overlay {
+.overlay,
+atom-panel[location="modal"] {
   position: absolute;
   left: 50%;
   width: 500px;
@@ -8,7 +9,9 @@
   z-index: 9999;
   box-sizing: border-box;
 
-  background-color: #fff;
+  color: @text-color;
+  background-color: @overlay-background-color;
+
   padding: 10px;
 
   h1 {
@@ -21,30 +24,32 @@
   h2 {
     font-size: 1.3em;
   }
+
+  atom-text-editor.mini {
+    margin-bottom: 10px;
+  }
+
+  .message {
+    padding-top: 5px;
+    font-size: 11px;
+  }
+
+  &.mini {
+    width: 200px;
+    margin-left: -100px;
+    font-size: 12px;
+  }
 }
 
-.overlay atom-text-editor.mini {
-  margin-bottom: 10px;
-}
-
-.overlay .message {
-  padding-top: 5px;
-  font-size: 11px;
-}
-
-.overlay.mini {
-  width: 200px;
-  margin-left: -100px;
-  font-size: 12px;
-}
-
-.overlay.from-top {
+.overlay.from-top, // TODO: Remove the .from-* classes
+atom-panel[location="modal"] {
   top: 0;
   border-top: none;
   border-top-left-radius: 0;
   border-top-right-radius: 0;
 }
 
+// TODO: Remove these!
 .overlay.from-bottom {
   bottom: 0;
   border-bottom: none;