styles fixed

package.json

@@ -14,12 +14,12 @@
   },
   "devDependencies": {
     "@cypress/react18": "^2.0.1",
-    "@mate-academy/scripts": "^1.8.5",
+    "@mate-academy/scripts": "^1.9.12",
     "@mate-academy/students-ts-config": "*",
     "@mate-academy/stylelint-config": "*",
     "@types/node": "^20.14.10",
     "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
+    "@types/react-dom": "^18.3.5",
     "@typescript-eslint/parser": "^7.16.0",
     "@vitejs/plugin-react": "^4.3.1",
     "cypress": "^13.13.0",

src/index.tsx

@@ -1,8 +1,8 @@
 import { createRoot } from 'react-dom/client';
 
-import './styles/index.css';
-import './styles/todo-list.css';
-import './styles/filters.css';
+import './styles/index.scss';
+import './styles/todo-list.scss';
+import './styles/filters.scss';
 
 import { App } from './App';
 

src/styles/index.css → src/styles/index.scss

@@ -21,5 +21,5 @@ body {
 }
 
 @import './todoapp';
-@import './todo';
-@import './filter';
+@import './todo-list';
+@import './filters';

src/styles/todo-list.css → src/styles/todo-list.scss

@@ -73,6 +73,7 @@
   &__title-field {
     width: 100%;
     padding: 11px 14px;
+    box-sizing: border-box;
 
     font-size: inherit;
     line-height: inherit;

src/styles/todoapp.scss

@@ -59,6 +59,8 @@
     width: 100%;
     padding: 16px 16px 16px 60px;
 
+    box-sizing: border-box;
+
     font-size: 24px;
     line-height: 1.4em;
     font-family: inherit;

tsconfig.json

@@ -5,6 +5,7 @@
   ],
   "compilerOptions": {
     "sourceMap": false,
+    "esModuleInterop": true,
     "types": ["node", "cypress"]
   }
 }