diff --git a/react/src/components/dashboard/coinTileItem.js b/react/src/components/dashboard/coinTileItem.js
index fd1d79d..f28ea9d 100644
--- a/react/src/components/dashboard/coinTileItem.js
+++ b/react/src/components/dashboard/coinTileItem.js
@@ -137,7 +137,7 @@ class CoinTileItem extends React.Component {
const { item } = this.props;
return (
-
+
diff --git a/react/src/styles/index.scss b/react/src/styles/index.scss
index 181cb91..aafb72b 100644
--- a/react/src/styles/index.scss
+++ b/react/src/styles/index.scss
@@ -292,6 +292,82 @@ body {
}
}
+/* The switch - the box around the slider */
+.switch {
+ position: relative;
+ display: inline-block;
+ width: 40px;
+ height: 24px;
+}
+
+/* Hide default HTML checkbox */
+.switch input {
+ display: none;
+}
+
+/* The slider */
+.slider {
+ border-radius: 20px;
+ position: absolute;
+ cursor: pointer;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: #ccc;
+ -webkit-transition: .4s;
+ transition: .4s;
+}
+
+.slider:before {
+ border-radius: 50%;
+ position: absolute;
+ content: "";
+ height: 22px;
+ width: 22px;
+ left: 4px;
+ bottom: 4px;
+ background-color: white;
+ -webkit-transition: .4s;
+ transition: .4s;
+}
+
+.toggle-label {
+ color: #757575;
+ display: inline-block;
+}
+
+input:checked + .slider {
+ background-color: rgb(57, 73, 171);
+}
+
+input:focus + .slider {
+ box-shadow: 0 0 1px rgb(57, 73, 171);
+}
+
+input:checked + .slider:before {
+ -webkit-transform: translateX(26px);
+ -ms-transform: translateX(26px);
+ transform: translateX(26px);
+}
+
+/* Rounded sliders */
+.slider.round {
+ border-radius: 34px;
+}
+
+.slider.round:before {
+ border-radius: 50%;
+}
+
+.pointer {
+ cursor: pointer;
+}
+
+.text-center {
+ text-align: center;
+}
+
/*.toaster .single-toast:nth-child(0) {
bottom: 12px;
}