Merge branch 'using-react' of...

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

client/src/index.tsx

@@ -6,7 +6,6 @@ import App from 'App';
 import * as serviceWorkerRegistration from './serviceWorkerRegistration';
 import reportWebVitals from './reportWebVitals';
 
-import 'styles/fonts.css';
 import 'index.scss';
 
 ReactDOM.render(

client/src/logo.svg

-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   width="24"
-   height="24"
-   viewBox="0 0 24 24"
-   fill="none"
-   version="1.1"
-   id="svg11">
-  <metadata
-     id="metadata15">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <path
-     id="path842"
-     style="fill:url(#linearGradient867);fill-opacity:1;stroke-width:0.999998"
-     d="M 9.5898798,5.19e-4 V 9.3874012 H 14.079258 V 7.0842045 c 0,-1.0053467 0.387188,-1.7305426 1.158734,-2.1747656 0.771544,-0.444223 1.916532,-0.6649875 3.436243,-0.6649874 h 1.401326 V 5.19e-4 h -0.981784 c -0.724785,0 -1.365343,0.10352088 -1.926466,0.31394252 -0.537745,0.21042141 -1.006717,0.49123446 -1.404179,0.84193678 -0.397462,0.3507024 -0.724602,0.7596268 -0.981784,1.2272299 -0.233802,0.4442232 -0.40824,0.913196 -0.52514,1.4041796 h -0.17695 V 5.19e-4 Z M 14.079258,9.3874012 V 18.306224 H 9.5898798 V 9.3874012 H 1.1505338 V 24 H 23.106533 V 9.3874012 Z" />
-  <defs
-     id="defs9">
-    <radialGradient
-       id="paint0_radial"
-       cx="0"
-       cy="0"
-       r="1"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(100.83781,90.999894,-90.999894,100.83781,-11,-33)">
-      <stop
-         stop-color="#AC42FF"
-         id="stop4" />
-      <stop
-         offset="1"
-         stop-color="#F15154"
-         id="stop6" />
-    </radialGradient>
-    <linearGradient
-       xlink:href="#paint0_radial"
-       id="linearGradient867"
-       x1="1.1316627"
-       y1="2.6461613"
-       x2="17.162109"
-       y2="20.0625"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(1.4612599,0,0,1.4612599,-1.9717676,-5.3165262)" />
-  </defs>
-</svg>

client/src/pages/Home/home.scss

+
 @use 'styles/settings.scss'as s;
 @use 'styles/mixins.scss'as mx;
 @use 'styles/functions.scss'as fn;
@@ -139,7 +140,7 @@ header {
 
                 .inner {
                     padding-bottom: 177.77777777778%;
-                    background: url('../../img/screen-design.jpg');
+                    background: url('/images/screen-design.jpg');
                     background-size: 100% auto;
                     background-repeat: no-repeat;
                     background-position: top left;

client/src/pages/Home/index.tsx

 import Project from 'components/ui/Project';
+import ButtonLink from 'components/ui/ButtonLink';
+import Button from 'components/ui/Button';
 import './home.scss';
 
+import Logo from 'images/logo.svg';
+import ImageRoland from 'images/roland-bernard.jpg';
+import ImageDaniel from 'images/daniel-planoetscher.jpg';
+
 export default function Home() {
     return (<>
         <div className="page-container">
@@ -9,7 +15,7 @@ export default function Home() {
                     <div className="hero-container">
                         <header>
                             <a href="index.html">
-                                <img src="img/logo.svg" alt="Logo" width="100" height="35" />
+                                <img src={Logo} alt="Logo" width="100" height="35" />
                             </a>
                             <nav>
                                 <a href="#hero">Home</a>
@@ -28,7 +34,7 @@ export default function Home() {
                                 <h1>ryoko</h1>
                                 <p>Are you feeling lost with your tasks? Maximize your productivity now with ryoko.</p>
                                 <div className="button-container">
-                                    <a href="#intro" className="button">Get started</a>
+                                    <ButtonLink href="#intro">Get started</ButtonLink>
                                 </div>
                             </div>
                         </div>
@@ -50,13 +56,13 @@ export default function Home() {
                             <div className="preview-container">
                                 <div className="project-overview">
                                     <div className="small-1 project-small">
-                                        <Project status="open" name="xx" percent={5} />
+                                        <Project status="open" name="Hello world!" percent={5} />
                                     </div>
                                     <div className="small-2 project-small">
-                                        <Project status="suspended" name="xx" percent={5} />
+                                        <Project status="suspended" name="FizzBuzz" percent={33} />
                                     </div>
                                     <div className="large project-large">
-                                        <Project status="open" name="xx" percent={5} />
+                                        <Project status="open" name="Array summation" percent={78} />
                                     </div>
                                 </div>
                             </div>
@@ -101,7 +107,7 @@ export default function Home() {
                     </p>
                         <div className="team-list">
                             <div className="team-member">
-                                <img className="team-member-image" src="img/daniel-planoetscher.jpg" width="200" height="200"
+                                <img className="team-member-image" src={ImageDaniel} width="200" height="200"
                                     alt="Daniel Planötscher" />
                                 <div className="team-member-info">
                                     <div className="team-member-title">Web Developer</div>
@@ -117,7 +123,7 @@ export default function Home() {
                                 </div>
                             </div>
                             <div className="team-member">
-                                <img className="team-member-image" src="img/roland-bernard.jpg" width="200" height="200"
+                                <img className="team-member-image" src={ImageRoland} width="200" height="200"
                                     alt="Roland Bernard" />
                                 <div className="team-member-info">
                                     <h4 className="team-member-title">Software Engineer</h4>
@@ -144,7 +150,7 @@ export default function Home() {
                     </p>
                         <form className="contact-form" action="mailto:dplanoetscher@unibz.it" method="GET">
                             <div className="button-container">
-                                <button className="button submit-button" type="submit">Send</button>
+                                <Button type="submit">Send</Button>
                             </div>
                         </form>
                     </div>
@@ -153,7 +159,7 @@ export default function Home() {
             <footer>
                 <div className="content-container footer-container">
                     <div className="footer-copyright">
-                        <img src="img/logo.svg" className="logo" alt="Logo" width="70" height="24" />
+                        <img src={Logo} className="logo" alt="Logo" width="70" height="24" />
                         <p>
                             &copy; <a href="index.html">ryoko</a>, 2021
                     </p>
@@ -178,7 +184,6 @@ export default function Home() {
             <div className="bubble accent" style={{ bottom: '5%', left: '10%' }}></div>
             <div className="bubble primary" style={{ bottom: '0%', right: '0%' }}></div>
         </div>
-    </>
-    );
+    </>);
 }
 

client/src/pages/Login/index.tsx

+
 import './login.scss';
 
 export default function Login() {
@@ -6,3 +7,4 @@ export default function Login() {
         </div>
     );
 }
+

client/src/styles/fonts.css

-
-@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');
-@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
-

client/src/styles/settings.scss

+
 // Colors
 $primary: #AC42FF;
 $secondary: #F15154;
@@ -38,3 +39,4 @@ $breakpoints: (
 
 // General
 $transition: 300ms ease;
+