diff --git a/Dockerfile b/Dockerfile index e75856cc18b4bd88e5344b48d3b0b18fa0b63b20..c97b2e15e5ba44d2403bdf25ca9730e6fc86ce40 100644 --- a/Dockerfile +++ b/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 . diff --git a/src/SortingVisualizer.css b/src/SortingVisualizer.css index b809978693962dd52d19f68cf1bb30ef7fe6b2e3..991362a5f34dea4254dd4ff840b1a15040e4b69c 100644 --- a/src/SortingVisualizer.css +++ b/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 { diff --git a/src/SortingVisualizer.jsx b/src/SortingVisualizer.jsx index efbc46f917e325e417cd9cc1ecd2ade89003fea7..4521e25615e08a8aa06448a084eacbfff01b354b 100644 --- a/src/SortingVisualizer.jsx +++ b/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',