Use icon buttons for options page whitelist

ext/src/ui/options/EditableList.tsx

@@ -79,10 +79,11 @@ export default class EditableList extends Component<
                 <hr />
                 <div className="editable-list__view-actions">
                     { !this.state.rawView &&
-                        <button className="editable-list__add-button"
+                        <button className="editable-list__add-button ghost"
+                                title={ _("optionsUserAgentWhitelistAddItem") }
                                 onClick={ this.handleAddItem }
                                 type="button">
-                            { _("optionsUserAgentWhitelistAddItem") }
+                            <img src="assets/photon_new.svg" alt="icon, add" />
                         </button> }
                     { this.state.rawView &&
                         <button className="editable-list__save-raw-button"

ext/src/ui/options/EditableListItem.tsx

@@ -58,13 +58,17 @@ export default class EditableListItem extends Component<
                                  onKeyPress={ this.handleInputKeyPress }/>
                         : this.props.text }
                 </div>
-                <button onClick={ this.handleEditBegin }
+                <button className="editable-list__edit-button ghost"
+                        title={ _("optionsUserAgentWhitelistEditItem") }
+                        onClick={ this.handleEditBegin }
                         type="button">
-                    { _("optionsUserAgentWhitelistEditItem") }
+                    <img src="assets/photon_edit.svg" alt="icon, edit" />
                 </button>
-                <button onClick={ this.handleRemove }
+                <button className="editable-list__remove-button ghost"
+                        title={ _("optionsUserAgentWhitelistRemoveItem") }
+                        onClick={ this.handleRemove }
                         type="button">
-                    { _("optionsUserAgentWhitelistRemoveItem") }
+                    <img src="assets/photon_delete.svg" alt="icon, remove" />
                 </button>
             </li>
         );

ext/src/ui/options/assets/photon_delete.svg

@@ -0,0 +1,14 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+    <style>
+        @media (prefers-color-scheme: dark) {
+            path {
+                fill: rgba(249, 249, 250, .8);
+            }
+        }
+    </style>
+    <path fill="rgba(12, 12, 13, .8)" d="M6.5 12a.5.5 0 0 0 .5-.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 0 .5.5zm2 0a.5.5 0 0 0 .5-.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 0 .5.5zm2 0a.5.5 0 0 0 .5-.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 0 .5.5z"></path>
+    <path fill="rgba(12, 12, 13, .8)" d="M14 2h-3.05a2.5 2.5 0 0 0-4.9 0H3a1 1 0 0 0 0 2v9a3 3 0 0 0 3 3h5a3 3 0 0 0 3-3V4a1 1 0 0 0 0-2zM8.5 1a1.489 1.489 0 0 1 1.391 1H7.109A1.489 1.489 0 0 1 8.5 1zM12 13a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V4h7z"></path>
+</svg>

ext/src/ui/options/assets/photon_edit.svg

@@ -0,0 +1,13 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+    <style>
+        @media (prefers-color-scheme: dark) {
+            path {
+                fill: rgba(249, 249, 250, .8);
+            }
+        }
+    </style>
+    <path fill="rgba(12, 12, 13, .8)" d="M14.354 2.353l-.708-.707a2.007 2.007 0 0 0-2.828 0l-.379.379a.5.5 0 0 0 0 .707l2.829 2.829a.5.5 0 0 0 .707 0l.379-.379a2.008 2.008 0 0 0 0-2.829zM9.732 3.439a.5.5 0 0 0-.707 0L3.246 9.218a1.986 1.986 0 0 0-.452.712l-1.756 4.39A.5.5 0 0 0 1.5 15a.5.5 0 0 0 .188-.037l4.382-1.752a1.966 1.966 0 0 0 .716-.454l5.779-5.778a.5.5 0 0 0 0-.707zM5.161 12.5l-2.549 1.02a.1.1 0 0 1-.13-.13L3.5 10.831a.1.1 0 0 1 .16-.031l1.54 1.535a.1.1 0 0 1-.039.165z"></path>
+</svg>

ext/src/ui/options/assets/photon_new.svg

@@ -0,0 +1,13 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+    <style>
+        @media (prefers-color-scheme: dark) {
+            path {
+                fill: rgba(249, 249, 250, .8);
+            }
+        }
+    </style>
+    <path fill="rgba(12, 12, 13, .8)" d="M14 7H9V2a1 1 0 0 0-2 0v5H2a1 1 0 1 0 0 2h5v5a1 1 0 0 0 2 0V9h5a1 1 0 0 0 0-2z"></path>
+</svg>

ext/src/ui/options/styles/index.css

@@ -49,6 +49,21 @@
     padding: 20px 10px;
 }
 
+button.ghost {
+    width: 24px !important;
+    height: 24px !important;
+    padding: initial;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+button.ghost:not(:hover) {
+    background-color: initial;
+    border: initial;
+}
+
+
 #form {
     display: flex;
     flex-direction: column;

ext/src/ui/options/styles/mac.css

@@ -23,6 +23,11 @@ select {
     height: 22px;
 }
 
+button.ghost {
+    width: 22px !important;
+    height: 22px !important;
+}
+
 input[type="checkbox"],
 input[type="radio"] {
     height: 16px;