Add media controls (#229)

ext/src/ui/options/Whitelist.svelte

@@ -19,7 +19,7 @@
     let editingInput: HTMLInputElement;
     let editingValue: string;
 
-    let expandedItemIndices = new Set();
+    let expandedItemIndices = new Set<number>();
 
     let knownAppToAdd: Nullable<KnownApp> = null;
     $: filteredKnownApps = Object.values(knownApps).filter(app => {
@@ -217,7 +217,7 @@
                         }}
                     >
                         <img
-                            src="assets/{isItemExpanded
+                            src="../assets/{isItemExpanded
                                 ? 'photon_arrowhead_up.svg'
                                 : 'photon_arrowhead_down.svg'}"
                             alt="icon, arrow down"

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

@@ -1,13 +0,0 @@
-<!-- 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="M8 12a1 1 0 0 1-.707-.293l-5-5a1 1 0 0 1 1.414-1.414L8 9.586l4.293-4.293a1 1 0 0 1 1.414 1.414l-5 5A1 1 0 0 1 8 12z"></path>
-</svg>

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

@@ -1,13 +0,0 @@
-<!-- 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="M13 11a1 1 0 0 1-.707-.293L8 6.414l-4.293 4.293a1 1 0 0 1-1.414-1.414l5-5a1 1 0 0 1 1.414 0l5 5A1 1 0 0 1 13 11z"></path>
-</svg>

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

@@ -1,15 +1,3 @@
-:root {
-    --border-color: var(--grey-90-a20);
-    --secondary-color: rgb(125, 125, 125);
-}
-
-@media (prefers-color-scheme: dark) {
-    :root {
-        --border-color: var(--grey-10-a20);
-        --secondary-color: var(--grey-10-a60);
-    }
-}
-
 #root {
     padding: 20px 10px;
 }
@@ -35,19 +23,6 @@ input:placeholder-shown {
     text-overflow: ellipsis;
 }
 
-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;
-}
-
 .form {
     display: flex;
     flex-direction: column;