feat: add icons to CTA buttons

vault-developer · Aug 31, 2024 · 099aca3 · 099aca3
1 parent 6b9a8e1
commit 099aca3
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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"