Added on-screen-displays to indicate volume and brightness changes. (#34)

* Resolves #13 - Added on-screen-displays to indicate volume and brightness changes.

* <3 Aylur

* Update brightness logic for osd

* Update brightness labels

* Fixed typos in the settings menu component.

* Added options to toggle OSD and change its orientation.

widget/settings/pages/theme/osd/index.ts

@@ -0,0 +1,26 @@
+import { Option } from "widget/settings/shared/Option";
+import { Header } from "widget/settings/shared/Header";
+
+import options from "options";
+
+export const OsdTheme = () => {
+    return Widget.Scrollable({
+        vscroll: "automatic",
+        hscroll: "never",
+        class_name: "osd-theme-page paged-container",
+        vexpand: true,
+        child: Widget.Box({
+            vertical: true,
+            children: [
+                Header('On Screen Display Settings'),
+                Option({ opt: options.theme.osd.bar_color, title: 'Bar', type: 'color' }),
+                Option({ opt: options.theme.osd.bar_overflow_color, title: 'Overflow', subtitle: 'Overflow color is for when the volume goes over a 100', type: 'color' }),
+                Option({ opt: options.theme.osd.bar_empty_color, title: 'Bar Background', type: 'color' }),
+                Option({ opt: options.theme.osd.bar_container, title: 'Bar Container Background', type: 'color' }),
+                Option({ opt: options.theme.osd.icon, title: 'Icon Background', type: 'color' }),
+                Option({ opt: options.theme.osd.icon_container, title: 'Icon Container', type: 'color' }),
+                Option({ opt: options.theme.osd.label, title: 'Value', type: 'color' }),
+            ]
+        })
+    })
+}