diff --git a/client/public/favicon.ico b/client/public/favicon.ico
index 912efa08a933c8d498a51c9290bc38d04762ec3e..bf078288292aaece16f6714e9dd1e568f0c7d803 100644
Binary files a/client/public/favicon.ico and b/client/public/favicon.ico differ
diff --git a/client/public/index.html b/client/public/index.html
index c9f7fb85f124eabaaa3052fe7ebe24ba1587e47f..c242e9d02229ab18ea8595314c9f4694c7b15f1e 100644
--- a/client/public/index.html
+++ b/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>
diff --git a/client/public/logo192.png b/client/public/logo192.png
index ed420724f89d3d97c1b6c41e1e5a6366c7f799cc..4db8ad1bfa407e4ae3d89822faca83e361b2ac13 100644
Binary files a/client/public/logo192.png and b/client/public/logo192.png differ
diff --git a/client/public/logo192_maskable.png b/client/public/logo192_maskable.png
new file mode 100644
index 0000000000000000000000000000000000000000..95b9c477e49bf3ef93d43880091c280b8b2fc744
Binary files /dev/null and b/client/public/logo192_maskable.png differ
diff --git a/client/public/logo512.png b/client/public/logo512.png
index 99e8263e748394e74e7af9bea9cf85f12161b791..068aff6d8b11abf33f9a8619eb0eb8a07b6bc85d 100644
Binary files a/client/public/logo512.png and b/client/public/logo512.png differ
diff --git a/client/public/manifest.json b/client/public/manifest.json
index abb281f37edf286de584fac3fcbf48c3adf8c0f0..6710e31fb37e273f9a227c49150857c9dcb89df0 100644
--- a/client/public/manifest.json
+++ b/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": ".",
diff --git a/client/src/App.tsx b/client/src/App.tsx
index 3ededb7b0e136224950536c2d08e2d781c9c4636..f7146e7e743b49f3b6cf95d9947edf66e645b0ab 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -1,17 +1,19 @@
-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>
);
}
diff --git a/client/src/components/graphs/CircularProgress/circular-progress.scss b/client/src/components/graphs/CircularProgress/circular-progress.scss
index 76174d0b2bf6953c14340c8b7196d4e53258482b..e9eef12d9c17724442c8fe96afa9c6dd3724a9d5 100644
--- a/client/src/components/graphs/CircularProgress/circular-progress.scss
+++ b/client/src/components/graphs/CircularProgress/circular-progress.scss
@@ -1,6 +1,7 @@
+
.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
+}
+
diff --git a/client/src/components/graphs/CircularProgress/index.tsx b/client/src/components/graphs/CircularProgress/index.tsx
index e9c2e9433e80e767879f30ef2e29ed21d56842d3..c3d71ea07227dde9a15c55bda85fa44c5c673e8a 100644
--- a/client/src/components/graphs/CircularProgress/index.tsx
+++ b/client/src/components/graphs/CircularProgress/index.tsx
@@ -1,25 +1,26 @@
-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"
diff --git a/client/src/components/ui/Button/button.scss b/client/src/components/ui/Button/button.scss
index 041831b2c16959bf4ac30e61156a68bc39db9aa3..9a1a2fbc28b92d8dffa064dfe420814b4db75c39 100644
--- a/client/src/components/ui/Button/button.scss
+++ b/client/src/components/ui/Button/button.scss
@@ -1,3 +1,4 @@
+
@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);
}
}
+
diff --git a/client/src/components/ui/Button/index.tsx b/client/src/components/ui/Button/index.tsx
index f258de2bad520aef09d56f26925b56cf41231c85..84e40f5f5f5b3300de2ff87b19f8e4fc02102845 100644
--- a/client/src/components/ui/Button/index.tsx
+++ b/client/src/components/ui/Button/index.tsx
@@ -1,14 +1,19 @@
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>
);
}
diff --git a/client/src/components/ui/ButtonLink/button-link.scss b/client/src/components/ui/ButtonLink/button-link.scss
new file mode 100644
index 0000000000000000000000000000000000000000..5ba57152f6ef1cb9275603f6859d0899801561ce
--- /dev/null
+++ b/client/src/components/ui/ButtonLink/button-link.scss
@@ -0,0 +1,16 @@
+
+@use 'styles/settings';
+
+.button.button-link {
+ padding: 0;
+
+ a {
+ display: inline-block;
+ padding: 14px 50px;
+
+ &, &:hover, &:active, &:focus {
+ color: settings.$white;
+ }
+ }
+}
+
diff --git a/client/src/components/ui/ButtonLink/index.tsx b/client/src/components/ui/ButtonLink/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..c14c24dba59cffcae06e71bbabf9635f650513b2
--- /dev/null
+++ b/client/src/components/ui/ButtonLink/index.tsx
@@ -0,0 +1,24 @@
+
+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>
+ );
+}
+
diff --git a/client/src/components/ui/Project/index.tsx b/client/src/components/ui/Project/index.tsx
index 1fab29938804aadc70ce55aa56b86f4b27141983..681e670502cfc0e1180a6c87bba70376fd830e0a 100644
--- a/client/src/components/ui/Project/index.tsx
+++ b/client/src/components/ui/Project/index.tsx
@@ -1,21 +1,11 @@
-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>
diff --git a/client/src/components/ui/Project/project.scss b/client/src/components/ui/Project/project.scss
index 4da78798b977f1140983531754d61503a7d4cc1e..f3ff9243287e53b831447b4ad62ddcb021ec908b 100644
--- a/client/src/components/ui/Project/project.scss
+++ b/client/src/components/ui/Project/project.scss
@@ -1,3 +1,4 @@
+
@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
+}
+
diff --git a/client/src/images/daniel-planoetscher.jpg b/client/src/images/daniel-planoetscher.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..847f8db013ac18dfe4c16513c16805d34e0f378e
Binary files /dev/null and b/client/src/images/daniel-planoetscher.jpg differ
diff --git a/client/src/images/logo.svg b/client/src/images/logo.svg
new file mode 100644
index 0000000000000000000000000000000000000000..8dd917c53cf2b3ff54aa95cbcd06140fbca2ea59
--- /dev/null
+++ b/client/src/images/logo.svg
@@ -0,0 +1,9 @@
+<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>
diff --git a/client/src/images/roland-bernard.jpg b/client/src/images/roland-bernard.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..1ae6796053bec2d339fd568c65321e816b382d01
Binary files /dev/null and b/client/src/images/roland-bernard.jpg differ
diff --git a/client/src/img/screen-design.jpg b/client/src/images/screen-design.jpg
similarity index 100%
rename from client/src/img/screen-design.jpg
rename to client/src/images/screen-design.jpg
diff --git a/client/src/index.scss b/client/src/index.scss
index e56b24b6f4466ba786c4718e81844f7549a3c1dd..bb88d8b95a60c942e07b6cd3c9ebdc03bc44dd13 100644
--- a/client/src/index.scss
+++ b/client/src/index.scss
@@ -1,3 +1,4 @@
+
@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);
}
}
+
diff --git a/client/src/index.tsx b/client/src/index.tsx
index 148d27d94dad2514f95aaf4346227aca3365f782..d0a74c337f7434d16570c9cce72b084bbfe908eb 100644
--- a/client/src/index.tsx
+++ b/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(
diff --git a/client/src/logo.svg b/client/src/logo.svg
deleted file mode 100644
index 020978d4d7f966e0dd9b31ce0bd9201a475823a1..0000000000000000000000000000000000000000
--- a/client/src/logo.svg
+++ /dev/null
@@ -1,58 +0,0 @@
-<?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>
diff --git a/client/src/pages/Home/home.scss b/client/src/pages/Home/home.scss
index 8cc655ba2beb16ee898411244f9a5c3270212ab9..2adbbc1d15acbf80f0ad6cc262f6ad7ef0617df4 100644
--- a/client/src/pages/Home/home.scss
+++ b/client/src/pages/Home/home.scss
@@ -1,3 +1,4 @@
+
@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;
diff --git a/client/src/pages/Home/index.tsx b/client/src/pages/Home/index.tsx
index f469a439c641a2b50940e41f31d67f2008a20f24..44b71d2382a5741d915b76d9c55322a7bff51c7d 100644
--- a/client/src/pages/Home/index.tsx
+++ b/client/src/pages/Home/index.tsx
@@ -1,6 +1,12 @@
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>
© <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>
- </>
- );
+ </>);
}
diff --git a/client/src/pages/Login/index.tsx b/client/src/pages/Login/index.tsx
index f0f758fa6b5f11a1ebc90ba098d5ceba58c393c0..bcaa2071ae578bb5278236c6786885d9bf8b7038 100644
--- a/client/src/pages/Login/index.tsx
+++ b/client/src/pages/Login/index.tsx
@@ -1,3 +1,4 @@
+
import './login.scss';
export default function Login() {
@@ -6,3 +7,4 @@ export default function Login() {
</div>
);
}
+
diff --git a/client/src/styles/fonts.css b/client/src/styles/fonts.css
deleted file mode 100644
index 9863ab89154f20b8fb8c079a2414abb9b1dbb372..0000000000000000000000000000000000000000
--- a/client/src/styles/fonts.css
+++ /dev/null
@@ -1,4 +0,0 @@
-
-@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');
-
diff --git a/client/src/styles/settings.scss b/client/src/styles/settings.scss
index a11aecfad08da1360b378d98c0216537e8904848..de925b09fc2aec1fb8b05ad76e70914706824e3d 100644
--- a/client/src/styles/settings.scss
+++ b/client/src/styles/settings.scss
@@ -1,3 +1,4 @@
+
// Colors
$primary: #AC42FF;
$secondary: #F15154;
@@ -38,3 +39,4 @@ $breakpoints: (
// General
$transition: 300ms ease;
+