UI Updates

Author: sasank-tadepalli

src/App.css

@@ -1,3 +1,10 @@
+.App *,
+.App {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
 .App {
   text-align: center;
 }

src/App.js

@@ -1,8 +1,8 @@
 import "./App.css";
 import { useState } from "react";
 import Chart from "./components/Chart/Chart";
-import Select from "./components/Select/Select";
 import Button from "./components/Button/Button";
+import Navbar from "./components/Navbar/Navbar";
 import { useEffect } from "react";
 
 import generateArray from "./helpers/generateArray";
@@ -81,38 +81,22 @@ function App() {
 
   return (
     <div className="App">
-      <h1>Sorting Visualizer</h1>
+      <Navbar
+        isSorting={isSorting}
+        randomizeClickHandler={randomizeClickHandler}
+        algType={algType}
+        algChangeHandler={algChangeHandler}
+        sizeChangeHandler={sizeChangeHandler}
+        size={size}
+        speed={speed}
+        speedChangeHandler={speedChangeHandler}
+      />
       <Chart data={data} currIJ={currIJ} completed={completed} />
       <Button
         btnName="Sort"
         onClickHandler={sortClickHandler}
         isDisabled={isSorting}
-      />
-      <Button
-        btnName="Randomize"
-        onClickHandler={randomizeClickHandler}
-        isDisabled={isSorting}
-      />
-      <Select
-        value={algType}
-        onChangeHandler={algChangeHandler}
-        values={[0, 1]}
-        options={["Bubble Sort", "Selection Sort"]}
-        isDisabled={isSorting}
-      />
-      <Select
-        value={size}
-        onChangeHandler={sizeChangeHandler}
-        values={[5, 10, 25, 50, 75, 100]}
-        options={[5, 10, 25, 50, 75, 100]}
-        isDisabled={isSorting}
-      />
-      <Select
-        value={speed}
-        onChangeHandler={speedChangeHandler}
-        values={[0.25, 0.5, 1, 2, 4]}
-        options={["0.25x", "0.5x", "1x", "2x", "4x"]}
-        isDisabled={isSorting}
+        className="sort"
       />
     </div>
   );

src/components/Button/Button.css

@@ -0,0 +1,29 @@
+.button {
+  width: 10rem;
+  height: 3rem;
+  border-radius: 10px;
+  border: none;
+  background-color: rgba(199, 199, 204, 0.8);
+  cursor: pointer;
+  font-size: 1rem;
+}
+
+.button:hover {
+  background-color: rgba(199, 199, 204, 1);
+}
+
+.sort {
+  background-color: rgba(255, 69, 140, 0.8);
+  color: white;
+  font-size: 1.5rem;
+}
+
+.sort:hover {
+  background-color: rgba(255, 69, 140, 1);
+}
+
+.button:disabled {
+  background-color: rgb(142, 142, 147);
+  color: black;
+  cursor: not-allowed;
+}

src/components/Button/Button.js

@@ -2,7 +2,11 @@ import "./Button.css";
 
 const Button = (props) => {
   return (
-    <button onClick={props.onClickHandler} disabled={props.isDisabled}>
+    <button
+      className={`button ${props.className}`}
+      onClick={props.onClickHandler}
+      disabled={props.isDisabled}
+    >
       {props.btnName}
     </button>
   );

src/components/Chart/Chart.css

@@ -1,6 +1,6 @@
 .chart {
   width: 95%;
-  margin: 0 auto;
+  margin: 2% auto;
   height: 350px;
   background-color: rgb(199, 199, 204);
   border: 1px solid lightgray;

src/components/Navbar/Navbar.css

@@ -0,0 +1,37 @@
+.navbar {
+  background-color: rgb(255, 255, 255);
+  box-shadow: 1px 4px 15px 0px rgba(0, 0, 0, 0.66);
+  -webkit-box-shadow: 1px 4px 15px 0px rgba(0, 0, 0, 0.66);
+  -moz-box-shadow: 1px 4px 15px 0px rgba(0, 0, 0, 0.66);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 1%;
+  margin-bottom: 2%;
+}
+
+.navbar div {
+  width: 60%;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+}
+
+@media (max-width: 800px) {
+  .navbar {
+    display: block;
+    text-align: left;
+  }
+
+  .navbar div {
+    display: grid;
+    width: 100%;
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+@media (max-width: 400px) {
+  .navbar div {
+    grid-template-columns: 1fr;
+  }
+}

src/components/Navbar/Navbar.js

@@ -0,0 +1,41 @@
+import "./Navbar.css";
+import Button from "../Button/Button";
+import Select from "../Select/Select";
+
+const Navbar = (props) => {
+  return (
+    <div className="navbar">
+      <h1>Sort Visualizer</h1>
+      <div>
+        <Button
+          btnName="Randomize"
+          onClickHandler={props.randomizeClickHandler}
+          isDisabled={props.isSorting}
+        />
+        <Select
+          value={props.algType}
+          onChangeHandler={props.algChangeHandler}
+          values={[0, 1]}
+          options={["Bubble Sort", "Selection Sort"]}
+          isDisabled={props.isSorting}
+        />
+        <Select
+          value={props.size}
+          onChangeHandler={props.sizeChangeHandler}
+          values={[5, 10, 25, 50, 75, 100]}
+          options={[5, 10, 25, 50, 75, 100]}
+          isDisabled={props.isSorting}
+        />
+        <Select
+          value={props.speed}
+          onChangeHandler={props.speedChangeHandler}
+          values={[0.25, 0.5, 1, 2, 4]}
+          options={["0.25x", "0.5x", "1x", "2x", "4x"]}
+          isDisabled={props.isSorting}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default Navbar;

src/components/Select/Select.css

@@ -0,0 +1,17 @@
+.select {
+  /* background-color: rgb(218, 218, 218); */
+  background-color: transparent;
+  border-radius: 10px;
+  padding-left: 1%;
+  height: 3rem;
+  font-size: 1rem;
+  width: 10rem;
+  border: 1px solid rgb(218, 218, 218);
+  margin: 1%;
+  outline: none;
+  cursor: pointer;
+}
+
+.select:disabled {
+  cursor: not-allowed;
+}

src/components/Select/Select.js

@@ -2,13 +2,18 @@ import "./Select.css";
 
 const Select = (props) => {
   let options = props.options.map((option, i) => {
-    return <option value={props.values[i]}>{option}</option>;
+    return (
+      <option value={props.values[i]} key={option}>
+        {option}
+      </option>
+    );
   });
   return (
     <select
       value={props.value}
       onChange={props.onChangeHandler}
       disabled={props.isDisabled}
+      className="select"
     >
       {options}
     </select>