From 099aca3a98170350adf385e636c29a1051b71d3f Mon Sep 17 00:00:00 2001
From: Albert Trott <trott.alik@gmail.com>
Date: Sat, 31 Aug 2024 09:12:35 +0200
Subject: [PATCH] feat: add icons to CTA buttons

---
 CHANGELOG.md                           |  5 ++---
 README.md                              |  1 -
 package.json                           |  1 +
 src/components/Editor/Editor.styled.ts |  6 +++++-
 src/components/Editor/Editor.tsx       |  9 ++++++++-
 yarn.lock                              | 26 ++++++++++++++++++++++++++
 6 files changed, 42 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d27aa87..ab0f5ba 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,10 +1,9 @@
 # [1.3.0](https://github.com/vault-developer/event-loop-explorer/compare/v1.2.0...v1.3.0) (2024-08-30)
 
-
 ### Features
 
-* add debug line functionality ([fa77356](https://github.com/vault-developer/event-loop-explorer/commit/fa77356f8984922eb062d7c9e2528d411092843c))
-* add selected line ([edcb8ea](https://github.com/vault-developer/event-loop-explorer/commit/edcb8ea879676014e4c7b83ee897b164be6b0766))
+- add debug line functionality ([fa77356](https://github.com/vault-developer/event-loop-explorer/commit/fa77356f8984922eb062d7c9e2528d411092843c))
+- add selected line ([edcb8ea](https://github.com/vault-developer/event-loop-explorer/commit/edcb8ea879676014e4c7b83ee897b164be6b0766))
 
 # [1.2.0](https://github.com/vault-developer/event-loop-explorer/compare/v1.1.0...v1.2.0) (2024-08-29)
 
diff --git a/README.md b/README.md
index a09c7d1..6a86aeb 100644
--- a/README.md
+++ b/README.md
@@ -43,7 +43,6 @@ yarn dev
 
 ### Future Plans:
 
-- [ ] add icons to CTAs in the editor;
 - [ ] throw error if not implemented node is used;
 - [ ] handle `new Promise((res) => {res(console.log(4))})`;
 - [ ] circle animation is lugging;
diff --git a/package.json b/package.json
index 5ccd0d6..78fdb69 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
 		"@eslint/compat": "^1.1.1",
 		"@eslint/eslintrc": "^3.1.0",
 		"@eslint/js": "^9.9.1",
+		"@mui/icons-material": "^6.0.1",
 		"@mui/material": "^5.16.7",
 		"@mui/styled-engine": "npm:@mui/styled-engine-sc@latest",
 		"@mui/styled-engine-sc": "6.0.0-alpha.18",
diff --git a/src/components/Editor/Editor.styled.ts b/src/components/Editor/Editor.styled.ts
index fb6a266..2864283 100644
--- a/src/components/Editor/Editor.styled.ts
+++ b/src/components/Editor/Editor.styled.ts
@@ -16,7 +16,11 @@ export const SliderWrapper = styled.div`
 `;
 
 export const CTAButton = styled(Button)`
-	min-width: 120px;
+	display: flex;
+	gap: 2px;
+	align-items: center;
+	min-width: 100px;
+	padding: 6px;
 `;
 
 export const ButtonsWrapper = styled.div`
diff --git a/src/components/Editor/Editor.tsx b/src/components/Editor/Editor.tsx
index 834fd64..4faa31d 100644
--- a/src/components/Editor/Editor.tsx
+++ b/src/components/Editor/Editor.tsx
@@ -19,6 +19,9 @@ import {
 	Slider,
 } from '@mui/material';
 import * as Styled from './Editor.styled.ts';
+import PlayArrowIcon from '@mui/icons-material/PlayArrow';
+import StopIcon from '@mui/icons-material/Stop';
+import PauseIcon from '@mui/icons-material/Pause';
 
 const codeByTitle = codeExamples.reduce(
 	(acc, { title, code }) => {
@@ -119,7 +122,8 @@ function EditorComponent() {
 							</FormControl>
 						</Styled.SelectWrapper>
 						<Styled.CTAButton variant="contained" onClick={onRun}>
-							run code
+							<PlayArrowIcon />
+							run
 						</Styled.CTAButton>
 					</>
 				)}
@@ -143,17 +147,20 @@ function EditorComponent() {
 						</Styled.SliderWrapper>
 						<Styled.ButtonsWrapper>
 							<Styled.CTAButton variant="contained" onClick={onStop}>
+								<StopIcon />
 								stop
 							</Styled.CTAButton>
 
 							{status === 'paused' && (
 								<Styled.CTAButton variant="contained" onClick={onResume}>
+									<PlayArrowIcon />
 									resume
 								</Styled.CTAButton>
 							)}
 
 							{status === 'running' && (
 								<Styled.CTAButton variant="contained" onClick={onPause}>
+									<PauseIcon />
 									pause
 								</Styled.CTAButton>
 							)}
diff --git a/yarn.lock b/yarn.lock
index adddf84..6697569 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -206,6 +206,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/runtime@npm:^7.25.0":
+  version: 7.25.6
+  resolution: "@babel/runtime@npm:7.25.6"
+  dependencies:
+    regenerator-runtime: "npm:^0.14.0"
+  checksum: 10c0/d6143adf5aa1ce79ed374e33fdfd74fa975055a80bc6e479672ab1eadc4e4bfd7484444e17dd063a1d180e051f3ec62b357c7a2b817e7657687b47313158c3d2
+  languageName: node
+  linkType: hard
+
 "@babel/template@npm:^7.25.0":
   version: 7.25.0
   resolution: "@babel/template@npm:7.25.0"
@@ -777,6 +786,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@mui/icons-material@npm:^6.0.1":
+  version: 6.0.1
+  resolution: "@mui/icons-material@npm:6.0.1"
+  dependencies:
+    "@babel/runtime": "npm:^7.25.0"
+  peerDependencies:
+    "@mui/material": ^6.0.1
+    "@types/react": ^17.0.0 || ^18.0.0 || ^19.0.0
+    react: ^17.0.0 || ^18.0.0 || ^19.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10c0/fac4c194e4ac37f695be7f694cbbd240975326daba2ca24a2c9997e06c9d1bf7bd7fa8d4f0cf08216c4320b97235434eb3661dcce1c70bc0d7c521fd4d0a7b6a
+  languageName: node
+  linkType: hard
+
 "@mui/material@npm:^5.16.7":
   version: 5.16.7
   resolution: "@mui/material@npm:5.16.7"
@@ -3285,6 +3310,7 @@ __metadata:
     "@eslint/compat": "npm:^1.1.1"
     "@eslint/eslintrc": "npm:^3.1.0"
     "@eslint/js": "npm:^9.9.1"
+    "@mui/icons-material": "npm:^6.0.1"
     "@mui/material": "npm:^5.16.7"
     "@mui/styled-engine": "npm:@mui/styled-engine-sc@latest"
     "@mui/styled-engine-sc": "npm:6.0.0-alpha.18"