Merge pull request metabrainz#2603 from anshg1214/releases

LB-1172: Fresh releases improvements

frontend/css/main.less

@@ -26,6 +26,7 @@
 @import "explore.less";
 @import "search-track.less";
 @import "stats.less";
+@import "switch.less";
 @import "new-navbar.less";
 @import "tags.less";
 @import "stats-art-creator.less";

frontend/css/rc-slider.less

@@ -56,10 +56,6 @@
   height: 6px;
   background-color: @slider_base_color;
   border-radius: 6px;
-
-  &:hover ~ .rc-slider-handle {
-    border: solid 5px lighten(@orange, 10%);
-  }
 }
 .rc-slider-track {
   position: absolute;
@@ -72,7 +68,7 @@
   width: 3rem;
   height: 3rem;
   margin-top: -12px;
-  background-color: @orange;
+  background-color: @purple;
   border-radius: 50%;
   cursor: pointer;
   cursor: -webkit-grab;
@@ -87,12 +83,8 @@
     border-color: lighten(@purple, 10%);
     box-shadow: 0 0 3px @purple;
   }
-  &:hover {
-    border: solid 5px lighten(@orange, 10%);
-  }
   &:active {
     border-color: @purple;
-    box-shadow: 0 0 8px darken(@purple, 10%);
     cursor: -webkit-grabbing;
     cursor: grabbing;
   }
@@ -188,9 +180,6 @@
   .rc-slider-rail {
     width: 0.7rem;
     height: 100%;
-    &:hover ~ .rc-slider-handle {
-      border: solid 5px lighten(@orange, 10%);
-    }
   }
   .rc-slider-track {
     bottom: 0;

frontend/css/switch.less

@@ -0,0 +1,53 @@
+.toggle {
+  cursor: pointer;
+  display: inline-block;
+}
+
+.toggle-switch {
+  display: inline-block;
+  background: #8d8d8d;
+  border-radius: 16px;
+  width: 42px;
+  height: 14px;
+  position: relative;
+  vertical-align: middle;
+  transition: background 0.25s;
+}
+.toggle-switch:before,
+.toggle-switch:after {
+  content: "";
+}
+.toggle-switch:before {
+  display: block;
+  background: #d9d9d9;
+  border-radius: 50%;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  top: -3px;
+  left: 0px;
+  transition: left 0.25s;
+}
+.toggle:hover .toggle-switch:before {
+  background: #d9d9d9;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
+}
+.toggle-checkbox:checked + .toggle-switch {
+  background: #1e1e1e;
+}
+.toggle-checkbox:checked + .toggle-switch:before {
+  left: 23px;
+  background: #8d8d8d;
+}
+
+.toggle-checkbox {
+  position: absolute;
+  visibility: hidden;
+}
+
+.toggle-label {
+  margin-left: 10px;
+  position: relative;
+  font-weight: 400;
+}

frontend/js/src/components/Switch.tsx

@@ -0,0 +1,28 @@
+import * as React from "react";
+
+type SwitchProps = {
+  id: string;
+  value: string | undefined;
+  checked: boolean;
+  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  switchLabel: string | undefined;
+};
+
+export default function Switch(props: SwitchProps) {
+  const { id, value = "", onChange, checked, switchLabel = "" } = props;
+
+  return (
+    <label className="toggle" htmlFor={id}>
+      <input
+        id={id}
+        className="toggle-checkbox"
+        type="checkbox"
+        value={value}
+        checked={checked}
+        onChange={onChange}
+      />
+      <div className="toggle-switch" />
+      <span className="toggle-label">{switchLabel}</span>
+    </label>
+  );
+}