refactor: update wheel to svg (#38)

Author: vault-developer

src/components/MoonIcon/MoonIcon.tsx

@@ -23,9 +23,9 @@ function MoonIcon({
 			<path
 				d="M3.32031 11.6835C3.32031 16.6541 7.34975 20.6835 12.3203 20.6835C16.1075 20.6835 19.3483 18.3443 20.6768 15.032C19.6402 15.4486 18.5059 15.6834 17.3203 15.6834C12.3497 15.6834 8.32031 11.654 8.32031 6.68342C8.32031 5.50338 8.55165 4.36259 8.96453 3.32996C5.65605 4.66028 3.32031 7.89912 3.32031 11.6835Z"
 				stroke={textColor}
-				stroke-width="2"
-				stroke-linecap="round"
-				stroke-linejoin="round"
+				strokeWidth="2"
+				strokeLinecap="round"
+				strokeLinejoin="round"
 			/>
 		</Styled.Sun>
 	);

src/components/SunIcon/SunIcon.tsx

@@ -23,9 +23,9 @@ function SunIcon({
 			<path
 				d="M12 3V4M12 20V21M4 12H3M6.31412 6.31412L5.5 5.5M17.6859 6.31412L18.5 5.5M6.31412 17.69L5.5 18.5001M17.6859 17.69L18.5 18.5001M21 12H20M16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12Z"
 				stroke={textColor}
-				stroke-width="2"
-				stroke-linecap="round"
-				stroke-linejoin="round"
+				strokeWidth="2"
+				strokeLinecap="round"
+				strokeLinejoin="round"
 			/>
 		</Styled.Sun>
 	);

src/emotion.d.ts

@@ -22,9 +22,21 @@ declare module '@emotion/react' {
 					normal: string;
 					contrast: string;
 				};
-				primary: string;
-				secondary: string;
-				tertiary: string;
+				primary: {
+					dim: string;
+					normal: string;
+					contrast: string;
+				};
+				secondary: {
+					dim: string;
+					normal: string;
+					contrast: string;
+				};
+				tertiary: {
+					dim: string;
+					normal: string;
+					contrast: string;
+				};
 			};
 		};
 	}

src/pages/home/Home.styled.ts

@@ -8,7 +8,7 @@ import TasksQueueBase from './sections/TasksQueue/TasksQueue.tsx';
 import MicroTasksQueueBase from './sections/MicroTasksQueue/MicroTasksQueue.tsx';
 import InfoBase from './sections/Info/Info.tsx';
 import ConfiguratorBase from './sections/Configurator/Configurator.tsx';
-import EventLoopBase from './sections/Wheel/Wheel.tsx';
+import EventLoopBase from 'pages/home/sections/EventLoop/EventLoop.tsx';
 
 export const sharedColumnStyles = ({ theme }: { theme: Theme }) => css`
 	display: flex;

…ages/home/sections/Wheel/Wheel.modal.tsx …e/sections/EventLoop/EventLoop.modal.tsxsrc/pages/home/sections/Wheel/Wheel.modal.tsx renamed to src/pages/home/sections/EventLoop/EventLoop.modal.tsx src/pages/home/sections/Wheel/Wheel.modal.tsx renamed to src/pages/home/sections/EventLoop/EventLoop.modal.tsx

@@ -1,7 +1,7 @@
-import * as Styled from './Wheel.styled.ts';
+import * as Styled from './EventLoop.styled.ts';
 import InfoModal from 'components/Modal/Modal.tsx';
 
-function WheelModal({
+function EventLoopModal({
 	isOpened,
 	toggle,
 }: {
@@ -38,4 +38,4 @@ function WheelModal({
 	);
 }
 
-export default WheelModal;
+export default EventLoopModal;

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

@@ -0,0 +1,17 @@
+import styled from '@emotion/styled';
+import InfoClosed from 'components/CloseIcon/InfoIcon.tsx';
+
+export const CloseIcon = styled(InfoClosed)`
+	position: absolute;
+	top: 16px;
+	right: 16px;
+`;
+
+export const EventLoopBody = styled.div`
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	flex: 1;
+	padding-top: 10px;
+`;

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

@@ -0,0 +1,24 @@
+import * as Styled from './EventLoop.styled.ts';
+import InfoIcon from 'components/InfoIcon/InfoIcon.tsx';
+import useBoolean from 'utils/hooks/useBoolean.ts';
+import { BaseLayoutElement } from 'pages/home/Home.styled.ts';
+import { EVENT_LOOP_ID } from 'utils/constants.ts';
+import EventLoopModal from './EventLoop.modal.tsx';
+import Wheel from 'pages/home/sections/EventLoop/Wheel/Wheel.tsx';
+
+function EventLoop({ className }: { className?: string }) {
+	const [isOpened, toggle] = useBoolean(false);
+
+	return (
+		<BaseLayoutElement className={className}>
+			<p id={EVENT_LOOP_ID}>Event Loop</p>
+			<Styled.EventLoopBody>
+				<InfoIcon onClick={toggle} />
+				<Wheel />
+				<EventLoopModal isOpened={isOpened} toggle={toggle} />
+			</Styled.EventLoopBody>
+		</BaseLayoutElement>
+	);
+}
+
+export default EventLoop;

…pages/home/sections/Wheel/Wheel.types.ts …me/sections/EventLoop/EventLoop.types.tssrc/pages/home/sections/Wheel/Wheel.types.ts renamed to src/pages/home/sections/EventLoop/EventLoop.types.ts src/pages/home/sections/Wheel/Wheel.types.ts renamed to src/pages/home/sections/EventLoop/EventLoop.types.ts

@@ -1,4 +1,4 @@
-import { EventInterface } from './Wheel.types.ts';
+import { EventInterface } from '../EventLoop.types.ts';
 
 export const events: EventInterface[] = [
 	{

…/pages/home/sections/Wheel/Wheel.data.ts …e/sections/EventLoop/Wheel/Wheel.data.tssrc/pages/home/sections/Wheel/Wheel.data.ts renamed to src/pages/home/sections/EventLoop/Wheel/Wheel.data.ts src/pages/home/sections/Wheel/Wheel.data.ts renamed to src/pages/home/sections/EventLoop/Wheel/Wheel.data.ts

@@ -1,6 +1,5 @@
 import styled from '@emotion/styled';
 import { css } from '@emotion/react';
-import InfoClosed from 'components/CloseIcon/InfoIcon.tsx';
 
 export const CircleContainer = styled.div(
 	({ theme }) => css`
@@ -79,18 +78,3 @@ export const Sector = styled.div<{
 		}
 	`;
 });
-
-export const CloseIcon = styled(InfoClosed)`
-	position: absolute;
-	top: 16px;
-	right: 16px;
-`;
-
-export const EventLoopBody = styled.div`
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	flex: 1;
-	padding-top: 10px;
-`;