Merge branch 'using-react' of...

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

client/public/index.html

@@ -13,6 +13,9 @@
         content="ryoko is a project planning tool created for developers to organize their tasks effectively">
     <meta name="name" content="ryoko | plan your projects like a journey">
     <meta property="og:title" content="Try planning your next project with ryoko!">
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+    <link href="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" rel="stylesheet"> 
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
     <title>ryoko | plan your projects like a journey</title>
 </head>
 

client/public/manifest.json

@@ -16,6 +16,12 @@
             "src": "logo512.png",
             "type": "image/png",
             "sizes": "512x512"
+        },
+        {
+            "src": "logo192_maskable.png",
+            "type": "image/png",
+            "sizes": "192x192",
+            "purpose": "any maskable"
         }
     ],
     "start_url": ".",

client/src/App.tsx

 
-import React from 'react';
+import { Suspense, lazy } from 'react';
 import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
 
-import Home from 'pages/Home';
-import Login from 'pages/Login';
+const Home = lazy(() => import('pages/Home'));
+const Login = lazy(() => import('pages/Login'));
 
 export default function App() {
     return (
         <Router>
-            <Switch>
-                <Route path="/login" component={Login} />
-                <Route path="/" component={Home} />
-            </Switch>
+            <Suspense fallback={false}>
+                <Switch>
+                    <Route path="/login" component={Login} />
+                    <Route path="/" component={Home} />
+                </Switch>
+            </Suspense>
         </Router>
     );
 }

client/src/components/graphs/CircularProgress/circular-progress.scss

