Merge remote-tracking branch 'origin/main' into main

code/frontend/src/components/Checkbox.module.css

@@ -1,5 +1,6 @@
 .Checkbox {
-    height: 25px;
+    font-size: inherit;
-    width: 25px;
+    width: 1em;
-    vertical-align: bottom;
+    height: 1em;
-}
+    border-radius: 0.25em;
+}

code/frontend/src/components/Radio.module.css

@@ -1,5 +1,6 @@
 .Radio {
-    height: 25px;
+    font-size: inherit;
-    width: 25px;
+    width: 1em;
-    vertical-align: bottom;
+    height: 1em;
+    border-radius: 0.25em;
 }

code/frontend/src/components/Slider.js

@@ -0,0 +1,23 @@
+import React from "react"
+import Style from "./Slider.module.css"
+import classNames from "classnames"
+
+
+/**
+ * A slider that allows to select a numeric value in a range.
+ *
+ * @todo Custom styling only works on Firefox!
+ *
+ * @param className - Additional class(es) to add to the element.
+ * @param props - Additional props to pass to the element.
+ * @returns {JSX.Element}
+ * @constructor
+ */
+export default function Slider({ className, ...props }) {
+    return (
+        <input
+            type={"range"}
+            className={classNames(Style.Slider, className)} {...props}
+        />
+    )
+}

code/frontend/src/components/Slider.module.css

@@ -0,0 +1,36 @@
+.Slider {
+    width: 100%;
+}
+
+@-moz-document url-prefix() {
+    .Slider {
+        outline: none;
+        background-color: transparent;
+    }
+
+    .Slider::-moz-range-track {
+        background-color: var(--bg-field-off);
+        height: 10px;
+        border-radius: 5px;
+    }
+
+    .Slider:focus::-moz-range-track {
+        background-color: var(--bg-field-on);
+    }
+
+    .Slider::-moz-range-progress {
+        height: 10px;
+        border-radius: 5px;
+    }
+
+    .Slider::-moz-range-thumb {
+        background-color: var(--fg-field-off);
+        border-width: 0;
+        height: 25px;
+        width: 10px;
+    }
+
+    .Slider:focus::-moz-range-thumb {
+        background-color: var(--fg-field-on);
+    }
+}

code/frontend/src/routes/PageDashboard.js

@@ -19,17 +19,17 @@ export default function PageDashboard({ children, className, ...props }) {
                 Create a new repository
             </BoxHeader>
             <BoxFull className={Style.SearchByZone} header={
-                <span><Checkbox/> Search by zone</span>
+                <label><Checkbox/> Search by zone</label>
             }>
                 🚧 Not implemented.
             </BoxFull>
             <BoxFull className={Style.SearchByHashtags} header={
-                <span><Checkbox/> Search by hashtag</span>
+                <label><Checkbox/> Search by hashtag</label>
             }>
                 🚧 Not implemented.
             </BoxFull>
             <BoxFull className={Style.SearchByTimePeriod} header={
-                <span><Checkbox/> Search by time period</span>
+                <label><Checkbox/> Search by time period</label>
             }>
                 🚧 Not implemented.
             </BoxFull>