More app settings work

app/components/bridge-controls.js

@@ -29,6 +29,17 @@ export default Em.Component.extend({
 
     toggleAppSettings: function(){
       this.toggleProperty('appSettingsDisplayed');
+    },
+
+    clearBridge: function() {
+      delete localStorage['huegasm.bridgeUsername'];
+      delete localStorage['huegasm.bridgeIp'];
+      location.reload();
+    },
+
+    clearAllSettings: function() {
+      localStorage.clear();
+      location.reload();
     }
   },
 

app/styles/app.scss

@@ -28,6 +28,15 @@ body {
   position: static;
 }
 
+.triangle {
+  position: absolute;
+  right: 11px;
+  top: -16px;
+  border-style: solid;
+  border-width: 0 15px 15px 15px;
+  border-color: transparent transparent #AFAFAF transparent;
+}
+
 #settings {
   cursor: pointer;
   position: absolute;
@@ -40,6 +49,25 @@ body {
   position: relative;
 }
 
+.appSettingsItem {
+  padding: 10px;
+}
+
+.appSettingsItem.warn {
+  text-transform: uppercase;
+  background: rgba(255, 0, 0, 0.20);
+}
+
+.appSettingsItem.warn:hover {
+  text-transform: uppercase;
+  background: rgba(255, 0, 0, 0.70);
+  color: white;
+}
+
+.appSettingsItem:hover {
+  background: darken(white, 10%);
+}
+
 .settingsItem.on md-icon.md-default-theme  {
   color: #F12B24 !important;
 }

app/templates/components/bridge-controls.hbs

@@ -9,8 +9,9 @@
 
       {{#if appSettingsDisplayed}}
         <div id="appSettings">
-          <p {{action "clearBridge"}}>Switch bridge</p>
-          <p class="warn" {{action "clearAllSettings"}}>Clear application settings</p>
+          <span class="triangleWrapper"><div class="triangle"></div></span>
+          <div class="appSettingsItem" {{action "clearBridge"}}>Switch bridge</div>
+          <div class="warn appSettingsItem" {{action "clearAllSettings"}}>Clear application settings</div>
         </div>
       {{/if}}
     </span>