Merge branch 'using-react' of...

Merge branch 'using-react' of gitlab.inf.unibz.it:Roland.Bernard/wie_202021_csbillero11 into using-react

client/package.json

@@ -38,8 +38,7 @@
     "scripts": {
         "start": "react-scripts start",
         "build": "react-scripts build",
-        "test": "react-scripts test",
-        "eject": "react-scripts eject"
+        "test": "react-scripts test"
     },
     "eslintConfig": {
         "extends": [

client/src/App.test.tsx → client/src/components/App/App.test.tsx

 
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import App from './components/App';
+import App from './index';
 
-test('renders learn react link', () => {
+test('app renders `Home`', () => {
     render(<App />);
-    const linkElement = screen.getByText(/Hello world!/i);
+    const linkElement = screen.getByText(/Home/i);
     expect(linkElement).toBeInTheDocument();
 });
 

client/src/components/App/app.scss

 @use 'settings.scss';
 @use 'mixins.scss';
 
+
 html {
     scroll-behavior: smooth;
 }
@@ -11,3 +12,4 @@ body {
         color: black;
     }
 }
+

client/src/components/App/index.tsx

@@ -5,7 +5,7 @@ import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
 import Home from 'components/pages/Home';
 import './app.scss';
 
-function App() {
+export default function App() {
     return (
         <Router>
             <Switch>
@@ -15,5 +15,3 @@ function App() {
     );
 }
 
-export default App;
-

client/src/components/pages/Home/index.tsx

-function Home() {
+
+export default function Home() {
     return (
         <div>
             Home
         </div>
     );
 }
-export default Home;
+

client/src/scss/functions.scss

+
 @function toRem($px) {
     @return ($px / 16px)+0rem;
 }
@@ -14,3 +15,4 @@
 @function hoverify($color) {
     @return scale-color($color, $lightness: +5%, $hue: +5%); 
 }
+

client/src/scss/mixins.scss

@@ -6,3 +6,4 @@
         @content;
     }
 }
+

client/src/scss/settings.scss

-//COLORS
+
+// Colors
 $primary: #AC42FF;
 $secondary: #F15154;
 $accent: #7DEFFF;
@@ -20,7 +21,7 @@ $radial-gradient: radial-gradient(100% 115% at 0% 0%, $primary 0%, $secondary 10
 
 $body-color: #4B4B4B;
 
-//TYPOGRAPHY
+// Typography
 $weight-light: 300;
 $weight-regular: 400;
 $weight-medium: 500;
@@ -28,10 +29,11 @@ $weight-semi-bold: 600;
 $weight-bold: 700;
 
 
-//Breakpoints
+// Breakpoints
 $breakpoints: (
     'small': 360px,
     'medium': 820px,
     'large': 1280px,
     'xlarge': 1420px
 );
+