Fix CSS

Harshitv21 · Dec 8, 2024 · 7ce9867 · 7ce9867
1 parent 245548a
commit 7ce9867
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 14 deletions.
diff --git a/src/components/InputBox.jsx b/src/components/InputBox.jsx
@@ -135,7 +135,7 @@ export const InputBox = ({
               <div className="button-container">
                 <button
                   type="button"
-                  className="btn btn-primary"
+                  className="btn btn-primary input-box-btn"
                   onClick={() =>
                     handleAddTime(
                       type,
@@ -153,7 +153,7 @@ export const InputBox = ({
                 </button>
                 <button
                   type="button"
-                  className="btn btn-warning"
+                  className="btn btn-warning input-box-btn"
                   onClick={() => handleClear(type)}
                 >
                   Clear
@@ -166,7 +166,7 @@ export const InputBox = ({
                 </button>
                 <button
                   type="button"
-                  className="btn btn-danger"
+                  className="btn btn-danger input-box-btn"
                   onClick={() => handleClear(type, true)}
                 >
                   Clear All
@@ -199,7 +199,7 @@ export const InputBox = ({
                 {(type === "AR" ? arrivalArray : burstTimeArray).length < 10 ? (
                   <button
                     type="button"
-                    className="btn btn-primary"
+                    className="btn btn-primary input-box-btn"
                     onClick={() =>
                       handleAddTime(
                         type,
@@ -222,7 +222,7 @@ export const InputBox = ({
                 )}
                 <button
                   type="button"
-                  className="btn btn-warning"
+                  className="btn btn-warning input-box-btn"
                   onClick={() => handleClear(type)}
                 >
                   Clear{" "}
@@ -235,7 +235,7 @@ export const InputBox = ({
                 </button>
                 <button
                   type="button"
-                  className="btn btn-danger"
+                  className="btn btn-danger input-box-btn"
                   onClick={() => handleClear(type, true)}
                 >
                   Clear All

diff --git a/src/styles/InputBox.css b/src/styles/InputBox.css
@@ -56,7 +56,7 @@
   height: 24px;
 }
 
-button {
+.input-box-btn {
   padding: 10px 15px;
   font-size: 16px;
   border: none;
@@ -67,15 +67,15 @@ button {
   transition: all 0.3s ease;
 }
 
-button:hover {
-  transform: translateY(-3px); /* Smooth upward movement */
-  background-color: #8e44ad; /* Transition to a lighter purple */
-  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Highlighted shadow */
+.input-box-btn:hover {
+  transform: translateY(-3px); 
+  /* background-color: #8e44ad;  */
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
 }
 
-button:active {
-  transform: translateY(0); /* Reset the position on click */
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Lower shadow on click */
+.input-box-btn:active {
+  transform: translateY(0); 
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); 
 }