Merge pull request #1601 from mozilla/fix-odd-edit-arrow-alignment

fix odd edit arrow alignment
mozilla · Dec 9, 2019 · fca5caa · fca5caa
2 parents e44fcdf + b0661f7
commit fca5caa
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 9 deletions.
diff --git a/src/css/popup.css b/src/css/popup.css
@@ -754,21 +754,24 @@ span ~ .panel-header-text {
   background: var(--primary-action-color);
   block-size: 100%;
   color: #fff;
-  display: flex;
-  flex: 1;
+  display: inline-block;
   justify-content: center;
+  padding-block-start: 6px;
+  padding-inline-start: 30%;
 }
 
-.exit-edit-mode-link::before {
-  background: url('/img/container-arrow.svg') no-repeat;
+.edit-containers-panel-footer {
+  background: var(--primary-action-color);
+}
+
+.exit-edit-mode-link img {
   block-size: 16px;
-  content: "";
-  display: block;
+  display: inline;
   filter: grayscale(100%) brightness(5);
-  float: left;
   inline-size: 16px;
   margin-inline-end: 5px;
   transform: scaleX(-1);
+  vertical-align: bottom;
 }
 
 .delete-container-confirm {

diff --git a/src/popup.html b/src/popup.html
@@ -160,8 +160,9 @@ <h3 class="panel-header-text">Edit Containers</h3>
       </table>
     </div>
     <div class="panel-footer edit-containers-panel-footer">
-      <a href="#" id="exit-edit-mode-link" class="exit-edit-mode-link edit-containers-exit-text">Exit Edit Mode</a>
-    </div>
+      <a href="#" id="exit-edit-mode-link" class="exit-edit-mode-link edit-containers-exit-text">
+      <img src="/img/container-arrow.svg"/>Exit Edit Mode</a>
+  </div>
   </div>