From fbb0af55e2e6660709263b2dda860c594e818429 Mon Sep 17 00:00:00 2001
From: groovecoder <luke.crouch@gmail.com>
Date: Tue, 31 Jan 2017 14:04:42 -0600
Subject: [PATCH] fix #95: fix "name" input; inset the panel shadow

---
 webextension/css/popup.css |  1 +
 webextension/popup.html    | 26 +++++++++++---------------
 2 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/webextension/css/popup.css b/webextension/css/popup.css
index b956284..cc2ae89 100644
--- a/webextension/css/popup.css
+++ b/webextension/css/popup.css
@@ -22,6 +22,7 @@ table {
 
 .panel-back-arrow {
   background: #ebebeb;
+  box-shadow: inset -2px 0 2px -2px black;
   display: flex;
   justify-content: center;
   text-align: center;
diff --git a/webextension/popup.html b/webextension/popup.html
index 17fb944..5a15ad5 100644
--- a/webextension/popup.html
+++ b/webextension/popup.html
@@ -54,7 +54,7 @@
   <div class="hide panel container-info-panel" id="container-info-panel">
     <div class="row">
       <div class="small-2 columns panel-back-arrow clickable" id="close-container-info-panel">
-        <img src="/img/container-arrow.svg" class="back-arrow-img" />
+        <img alt="Panel Back Arrow" src="/img/container-arrow.svg" class="back-arrow-img" />
       </div>
       <div class="small-10 columns">
         <div class="row container-info-panel-header">
@@ -103,24 +103,20 @@
   <div class="panel edit-container-panel hide" id="edit-container-panel">
     <div class="row">
       <div class="small-2 columns panel-back-arrow clickable" id="edit-container-panel-back-arrow">
-        <img src="/img/container-arrow.svg" class="back-arrow-img" />
+        <img alt="Panel Back Arrow" src="/img/container-arrow.svg" class="back-arrow-img" />
       </div>
       <div class="small-10 columns">
         <form id="edit-container-panel-form">
-          <p>
-            <label for="edit-container-panel-name-input">Name</label>
+          <fieldset>
+            <legend>Name</legend>
             <input type="text" name="container-name" id="edit-container-panel-name-input"/>
-          </p>
-          <p>
-            <fieldset id="edit-container-panel-choose-color">
-              <legend>Choose a color</legend>
-            </fieldset>
-          </p>
-          <p>
-            <fieldset id="edit-container-panel-choose-icon">
-              <legend>Choose an icon</legend>
-            </fieldset>
-          </p>
+          </fieldset>
+          <fieldset id="edit-container-panel-choose-color">
+            <legend>Choose a color</legend>
+          </fieldset>
+          <fieldset id="edit-container-panel-choose-icon">
+            <legend>Choose an icon</legend>
+          </fieldset>
         </form>
         <div class="row">
           <div class="small-6 columns footer-columns">