buttons updated

Frontend/algoverse/src/components/SortingVisualizer/SortingVisualizer.css

@@ -1,11 +1,49 @@
+.button-container {
+  display: flex;
+  flex-direction: column;
+  margin-top: -64px;
+  width: 100%;
+}
+
 .array-container {
   position: absolute;
   left: 300px;
-  top: 165px;
+  top: 245px;
 }
 
 .array-bar {
   width: 35px;
   display: inline-block;
   margin: 0 1px;
 }
+
+.button-accent {
+  padding: 10px 20px;
+  background-color: #237bc2;
+  color: white;
+  border: none;
+  cursor: pointer;
+  font-size: 16px;
+  transition: background-color 0.3s ease;
+  position: center;
+  width: 100%;
+}
+
+.button-accent:hover {
+  background-color: #165b8c;
+}
+.button-reset {
+  padding: 10px 20px;
+  background-color: #2c98f0;
+  color: white;
+  border: none;
+  cursor: pointer;
+  font-size: 16px;
+  transition: background-color 0.3s ease;
+  position: center;
+  width: 100%;
+}
+
+.button-reset:hover {
+  background-color: #1a6ca7;
+}

Frontend/algoverse/src/components/SortingVisualizer/SortingVisualizer.jsx

@@ -33,7 +33,7 @@ export default class SortingVisualizer extends React.Component {
       array.push(randomIntFromInterval(5, 730));
     }
     this.setState({array});
-  }
+  };
 
   mergeSort() {
     const animations = getMergeSortAnimations(this.state.array);
@@ -57,20 +57,23 @@ export default class SortingVisualizer extends React.Component {
         }, i * ANIMATION_SPEED_MS);
       }
     }
-  }
+  };
 
   render() {
     const {array} = this.state;
 
-    return (
-        <>
-
 
+    return (
+        <> 
+        <div className='button-container'>
+          <button className="button-accent" onClick={() => this.mergeSort()}>
+        Visualize MergeSort Algorithm
+        </button>
+        <button className="button-reset" onClick={() => this.resetArray()}>
+          Reset Array
+        </button>
+      </div>
         <div className="array-container">
-        <button style={{ width: '110px', height: '35px', fontSize: '19px' }} onClick={() => this.resetArray()}>New Array</button>
-        &nbsp;&nbsp;&nbsp;
-        <button style={{ width: '60px', height: '35px', fontSize: '19px' }} onClick={() => this.mergeSort()}>Start</button>
-        <br></br><br></br><br></br>
         {array.map((value, idx) => (
           <div
             className="array-bar"