Refactor VisualizerController speed options and messages

Author: Suraj-Encoding

src/Components/Controller/Visualizer.jsx

@@ -16,12 +16,12 @@ class VisualizerController extends Component {
         super(props);
         this.state = {
             sortingAlgorithm: 'Bubble Sort',
-            speed: 'Fast',
+            speed: 'Normal',
             size: '15',
             barColor: 'Blue',
             pointerColor: 'Red',
             sortedColor: 'Green',
-            message: 'Feeling lazy ? its OK , just click Sort ! '
+            message: '🚀 Feeling Lazy ? Just Click Sort ! 🚀'
         }
         this.onSelectingSortingAlgorithm = this.onSelectingSortingAlgorithm.bind(this);
         this.onSelectingSpeed = this.onSelectingSpeed.bind(this);
@@ -162,25 +162,25 @@ class VisualizerController extends Component {
                                 <Dropdown.Item disabled>Sorting Algorithm</Dropdown.Item>
                                 <Dropdown.Divider />
                                 <Dropdown.Item eventKey='Bubble Sort'>Bubble Sort (Default)</Dropdown.Item>
-                                <Dropdown.Item eventKey='Cocktail Sort'>Cocktail Sort</Dropdown.Item>
-                                <Dropdown.Item eventKey='Heap Sort'>Heap Sort</Dropdown.Item>
                                 <Dropdown.Item eventKey='Insertion Sort'>Insertion Sort</Dropdown.Item>
+                                <Dropdown.Item eventKey='Selection Sort'>Selection Sort</Dropdown.Item>
                                 <Dropdown.Item eventKey='Linear Sort'>Linear Sort</Dropdown.Item>
-                                <Dropdown.Item eventKey='Merge Sort'>Merge Sort</Dropdown.Item>
                                 <Dropdown.Item eventKey='Quick Sort'>Quick Sort</Dropdown.Item>
-                                <Dropdown.Item eventKey='Selection Sort'>Selection Sort</Dropdown.Item>
+                                <Dropdown.Item eventKey='Merge Sort'>Merge Sort</Dropdown.Item>
+                                <Dropdown.Item eventKey='Heap Sort'>Heap Sort</Dropdown.Item>
+                                <Dropdown.Item eventKey='Cocktail Sort'>Cocktail Sort</Dropdown.Item>
                             </SplitButton>
                         </Col>
                     </Row>
                     <br />
                     <Row>
                         <Col>
                             <SplitButton title={this.state.speed} id='speed' variant='light' onSelect={this.onSelectingSpeed}>
-                                <Dropdown.Item disabled>Speed Of Visualization</Dropdown.Item>
+                                <Dropdown.Item disabled>Visualization Speed</Dropdown.Item>
                                 <Dropdown.Divider />
-                                <Dropdown.Item eventKey='Very Fast'>Very fast</Dropdown.Item>
-                                <Dropdown.Item eventKey='Fast'>Fast (Default)</Dropdown.Item>
-                                <Dropdown.Item eventKey='Normal'>Normal</Dropdown.Item>
+                                <Dropdown.Item eventKey='Fast'>Fast</Dropdown.Item>
+                                <Dropdown.Item eventKey='Very Fast'>Very Fast</Dropdown.Item>
+                                <Dropdown.Item eventKey='Normal'>Normal (Default)</Dropdown.Item>
                                 <Dropdown.Item eventKey='Slow'>Slow</Dropdown.Item>
                                 <Dropdown.Item eventKey='Very Slow'>Very Slow</Dropdown.Item>
                             </SplitButton>
@@ -190,10 +190,10 @@ class VisualizerController extends Component {
                     <Row>
                         <Col>
                             <SplitButton title={this.state.size} id='size' variant='light' onSelect={this.onSelectingSize}>
-                                <Dropdown.Item disabled>Size Of Array</Dropdown.Item>
+                                <Dropdown.Item disabled>Size of Array</Dropdown.Item>
                                 <Dropdown.Divider />
                                 <Dropdown.Item eventKey='10'>10</Dropdown.Item>
-                                <Dropdown.Item eventKey='15'>15(Default)</Dropdown.Item>
+                                <Dropdown.Item eventKey='15'>15 (Default)</Dropdown.Item>
                                 <Dropdown.Item eventKey='20'>20</Dropdown.Item>
                                 <Dropdown.Item eventKey='25'>25</Dropdown.Item>
                                 <Dropdown.Item eventKey='30'>30</Dropdown.Item>
@@ -208,7 +208,7 @@ class VisualizerController extends Component {
                     <Row>
                         <Col>
                             <SplitButton title={this.state.barColor} id='barColor' variant='light' onSelect={this.onSelectingBarColor}>
-                                <Dropdown.Item disabled>Color Of Bar</Dropdown.Item>
+                                <Dropdown.Item disabled>Color of Bar</Dropdown.Item>
                                 <Dropdown.Divider />
                                 <Dropdown.Item eventKey='Black'>Black</Dropdown.Item>
                                 <Dropdown.Item eventKey='Blue'>Blue (Default)</Dropdown.Item>
@@ -224,7 +224,7 @@ class VisualizerController extends Component {
                     <Row>
                         <Col>
                             <SplitButton title={this.state.pointerColor} id='pointerColor' variant='light' onSelect={this.onSelectingPointerColor}>
-                                <Dropdown.Item disabled>Color Of Comparisions</Dropdown.Item>
+                                <Dropdown.Item disabled>Color of Comparisions</Dropdown.Item>
                                 <Dropdown.Divider />
                                 <Dropdown.Item eventKey='Black'>Black</Dropdown.Item>
                                 <Dropdown.Item eventKey='Blue'>Blue</Dropdown.Item>
@@ -240,7 +240,7 @@ class VisualizerController extends Component {
                     <Row>
                         <Col>
                             <SplitButton title={this.state.sortedColor} id='sortedColor' variant='light' onSelect={this.onSelectingSortedColor}>
-                                <Dropdown.Item disabled>Color Of Sorted Elements</Dropdown.Item>
+                                <Dropdown.Item disabled>Color of Sorted Elements</Dropdown.Item>
                                 <Dropdown.Divider />
                                 <Dropdown.Item eventKey='Black'>Black</Dropdown.Item>
                                 <Dropdown.Item eventKey='Blue'>Blue</Dropdown.Item>