+
 .circular-progress {
     path {
-        stroke-width: 20;
+        stroke-width: 8;
         stroke-linecap: round;
         stroke: url(#gradient);
         fill: none;
@@ -9,6 +10,7 @@
     circle {
         fill: none;
         stroke: #dcdcdc;
-        stroke-width: 20;
+        stroke-width: 8;
     }
-}
\ No newline at end of file
+}
+

client/src/components/graphs/CircularProgress/index.tsx

 
-import React from "react";
-
 import './circular-progress.scss';
 
+const CIRCLE_RADUIS = 30;
+const CIRCLE_CENTER = [ 35, 35 ];
+
 interface Props {
     percent: number
 }
 
 export default function CircularProgress({ percent }: Props) {
-    const angle = Math.min(Math.max(percent, 0), 99.9) / 100 * 2 * Math.PI;
+    const angle = Math.min(Math.max(percent / 100, 0), 0.99) * 2 * Math.PI;
     const largeFlag = angle > Math.PI ? 1 : 0;
-    const xEndPosition = 110 + 100 * Math.cos(angle - Math.PI / 2);
-    const yEndPosition = 110 + 100 * Math.sin(angle - Math.PI / 2);
-
+    const xEndPosition = CIRCLE_CENTER[0] + CIRCLE_RADUIS * Math.cos(angle - Math.PI / 2);
+    const yEndPosition = CIRCLE_CENTER[1] + CIRCLE_RADUIS * Math.sin(angle - Math.PI / 2);
     return (
         <div className="circular-progress">
             <span className="percent">{percent} %</span>
-            <svg viewBox="0 0 220 220">
-                <circle cx="110" cy="110" r="100" />
+            <svg>
+                <circle cx={CIRCLE_CENTER[0]} cy={CIRCLE_CENTER[1]} r={CIRCLE_RADUIS} />
                 <path d={
-                    `M 110 10 A 100 100 0 ${largeFlag} 1 ${xEndPosition} ${yEndPosition}`
+                    `M ${CIRCLE_CENTER[0]} ${CIRCLE_CENTER[1] - CIRCLE_RADUIS}`
+                    + `A ${CIRCLE_RADUIS} ${CIRCLE_RADUIS} 0 ${largeFlag} 1 ${xEndPosition} ${yEndPosition}`
                 }></path>
                 <defs>
                     <linearGradient xmlns="http://www.w3.org/2000/svg" id="gradient"

client/src/components/ui/Button/button.scss

+
 @use 'styles/settings';
 @use 'styles/functions';
 
@@ -12,6 +13,8 @@
     color: settings.$white;
     text-transform: uppercase;
     user-select: none;
+    appearance: none;
+    border: none;
 
     &:hover,
     &:focus {
@@ -25,3 +28,4 @@
         transform: scale(0.9);
     }
 }
+

client/src/components/ui/Button/index.tsx

 
 import { ReactNode } from "react";
-import React from "react";
 
 import './button.scss';
 
-export default function Button({children}: {children: ReactNode}) {
+interface Props {
+    children: ReactNode;
+    type?: "button" | "submit" | "reset";
+    className?: string;
+}
+
+export default function Button({children, type, className}: Props) {
     return (
-        <div className="button">
+        <button className={"button " + (className || '')} type={type}>
             {children}
-        </div>
+        </button>
     );
 }
 

client/src/components/ui/ButtonLink/button-link.scss

+
+@use 'styles/settings';
+
+.button.button-link {
+    padding: 0;
+
+    a {
+        display: inline-block;
+        padding: 14px 50px;
+
+        &, &:hover, &:active, &:focus {
+            color: settings.$white;
+        }
+    }
+}
+

client/src/components/ui/ButtonLink/index.tsx

+
+import { ReactNode } from "react";
+import {Link} from "react-router-dom";
+
+import './button-link.scss';
+import Button from "../Button";
+
+interface Props {
+    children: ReactNode;
+    href: string;
+    routing?: boolean;
+}
+
+export default function ButtonLink({children, href, routing}: Props) {
+    return (
+        <Button className="button-link">
+            { routing
+                ? <Link to={href}>{children}</Link>
+                : <a href={href}>{children}</a>
+            }
+        </Button>
+    );
+}
+

client/src/components/ui/Project/index.tsx

-import React from "react";
 
 import CircularProgress from 'components/graphs/CircularProgress';
-
 import './project.scss';
 
-interface Props {
-    status: "open" | "suspended" | "closed",
-    name: string,
-    percent: number
-}
-
-export default function Project({ status, name, percent }: Props) {
-    let tag;
-
+function ProjectTag(status: "open" | "suspended" | "closed") {
     switch (status) {
         case "open":
-            tag = (
+            return (
                 <span className="tag">
                     <i className="icon material-icons">
                         work
@@ -23,9 +13,8 @@ export default function Project({ status, name, percent }: Props) {
                     Open
                 </span>
             );
-            break;
         case "suspended":
-            tag = (
+            return (
                 <span className="tag red">
                     <i className="icon material-icons">
                         watch_later
@@ -33,12 +22,21 @@ export default function Project({ status, name, percent }: Props) {
                     Suspended
                 </span>
             );
-            break;
+        default:
+            return null;
     }
+}
+
+interface Props {
+    status: "open" | "suspended" | "closed",
+    name: string,
+    percent: number
+}
 
+export default function Project({ status, name, percent }: Props) {
     return (
         <div className="project">
-            {tag}
+            {ProjectTag(status)}
             <CircularProgress percent={percent} />
             <div className="title">{name}</div>
         </div>

client/src/components/ui/Project/project.scss

+
 @use 'styles/settings'as s;
 
 .project {
@@ -36,10 +37,12 @@
             margin-right: 4px;
             line-height: 1;
 
+            &.red {
+                background: radial-gradient(100% 1892.25% at 0% 0%, #F15154 0%, #DA2E31 100%);
+            }
         }
     }
 
-
     .title {
         margin-top: 10px;
         line-height: 1.4;
@@ -47,7 +50,6 @@
         font-weight: s.$weight-bold;
     }
 
-
     .circular-progress {
         position: relative;
         height: 70px;
@@ -62,7 +64,6 @@
             }
         }
 
-
         .percent {
             position: absolute;
             top: 50%;
@@ -78,4 +79,5 @@
         margin-top: 16px;
         line-height: 1.8;
     }
-}
\ No newline at end of file
+}
+

client/src/images/logo.svg

+<svg width="69" height="24" viewBox="0 0 69 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.776 17.76V11.6566H8.848V17.76H5.776ZM16.0217 11.6566H8.848V10.08C8.848 9.392 9.112 8.896 9.64 8.592C10.168 8.288 10.952 8.136 11.992 8.136H12.952V5.232H12.28C11.784 5.232 11.344 5.304 10.96 5.448C10.592 5.592 10.272 5.784 10 6.024C9.728 6.264 9.504 6.544 9.328 6.864C9.168 7.168 9.048 7.488 8.968 7.824H8.848V5.232H5.776V11.6566H0V23.6566H69V11.6566H65.0198C65.0208 11.5954 65.0213 11.5339 65.0213 11.472C65.0213 10.464 64.8853 9.56 64.6133 8.76C64.3413 7.96 63.9493 7.28 63.4373 6.72C62.9413 6.144 62.3333 5.704 61.6133 5.4C60.8933 5.096 60.0853 4.944 59.1893 4.944C58.2933 4.944 57.4853 5.096 56.7653 5.4C56.0613 5.704 55.4533 6.144 54.9413 6.72C54.4453 7.28 54.0613 7.96 53.7893 8.76C53.5173 9.56 53.3813 10.464 53.3813 11.472C53.3813 11.5339 53.3818 11.5954 53.3829 11.6566H49.1271L48.1467 10.08L52.4667 5.232H48.9867L46.1787 8.448L44.5227 10.704H44.4027V0H41.3307V11.6566H38.6057C38.6067 11.5954 38.6073 11.5339 38.6073 11.472C38.6073 10.464 38.4713 9.56 38.1992 8.76C37.9272 7.96 37.5353 7.28 37.0233 6.72C36.5273 6.144 35.9193 5.704 35.1992 5.4C34.4793 5.096 33.6712 4.944 32.7752 4.944C31.8792 4.944 31.0713 5.096 30.3512 5.4C29.6473 5.704 29.0392 6.144 28.5273 6.72C28.0312 7.28 27.6472 7.96 27.3752 8.76C27.1033 9.56 26.9673 10.464 26.9673 11.472C26.9673 11.5339 26.9678 11.5954 26.9688 11.6566H23.7516L25.9454 5.232H23.0654L20.9471 11.6566H18.9916L16.8734 5.232H13.8254L16.0217 11.6566ZM16.0217 11.6566H18.9916L19.0574 11.856L19.8734 15.024H20.0174L20.8814 11.856L20.9471 11.6566H23.7516L20.9054 19.992C20.7454 20.44 20.5614 20.824 20.3534 21.144C20.1614 21.48 19.9294 21.752 19.6574 21.96C19.3854 22.168 19.0574 22.32 18.6734 22.416C18.2894 22.512 17.8414 22.56 17.3294 22.56H15.4814V20.112H17.7374L18.3134 18.36L16.0217 11.6566ZM30.1833 11.6566H26.9688C26.9845 12.5916 27.12 13.4421 27.3752 14.208C27.6472 15.008 28.0312 15.696 28.5273 16.272C29.0392 16.848 29.6473 17.288 30.3512 17.592C31.0713 17.896 31.8792 18.048 32.7752 18.048C33.6712 18.048 34.4793 17.896 35.1992 17.592C35.9193 17.288 36.5273 16.848 37.0233 16.272C37.5353 15.696 37.9272 15.008 38.1992 14.208C38.4545 13.4421 38.59 12.5916 38.6057 11.6566H35.3913V10.32C35.3913 9.376 35.1593 8.656 34.6953 8.16C34.2313 7.664 33.5913 7.416 32.7752 7.416C31.9753 7.416 31.3433 7.664 30.8792 8.16C30.4153 8.656 30.1833 9.376 30.1833 10.32V11.6566ZM30.1833 11.6566H35.3913V12.648C35.3913 13.608 35.1593 14.336 34.6953 14.832C34.2313 15.328 33.5913 15.576 32.7752 15.576C31.9753 15.576 31.3433 15.328 30.8792 14.832C30.4153 14.336 30.1833 13.608 30.1833 12.648V11.6566ZM41.3307 11.6566V17.76H44.4027V13.944L46.0587 12.144L49.2747 17.76H52.9227L49.1271 11.6566H41.3307ZM56.5973 11.6566H53.3829C53.3985 12.5916 53.534 13.4421 53.7893 14.208C54.0613 15.008 54.4453 15.696 54.9413 16.272C55.4533 16.848 56.0613 17.288 56.7653 17.592C57.4853 17.896 58.2933 18.048 59.1893 18.048C60.0853 18.048 60.8933 17.896 61.6133 17.592C62.3333 17.288 62.9413 16.848 63.4373 16.272C63.9493 15.696 64.3413 15.008 64.6133 14.208C64.8686 13.4421 65.0041 12.5916 65.0198 11.6566H61.8053V10.32C61.8053 9.376 61.5733 8.656 61.1093 8.16C60.6453 7.664 60.0053 7.416 59.1893 7.416C58.3893 7.416 57.7573 7.664 57.2933 8.16C56.8293 8.656 56.5973 9.376 56.5973 10.32V11.6566ZM56.5973 11.6566H61.8053V12.648C61.8053 13.608 61.5733 14.336 61.1093 14.832C60.6453 15.328 60.0053 15.576 59.1893 15.576C58.3893 15.576 57.7573 15.328 57.2933 14.832C56.8293 14.336 56.5973 13.608 56.5973 12.648V11.6566Z" fill="url(#paint0_radial)"/>
+<defs>
+<radialGradient id="paint0_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(-11 -33) rotate(42.0643) scale(135.828)">
+<stop stop-color="#AC42FF"/>
+<stop offset="1" stop-color="#F15154"/>
+</radialGradient>
+</defs>
+</svg>

client/src/index.scss

+
 @use 'styles/settings'as s;
 @use 'styles/mixins' as mx;
 @use 'styles/functions'as fn;
@@ -48,12 +49,7 @@ a {
     padding: 20px;
 }
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
+h1, h2, h3, h4, h5, h6 {
     font-weight: s.$weight-bold;
 }
 
@@ -103,3 +99,4 @@ h4 {
         margin-bottom: fn.toRem(16);
     }
 }
+