feat: update styles

Author: vault-developer

src/components/Modal/Modal.styled.ts

@@ -13,6 +13,7 @@ export const StyledBox = styled(Box)(
 		padding: 40px;
 		max-width: 400px;
 		width: 90%;
+		border-radius: 8px;
 
 		@media (min-width: 768px) {
 			max-width: 480px;

src/pages/home/Home.styled.ts

@@ -67,6 +67,7 @@ export const BaseLayoutElement = styled.div(
 			border-color ${custom.sys.transitions.color};
 		margin: 0;
 		padding: 10px;
+		border-radius: 8px;
 	`
 );
 

src/pages/home/sections/Callstack/Callstack.styled.ts

@@ -22,7 +22,7 @@ export const CallstackElement = styled.div(
 		transition: background-color ${custom.sys.transitions.color};
 		animation: ${custom.sys.animations.zoomIn};
 		border: 1px solid ${custom.sys.colors.border};
-		border-radius: 5px;
+		border-radius: 4px;
 		padding: 10px;
 		word-wrap: break-word;
 		word-break: break-word;

src/pages/home/sections/Configurator/Editor/Editor.styled.ts

@@ -17,6 +17,10 @@ export const EditorWrapper = styled.div(
 			}
 		}
 
+		.ace_editor {
+			border-radius: 8px;
+		}
+
 		.ace_gutter {
 			background: ${sys.colors.onContainer.dim};
 			transition: background-color ${sys.transitions.color};

src/pages/home/sections/Console/Console.styled.ts

@@ -24,7 +24,7 @@ export const Log = styled.div(
 		transition: background-color ${sys.transitions.color};
 		animation: ${sys.animations.zoomIn};
 		border: 1px solid ${sys.colors.border};
-		border-radius: 5px;
+		border-radius: 4px;
 		padding: 10px;
 		word-wrap: break-word;
 		display: flex;

src/pages/home/sections/EventLoop/Wheel/Wheel.tsx

@@ -28,6 +28,7 @@ function Wheel() {
 		pointer: com.wheel.pointer,
 		wheel: com.wheel.background,
 		background: sys.colors.container,
+		border: sys.colors.border,
 		microtask: {
 			disabled: com.wheel.microtask.dim,
 			enabled: com.wheel.microtask.contrast,

src/pages/home/sections/MicroTasksQueue/MicroTasksQueue.styled.ts

@@ -19,7 +19,7 @@ export const MicroTask = styled.div(
 		display: flex;
 		justify-content: center;
 		align-items: center;
-		border-radius: 5px;
+		border-radius: 4px;
 		max-width: 33.33%;
 		padding: 10px;
 		word-wrap: break-word;

src/pages/home/sections/RequestAnimationFrameQueue/RequestAnimationFrameQueue.styled.ts

@@ -19,7 +19,7 @@ export const Callback = styled.div(
 		display: flex;
 		justify-content: center;
 		align-items: center;
-		border-radius: 5px;
+		border-radius: 4px;
 		max-width: 33.33%;
 		padding: 10px;
 		word-wrap: break-word;

src/pages/home/sections/TasksQueue/TasksQueue.styled.ts

@@ -23,7 +23,7 @@ export const Task = styled.div(
 		display: flex;
 		justify-content: center;
 		align-items: center;
-		border-radius: 5px;
+		border-radius: 4px;
 		max-width: 33.33%;
 		padding: 10px;
 		word-wrap: break-word;

src/pages/home/sections/WebApiQueue/WebApiTask.styled.ts

@@ -9,7 +9,7 @@ export const WebApiItem = styled.div(
 	}) => css`
 		background: ${com.queueElement.background};
 		transition: background-color ${sys.transitions.color};
-		border-radius: 5px;
+		border-radius: 4px;
 		padding: 10px;
 		position: absolute;
 		word-wrap: break-word;
@@ -33,7 +33,7 @@ export const Progress = styled.div<{ progress: number }>(
 		);
 		transition: background-color ${custom.sys.transitions.color};
 		animation: ${custom.sys.animations.zoomIn};
-		border-radius: 5px;
+		border-radius: 4px;
 		position: relative;
 		padding: 10px;
 		display: flex;