Sass implementation (instead of CSS)

package.json

@@ -20,6 +20,7 @@
     "react-dom": "^17.0.1",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
+    "sass": "^1.32.11",
     "typescript": "^4.1.3",
     "web-vitals": "^0.2.4",
     "workbox-background-sync": "^5.1.4",

src/App.tsx

@@ -20,7 +20,7 @@ import "@ionic/react/css/flex-utils.css";
 import "@ionic/react/css/display.css";
 
 /* Theme variables */
-import "./theme/variables.css";
+import "./theme/variables.scss";
 
 const App: React.FC = () => (
   <IonApp>

src/components/Toolbar.tsx

@@ -1,4 +1,5 @@
-// Colocar isso no App.tsx mais pra frente, coloquei no componente separado para trabalhar nas telas de cadastro e login por enquanto
+// Colocar isso no App.tsx mais pra frente, coloquei no componente separado para
+// trabalhar nas telas de cadastro e login por enquanto
 
 import {
   IonIcon,

src/index.tsx

@@ -1,22 +1,10 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
-import * as serviceWorkerRegistration from './serviceWorkerRegistration';
-import reportWebVitals from './reportWebVitals';
 
 ReactDOM.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
   document.getElementById('root')
 );
-
-// If you want your app to work offline and load faster, you can change
-// unregister() to register() below. Note this comes with some pitfalls.
-// Learn more about service workers: https://cra.link/PWA
-serviceWorkerRegistration.unregister();
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();

src/pages/Home.tsx

@@ -6,12 +6,12 @@ import {
   IonImg,
   IonLabel,
 } from "@ionic/react";
-import "./Home.css";
+import "./Home.scss";
 
 const Home: React.FC = () => {
   return (
     <IonPage className="page">
-      <IonContent fullscreen>
+      <IonContent fullscreen className="gg">
         <IonImg src={"assets/icon/icon.svg"} className="img" />
 
         <IonTitle className="title" color="primary">

src/pages/Tabs/Register1_NameMail.tsx

@@ -1,42 +1,50 @@
-import React, { useState } from 'react';
-import { 
-IonContent,
-IonPage,
-IonTitle,
-IonInput,
-IonButton,
-IonItem } from '@ionic/react';
-import "./Register1_NameMail.css";
+import React, { useState } from "react";
+import {
+  IonContent,
+  IonPage,
+  IonTitle,
+  IonInput,
+  IonButton,
+  IonItem,
+} from "@ionic/react";
+import "./Register1_NameMail.scss";
 
 const Register1_NameMail: React.FC = () => {
-
   const [mail, setMail] = useState<string>();
   const [username, setUsername] = useState<string>();
 
   return (
     <IonPage>
-
       <IonContent>
-
         <IonTitle className="title">
-        {" "}
-        Escolha seu< br/> Username email{" "}
+          {" "}
+          Escolha seu
+          <br /> Username email{" "}
         </IonTitle>
-
-          <IonItem className="input-mail">
-            <IonInput value={mail} placeholder="[email protected]" onIonChange={e => setMail(e.detail.value!)} clearInput></IonInput>
-          </IonItem>
-          <IonItem className="input-username">
-            <IonInput value={username} placeholder="a" onIonChange={e => setUsername(e.detail.value!)} clearInput></IonInput>
-          </IonItem>
 
-          <IonButton color="primary"  className="button">
+        <IonItem className="input-mail">
+          <IonInput
+            value={mail}
+            placeholder="[email protected]"
+            onIonChange={(e) => setMail(e.detail.value!)}
+            clearInput
+          ></IonInput>
+        </IonItem>
+        <IonItem className="input-username">
+          <IonInput
+            value={username}
+            placeholder="username"
+            onIonChange={(e) => setUsername(e.detail.value!)}
+            clearInput
+          ></IonInput>
+        </IonItem>
+
+        <IonButton color="primary" className="button">
           Confirmar
         </IonButton>
-
       </IonContent>
     </IonPage>
   );
 };
 
-export default Register1_NameMail;
+export default Register1_NameMail;

src/pages/Tabs/Tab1.tsx

@@ -5,7 +5,7 @@ import {
   IonTitle,
   IonToolbar,
 } from "@ionic/react";
-import "./Tab1.css";
+import "./Tab1.scss";
 
 const Tab1: React.FC = () => {
   return (

src/pages/Tabs/Tab2.tsx

@@ -14,7 +14,7 @@ import {
   IonLabel,
   IonButton,
 } from "@ionic/react";
-import "./Tab2.css";
+import "./Tab2.scss";
 import { pin, wifi, wine, warning, walk } from "ionicons/icons";
 
 const Tab2: React.FC = () => {

src/pages/Tabs/Tab3.tsx

@@ -1,5 +1,5 @@
 import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
-import './Tab3.css';
+import './Tab3.scss';
 
 const Tab3: React.FC = () => {
   return (