small design fixes

Dockerfile

@@ -2,16 +2,15 @@ FROM node:18-alpine
 
 WORKDIR /app
 
-RUN npm create vite@latest sorting-visualizer -- --template react &&\
-    apk update && apk add --no-cache bash findutils &&\
+RUN apk update && apk add --no-cache bash findutils &&\
     rm -rf /var/cache/apk/*
 
 WORKDIR /app/sorting-visualizer
 
-RUN rm -rf src/App.css src/App.jsx src/assets src/index.css
 COPY package-lock.json .
 COPY package.json .
 RUN npm install
+RUN rm -rf src/App.css src/App.jsx src/assets src/index.css
 
 COPY src src/
 COPY index.html .

src/SortingVisualizer.css

@@ -20,7 +20,6 @@ body {
 .sorted {
     background-color: deeppink;
     animation: ScaleAnimation 0.5s ease-in-out;
-
 }
 
 .finished {
@@ -30,7 +29,6 @@ body {
     margin: 2px;
     display: inline-block;
     animation: GreenScaleAnimation 1s ease-in;
-
 }
 
 .range-slider {
@@ -45,13 +43,11 @@ body {
     flex-direction: row;
     justify-content: center;
     align-items: center;
-
 }
 
 #startButton {
     height: 78%;
     width: 85px;
-    font-size: 12px;
     margin: 10px;
     background: #1abc9c;
     text-align: center;
@@ -60,10 +56,9 @@ body {
     border-radius: 5px;
     border: none;
     color: white;
-    font-size: 14px;
+    font-size: 16px;
     font-family: Arial, sans-serif;
     font-weight: bold;
-
 }
 
 button:active {
@@ -73,14 +68,13 @@ button:active {
 
 .Label {
     margin: 10px;
-    font-size: 15px;
+    font-size: 16px;
     font-family: Arial, sans-serif;
-    font-weight: bold;
+    font-weight: normal;
     color: white;
 }
 
 .DivArray {
-    transform: rotate(180deg);
     transform: scaleY(-1);
     display: flex;
     flex-wrap: nowrap;
@@ -94,7 +88,7 @@ button:active {
     background-color: #34495e;
     border: none;
     border-radius: 5px;
-    margin-top: 15px;
+    margin-top: 3px;
 }
 
 
@@ -115,14 +109,16 @@ button:active {
     border: none;
     border-radius: 0px;
     color: white;
-    fontSize: 14px;
-    fontWeight: normal;
+    font-size: 16px;
+    font-weight: normal;
     padding: 0;
     height: 100%;
     display: flex;
-    alignItems: center;
     place-items: center;
     margin-inline: 10px;
+    justify-content: center;
+    width: 195px;
+    transition: none;
 }
 
 #dropdown:hover {

src/SortingVisualizer.jsx

@@ -6,7 +6,6 @@ import 'react-bootstrap-range-slider/dist/react-bootstrap-range-slider.css';
 import {Dropdown} from 'react-bootstrap';
 import 'bootstrap/dist/css/bootstrap.min.css';
 
-
 function SortingVisualizer() {
 
     const moduloFive = ((window.innerWidth / 45)).toFixed(0) % 5;
@@ -95,7 +94,7 @@ function SortingVisualizer() {
         <>
             <div className='Container'>
                 <div id='ToolBar'>
-                    <div className="Label">How many Bars?</div>
+                    <div className="Label">How many bars?</div>
                     <SliderWithInputFormControl style={{className: 'range-slider'}}/>
                     <input type='number' max={100} min={0} disabled={sorting}
                            onChange={changeEvent => {
@@ -106,6 +105,8 @@ function SortingVisualizer() {
                            }} defaultValue={BarNumber}
                            value={BarNumber} style={{
                         width: '42px',
+                        fontfamily: 'Arial sans-serif',
+                        fontSize:'16px',
                         margin: '10px',
                         borderRadius: '5px',
                         border: 'none',