Merge pull request #32 from UZ9/ryder/fix-icon-padding

Fix icon padding of sidebar

Author: kathy-tran07

README.md

@@ -53,7 +53,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
   <tr>
     <td align="center"><a href="https://github.com/lyangji1011"><img src="https://avatars.githubusercontent.com/u/70451868?v=4" width="100px;" alt=""/><br /><sub><b>Lauren Ji</b></sub></a><br /> <a href="https://github.com/csvistool/visualization-tool/commits?author=lyangji1011" title="Code">💻</a> <a href="https://github.com/csvistool/visualization-tool/issues?q=author%3Alyangji1011" title="Bug reports">🐛</a></td>
     <td align="center"><a href="https://github.com/m-skaan"><img src="https://avatars.githubusercontent.com/u/93020882?v=4" width="100px;" alt=""/><br /><sub><b>Muskaan Gupta</b></sub></a><br /> <a href="https://github.com/csvistool/visualization-tool/commits?author=m-skaan" title="Code">💻</a></td>
-    <td align="center"><a href="https://github.com/VineethSendilraj"><img src="https://avatars.githubusercontent.com/u/66220022?v=4" width="100px;" alt=""/><br /><sub><b>Vineeth Sendilraj</b></sub></a><br /> <a href="https://github.com/csvistool/visualization-tool/commits?author=VineethSendilraj" title="Code">💻</a><a href="https://github.com/csvistool/visualization-tool/commits?author=VineethSendilraj" title="Design">🎨</a></td>
+    <td align="center"><a href="https://github.com/VineethSendilraj"><img src="https://avatars.githubusercontent.com/u/66220022?v=4" width="100px;" alt=""/><br /><sub><b>Vineeth Sendilraj</b></sub></a><br /> <a href="https://github.com/csvistool/visualization-tool/commits?author=VineethSendilraj" title="Code">💻</a> <a href="https://github.com/csvistool/visualization-tool/commits?author=VineethSendilraj" title="Design">🎨</a></td>
     <td align="center"><a href="https://github.com/PureTrippH"><img src="https://avatars.githubusercontent.com/u/20043396?v=4" width="100px;" alt=""/><br /><sub><b>Tripp Hanley</b></sub></a><br /> <a href="https://github.com/csvistool/visualization-tool/commits?author=PureTrippH" title="Code">💻</a></td>
   </tr>
 </table>

src/AlgoList.js

@@ -58,10 +58,7 @@ export const algoMap = {
 	Floyd: ['Floyd-Warshall', algos.Floyd],
 };
 
-const aprilFoolsAlgos = [
-	'LVA',
-	'NonLinearProbing',
-];
+const aprilFoolsAlgos = ['LVA', 'NonLinearProbing'];
 export const algoList = [
 	...(isAprilFools ? aprilFoolsAlgos : []),
 	'Lists',

src/algo/Hash.js

@@ -355,7 +355,7 @@ export default class Hash extends Algorithm {
 			const labelID1 = this.nextIndex++;
 			const labelID2 = this.nextIndex++;
 			const highlightID = this.nextIndex++;
-			const index = ((parseInt(input) % this.table_size) + this.table_size)  % this.table_size;
+			const index = ((parseInt(input) % this.table_size) + this.table_size) % this.table_size;
 			this.currHash = parseInt(input);
 
 			this.cmd(

src/components/HomeScreen/SearchFilter.js

@@ -6,7 +6,16 @@ const SearchFilter = React.memo(function SearchFilter({ filteredAlgoList }) {
 	return filteredAlgoList.length ? (
 		filteredAlgoList.map((name, idx) =>
 			name === '---' ? (
-				<hr key={`divider-${idx}`} style={{ width: '90%', border: '3px solid #ccc', margin: '10px auto', marginBottom: '2%', marginRight: '2%' }} />
+				<hr
+					key={`divider-${idx}`}
+					style={{
+						width: '90%',
+						border: '3px solid #ccc',
+						margin: '10px auto',
+						marginBottom: '2%',
+						marginRight: '2%',
+					}}
+				/>
 			) : (
 				algoMap[name] && (
 					<Link to={`/${name}`} key={idx} style={{ textDecoration: 'none' }}>

src/css/AlgoScreen.css

@@ -652,7 +652,7 @@ input[type='checkbox'] {
 /* Modal Tabs */
 .modal-tabs {
 	display: flex;
-	gap: 20px;
+	gap: 5px;
 	margin-bottom: 20px;
 	border-bottom: 1px solid var(--border);
 	padding-bottom: 10px;
@@ -667,6 +667,7 @@ input[type='checkbox'] {
 	font-size: 16px;
 	cursor: pointer;
 	transition: all 0.2s ease;
+	display: flex;
 	border-bottom: 2px solid transparent;
 }
 
@@ -711,6 +712,10 @@ input[type='checkbox'] {
 	padding: 0;
 }
 
+.tab-text {
+	padding-left: 0.3rem;
+}
+
 .code-toggle-button:hover {
 	transform: scale(1.1);
 	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);

src/modals/InfoModals.js

@@ -80,9 +80,7 @@ const Modals = {
 			<li>The best case is when we have a sorted array (terminates if no swaps are made)</li>
 			<li>
 				The worst case is when we have a reverse sorted array (we perform
-				<span className="equation">
-					n + (n - 1) + (n - 2) + ... = n²
-				</span>
+				<span className="equation">n + (n - 1) + (n - 2) + ... = n²</span>
 				comparisons)
 			</li>
 		</ul>
@@ -120,9 +118,7 @@ const Modals = {
 			<li>The best case is when we have a sorted array (terminates if no swaps are made)</li>
 			<li>
 				The worst case is when we have a reverse sorted array (we perform
-				<span className="equation">
-					n + (n - 1) + (n - 2) + ... = n²
-				</span>
+				<span className="equation">n + (n - 1) + (n - 2) + ... = n²</span>
 				comparisons)
 			</li>
 			<li>
@@ -151,9 +147,7 @@ const Modals = {
 			<li>The best case is when we have a sorted array (terminates if no swaps are made)</li>
 			<li>
 				The worst case is when we have a reverse sorted array (we perform
-				<span className="equation">
-					n + (n - 1) + (n - 2) + ... = n²
-				</span>
+				<span className="equation">n + (n - 1) + (n - 2) + ... = n²</span>
 				comparisons)
 			</li>
 		</ul>

src/screens/HomeScreen.js

@@ -91,7 +91,6 @@ const HomeScreen = ({ theme, toggleTheme }) => {
 						path="*"
 						element={
 							<>
-								<FinalsBanner></FinalsBanner>
 								<div className="outer-flex">
 									{/* Side Navigator*/}
 									<div className="side-panel">