chore: add a border to the slider in control center

no2key · May 21, 2021 · c600ff8 · c600ff8
1 parent 03c001d
commit c600ff8
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 3 deletions.
diff --git a/src/components/menus/ControlCenterMenu.js b/src/components/menus/ControlCenterMenu.js
@@ -26,7 +26,9 @@ import { FaWifi } from "react-icons/fa";
 const SliderComponent = ({ icon, value, setValue }) => {
   return (
     <div className="slider flex flex-row w-full">
-      <div className="h-8 p-2 bg-gray-100 rounded-l-full">{icon}</div>
+      <div className="h-8 p-2 bg-gray-100 rounded-l-full border-t border-l border-b border-gray-400 border-opacity-60">
+        {icon}
+      </div>
       <Slider
         min={1}
         max={100}

diff --git a/src/styles/index.css b/src/styles/index.css
@@ -112,15 +112,15 @@ body:not(pre) {
 /* --------- slider --------- */
 
 .slider .rangeslider {
-  @apply bg-gray-200 w-full h-8 rounded-full shadow-none m-0;
+  @apply bg-gray-300 bg-opacity-90 w-full h-8 shadow-none m-0 rounded-r-full border-t border-r border-b border-gray-400 border-opacity-30;
 }
 
 .slider .rangeslider .rangeslider__fill {
   @apply bg-gray-100 shadow-none rounded-none;
 }
 
 .slider .rangeslider .rangeslider__handle {
-  @apply border-none outline-none h-8 w-8;
+  @apply border border-gray-400 border-opacity-60 outline-none h-8 w-8;
   background-color: #fff;
   color: #fff;
   box-shadow: -5px 0px 10px 0px rgba(17, 17, 17, 0.2);