From 0aedb6dc3b06e9bd869e039927a39413971ec442 Mon Sep 17 00:00:00 2001
From: Daniel <you@example.com>
Date: Fri, 13 Sep 2024 14:50:04 +0200
Subject: [PATCH] small design fixes
---
Dockerfile | 5 ++---
src/SortingVisualizer.css | 22 +++++++++-------------
src/SortingVisualizer.jsx | 5 +++--
3 files changed, 14 insertions(+), 18 deletions(-)
diff --git a/Dockerfile b/Dockerfile
index e75856c..c97b2e1 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 b809978..991362a 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 efbc46f..4521e25 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',
--
GitLab