From 2ea08d6fa50dc5496ddd29b3fff3b1c02bdd3191 Mon Sep 17 00:00:00 2001
From: Pfauenauge90 <44173739+Pfauenauge90@users.noreply.github.com>
Date: Sat, 4 May 2019 19:29:19 +0200
Subject: [PATCH] positioning

Former-commit-id: 90b626c2900e6bf4924dc290764c2860a5bade98
---
 voxygen/src/hud/character_window.rs |  19 +-
 voxygen/src/hud/esc_menu.rs         |  30 +--
 voxygen/src/hud/img_ids.rs          | 227 +++++++++--------
 voxygen/src/hud/map.rs              |  73 +++---
 voxygen/src/hud/mod.rs              |  72 ++++--
 voxygen/src/hud/settings_window.rs  | 371 +++++++++++++++++++++-------
 voxygen/src/hud/small_window.rs     |   1 +
 7 files changed, 516 insertions(+), 277 deletions(-)

diff --git a/voxygen/src/hud/character_window.rs b/voxygen/src/hud/character_window.rs
index 6b5100b4e1..d709b49793 100644
--- a/voxygen/src/hud/character_window.rs
+++ b/voxygen/src/hud/character_window.rs
@@ -85,18 +85,9 @@ impl<'a> Widget for CharacterWindow<'a> {
         // Frame
         Image::new(self.imgs.window_frame)
             .middle_of(id)
-            .set(state.charwindow_frame, ui);
-
-        // BG
-        Image::new(self.imgs.window_bg)
-            .w_h(348.0, 404.0)
-            .mid_top_with_margin_on(state.charwindow_frame, 48.0)
-            .set(state.charwindow_bg, ui);
-
-        // Overlay
-        Image::new(self.imgs.charwindow)
-            .middle_of(state.charwindow_bg)
-            .set(state.charwindow, ui);
+            .top_left_with_margins_on(ui.window, 200.0, 215.0)
+            .w_h(1648.0 / 4.0, 1952.0 / 4.0)
+            .set(state.charwindow_frame, ui);     
 
         // Icon
         //Image::new(self.imgs.charwindow_icon)
@@ -106,10 +97,10 @@ impl<'a> Widget for CharacterWindow<'a> {
 
         // X-Button
         if Button::image(self.imgs.close_button)
-            .w_h(244.0 * 0.22 / 4.0, 244.0 * 0.22 / 4.0)
+            .w_h(28.0, 28.0)
             .hover_image(self.imgs.close_button_hover)
             .press_image(self.imgs.close_button_press)
-            .top_right_with_margins_on(state.charwindow_frame, 4.0, 4.0)
+            .top_right_with_margins_on(state.charwindow_frame, 12.0, 4.0)
             .set(state.charwindow_close, ui)
             .was_clicked() {
                 return Some(Event::Close);
diff --git a/voxygen/src/hud/esc_menu.rs b/voxygen/src/hud/esc_menu.rs
index 3a847d5706..9656210011 100644
--- a/voxygen/src/hud/esc_menu.rs
+++ b/voxygen/src/hud/esc_menu.rs
@@ -91,11 +91,11 @@ impl<'a> Widget for EscMenu<'a> {
             .set(state.ids.fireplace, ui);
 
         // Settings
-        if Button::image(self.imgs.button_dark)
+        if Button::image(self.imgs.button)
             .mid_top_with_margin_on(state.ids.esc_bg, 115.0)
             .w_h(170.0, 50.0)
-            .hover_image(self.imgs.button_dark_hover)
-            .press_image(self.imgs.button_dark_press)
+            .hover_image(self.imgs.button_hover)
+            .press_image(self.imgs.button_press)
             .label("Settings")
             .label_y(conrod_core::position::Relative::Scalar(2.0))
             .label_color(TEXT_COLOR)
@@ -106,11 +106,11 @@ impl<'a> Widget for EscMenu<'a> {
             return Some(Event::OpenSettings);
         };
         // Controls
-        if Button::image(self.imgs.button_dark)
+        if Button::image(self.imgs.button)
             .mid_top_with_margin_on(state.ids.esc_bg, 175.0)
             .w_h(170.0, 50.0)
-            .hover_image(self.imgs.button_dark_hover)
-            .press_image(self.imgs.button_dark_press)
+            .hover_image(self.imgs.button_hover)
+            .press_image(self.imgs.button_press)
             .label("Controls")
             .label_y(conrod_core::position::Relative::Scalar(2.0))
             .label_color(TEXT_COLOR)
@@ -121,11 +121,11 @@ impl<'a> Widget for EscMenu<'a> {
             //self.menu_open = false;
         };
         // Servers
-        if Button::image(self.imgs.button_dark)
+        if Button::image(self.imgs.button)
             .mid_top_with_margin_on(state.ids.esc_bg, 235.0)
             .w_h(170.0, 50.0)
-            .hover_image(self.imgs.button_dark_hover)
-            .press_image(self.imgs.button_dark_press)
+            .hover_image(self.imgs.button_hover)
+            .press_image(self.imgs.button_press)
             .label("Servers")
             .label_y(conrod_core::position::Relative::Scalar(2.0))
             .label_color(TEXT_COLOR)
@@ -136,11 +136,11 @@ impl<'a> Widget for EscMenu<'a> {
             //self.menu_open = false;
         };
         // Logout
-        if Button::image(self.imgs.button_dark)
+        if Button::image(self.imgs.button)
             .mid_top_with_margin_on(state.ids.esc_bg, 295.0)
             .w_h(170.0, 50.0)
-            .hover_image(self.imgs.button_dark_hover)
-            .press_image(self.imgs.button_dark_press)
+            .hover_image(self.imgs.button_hover)
+            .press_image(self.imgs.button_press)
             .label("Logout")
             .label_y(conrod_core::position::Relative::Scalar(2.0))
             .label_color(TEXT_COLOR)
@@ -151,11 +151,11 @@ impl<'a> Widget for EscMenu<'a> {
             return Some(Event::Logout);
         };
         // Quit
-        if Button::image(self.imgs.button_dark)
+        if Button::image(self.imgs.button)
             .mid_top_with_margin_on(state.ids.esc_bg, 355.0)
             .w_h(170.0, 50.0)
-            .hover_image(self.imgs.button_dark_hover)
-            .press_image(self.imgs.button_dark_press)
+            .hover_image(self.imgs.button_hover)
+            .press_image(self.imgs.button_press)
             .label("Quit")
             .label_y(conrod_core::position::Relative::Scalar(2.0))
             .label_color(TEXT_COLOR)
diff --git a/voxygen/src/hud/img_ids.rs b/voxygen/src/hud/img_ids.rs
index 9847bd6688..14e7b3bad6 100644
--- a/voxygen/src/hud/img_ids.rs
+++ b/voxygen/src/hud/img_ids.rs
@@ -3,132 +3,153 @@ use crate::ui::{ImageGraphic, VoxelGraphic, BlankGraphic};
 image_ids! {
     pub struct Imgs {
         <VoxelGraphic>
-        // Bag
-        bag_contents: "/voxygen/element/frames/bag.vox",
-        inv_grid: "/voxygen/element/frames/inv_grid.vox",
-        inv_slot: "/voxygen/element/buttons/inv_slot.vox",
+            // Bag
+            bag_contents: "/voxygen/element/frames/bag.vox",
+            inv_grid: "/voxygen/element/frames/inv_grid.vox",
+            inv_slot: "/voxygen/element/buttons/inv_slot.vox",
 
-        // Buttons
-        settings: "/voxygen/element/buttons/settings.vox",
-        settings_hover: "/voxygen/element/buttons/settings_hover.vox",
-        settings_press: "/voxygen/element/buttons/settings_press.vox",
+            // Buttons
+            mmap_closed: "/voxygen/element/buttons/button_mmap_closed.vox",
+            mmap_closed_hover: "/voxygen/element/buttons/button_mmap_closed_hover.vox",
+            mmap_closed_press: "/voxygen/element/buttons/button_mmap_closed_press.vox",
+            mmap_open: "/voxygen/element/buttons/button_mmap_open.vox",
+            mmap_open_hover: "/voxygen/element/buttons/button_mmap_open_hover.vox",
+            mmap_open_press: "/voxygen/element/buttons/button_mmap_open_press.vox",
 
-        social_button: "/voxygen/element/buttons/social.vox",
-        social_hover: "/voxygen/element/buttons/social_hover.vox",
-        social_press: "/voxygen/element/buttons/social_press.vox",
+            settings: "/voxygen/element/buttons/settings.vox",
+            settings_hover: "/voxygen/element/buttons/settings_hover.vox",
+            settings_press: "/voxygen/element/buttons/settings_press.vox",
 
-        map_button: "/voxygen/element/buttons/map.vox",
-        map_hover: "/voxygen/element/buttons/map_hover.vox",
-        map_press: "/voxygen/element/buttons/map_press.vox",
+            social_button: "/voxygen/element/buttons/social.vox",
+            social_hover: "/voxygen/element/buttons/social_hover.vox",
+            social_press: "/voxygen/element/buttons/social_press.vox",
 
-        spellbook_button: "/voxygen/element/buttons/spellbook.vox",
-        spellbook_hover: "/voxygen/element/buttons/spellbook_hover.vox",
-        spellbook_press: "/voxygen/element/buttons/spellbook_press.vox",
+            map_button: "/voxygen/element/buttons/map.vox",
+            map_hover: "/voxygen/element/buttons/map_hover.vox",
+            map_press: "/voxygen/element/buttons/map_press.vox",
 
-        character_button: "/voxygen/element/buttons/character.vox",
-        character_hover: "/voxygen/element/buttons/character_hover.vox",
-        character_press: "/voxygen/element/buttons/character_press.vox",
+            spellbook_button: "/voxygen/element/buttons/spellbook.vox",
+            spellbook_hover: "/voxygen/element/buttons/spellbook_hover.vox",
+            spellbook_press: "/voxygen/element/buttons/spellbook_press.vox",
 
-        qlog_button: "/voxygen/element/buttons/qlog.vox",
-        qlog_hover: "/voxygen/element/buttons/qlog_hover.vox",
-        qlog_press: "/voxygen/element/buttons/qlog_press.vox",
+            character_button: "/voxygen/element/buttons/character.vox",
+            character_hover: "/voxygen/element/buttons/character_hover.vox",
+            character_press: "/voxygen/element/buttons/character_press.vox",
 
-        close_button: "/voxygen/element/buttons/x.vox",
-        close_button_hover: "/voxygen/element/buttons/x_hover.vox",
-        close_button_press: "/voxygen/element/buttons/x_press.vox",
+            qlog_button: "/voxygen/element/buttons/qlog.vox",
+            qlog_hover: "/voxygen/element/buttons/qlog_hover.vox",
+            qlog_press: "/voxygen/element/buttons/qlog_press.vox",
+            
 
-        //  Esc menu
-        fireplace: "/voxygen/element/misc_bg/fireplace.vox",
-        button_dark: "/voxygen/element/buttons/button_dark.vox",
+            // Close button
+            close_button: "/voxygen/element/buttons/x.vox",
+            close_button_hover: "/voxygen/element/buttons/x_hover.vox",
+            close_button_press: "/voxygen/element/buttons/x_press.vox",
 
-        // Minimap
-        mmap_frame: "/voxygen/element/frames/mmap.vox",
-        window_frame: "/voxygen/element/frames/window2.vox",
-        map_frame_l: "/voxygen/element/frames/map_l.vox",
-        map_frame_r: "/voxygen/element/frames/map_r.vox",
+            // Esc-Menu            
+            fireplace: "/voxygen/element/misc_bg/fireplace.vox",
+            button: "/voxygen/element/buttons/button.vox",
+            button_hover: "/voxygen/element/buttons/button_hover.vox",
+            button_press: "/voxygen/element/buttons/button_press.vox",
 
-        <ImageGraphic>
-        // Bag
-        bag: "/voxygen/element/buttons/bag/closed.png",
-        bag_hover: "/voxygen/element/buttons/bag/closed_hover.png",
-        bag_press: "/voxygen/element/buttons/bag/closed_press.png",
-        bag_open: "/voxygen/element/buttons/bag/open.png",
-        bag_open_hover: "/voxygen/element/buttons/bag/open_hover.png",
-        bag_open_press: "/voxygen/element/buttons/bag/open_press.png",
+            // MiniMap
+            mmap_frame: "/voxygen/element/frames/mmap.vox",
+            mmap_frame_closed: "/voxygen/element/frames/mmap_closed.vox",
+            
 
-        // Buttons
-        mmap_button: "/voxygen/element/buttons/border.png",
-        mmap_button_hover: "/voxygen/element/buttons/border_mo.png",
-        mmap_button_press: "/voxygen/element/buttons/border_press.png",
-        mmap_button_open: "/voxygen/element/buttons/border_pressed.png",
+            // Missing: Buff Frame Animation .gif ?! we could do animation in ui.maintain, or in shader?
+            window_frame: "/voxygen/element/frames/window2.vox",            
 
-        // Esc-Menu
-        esc_bg: "/voxygen/element/frames/menu.png",
-        button_dark_hover: "/voxygen/element/buttons/button_dark_hover.png",
-        button_dark_press: "/voxygen/element/buttons/button_dark_press.png",
+            // Settings Window
+            settings_frame_r: "/voxygen/element/frames/settings_r.vox",
+            settings_frame_l: "/voxygen/element/frames/settings_l.vox",
+            settings_button: "/voxygen/element/buttons/settings_button.vox",
+            settings_button_pressed: "/voxygen/element/buttons/settings_button_pressed.vox",
+            settings_button_hover: "/voxygen/element/buttons/settings_button_hover.vox",
+            settings_button_press: "/voxygen/element/buttons/settings_button_press.vox",            
+            check: "/voxygen/element/buttons/check/no.vox",
+            check_mo: "/voxygen/element/buttons/check/no_mo.vox",
+            check_press: "/voxygen/element/buttons/check/press.vox",
+            check_checked: "/voxygen/element/buttons/check/yes.vox",
+            check_checked_mo: "/voxygen/element/buttons/check/yes_mo.vox",
+            slider: "/voxygen/element/slider/track.vox",
+            slider_indicator: "/voxygen/element/slider/indicator.vox",            
+           
 
-        // MiniMap
-        mmap_frame_bg: "/voxygen/element/misc_bg/mmap_bg.png",
+            // Map Window            
+            map_frame_l: "/voxygen/element/frames/map_l.vox",
+            map_frame_r: "/voxygen/element/frames/map_r.vox",
+            map_frame_bl: "/voxygen/element/frames/map_bl.vox",
+            map_frame_br: "/voxygen/element/frames/map_br.vox",           
 
-        // Skillbar Module
-        sb_grid: "/voxygen/element/skill_bar/sbar_grid.png",
-        sb_grid_bg: "/voxygen/element/skill_bar/sbar_grid_bg.png",
-        l_click: "/voxygen/element/skill_bar/l.png",
-        r_click: "/voxygen/element/skill_bar/r.png",
-        mana_bar: "/voxygen/element/skill_bar/mana_bar.png",
-        health_bar: "/voxygen/element/skill_bar/health_bar.png",
-        xp_bar: "/voxygen/element/skill_bar/xp_bar.png",
+            
+            // Chat-Arrows
+            chat_arrow: "/voxygen/element/buttons/arrow_down.vox",
+            chat_arrow_mo: "/voxygen/element/buttons/arrow_down_hover.vox",
+            chat_arrow_press: "/voxygen/element/buttons/arrow_down_press.vox",
 
-        // Missing: Buff Frame Animation (.gif ?!) (we could do animation in ui.maintain(), or in shader?)
-        window_frame_2: "/voxygen/element/frames/window_2.png",
+            <ImageGraphic>
 
-        // Settings Window
-        settings_bg: "/voxygen/element/frames/settings.png",
-        settings_icon: "/voxygen/element/icons/settings.png",
-        settings_button_mo: "/voxygen/element/buttons/blue_mo.png",
-        check: "/voxygen/element/buttons/check/no.png",
-        check_mo: "/voxygen/element/buttons/check/no_mo.png",
-        check_press: "/voxygen/element/buttons/check/press.png",
-        check_checked: "/voxygen/element/buttons/check/yes.png",
-        check_checked_mo: "/voxygen/element/buttons/check/yes_mo.png",
-        slider: "/voxygen/element/slider/track.png",
-        slider_indicator: "/voxygen/element/slider/indicator.png",
-        //button_blank:  ui.new_graphic(ui::Graphic::Blank),
-        button_blue_mo: "/voxygen/element/buttons/blue_mo.png",
-        button_blue_press: "/voxygen/element/buttons/blue_press.png",
+             // Spell Book Window
+            spellbook_bg: "/voxygen/element/misc_bg/small_bg.png",
+            spellbook_icon: "/voxygen/element/icons/spellbook.png",
 
-        // Window BG
-        window_bg: "/voxygen/element/misc_bg/window_bg.png",
+            // Bag
+            bag: "/voxygen/element/buttons/bag/closed.png",
+            bag_hover: "/voxygen/element/buttons/bag/closed_hover.png",
+            bag_press: "/voxygen/element/buttons/bag/closed_press.png",
+            bag_open: "/voxygen/element/buttons/bag/open.png",
+            bag_open_hover: "/voxygen/element/buttons/bag/open_hover.png",
+            bag_open_press: "/voxygen/element/buttons/bag/open_press.png",
 
-        // Social Window
-        social_bg: "/voxygen/element/misc_bg/small_bg.png",
-        social_icon: "/voxygen/element/icons/social.png",
+            map_bg: "/voxygen/element/misc_bg/small_bg.png",
+            map_icon: "/voxygen/element/icons/map.png",
 
-        // Map Window
-        map_bg: "/voxygen/element/misc_bg/small_bg.png",
-        map_icon: "/voxygen/element/icons/map.png",
+            grid_button: "/voxygen/element/buttons/border.png",
+            grid_button_hover: "/voxygen/element/buttons/border_mo.png",
+            grid_button_press: "/voxygen/element/buttons/border_press.png",
+            grid_button_open: "/voxygen/element/buttons/border_pressed.png",
 
-        // Spell Book Window
-        spellbook_bg: "/voxygen/element/misc_bg/small_bg.png",
-        spellbook_icon: "/voxygen/element/icons/spellbook.png",
+            // Skillbar Module
+            sb_grid: "/voxygen/element/skill_bar/sbar_grid.png",
+            sb_grid_bg: "/voxygen/element/skill_bar/sbar_grid_bg.png",
+            l_click: "/voxygen/element/skill_bar/l.png",
+            r_click: "/voxygen/element/skill_bar/r.png",
+            mana_bar: "/voxygen/element/skill_bar/mana_bar.png",
+            health_bar: "/voxygen/element/skill_bar/health_bar.png",
+            xp_bar: "/voxygen/element/skill_bar/xp_bar.png",
 
-        // Char Window
-        charwindow: "/voxygen/element/misc_bg/charwindow.png",
-        charwindow_icon: "/voxygen/element/icons/charwindow.png",
-        charwindow_tab_bg: "/voxygen/element/frames/tab.png",
-        charwindow_tab: "/voxygen/element/buttons/tab.png",
-        charwindow_expbar: "/voxygen/element/misc_bg/small_bg.png",
-        progress_frame: "/voxygen/element/frames/progress_bar.png",
-        progress: "/voxygen/element/misc_bg/progress.png",
+            esc_bg: "/voxygen/element/frames/menu.png",
 
-        // Quest-Log Window
-        questlog_bg: "/voxygen/element/misc_bg/small_bg.png",
-        questlog_icon: "/voxygen/element/icons/questlog.png",
+            window_frame_2: "/voxygen/element/frames/window_2.png",
+
+            settings_bg: "/voxygen/element/frames/settings.png",
+            settings_icon: "/voxygen/element/icons/settings.png",
+            settings_button_mo: "/voxygen/element/buttons/blue_mo.png",
+
+            // Char Window
+            charwindow: "/voxygen/element/misc_bg/charwindow.png",
+            charwindow_icon: "/voxygen/element/icons/charwindow.png",
+            charwindow_tab_bg: "/voxygen/element/frames/tab.png",
+            charwindow_tab: "/voxygen/element/buttons/tab.png",
+            charwindow_expbar: "/voxygen/element/misc_bg/small_bg.png",
+            progress_frame: "/voxygen/element/frames/progress_bar.png",
+            progress: "/voxygen/element/misc_bg/progress.png",
+
+            // Quest-Log Window
+            questlog_bg: "/voxygen/element/misc_bg/small_bg.png",
+            questlog_icon: "/voxygen/element/icons/questlog.png",
+
+            button_blue_mo: "/voxygen/element/buttons/blue_mo.png",
+            button_blue_press: "/voxygen/element/buttons/blue_press.png",
+
+            // Window BG
+            window_bg: "/voxygen/element/misc_bg/window_bg.png",
+
+            // Social Window
+            social_bg: "/voxygen/element/misc_bg/small_bg.png",
+            social_icon: "/voxygen/element/icons/social.png",
 
-        // Chat-Arrows
-        chat_arrow: "/voxygen/element/buttons/arrow/chat_arrow.png",
-        chat_arrow_mo: "/voxygen/element/buttons/arrow/chat_arrow_mo.png",
-        chat_arrow_press: "/voxygen/element/buttons/arrow/chat_arrow_press.png",
 
         <BlankGraphic>
         blank: (),
diff --git a/voxygen/src/hud/map.rs b/voxygen/src/hud/map.rs
index ec2faf7fc9..dd3b3eacf3 100644
--- a/voxygen/src/hud/map.rs
+++ b/voxygen/src/hud/map.rs
@@ -13,13 +13,15 @@ use super::{
 
 widget_ids! {
     struct Ids {
-        map_bg,
-        map_close,
         map_frame,
+        map_bg,
+        map_icon,
+        map_close,
+        map_title,
         map_frame_l,
         map_frame_r,
-        map_icon,
-        map_title,
+        map_frame_bl,
+        map_frame_br,
     }
 }
 
@@ -77,21 +79,35 @@ impl<'a> Widget for Map<'a> {
         } = args;
 
         // BG
-        Image::new(self.imgs.map_bg)
-            .w_h(824.0, 488.0)
-            .middle_of(ui.window)
-            .set(state.ids.map_bg, ui);
+            Rectangle::fill_with([824.0, 976.0], color::TRANSPARENT)
+                .mid_top_with_margin_on(ui.window, 15.0)
+                .scroll_kids()
+                .scroll_kids_vertically()
+                .set(state.ids.map_bg, ui);
+            // Frame
+            Image::new(self.imgs.map_frame_l)
+                .top_left_with_margins_on(state.ids.map_bg, 0.0, 0.0)
+                .w_h(412.0, 488.0)
+                .set(state.ids.map_frame_l, ui);
+            Image::new(self.imgs.map_frame_r)
+                .right_from(state.ids.map_frame_l, 0.0)
+                .w_h(412.0, 488.0)
+                .set(state.ids.map_frame_r, ui);
+            Image::new(self.imgs.map_frame_br)
+                .down_from(state.ids.map_frame_r, 0.0)
+                .w_h(412.0, 488.0)
+                .set(state.ids.map_frame_br, ui);
+            Image::new(self.imgs.map_frame_bl)
+                .down_from(state.ids.map_frame_l, 0.0)
+                .w_h(412.0, 488.0)
+                .set(state.ids.map_frame_bl, ui);
 
-        // Frame
-        Image::new(self.imgs.map_frame_l)
-            .top_left_with_margins_on(state.ids.map_bg, 0.0, 0.0)
-            .w_h(412.0, 488.0)
-            .set(state.ids.map_frame_l, ui);
+            // Icon
+            Image::new(self.imgs.map_icon)
+                .w_h(224.0 / 3.0, 224.0 / 3.0)
+                .top_left_with_margins_on(state.ids.map_frame, -10.0, -10.0)
+                .set(state.ids.map_icon, ui);
 
-        Image::new(self.imgs.map_frame_r)
-            .top_right_with_margins_on(state.ids.map_bg, 0.0, 0.0)
-            .w_h(1648.0 / 4.0, 1952.0 / 4.0)
-            .set(state.ids.map_frame_r, ui);
 
         // Icon
         Image::new(self.imgs.map_icon)
@@ -100,23 +116,16 @@ impl<'a> Widget for Map<'a> {
             .set(state.ids.map_icon, ui);
 
         // X-Button
-        if Button::image(self.imgs.close_button)
-            .w_h(4.0*2.0, 4.0*2.0)
-            .hover_image(self.imgs.close_button_hover)
-            .press_image(self.imgs.close_button_press)
-            .top_right_with_margins_on(state.ids.map_frame_r, 1.0, 1.0)
-            .set(state.ids.map_close, ui)
-            .was_clicked()
+            if Button::image(self.imgs.close_button)
+                .w_h(28.0, 28.0)
+                .hover_image(self.imgs.close_button_hover)
+                .press_image(self.imgs.close_button_press)
+                .top_right_with_margins_on(state.ids.map_frame_r, 0.0, 0.0)
+                .set(state.ids.map_close, ui)
+                .was_clicked()
         {
             return Some(Event::Close);
-        }
-
-        // Title
-        Text::new("Map")
-            .mid_top_with_margin_on(state.ids.map_bg, -7.0)
-            .font_size(50)
-            .color(TEXT_COLOR)
-            .set(state.ids.map_title, ui);
+        }        
 
         None
     }
diff --git a/voxygen/src/hud/mod.rs b/voxygen/src/hud/mod.rs
index a56041449a..197c43b27a 100644
--- a/voxygen/src/hud/mod.rs
+++ b/voxygen/src/hud/mod.rs
@@ -62,6 +62,9 @@ widget_ids! {
         mmap_frame,
         mmap_frame_bg,
         mmap_location,
+        mmap_button,
+
+    
 
         // Window Frames
         window_frame_0,
@@ -118,6 +121,7 @@ pub struct Hud {
     mmap_open: bool,
     show_map: bool,
     show_ui: bool,
+    mmap_open: bool,
     inventory_space: u32,
     inventorytest_button: bool,
 }
@@ -140,13 +144,14 @@ impl Hud {
             fonts,
             ids,
             new_messages: VecDeque::new(),
-            show_help: true,
-            show_debug: false,
+            show_help: false,
+            show_debug: true,
             show_bag: false,
             esc_menu_open: false,
             open_windows: Windows::None,
             show_map: false,
             show_ui: true,
+            mmap_open: false,
             inventorytest_button: false,
             inventory_space: 0,
         }
@@ -168,7 +173,7 @@ impl Hud {
             Text::new(version)
                 .top_left_with_margins_on(ui_widgets.window, 5.0, 5.0)
                 .font_size(14)
-                .font_id(self.font_opensans)
+                .font_id(self.fonts.opensans)
                 .color(TEXT_COLOR)
                 .set(self.ids.version, ui_widgets);
             Text::new(&format!("FPS: {:.1}", tps))
@@ -178,7 +183,6 @@ impl Hud {
                 .font_size(14)
                 .set(self.ids.fps_counter, ui_widgets);
         }
-
         // Add Bag-Space Button
         if self.inventorytest_button {
             if Button::image(self.imgs.grid_button)
@@ -193,15 +197,7 @@ impl Hud {
             {
                 self.inventory_space += 1;
             };
-        }
-
-        // Alpha Version
-        Text::new(version)
-            .top_left_with_margins_on(ui_widgets.window, 5.0, 5.0)
-            .font_size(14)
-            .color(TEXT_COLOR)
-            .set(self.ids.v_logo, ui_widgets);
-
+        }       
         // Help Text
         if self.show_help {
             Image::new(self.imgs.window_frame_2)
@@ -240,14 +236,48 @@ impl Hud {
         }
 
         // Minimap
-        Image::new(self.imgs.mmap_frame_bg)
-            .w_h(1750.0 / 8.0, 1650.0 / 8.0)
-            .top_right_with_margins_on(ui_widgets.window, 5.0, 5.0)
-            .set(self.ids.mmap_frame_bg, ui_widgets);
-        Image::new(self.imgs.mmap_frame)
-            .w_h(1750.0 / 8.0, 1650.0 / 8.0)
-            .top_right_with_margins_on(ui_widgets.window, 5.0, 5.0)
-            .set(self.ids.mmap_frame, ui_widgets);
+
+        if self.mmap_open {
+            Image::new(self.imgs.mmap_frame)
+                .w_h(100.0 * 2.0, 100.0 * 2.0)
+                .top_right_with_margins_on(ui_widgets.window, 5.0, 5.0)
+                .set(self.ids.mmap_frame, ui_widgets);
+
+            Rectangle::fill_with([92.0 * 2.0, 82.0 * 2.0], color::TRANSPARENT)
+                .mid_top_with_margin_on(self.ids.mmap_frame, 13.0 * 2.0 + 2.0)
+                .set(self.ids.mmap_frame_bg, ui_widgets);
+        } else {
+            Image::new(self.imgs.mmap_frame_closed)
+                .w_h(100.0 * 2.0, 11.0 * 2.0)
+                .top_right_with_margins_on(ui_widgets.window, 5.0, 5.0)
+                .set(self.ids.mmap_frame, ui_widgets);
+        };
+
+        if Button::image(if self.mmap_open {
+            self.imgs.mmap_open
+        } else {
+            self.imgs.mmap_closed
+        })
+        .w_h(100.0 * 0.2, 100.0 * 0.2)
+        .hover_image(if self.mmap_open {
+            self.imgs.mmap_open_hover
+        } else {
+            self.imgs.mmap_closed_hover
+        })
+        .press_image(if self.mmap_open {
+            self.imgs.mmap_open_press
+        } else {
+            self.imgs.mmap_closed_press
+        })
+        .top_right_with_margins_on(self.ids.mmap_frame, 0.0, 0.0)
+        .set(self.ids.mmap_button, ui_widgets)
+        .was_clicked()
+        {
+            self.mmap_open = !self.mmap_open;
+        };
+
+        // Title
+        // Make it display the actual location
         Text::new("Uncanny Valley")
             .mid_top_with_margin_on(self.ids.mmap_frame, 3.0)
             .font_size(14)
diff --git a/voxygen/src/hud/settings_window.rs b/voxygen/src/hud/settings_window.rs
index 7859b97a20..0619356c7b 100644
--- a/voxygen/src/hud/settings_window.rs
+++ b/voxygen/src/hud/settings_window.rs
@@ -1,7 +1,7 @@
 use conrod_core::{
     builder_methods, color,
     text::font,
-    widget::{self, Button, Image, Rectangle, Text},
+    widget::{self, Button, Image, Rectangle, Scrollbar, Text},
     widget_ids, Color, Colorable, Labelable, Positionable, Sizeable, Widget, WidgetCommon,
 };
 use super::{
@@ -13,20 +13,29 @@ use crate::ui::ToggleButton;
 
 widget_ids! {
     struct Ids {
+        
+        settings_content,
+        settings_icon,
+        settings_button_mo,
+        settings_close,
+        settings_title,
+        settings_r,
+        settings_l,
+        settings_scrollbar,
+        controls_text,
+        controls_controls,        
         button_help,
-        controls,
-        debug_button,
-        debug_button_label,
+        button_help2,
+        show_help_label,        
         gameplay,
+        controls,
+        rectangle,           
+        debug_button,
+        debug_button_label,        
         interface,
         inventorytest_button,
-        inventorytest_button_label,
-        rectangle,
-        settings_bg,
-        settings_close,
-        settings_icon,
-        settings_title,
-        show_help_label,
+        inventorytest_button_label,        
+        settings_bg,        
         sound,
         test,
         video,
@@ -103,53 +112,69 @@ impl<'a> Widget for SettingsWindow<'a> {
             ..
         } = args;
 
-        // BG
-        Image::new(self.imgs.settings_bg)
-            .middle_of(ui.window)
-            .w_h(1648.0 / 2.5, 1952.0 / 2.5)
-            .set(state.ids.settings_bg, ui);
-
-        // X-Button
-        if Button::image(self.imgs.close_button)
-            .w_h(244.0 * 0.22 / 2.5, 244.0 * 0.22 / 2.5)
-            .hover_image(self.imgs.close_button_hover)
-            .press_image(self.imgs.close_button_press)
-            .top_right_with_margins_on(state.ids.settings_bg, 4.0, 4.0)
-            .set(state.ids.settings_close, ui)
-            .was_clicked()
+        // Frame Alignment
+            Rectangle::fill_with([824.0, 488.0], color::TRANSPARENT)
+                .middle_of(ui.window)
+                .set(state.ids.settings_bg, ui);
+            // Frame
+            Image::new(self.imgs.settings_frame_l)
+                .top_left_with_margins_on(state.ids.settings_bg, 0.0, 0.0)
+                .w_h(412.0, 488.0)
+                .set(state.ids.settings_l, ui);
+            Image::new(self.imgs.settings_frame_r)
+                .right_from(state.ids.settings_l, 0.0)
+                .parent(state.ids.settings_bg)
+                .w_h(412.0, 488.0)
+                .set(state.ids.settings_r, ui);
+            // Content Alignment
+            Rectangle::fill_with([198.0 * 4.0, 97.0 * 4.0], color::TRANSPARENT)
+                .top_right_with_margins_on(state.ids.settings_r, 21.0 * 4.0, 4.0 * 4.0)
+                .scroll_kids()
+                .scroll_kids_vertically()
+                .set(state.ids.settings_content, ui);
+            Scrollbar::y_axis(state.ids.settings_content)
+                .thickness(5.0)
+                .rgba(0.33, 0.33, 0.33, 1.0)
+                .set(state.ids.settings_scrollbar, ui);
+            // X-Button
+            if Button::image(self.imgs.close_button)
+                .w_h(28.0, 28.0)
+                .hover_image(self.imgs.close_button_hover)
+                .press_image(self.imgs.close_button_press)
+                .top_right_with_margins_on(state.ids.settings_r, 0.0, 0.0)
+                .set(state.ids.settings_close, ui)
+                .was_clicked()
         {
             return Some(Event::Close);
         }
 
         // Title
-        Text::new("Settings")
-            .mid_top_with_margin_on(state.ids.settings_bg, 10.0)
-            .font_size(30)
-            .color(TEXT_COLOR)
-            .set(state.ids.settings_title, ui);
-
-        // Icon
-        Image::new(self.imgs.settings_icon)
-            .w_h(224.0 / 3.0, 224.0 / 3.0)
-            .top_left_with_margins_on(state.ids.settings_bg, -10.0, -10.0)
-            .set(state.ids.settings_icon, ui);
-
-        // TODO: Find out if we can remove this
-        // Alignment Rectangle
-        Rectangle::fill_with([1008.0 / 2.5, 1616.0 / 2.5], color::TRANSPARENT)
-            .top_left_with_margins_on(state.ids.settings_bg, 77.0, 205.0)
-            .set(state.ids.rectangle, ui);
+            Text::new("Settings")
+                .mid_top_with_margin_on(state.ids.settings_bg, 5.0)
+                .font_size(14)
+                .color(TEXT_COLOR)
+            .set(state.ids.settings_title, ui);      
+        
+        
 
         // Interface
-        if Button::image(if let SettingsTab::Interface = state.settings_tab {
-            self.imgs.button_blue_mo
-        } else {
-            self.imgs.blank
-        })
-            .w_h(304.0 / 2.5, 80.0 / 2.5)
-            .hover_image(self.imgs.button_blue_mo)
-            .press_image(self.imgs.button_blue_press)
-            .top_left_with_margins_on(state.ids.settings_bg, 78.0, 50.0)
+       if Button::image(if let SettingsTab::Interface = state.settings_tab {
+                self.imgs.settings_button_pressed
+            } else {
+                self.imgs.settings_button
+            })
+            .w_h(31.0 * 4.0, 12.0 * 4.0)
+            .hover_image(if let SettingsTab::Interface = state.settings_tab {
+                self.imgs.settings_button_pressed
+            } else {
+                self.imgs.settings_button_hover
+            })
+            .press_image(if let SettingsTab::Interface = state.settings_tab {
+                self.imgs.settings_button_pressed
+            } else {
+                self.imgs.settings_button_press
+            })
+            .top_left_with_margins_on(state.ids.settings_l, 8.0 * 4.0, 2.0 * 4.0)
             .label("Interface")
             .label_font_size(14)
             .label_color(TEXT_COLOR)
@@ -164,7 +189,7 @@ impl<'a> Widget for SettingsWindow<'a> {
             let show_debug =
                 ToggleButton::new(state.show_help, self.imgs.check, self.imgs.check_checked)
                     .w_h(288.0 / 24.0, 288.0 / 24.0)
-                    .top_left_with_margins_on(state.ids.rectangle, 15.0, 15.0)
+                    .top_left_with_margins_on(state.ids.settings_content, 5.0, 5.0)
                     .hover_images(self.imgs.check_checked_mo, self.imgs.check_mo)
                     .press_images(self.imgs.check_press, self.imgs.check_press)
                     .set(state.ids.button_help, ui);
@@ -185,7 +210,7 @@ impl<'a> Widget for SettingsWindow<'a> {
                 self.imgs.check_checked,
             )
                 .w_h(288.0 / 24.0, 288.0 / 24.0)
-                .top_left_with_margins_on(state.ids.rectangle, 40.0, 15.0)
+                .down_from(state.ids.button_help, 7.0)
                 .hover_images(self.imgs.check_checked_mo, self.imgs.check_mo)
                 .press_images(self.imgs.check_press, self.imgs.check_press)
                 .set(state.ids.inventorytest_button, ui);
@@ -194,7 +219,7 @@ impl<'a> Widget for SettingsWindow<'a> {
 
             Text::new("Show Inventory Test Button")
                 .right_from(state.ids.inventorytest_button, 10.0)
-                .font_size(12)
+                .font_size(14)
                 .font_id(self.fonts.opensans)
                 .graphics_for(state.ids.inventorytest_button)
                 .color(TEXT_COLOR)
@@ -206,7 +231,7 @@ impl<'a> Widget for SettingsWindow<'a> {
                 self.imgs.check_checked
             )
                 .w_h(288.0 / 24.0, 288.0 / 24.0)
-                .top_left_with_margins_on(state.ids.rectangle, 65.0, 15.0)
+                .down_from(state.ids.inventorytest_button, 7.0)
                 .hover_images(self.imgs.check_checked_mo, self.imgs.check_mo)
                 .press_images(self.imgs.check_press, self.imgs.check_press)
                 .set(state.ids.debug_button, ui);
@@ -215,7 +240,7 @@ impl<'a> Widget for SettingsWindow<'a> {
 
             Text::new("Show Debug Window")
                 .right_from(state.ids.debug_button, 10.0)
-                .font_size(12)
+                .font_size(14)
                 .font_id(self.fonts.opensans)
                 .graphics_for(state.ids.debug_button)
                 .color(TEXT_COLOR)
@@ -224,16 +249,23 @@ impl<'a> Widget for SettingsWindow<'a> {
         }
 
         // 2 Gameplay////////////////
-        if Button::image(if let SettingsTab::Gameplay = state.settings_tab {
-                self.imgs.button_blue_mo
+       if Button::image(if let SettingsTab::Gameplay = state.settings_tab {
+                self.imgs.settings_button_pressed
             } else {
-                self.imgs.blank
-            }
-        )
-            .w_h(304.0 / 2.5, 80.0 / 2.5)
-            .hover_image(self.imgs.button_blue_mo)
-            .press_image(self.imgs.button_blue_press)
-            .down_from(state.ids.interface, 1.0)
+                self.imgs.settings_button
+            })
+            .w_h(31.0 * 4.0, 12.0 * 4.0)
+            .hover_image(if let SettingsTab::Gameplay = state.settings_tab {
+                self.imgs.settings_button_pressed
+            } else {
+                self.imgs.settings_button_hover
+            })
+            .press_image(if let SettingsTab::Gameplay = state.settings_tab {
+                self.imgs.settings_button_pressed
+            } else {
+                self.imgs.settings_button_press
+            })
+            .right_from(state.ids.interface, 0.0)
             .label("Gameplay")
             .label_font_size(14)
             .label_color(TEXT_COLOR)
@@ -245,15 +277,22 @@ impl<'a> Widget for SettingsWindow<'a> {
 
         // 3 Controls/////////////////////
         if Button::image(if let SettingsTab::Controls = state.settings_tab {
-                self.imgs.button_blue_mo
+                self.imgs.settings_button_pressed
             } else {
-                self.imgs.blank
-            }
-        )
-            .w_h(304.0 / 2.5, 80.0 / 2.5)
-            .hover_image(self.imgs.button_blue_mo)
-            .press_image(self.imgs.button_blue_press)
-            .down_from(state.ids.gameplay, 1.0)
+                self.imgs.settings_button
+            })
+            .w_h(31.0 * 4.0, 12.0 * 4.0)
+            .hover_image(if let SettingsTab::Controls = state.settings_tab {
+                self.imgs.settings_button_pressed
+            } else {
+                self.imgs.settings_button_hover
+            })
+            .press_image(if let SettingsTab::Controls = state.settings_tab {
+                self.imgs.settings_button_pressed
+            } else {
+                self.imgs.settings_button_press
+            })
+            .right_from(state.ids.gameplay, 0.0)
             .label("Controls")
             .label_font_size(14)
             .label_color(TEXT_COLOR)
@@ -262,19 +301,159 @@ impl<'a> Widget for SettingsWindow<'a> {
         {
             state.update(|s| s.settings_tab = SettingsTab::Controls);
         }
-
-        // 4 Video////////////////////////////////
-        if Button::image(if let SettingsTab::Video = state.settings_tab {
-                self.imgs.button_blue_mo
-            } else {
-                self.imgs.blank
+        if let SettingsTab::Controls = state.settings_tab {
+                Text::new(
+                    "Free Cursor\n\
+            Toggle Help Window\n\
+            Toggle Interface\n\
+            Toggle FPS and Debug Info\n\
+            \n\
+            \n\
+            Move Forward\n\
+            Move Left\n\
+            Move Right\n\
+            Move Backwards\n\
+            \n\
+            Jump\n\
+            \n\
+            Dodge\n\
+            \n\
+            Auto Walk\n\
+            \n\
+            Sheathe/Draw Weapons\n\
+            \n\
+            Put on/Remove Helmet\n\
+            \n\
+            \n\
+            Basic Attack\n\
+            Secondary Attack/Block/Aim\n\
+            \n\
+            \n\
+            Skillbar Slot 1\n\
+            Skillbar Slot 2\n\
+            Skillbar Slot 3\n\
+            Skillbar Slot 4\n\
+            Skillbar Slot 5\n\
+            Skillbar Slot 6\n\
+            Skillbar Slot 7\n\
+            Skillbar Slot 8\n\
+            Skillbar Slot 9\n\
+            Skillbar Slot 10\n\
+            \n\
+            \n\
+            Pause Menu\n\
+            Settings\n\
+            Social\n\
+            Map\n\
+            Spellbook\n\
+            Character\n\
+            Questlog\n\
+            Bag\n\
+            \n\
+            \n\
+            \n\
+            Send Chat Message\n\
+            Scroll Chat\n\
+            \n\
+            \n\
+            Chat commands:  \n\
+            \n\
+            /alias [Name] - Change your Chat Name   \n\
+            /tp [Name] - Teleports you to another player
+            ",
+                )
+                .color(TEXT_COLOR)
+                .top_left_with_margins_on(state.ids.settings_content, 5.0, 5.0)
+                .font_id(self.fonts.opensans)
+                .font_size(18)
+                .set(state.ids.controls_text, ui);
+                // TODO: Replace with buttons that show the actual keybind and allow the user to change it.
+                Text::new(
+                    "TAB\n\
+                     F1\n\
+                     F2\n\
+                     F3\n\
+                     \n\
+                     \n\
+                     W\n\
+                     A\n\
+                     S\n\
+                     D\n\
+                     \n\
+                     SPACE\n\
+                     \n\
+                     ??\n\
+                     \n\
+                     ??\n\
+                     \n\
+                     ??\n\
+                     \n\
+                     ??\n\
+                     \n\
+                     \n\
+                     L-Click\n\
+                     R-Click\n\
+                     \n\
+                     \n\
+                     1\n\
+                     2\n\
+                     3\n\
+                     4\n\
+                     5\n\
+                     6\n\
+                     7\n\
+                     8\n\
+                     9\n\
+                     0\n\
+                     \n\
+                     \n\
+                     ESC\n\
+                     N\n\
+                     O\n\
+                     M\n\
+                     P\n\
+                     C\n\
+                     L\n\
+                     B\n\
+                     \n\
+                     \n\
+                     \n\
+                     ENTER\n\
+                     Mousewheel\n\
+                     \n\
+                     \n\
+                     \n\
+                     \n\
+                     \n\
+                     \n\
+                     ",
+                )
+                .color(TEXT_COLOR)
+                .right_from(state.ids.controls_text, 0.0)
+                .font_id(self.fonts.opensans)
+                .font_size(18)
+                .set(state.ids.controls_controls, ui);
             }
-        )
-            .w_h(304.0 / 2.5, 80.0 / 2.5)
-            .hover_image(self.imgs.button_blue_mo)
-            .press_image(self.imgs.button_blue_press)
-            .down_from(state.ids.controls, 1.0)
+        // 4 Video////////////////////////////////
+         if Button::image(if let SettingsTab::Video = state.settings_tab {
+                self.imgs.settings_button_pressed
+            } else {
+                self.imgs.settings_button
+            })
+            .w_h(31.0 * 4.0, 12.0 * 4.0)
+            .hover_image(if let SettingsTab::Video = state.settings_tab {
+                self.imgs.settings_button_pressed
+            } else {
+                self.imgs.settings_button_hover
+            })
+            .press_image(if let SettingsTab::Video = state.settings_tab {
+                self.imgs.settings_button_pressed
+            } else {
+                self.imgs.settings_button_press
+            })
+            .right_from(state.ids.controls, 0.0)
             .label("Video")
+            .parent(state.ids.settings_r)
             .label_font_size(14)
             .label_color(TEXT_COLOR)
             .set(state.ids.video, ui)
@@ -285,15 +464,23 @@ impl<'a> Widget for SettingsWindow<'a> {
 
         // 5 Sound///////////////////////////////
         if Button::image(if let SettingsTab::Sound = state.settings_tab {
-                self.imgs.button_blue_mo
+                self.imgs.settings_button_pressed
             } else {
-                self.imgs.blank
-            }
-        )
-            .w_h(304.0 / 2.5, 80.0 / 2.5)
-            .hover_image(self.imgs.button_blue_mo)
-            .press_image(self.imgs.button_blue_press)
-            .down_from(state.ids.video, 1.0)
+                self.imgs.settings_button
+            })
+            .w_h(31.0 * 4.0, 12.0 * 4.0)
+            .hover_image(if let SettingsTab::Sound = state.settings_tab {
+                self.imgs.settings_button_pressed
+            } else {
+                self.imgs.settings_button_hover
+            })
+            .press_image(if let SettingsTab::Sound = state.settings_tab {
+                self.imgs.settings_button_pressed
+            } else {
+                self.imgs.settings_button_press
+            })
+            .right_from(state.ids.video, 0.0)
+            .parent(state.ids.settings_r)
             .label("Sound")
             .label_font_size(14)
             .label_color(TEXT_COLOR)
diff --git a/voxygen/src/hud/small_window.rs b/voxygen/src/hud/small_window.rs
index 5180fa4488..58ca98b1d1 100644
--- a/voxygen/src/hud/small_window.rs
+++ b/voxygen/src/hud/small_window.rs
@@ -96,6 +96,7 @@ impl<'a> Widget for SmallWindow<'a> {
             Image::new(self.imgs.window_frame)
                 // TODO: Position
                 // .right_from(state.ids.character_window, 20.0)
+                .top_left_with_margins_on(ui.window, 200.0, 10.0)
                 .w_h(107.0*4.0, 125.0*4.0)
                 .set(state.ids.frame, ui);
         } else {