Assessment for Shopify

src/App.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
-import './App.css'
-import StopWatch from './StopWatch'
+import './App.scss'
+import StopWatch from './components/Functionalities/StopWatch'
 
 export default function App() {
     return(

src/StopWatch.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, fireEvent, screen } from '@testing-library/react';
-import StopWatch, { formatTime } from './StopWatch';
+import StopWatch, { formatTime } from './components/Functionalities/StopWatch';
 
 // Test the formatTime function
 describe('formatTime', () => {

src/components/Button/StopWatchButton.scss

@@ -0,0 +1,17 @@
+// Removing Whitespace
+*, *::before, *::after {
+    box-sizing: border-box;
+}
+
+.button {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    color: #323232;
+    background-color:#0095FF;
+    border-color:#0095FF;
+    &:hover {
+        background-color:#0065AD;
+        border-color:#0065AD;
+    }
+}

src/components/Button/StopWatchButton.tsx

@@ -0,0 +1,10 @@
+import './Button.scss';
+import React from 'react'
+
+export default function StopWatchButton() {
+    return(
+        <button type="submit" className="button">
+            <div></div>
+        </button>
+    )
+}

src/components/Functionalities/StopWatch.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+import './StopWatch.scss'
+import StopWatchButton from '../Button/StopWatchButton'
+
+export default function StopWatch() {
+    return(
+        <div className="watch__glass"></div>
+    )
+}