diff --git a/client/public/favicon.ico b/client/public/favicon.ico
index bf078288292aaece16f6714e9dd1e568f0c7d803..f645873e9ec75031952812850e1214e2c691610f 100644
Binary files a/client/public/favicon.ico and b/client/public/favicon.ico differ
diff --git a/client/public/logo192.png b/client/public/logo192.png
index 4db8ad1bfa407e4ae3d89822faca83e361b2ac13..27f561a480a66b1e2481ce6ac67088f5cc32f562 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
index 95b9c477e49bf3ef93d43880091c280b8b2fc744..990aca4489e3cdd2023c74f02fae1c186f77acae 100644
Binary files a/client/public/logo192_maskable.png and b/client/public/logo192_maskable.png differ
diff --git a/client/public/logo512.png b/client/public/logo512.png
index 068aff6d8b11abf33f9a8619eb0eb8a07b6bc85d..3d8b009647db7dc9a533b43c74fd87ca271449c9 100644
Binary files a/client/public/logo512.png and b/client/public/logo512.png differ
diff --git a/client/src/App.tsx b/client/src/App.tsx
index 769f65a2320ba3556f72f14de807d576180d77c0..555773112fe49ce6acebe28cecb6aa970677e543 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -6,7 +6,7 @@ import AppWrapper from 'pages/AppWrapper';
import LoginRoute from 'components/helpers/LoginRoute';
import ProtectedRoute from 'components/helpers/ProtectedRoute';
-const Home = lazy(() => import('pages/Home'));
+const Landing = lazy(() => import('pages/Landing'));
const Login = lazy(() => import('pages/Login'));
const Register = lazy(() => import('pages/Register'));
const Introduction = lazy(() => import('pages/Introduction'));
@@ -20,7 +20,7 @@ export default function App() {
<LoginRoute path="/register" component={Register} />
<Route path="/introduction" component={Introduction} />
<ProtectedRoute path={['/tasks', '/projects', '/stats', '/teams', '/settings']} component={AppWrapper} />
- <Route path="/" component={Home} />
+ <Route path="/" component={Landing} />
</Switch>
</Suspense>
</Router>
diff --git a/client/src/components/forms/AssignForm/index.tsx b/client/src/components/forms/AssignForm/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..3561612317914a54104511ed4baeff697f696d98
--- /dev/null
+++ b/client/src/components/forms/AssignForm/index.tsx
@@ -0,0 +1,48 @@
+
+import { useCallback, useState } from "react";
+
+import Popup from 'components/ui/Popup';
+import Button from 'components/ui/Button';
+import TimeInput from "components/ui/TimeInput";
+
+import '../form.scss';
+
+interface Props {
+ onAssign: (duration: number) => any;
+ initialTime?: number;
+}
+
+export default function AssignForm({ onAssign, initialTime }: Props) {
+ const [popup, setPopup] = useState(false);
+ const [selectedTime, setSelectedTime] = useState<number | undefined>(initialTime);
+
+ const addAssignee = useCallback((e) => {
+ e.preventDefault();
+ setPopup(false);
+ if (selectedTime && !Number.isNaN(selectedTime)) {
+ onAssign(selectedTime * 60);
+ } else {
+ onAssign(0);
+ }
+ }, [onAssign, selectedTime])
+
+ return <>
+ <Button className="expanded dark" onClick={() => setPopup(true)}>
+ {initialTime ? 'Change assignment' : 'Assign yourself'}
+ </Button>
+ {
+ popup && (
+ <Popup onClose={() => setPopup(false)}>
+ <form onSubmit={addAssignee}>
+ <TimeInput initialTime={initialTime && (initialTime / 60)} onChange={value => setSelectedTime(value)} />
+ <div>
+ <Button type="submit" className="expanded dark">
+ {initialTime ? 'Change assignment' : 'Assign yourself'}
+ </Button>
+ </div>
+ </form>
+ </Popup>
+ )
+ }
+ </>;
+}
diff --git a/client/src/components/forms/AssigneesForm/assignees-form.scss b/client/src/components/forms/AssigneesForm/assignees-form.scss
index 66de42f7c95e28e47e5da1524242aada28035847..1c0ddd3eeb473ff4c2d6ce30a416f74780428cfc 100644
--- a/client/src/components/forms/AssigneesForm/assignees-form.scss
+++ b/client/src/components/forms/AssigneesForm/assignees-form.scss
@@ -37,6 +37,8 @@
align-items: center;
font-size: 24px;
font-weight: s.$weight-bold;
+ height: calc(2em + 40px);
+ user-select: none;
}
}
}
diff --git a/client/src/components/forms/AssigneesForm/index.tsx b/client/src/components/forms/AssigneesForm/index.tsx
index 195bdb3190e4e19c2cceab433faf494a39ddf280..62f53dc95224ce9fdcbc64fde9670c3a9a794a98 100644
--- a/client/src/components/forms/AssigneesForm/index.tsx
+++ b/client/src/components/forms/AssigneesForm/index.tsx
@@ -2,13 +2,15 @@
import { useCallback, useEffect, useState } from "react";
import { TaskAssignment } from "adapters/task";
+import { durationFor, formatDuration } from "timely";
import Popup from 'components/ui/Popup';
import Button from 'components/ui/Button';
-import { PossibleMember } from "components/forms/TaskForm";
import TimeInput from "components/ui/TimeInput";
+import { PossibleMember } from "components/forms/TaskForm";
import './assignees-form.scss';
+import '../form.scss';
interface Props {
assignees: TaskAssignment[];
@@ -56,7 +58,9 @@ export default function AssigneesForm({ assignees, members, onNew, onDelete }: P
<div className="person">
{members.find(member => member.id === assignee.user)?.label}
</div>
- <div className="time">{assignee.time} min</div>
+ <div className="time">{
+ formatDuration(durationFor(assignee.time, 'minute'), 'second', 2, true)
+ }</div>
<div className="delete" onClick={() => removeAssignee(assignee.user)}>
<span className="material-icons">
clear
@@ -76,18 +80,20 @@ export default function AssigneesForm({ assignees, members, onNew, onDelete }: P
{
addNew && (
<Popup onClose={() => setAddNew(false)}>
- <select onChange={(e) => setSelectedMember(e.target.value)}>
- <option value="">Please select a user</option>
- {
- possibleMembers.map((member) => (
- <option value={member.id} key={member.id}>{member.label}</option>
- ))
- }
- </select>
- <TimeInput onChange={value => setSelectedTime(value)} />
- <Button type="submit" onClick={addAssignee} className="expanded">
- Add the assignee
- </Button>
+ <form>
+ <select onChange={(e) => setSelectedMember(e.target.value)}>
+ <option value="" selected disabled hidden>Please select a user</option>
+ {
+ possibleMembers.map((member) => (
+ <option value={member.id} key={member.id}>{member.label}</option>
+ ))
+ }
+ </select>
+ <TimeInput onChange={value => setSelectedTime(value)} />
+ <Button type="submit" onClick={addAssignee} className="expanded">
+ Add the assignee
+ </Button>
+ </form>
</Popup>
)
}
diff --git a/client/src/components/forms/ContactForm/contact-form.scss b/client/src/components/forms/ContactForm/contact-form.scss
index 684c843dc729bf63ff9748d541d12faa72bc44f1..39ab97b9a3946dc2308c786a0dec6ed6648d2dd6 100644
--- a/client/src/components/forms/ContactForm/contact-form.scss
+++ b/client/src/components/forms/ContactForm/contact-form.scss
@@ -1,6 +1,5 @@
-
-@use 'styles/settings' as s;
-@use 'styles/mixins' as mx;
+@use 'styles/settings'as s;
+@use 'styles/mixins'as mx;
.contact-form {
.fields {
@@ -11,19 +10,12 @@
&.textarea {
width: 100%;
}
-
- .input-field {
- input, textarea {
- background-color: #ffffff20;
- color: white;
- }
- }
}
.submit-button {
appearance: none;
border: none;
- margin: 0.5rem;
+ margin: 0;
}
.button-container {
@@ -31,5 +23,4 @@
width: 100%;
justify-content: flex-end;
}
-}
-
+}
\ No newline at end of file
diff --git a/client/src/components/forms/LoginForm/index.tsx b/client/src/components/forms/LoginForm/index.tsx
index 64a1619fcd0e745309e87f7102be112cda9c3650..3b38f0f8e58f6fffc7ab41b72ef0a416c9f24926 100644
--- a/client/src/components/forms/LoginForm/index.tsx
+++ b/client/src/components/forms/LoginForm/index.tsx
@@ -6,6 +6,7 @@ import TextInput from 'components/ui/TextInput';
import LoadingScreen from 'components/ui/LoadingScreen';
import './login-form.scss';
+import '../form.scss';
interface Props {
onSubmit?: (username: string, password: string) => Promise<void>
diff --git a/client/src/components/forms/MemberForm/UsernameForm.tsx b/client/src/components/forms/MemberForm/UsernameForm.tsx
index 7ae3f4b8fe2c17a102ec93bdd2cb17ef40c0dbca..325291fe3ab5243a8fd85fc20c54963661ced663 100644
--- a/client/src/components/forms/MemberForm/UsernameForm.tsx
+++ b/client/src/components/forms/MemberForm/UsernameForm.tsx
@@ -31,7 +31,7 @@ export default function UsernameForm({ setResult }: Props) {
name="name"
onChange={setUsername}
/>
- <Button type="submit">
+ <Button type="submit" className="expanded">
Add user
</Button>
</form >
diff --git a/client/src/components/forms/MemberForm/index.tsx b/client/src/components/forms/MemberForm/index.tsx
index 2460d31d48c6829864c8350ea941b81dc2629fb4..e7b04777a33d1d35de004970122de134c2b883b1 100644
--- a/client/src/components/forms/MemberForm/index.tsx
+++ b/client/src/components/forms/MemberForm/index.tsx
@@ -9,6 +9,7 @@ import RoleForm from 'components/forms/RoleForm';
import UsernameForm from 'components/forms/MemberForm/UsernameForm';
import './member-form.scss';
+import '../form.scss';
interface Props {
roles: TeamRole[];
diff --git a/client/src/components/forms/ProjectForm/index.tsx b/client/src/components/forms/ProjectForm/index.tsx
index 6383c5a9b515848941ae957ffa76917b4538ba9a..cee5a1b4b6d0c86f0edb0b4a07dcd419e6139196 100644
--- a/client/src/components/forms/ProjectForm/index.tsx
+++ b/client/src/components/forms/ProjectForm/index.tsx
@@ -13,6 +13,7 @@ import CheckboxGroup from 'components/ui/CheckboxGroup';
import '../form.scss';
import './project-form.scss';
+import { formatDateShort } from 'timely';
interface Props {
project?: Project
@@ -63,7 +64,7 @@ export default function ProjectForm({ project, onSubmit }: Props) {
const [text, setText] = useState(project?.text);
const [status, setStatus] = useState(project?.status);
const [color, setColor] = useState(project?.color);
- const [deadline, setDeadline] = useState(project?.deadline?.toISOString());
+ const [deadline, setDeadline] = useState(project?.deadline ? formatDateShort(new Date(project?.deadline)) : '');
const [error, setError] = useState('');
const [loadError, setLoadError] = useState(false);
const [teams, setTeams] = useState(project?.teams ?? []);
@@ -85,7 +86,7 @@ export default function ProjectForm({ project, onSubmit }: Props) {
}
setAllTeams(teams);
})
- .catch(() => setLoadError(true))
+ .catch(() => setLoadError(true))
}, [project?.teams, loadError])
const colors = Object.values(ProjectColors);
@@ -105,6 +106,7 @@ export default function ProjectForm({ project, onSubmit }: Props) {
}
}, [onSubmit, setError, name, text, color, deadline, teams, status]);
+
return (
<form onSubmit={handleSubmit} className={'project-form theme-' + color}>
{error && <Callout message={error} />}
@@ -141,12 +143,12 @@ export default function ProjectForm({ project, onSubmit }: Props) {
status &&
<div className="field">
<label className="field-label" htmlFor="status">Status</label>
- <select id="status" defaultValue={project?.status} onChange={(e) => {
+ <select id="status" defaultValue={project?.status ?? ''} onChange={(e) => {
let currentStatus = Object.values(Status).find(s => s === e.target.value) ?? undefined;
setStatus(currentStatus);
}
}>
- <option value="">Please choose a status</option>
+ <option value="" disabled hidden>Please choose a status</option>
{
allStatus.map((s) => (
<option value={s} key={s}>{s}</option>
@@ -174,7 +176,7 @@ export default function ProjectForm({ project, onSubmit }: Props) {
<div className="teams">
<h2>Teams</h2>
<p>Which ones of your teams are working on this project</p>
- { loadError
+ {loadError
? <ErrorScreen />
: <CheckboxGroup choices={allTeams} chosen={teams} setChosen={setTeams} />
}
diff --git a/client/src/components/forms/ProjectForm/project-form.scss b/client/src/components/forms/ProjectForm/project-form.scss
index fe16091911ac724e19265c2262ccc49cc7092581..52b8dcff58eca308059147bb6924bf0512e84a11 100644
--- a/client/src/components/forms/ProjectForm/project-form.scss
+++ b/client/src/components/forms/ProjectForm/project-form.scss
@@ -22,6 +22,7 @@
position: relative;
filter: saturate(50%);
transform: scale(90%);
+ will-change: transform;
@include mx.breakpoint(small) {
width: calc(100% / 5 - 10px);
diff --git a/client/src/components/forms/RegisterForm/index.tsx b/client/src/components/forms/RegisterForm/index.tsx
index 5e7c6ba931a966d3335e6ca46662868c959a5c53..214d696a355d6ad079763de9fbe798d372885057 100644
--- a/client/src/components/forms/RegisterForm/index.tsx
+++ b/client/src/components/forms/RegisterForm/index.tsx
@@ -8,6 +8,7 @@ import TextInput from 'components/ui/TextInput';
import LoadingScreen from 'components/ui/LoadingScreen';
import './register-form.scss';
+import '../form.scss';
async function validateUsername(username: string) {
if (username?.length < 3) {
diff --git a/client/src/components/forms/RequirementsForm/index.tsx b/client/src/components/forms/RequirementsForm/index.tsx
index a1f346733e39267d8597e60b36a5068959c2337d..2052e79acbe13a06187e8cdfde87fd789445294c 100644
--- a/client/src/components/forms/RequirementsForm/index.tsx
+++ b/client/src/components/forms/RequirementsForm/index.tsx
@@ -2,6 +2,7 @@
import { useCallback, useEffect, useState } from 'react';
import { TaskRequirement } from 'adapters/task';
+import { durationFor, formatDuration } from 'timely';
import { PossibleRole } from 'components/forms/TaskForm';
import Popup from 'components/ui/Popup';
@@ -9,6 +10,7 @@ import Button from 'components/ui/Button';
import TimeInput from 'components/ui/TimeInput'
import './requirements-form.scss';
+import '../form.scss';
interface Props {
roles: PossibleRole[],
@@ -52,7 +54,9 @@ export default function RequirementsForm({ roles, requirements, onNew, onDelete
requirements.map((requirement) => (
<div className="requirement" key={requirement.role}>
<div>{roles.find(role => role.id === requirement.role)?.label}</div>
- <div>{requirement.time} min</div>
+ <div>{
+ formatDuration(durationFor(requirement.time, 'minute'), 'second', 2, true)
+ }</div>
<div className="delete" onClick={() => removeRequirement(requirement.role)}>
<span className="material-icons">
clear
@@ -72,18 +76,20 @@ export default function RequirementsForm({ roles, requirements, onNew, onDelete
{
addNew && (
<Popup onClose={() => setAddNew(false)}>
- <select onChange={(e) => setSelectedRole(e.target.value)}>
- <option value="">Please select a role</option>
- {
- possibleRoles.map((role) => (
- <option value={role.id} key={role.id}>{role.label}</option>
- ))
- }
- </select>
- <TimeInput onChange={value => setSelectedTime(value)} />
- <Button type="submit" onClick={addRequirement} className="expanded">
- Create new requirement
- </Button>
+ <form>
+ <select onChange={(e) => setSelectedRole(e.target.value)}>
+ <option value="" selected disabled hidden>Please select a role</option>
+ {
+ possibleRoles.map((role) => (
+ <option value={role.id} key={role.id}>{role.label}</option>
+ ))
+ }
+ </select>
+ <TimeInput onChange={value => setSelectedTime(value)} />
+ <Button type="submit" onClick={addRequirement} className="expanded">
+ Create new requirement
+ </Button>
+ </form>
</Popup>
)
}
diff --git a/client/src/components/forms/RequirementsForm/requirements-form.scss b/client/src/components/forms/RequirementsForm/requirements-form.scss
index e7dcfcba6f703c212d573dd1f04ba63b13390ceb..6e3aca9475b45b103aa37c1becfcfec63280118a 100644
--- a/client/src/components/forms/RequirementsForm/requirements-form.scss
+++ b/client/src/components/forms/RequirementsForm/requirements-form.scss
@@ -37,6 +37,8 @@
align-items: center;
font-size: 24px;
font-weight: s.$weight-bold;
+ height: calc(2em + 40px);
+ user-select: none;
}
}
}
diff --git a/client/src/components/forms/RoleForm/index.tsx b/client/src/components/forms/RoleForm/index.tsx
index a737a24465c3b8499ec163f947e030d28bdeda16..198b5b7fd645a0c4a7e820f104597281943af98d 100644
--- a/client/src/components/forms/RoleForm/index.tsx
+++ b/client/src/components/forms/RoleForm/index.tsx
@@ -7,6 +7,7 @@ import RoleChangeForm from 'components/forms/RoleForm/RoleChangeForm';
import RoleEditForm from 'components/forms/RoleForm/RoleEditForm';
import './role-form.scss';
+import '../form.scss'
interface Props {
roles: TeamRole[];
diff --git a/client/src/components/forms/RoleForm/role-form.scss b/client/src/components/forms/RoleForm/role-form.scss
index c13a60132d0a138184882ab68db528006eff18e2..ae0fa1b69096802d019c5c1b596bb7586a6b637a 100644
--- a/client/src/components/forms/RoleForm/role-form.scss
+++ b/client/src/components/forms/RoleForm/role-form.scss
@@ -5,8 +5,11 @@
display: flex;
flex-direction: column;
+ h2 {
+ margin-top: 0;
+ }
.role-item {
- background: s.$background-light;
+ background: s.$background-input;
border-radius: 25px;
font-size: 18px;
width: 100%;
@@ -99,6 +102,9 @@
justify-content: center;
align-items: center;
font-size: 28px;
+ margin-bottom: 24px;
+ font-size: 36px;
+ font-weight: s.$weight-semi-bold;
}
button {
@@ -109,6 +115,7 @@
.role-edit-form {
h2 {
margin-bottom: 40px;
+ margin-top: 0;
}
.button {
diff --git a/client/src/components/forms/TaskForm/index.tsx b/client/src/components/forms/TaskForm/index.tsx
index 890d4ad563f47e875c6b3dc052f75c4ebb9f431f..5de3fd176da3a7890f9982d4267a65dea7c06b83 100644
--- a/client/src/components/forms/TaskForm/index.tsx
+++ b/client/src/components/forms/TaskForm/index.tsx
@@ -185,11 +185,11 @@ export default function TaskForm({ task, onSubmit, project }: Props) {
<label className="field-label" htmlFor="status">
Priority
</label>
- <select defaultValue={priority} onChange={(e) => {
+ <select defaultValue={priority ?? ''} onChange={(e) => {
let currentPriority = Object.values(Priority).find(s => s === e.target.value) ?? undefined;
setPriority(currentPriority);
}}>
- <option value={''}>Please choose a priority</option>
+ <option value="" disabled hidden>Please choose a priority</option>
{
allPriorities.map((priority) => (
<option value={priority} key={priority}>{priority}</option>
@@ -206,16 +206,16 @@ export default function TaskForm({ task, onSubmit, project }: Props) {
</div>
<div className="col">
{
- status && (
+ task && (
<div className="field">
<label className="field-label" htmlFor="status">
Status
</label>
- <select defaultValue={status} id="status" onChange={(e) => {
+ <select defaultValue={status ?? ''} id="status" onChange={(e) => {
let currentStatus = Object.values(Status).find(s => s === e.target.value) ?? undefined;
setStatus(currentStatus);
}}>
- <option value={''}>Please choose a status</option>
+ <option value="" disabled hidden>Please choose a status</option>
{
allStatus.map((status) => (
<option value={status} key={status}>{status}</option>
diff --git a/client/src/components/forms/TeamForm/index.tsx b/client/src/components/forms/TeamForm/index.tsx
index bb6af89e55d092ea8b902a11ea5ba32b345d35eb..0bb2ad69e034711e85e51e42227d39cf57e3e7b8 100644
--- a/client/src/components/forms/TeamForm/index.tsx
+++ b/client/src/components/forms/TeamForm/index.tsx
@@ -7,6 +7,7 @@ import TextInput from 'components/ui/TextInput';
import Button from 'components/ui/Button';
import './team-create.scss';
+import '../form.scss';
interface Props {
onSubmit?: (name: string) => void;
@@ -41,15 +42,15 @@ export default function TeamForm({ onSubmit, onBack, team }: Props) {
defaultText={name}
/>
<div className="button-container">
+ <Button type="submit" className={!onBack ? 'expanded' : ''}>
+ {team ? 'Update' : 'Create'}
+ </Button>
{
onBack &&
- <Button onClick={onBack} className="hollow">
+ <Button onClick={onBack} className="dark">
Go Back
</Button>
}
- <Button type="submit" className={!onBack ? 'expanded' : ''}>
- {team ? 'Update' : 'Create'}
- </Button>
</div>
</form>
)
diff --git a/client/src/components/forms/TeamForm/team-create.scss b/client/src/components/forms/TeamForm/team-create.scss
index e8d62bf26b1dcb5d00595d602916fd7b8a6279f6..e95286dbb56e845ef936b31904a117d4c98de688 100644
--- a/client/src/components/forms/TeamForm/team-create.scss
+++ b/client/src/components/forms/TeamForm/team-create.scss
@@ -1,8 +1,18 @@
+@use 'styles/mixins.scss'as mx;
.team-form {
.button-container {
- display: flex;
- justify-content: space-around;
- }
-}
+ margin: -10px;
+ .button {
+ margin: 10px;
+ width: calc(100% - 20px);
+ }
+
+ @include mx.breakpoint(medium) {
+ display: flex;
+ justify-content: space-around;
+ flex-direction: row-reverse;
+ }
+ }
+}
\ No newline at end of file
diff --git a/client/src/components/graphs/BarChart/bar-chart.scss b/client/src/components/graphs/BarChart/bar-chart.scss
index 864912dfdcb6e270c3f27ebfadf7626dc252c365..d6adcb0f43d75b5b35026e8a7ebe768234d570bf 100644
--- a/client/src/components/graphs/BarChart/bar-chart.scss
+++ b/client/src/components/graphs/BarChart/bar-chart.scss
@@ -75,6 +75,7 @@
position: relative;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
+ transition-property: width, height;
&:hover {
opacity: 0.9;
diff --git a/client/src/components/graphs/CircularProgress/circular-progress.scss b/client/src/components/graphs/CircularProgress/circular-progress.scss
index 7bcc31ee3c76aa9c9f156e58f960cd2922c47f12..272a16284b892907e8744676e30e5fc7d9ae2568 100644
--- a/client/src/components/graphs/CircularProgress/circular-progress.scss
+++ b/client/src/components/graphs/CircularProgress/circular-progress.scss
@@ -1,6 +1,5 @@
-
-@use 'styles/settings.scss' as s;
-@use 'styles/functions.scss' as fn;
+@use 'styles/settings.scss'as s;
+@use 'styles/functions.scss'as fn;
.circular-progress {
position: relative;
@@ -34,12 +33,14 @@
svg {
width: 70px;
height: 70px;
+ transition: none !important;
path {
stroke-width: 8;
stroke-linecap: round;
stroke: url(#gradient);
fill: none;
+ transition: none !important;
}
circle {
@@ -59,5 +60,4 @@
display: flex;
margin: 0 !important;
}
-}
-
+}
\ No newline at end of file
diff --git a/client/src/components/graphs/LinearProgress/index.tsx b/client/src/components/graphs/LinearProgress/index.tsx
index 3cba0b601b241bddea9d9b47197d0a5a7d1de39c..70ea18469091af80a59354e2a8b69803c9cbf75e 100644
--- a/client/src/components/graphs/LinearProgress/index.tsx
+++ b/client/src/components/graphs/LinearProgress/index.tsx
@@ -2,13 +2,17 @@
import './linear-progress.scss';
interface Props {
- percent: number
+ percent: number;
+ color: string;
}
-export default function LinearProgress({ percent }: Props) {
+export default function LinearProgress({ percent, color }: Props) {
return (
<div className="linear-progress">
- <div className="progress" style={{width: percent + '%'}}></div>
+ <div
+ className={'progress' + (color ? ' bg-gradient-horizontal-' + color : '')}
+ style={{ width: percent + '%' }}
+ ></div>
</div>
);
}
diff --git a/client/src/components/helpers/Filter/filter.scss b/client/src/components/helpers/Filter/filter.scss
index c111333afeb2cbc710645c3b151e082de841bc45..3d7d905976a97eebcee6c2a1a180f4c6d92491a2 100644
--- a/client/src/components/helpers/Filter/filter.scss
+++ b/client/src/components/helpers/Filter/filter.scss
@@ -50,6 +50,7 @@
opacity: 0.5;
transform: scale(90%);
user-select: none;
+ will-change: transform;
.tag {
margin: 0;
diff --git a/client/src/components/helpers/Filter/index.tsx b/client/src/components/helpers/Filter/index.tsx
index c9c72e5be88a791cf1cecd3ed93964a0e807df7b..e00152a8c05621c165c976463ee8ec5b23e9b101 100644
--- a/client/src/components/helpers/Filter/index.tsx
+++ b/client/src/components/helpers/Filter/index.tsx
@@ -3,47 +3,50 @@ import Tag from 'components/ui/Tag';
import './filter.scss';
-interface Props {
- setFilter: Function;
- filter: {
- term: string;
- tags: string[];
- };
+interface Filter<Tag> {
+ term: string;
+ tags: Tag[];
+}
+
+interface Props<Tag> {
+ setFilter: (filter: Filter<Tag>) => any;
+ filter: Filter<Tag>;
tags: {
- label: string;
+ label: Tag;
color?: string;
}[];
}
-export default function Filter({ setFilter, tags, filter }: Props) {
+export default function FilterComponent<Tag extends string>({ setFilter, tags, filter }: Props<Tag>) {
return (
<div className="filter-container">
<div className="search-container">
<i className="material-icons icon">search</i>
<label htmlFor="search">Search</label>
- <input type="text" id="search" onChange={event => setFilter((prev: any) => { return { ...prev, term: event.target.value } })} />
+ <input
+ type="text"
+ id="search"
+ onChange={event => setFilter({ ...filter, term: event.target.value })}
+ autoComplete="off"
+ />
</div>
<div className="status-filter">
<h3>Filter</h3>
<div className="tags">
{
tags.map((tag) => (
- <div className={'tag-item' + (filter.tags.indexOf(tag.label) >= 0 ? ' active' : '')} key={tag.label}
+ <div className={'tag-item' + (filter.tags.includes(tag.label) ? ' active' : '')} key={tag.label}
onClick={() => {
if (filter.tags.indexOf(tag.label) >= 0) {
- setFilter((prev: any) => {
- return {
- ...prev,
- tags: prev.tags.filter((t: any) => t !== tag.label)
- }
+ setFilter({
+ ...filter,
+ tags: filter.tags.filter((t: any) => t !== tag.label)
})
} else {
- setFilter((prev: any) => {
- return {
- ...prev,
- tags: [...prev.tags, tag.label]
- }
+ setFilter({
+ ...filter,
+ tags: [...filter.tags, tag.label]
})
}
diff --git a/client/src/components/layout/DynamicBackground/background.scss b/client/src/components/layout/DynamicBackground/background.scss
deleted file mode 100644
index de0b6aa1b3382de62d6bb27df5842f6d4c22abd0..0000000000000000000000000000000000000000
--- a/client/src/components/layout/DynamicBackground/background.scss
+++ /dev/null
@@ -1,43 +0,0 @@
-
-@use 'styles/settings.scss' as s;
-@use 'styles/mixins.scss' as mx;
-
-.background-container {
- position: absolute;
- height: 100%;
- width: 100%;
- left: 0;
- top: 0;
- z-index: -1;
- overflow: hidden;
-
- .bubble {
- width: 400px;
- height: 400px;
- position: absolute;
- filter: blur(200px);
- opacity: 0.5;
- border-radius: 50%;
- z-index: -1;
-
- @include mx.breakpoint(medium) {
- width: 500px;
- height: 500px;
- filter: blur(500px);
- }
-
- @include mx.breakpoint(large) {
- width: 600px;
- height: 600px;
- }
-
- &.secondary {
- background: s.$secondary;
- }
-
- &.primary {
- background: s.$primary;
- }
- }
-}
-
diff --git a/client/src/components/layout/DynamicBackground/index.tsx b/client/src/components/layout/DynamicBackground/index.tsx
deleted file mode 100644
index 593f356b46cd33925a037cf06668ba5424b48fa4..0000000000000000000000000000000000000000
--- a/client/src/components/layout/DynamicBackground/index.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-
-import './background.scss';
-
-export default function DynamicBackground() {
- return (
- <div />
- )
-}
-
diff --git a/client/src/components/layout/Page/index.tsx b/client/src/components/layout/Page/index.tsx
index f776fdea0ab675abac775fc83f1d167c9827bc97..8832523357e8872fefc80c23c5f0d69ebacc7de6 100644
--- a/client/src/components/layout/Page/index.tsx
+++ b/client/src/components/layout/Page/index.tsx
@@ -1,8 +1,6 @@
import { ReactNode } from 'react';
-import DynamicBackground from 'components/layout/DynamicBackground';
-
import './page.scss';
interface Props {
@@ -15,7 +13,6 @@ export default function Page({ children, className }: Props) {
<main className={'page-container ' + (className ?? '')}>
{children}
</main>
- <DynamicBackground />
</>);
}
diff --git a/client/src/components/layout/Page/page.scss b/client/src/components/layout/Page/page.scss
index 156969843d416c0e17e7e0cc3f665bf91404d9df..e5f3a6592b50944ddad2ee5c6b95c388c4c06a8b 100644
--- a/client/src/components/layout/Page/page.scss
+++ b/client/src/components/layout/Page/page.scss
@@ -13,8 +13,9 @@ body {
max-width: 1540px;
min-height: 100vh;
margin: 0 auto;
- background: rgba(s.$background-white-rgb, 0.5);
+ background: rgba(s.$background-white-rgb, 0.25);
padding-bottom: 80px;
+ overflow: hidden;
@include mx.breakpoint(xlarge) {
min-height: calc(100vh - 5rem);
diff --git a/client/src/components/layout/ProjectsSlider/projects-slider.scss b/client/src/components/layout/ProjectsSlider/projects-slider.scss
index 2be092d050d22b2e63c5535c6b8d1dab71bbedd7..f7fe226012f98917a868fbb44c92b4a3e563d257 100644
--- a/client/src/components/layout/ProjectsSlider/projects-slider.scss
+++ b/client/src/components/layout/ProjectsSlider/projects-slider.scss
@@ -6,7 +6,7 @@
overflow: hidden;
white-space: nowrap;
padding: 30px 30px;
- margin: -30px -30px;
+ margin: -30px -42px;
position: relative;
.prev-button, .next-button {
@@ -51,14 +51,14 @@
width: calc(50% - 24px);
}
- @include mx.breakpoint(xlarge) {
+ @include mx.breakpoint(large) {
width: calc(33.3% - 24px);
}
}
@include mx.breakpoint(large) {
padding: 30px 90px;
- margin: -30px -90px;
+ margin: -30px -102px;
.prev-button {
left: 70px;
diff --git a/client/src/components/navigation/Sidebar/sidebar.scss b/client/src/components/navigation/Sidebar/sidebar.scss
index c454a044555d7cebf63a872d6d9bb545038ed9f3..eb03d8d0ffcd9cb93f4a1c41e8ed639f3bc4d71d 100644
--- a/client/src/components/navigation/Sidebar/sidebar.scss
+++ b/client/src/components/navigation/Sidebar/sidebar.scss
@@ -18,7 +18,7 @@
visibility: hidden;
padding: 50px 30px;
color: s.$white;
- overflow: auto;
+ overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-between;
@@ -153,6 +153,16 @@
background: s.$white;
}
}
+
+ @media screen and (max-height: 750px) {
+ display: none
+ }
+
+ @include mx.breakpoint(medium) {
+ @media screen and (max-height: 950px) {
+ display: none
+ }
+ }
}
}
diff --git a/client/src/components/navigation/Tabs/index.tsx b/client/src/components/navigation/Tabs/index.tsx
index 5f053b8e9862d81b095cfac6601ad1045a6f37c3..92394265038d844841dbcc33081641b67974419d 100644
--- a/client/src/components/navigation/Tabs/index.tsx
+++ b/client/src/components/navigation/Tabs/index.tsx
@@ -6,7 +6,7 @@ import './tabs.scss';
export interface Tab {
label: string;
- route: string;
+ route: string | string[];
link?: string;
component: ReactNode
}
@@ -24,7 +24,7 @@ export default function Tabs({ tabs }: Props) {
key={tab.label}
className="tab"
activeClassName="active"
- to={tab.link ?? tab.route}
+ to={tab.link ?? (typeof tab.route === 'string' ? tab.route : tab.route[0])}
isActive={(_, location) =>
matchPath(location.pathname, { path: tab.route, exact: true })
? true
diff --git a/client/src/components/navigation/Tabs/tabs.scss b/client/src/components/navigation/Tabs/tabs.scss
index 3d32c4ac3116fdd69fde92da5a05e6af6011f2e5..644e1d641cefa3b9e06830846aebbca4e376e456 100644
--- a/client/src/components/navigation/Tabs/tabs.scss
+++ b/client/src/components/navigation/Tabs/tabs.scss
@@ -1,5 +1,4 @@
-
-@use 'styles/settings.scss' as s;
+@use 'styles/settings.scss'as s;
.tabs-container {
display: flex;
@@ -70,6 +69,6 @@
width: calc(50% - 20px);
border-radius: 15px;
box-shadow: 0 0 5px rgba(s.$black, 0.05);
+ transition: left 300ms ease;
}
-}
-
+}
\ No newline at end of file
diff --git a/client/src/components/ui/AssigneeList/assignee-list.scss b/client/src/components/ui/AssigneeList/assignee-list.scss
index 3fd3ca1a77bc425cce07b30e79c18d1cf32b4d76..de02deada400d903ba94e136b48b0e95970757b2 100644
--- a/client/src/components/ui/AssigneeList/assignee-list.scss
+++ b/client/src/components/ui/AssigneeList/assignee-list.scss
@@ -3,21 +3,15 @@
.assignee-list {
display: flex;
- margin-left: 16px;
-
- &:hover {
- .assignee {
- margin-left: 0;
- }
- }
+ margin-left: 4px;
.tooltip {
- margin-left: -8px;
+ margin-left: -4px;
}
.assignee,
.avatar {
- margin-left: -8px;
+ margin-left: -4px;
width: 35px;
height: 35px;
diff --git a/client/src/components/ui/Avatar/index.tsx b/client/src/components/ui/Avatar/index.tsx
index ac3a39324ba7d235c24ae5c859503f31d7f1e797..23b30320ef4211fcbb369af1baa89c97d2910291 100644
--- a/client/src/components/ui/Avatar/index.tsx
+++ b/client/src/components/ui/Avatar/index.tsx
@@ -9,6 +9,23 @@ interface Props {
user?: User;
}
+function getUserInitials(user?: User): string {
+ if (user) {
+ if (user.realname) {
+ const names = user.realname.split(/\W+/);
+ if (names.length > 1) {
+ return names[0][0] + names[names.length - 1][0];
+ } else {
+ return user.realname[0];
+ }
+ } else {
+ return user.username[0];
+ }
+ } else {
+ return '?';
+ }
+}
+
export default function Avatar({ user }: Props) {
const [error, setError] = useState(false);
const avatarSrc = user && getUserImageUri(user.id);
@@ -27,7 +44,7 @@ export default function Avatar({ user }: Props) {
{
error && (
<div className="standard-image">
- {user?.username && user.username.charAt(0)}
+ {getUserInitials(user)}
</div>
)
}
diff --git a/client/src/components/ui/Button/button.scss b/client/src/components/ui/Button/button.scss
index e35cd0ea4586258c65154294de9ed696290a1171..e3339184f8fe58e70be2a4564f116f1e77b2a677 100644
--- a/client/src/components/ui/Button/button.scss
+++ b/client/src/components/ui/Button/button.scss
@@ -15,6 +15,7 @@
appearance: none;
border: none;
outline: none;
+ will-change: transform;
&.expanded {
width: 100%;
diff --git a/client/src/components/ui/Button/index.tsx b/client/src/components/ui/Button/index.tsx
index ae3a5eea0637a69f6446a762ff63cb90606c1e15..50c5053c72448f331da852db8d93ca39ff92c92c 100644
--- a/client/src/components/ui/Button/index.tsx
+++ b/client/src/components/ui/Button/index.tsx
@@ -7,7 +7,7 @@ interface Props {
children: ReactNode;
type?: "button" | "submit" | "reset";
className?: string;
- onClick?: MouseEventHandler
+ onClick?: MouseEventHandler;
}
export default function Button({children, type, className, onClick}: Props) {
diff --git a/client/src/components/ui/Comment/comment.scss b/client/src/components/ui/Comment/comment.scss
index 74f3123669312847cc5ec84e96d02b18916fa222..2cb68509f2a3d14d1939c1a535df50268efc5cd0 100644
--- a/client/src/components/ui/Comment/comment.scss
+++ b/client/src/components/ui/Comment/comment.scss
@@ -19,6 +19,7 @@
height: 65px;
border-radius: 50%;
overflow: hidden;
+ font-size: 28px;
img {
width: 100%;
@@ -67,7 +68,7 @@
textarea {
transition: none;
- background: s.$background-input;
+ background: s.$background-light;
border: none;
border-radius: 25px;
width: 100%;
diff --git a/client/src/components/ui/Popup/index.tsx b/client/src/components/ui/Popup/index.tsx
index 989e11c89cc6d033ce262a2cdf016407809e9933..ee009141ebfe3a288c6f84ceb0d7033b8c86dd20 100644
--- a/client/src/components/ui/Popup/index.tsx
+++ b/client/src/components/ui/Popup/index.tsx
@@ -1,26 +1,43 @@
-import { ReactNode } from 'react';
+import { ReactNode, useEffect } from 'react';
+import { createPortal } from 'react-dom';
import './popup.scss';
+const body = document.getElementsByTagName('body')[0];
+
interface Props {
children: ReactNode
onClose: Function
}
export default function Popup({ children, onClose }: Props) {
- document.addEventListener('keydown', (e) => {
- if(e.key === "Escape") {
- onClose();
+ useEffect(() => {
+ body.style.overflow = 'hidden';
+ return () => {
+ body.style.overflow = '';
+ }
+ }, []);
+
+ useEffect(() => {
+ const onKeyDown = (e: KeyboardEvent) => {
+ if (e.key === "Escape") {
+ onClose();
+ }
+ };
+ document.addEventListener('keydown', onKeyDown);
+ return () => {
+ document.removeEventListener('keydown', onKeyDown);
}
- });
- return (
+ }, [onClose]);
+
+ return createPortal(
<div className="popup-container">
<div className="popup">
{children}
</div>
<div className="background" onClick={() => onClose()}></div>
- </div>
- )
+ </div>, body
+ );
}
diff --git a/client/src/components/ui/Popup/popup.scss b/client/src/components/ui/Popup/popup.scss
index bf6e8379d7d665376d42cb4e4b3e37e0be1ca610..6222ba9138e06775d73e876d41ccc727fd127ddb 100644
--- a/client/src/components/ui/Popup/popup.scss
+++ b/client/src/components/ui/Popup/popup.scss
@@ -12,14 +12,19 @@
justify-content: center;
z-index: 2000;
align-items: center;
+ & ~ div {
+ overflow: hidden;
+ }
+
.popup {
+ will-change: transform;
animation: moveup 300ms ease;
max-height: 100vh;
overflow: auto;
padding: 50px;
max-width: 960px;
- background: s.$background-white;
+ background: s.$background-light;
border-radius: 25px;
position: relative;
z-index: 2;
@@ -44,7 +49,6 @@
transform: translateY(50px);
opacity: 0.5;
}
-
to {
transform: translateY(0);
opacity: 1;
@@ -55,7 +59,6 @@
from {
opacity: 0;
}
-
to {
opacity: 1;
}
diff --git a/client/src/components/ui/Project/index.tsx b/client/src/components/ui/Project/index.tsx
index 58e18da0cd8d14516178a666f9aee2764c9947c1..4f4eec2e8013d94a39553d40dcb5e1f9f2f3e36f 100644
--- a/client/src/components/ui/Project/index.tsx
+++ b/client/src/components/ui/Project/index.tsx
@@ -64,17 +64,16 @@ export default function Project({ project, large, demo }: ProjectProps) {
if (demo) {
return (
- <div className={'project ' + (large ? 'large' : '')}>
+ <div className={'project demo' + (large ? ' large' : '')}>
{ content }
</div>
);
} else {
return (
- <Link to={'/projects/' + project.id} className={'project ' + (large ? 'large' : '')}>
+ <Link to={'/projects/' + project.id} className={'project' + (large ? ' large' : '')}>
{ content }
</Link>
);
}
}
-
diff --git a/client/src/components/ui/Project/project.scss b/client/src/components/ui/Project/project.scss
index f04570d1d439a21e0b8d35872944eb0f7a5a9730..40bf6c2725b047f2a85dccfa9bb7d6a2b67324c4 100644
--- a/client/src/components/ui/Project/project.scss
+++ b/client/src/components/ui/Project/project.scss
@@ -10,12 +10,14 @@
width: 160px;
color: s.$text;
height: 160px;
+ will-change: transform;
- &:hover,
- &:focus {
- color: s.$text;
- box-shadow: 0 0 35px rgba(s.$black, 0.1);
- transform: translateY(-5px);
+ &:not(.demo) {
+ &:hover,
+ &:focus {
+ box-shadow: 0 0 35px rgba(s.$black, 0.1);
+ transform: translateY(-5px);
+ }
}
.circular-progress {
@@ -23,7 +25,7 @@
svg {
height: auto;
- width: 50%;
+ width: 60%;
}
}
@@ -37,18 +39,17 @@
height: 100%;
position: absolute;
top: 0;
+ margin-top: 5px;
left: 0;
}
.title {
- margin-top: 15px;
+ margin-top: 10px;
line-height: 1.4;
font-size: 16px;
+ text-align: center;
font-weight: s.$weight-bold;
-
- @include mx.breakpoint(large) {
- font-size: 20px;
- }
+ overflow: hidden;
}
.info {
diff --git a/client/src/components/ui/ProjectSlide/index.tsx b/client/src/components/ui/ProjectSlide/index.tsx
index b4347c60da989237610881618f1c1f97d13fd7b8..a5f7a6bbdee89a989e9e73aa05b359d08e264ceb 100644
--- a/client/src/components/ui/ProjectSlide/index.tsx
+++ b/client/src/components/ui/ProjectSlide/index.tsx
@@ -3,7 +3,7 @@ import { Link } from 'react-router-dom';
import { useEffect, useState } from 'react';
import { AssignedUser } from 'adapters/user';
-import { durationBetween, formatDate } from 'timely';
+import { durationBetween, formatDate, formatDuration, durationFor } from 'timely';
import { getProjectAssignees, getProjectWork, Project } from 'adapters/project';
import AssigneeList from 'components/ui/AssigneeList';
@@ -21,15 +21,16 @@ export default function ProjectSlide({ project }: ProjectSlideProps) {
const [time, setTime] = useState<number>();
const [totalTime, setTotalTime] = useState<number>();
+
useEffect(() => {
getProjectAssignees(project.id).then(assignee => {
setAssignees(assignee);
- setTotalTime(assignee.map(a => a.time).reduce((total, c) => total + c, 1) * 60 * 1000)
+ setTotalTime(durationFor(assignee.map(a => a.time).reduce((total, c) => total + c, 0), 'minute'))
});
getProjectWork(project.id).then((work) =>
setTime(
work.map(w => durationBetween(w.started, w.finished ?? new Date()))
- .reduce((total, c) => total + c, 0)
+ .reduce((total, c) => total + c, 0),
)
)
}, [project]);
@@ -45,14 +46,19 @@ export default function ProjectSlide({ project }: ProjectSlideProps) {
}
</div>
<div className="details">
- <AssigneeList assignees={assignees} max={3} />
+ {
+ assignees.length > 0 &&
+ <AssigneeList assignees={assignees} max={3} />
+ }
{
(time !== undefined && totalTime !== undefined)
? (
<div className="progress">
- <LinearProgress percent={time / totalTime * 100} />
- <div className="label">{(time / 60 / 60 / 1000).toFixed(2)}h /
- <strong>{(totalTime / 60 / 60 / 1000).toFixed(2)}h</strong></div>
+ <LinearProgress percent={time / totalTime * 100} color={project.color} />
+ {totalTime > 0 && time > 0 ? (
+ <div className="label">{formatDuration(time, 'second', 2, true)} /
+ <strong>{formatDuration(totalTime, 'second', 2, true)}</strong></div>
+ ) : <div className="label">No tasks found</div>}
</div>
)
: <LoadingScreen />
diff --git a/client/src/components/ui/ProjectSlide/project-slide.scss b/client/src/components/ui/ProjectSlide/project-slide.scss
index 24b84f0475094c11302b5efb38e082b6d388437e..2f884a601b03d2bb824aa9ab9255cea7fec81bd2 100644
--- a/client/src/components/ui/ProjectSlide/project-slide.scss
+++ b/client/src/components/ui/ProjectSlide/project-slide.scss
@@ -1,5 +1,4 @@
-
-@use 'styles/settings.scss' as s;
+@use 'styles/settings.scss'as s;
.project-slide {
padding: 30px;
@@ -11,8 +10,9 @@
display: flex;
flex-direction: column;
justify-content: space-between;
+ will-change: transform;
- &:hover ,
+ &:hover,
&:focus {
color: s.$text;
box-shadow: 0 0 35px rgba(s.$black, 0.1);
@@ -20,11 +20,14 @@
}
.head {
- margin-bottom: 20px;
+ margin-bottom: 10px;
.name {
font-weight: s.$weight-bold;
font-size: 20px;
+ width: 100%;
+ text-overflow: ellipsis;
+ overflow: hidden;
}
.range {
@@ -46,8 +49,8 @@
.label {
margin-top: 5px;
+ line-height: 1;
}
}
}
-}
-
+}
\ No newline at end of file
diff --git a/client/src/components/ui/Task/task.scss b/client/src/components/ui/Task/task.scss
index e39600f8965d0a59a36a0ac672ece710dd0661c2..eabdf8dfe05e22073341cdd12770019e9a6a37b5 100644
--- a/client/src/components/ui/Task/task.scss
+++ b/client/src/components/ui/Task/task.scss
@@ -1,6 +1,5 @@
-
-@use 'styles/settings.scss' as s;
-@use 'styles/mixins.scss' as mx;
+@use 'styles/settings.scss'as s;
+@use 'styles/mixins.scss'as mx;
.task {
padding: 30px;
@@ -12,6 +11,7 @@
color: s.$text;
font-weight: s.$weight-regular;
position: relative;
+ will-change: transform;
&:hover,
&:focus {
@@ -20,7 +20,7 @@
transform: translateY(-5px);
.indicator {
- height: 40%;
+ transform: translate(-50%, -50%) scaleY(0.75);
}
}
@@ -32,10 +32,7 @@
width: 6px;
height: 50%;
border-radius: 3px;
-
- &:not([class*=bg-gradient]) {
- background: s.$primary;
- }
+ background: s.$primary;
}
.main-info {
@@ -59,6 +56,7 @@
font-size: 16px;
font-weight: s.$weight-bold;
line-height: 1.2;
+
@include mx.breakpoint(large) {
font-size: 20px;
}
@@ -80,4 +78,4 @@
right: -15px;
bottom: -20px;
}
-}
+}
\ No newline at end of file
diff --git a/client/src/components/ui/TextInput/text-input.scss b/client/src/components/ui/TextInput/text-input.scss
index f9a2a87cf7e741bb9fe536fd47d4ae211c35bfd6..eff9efe0c1447251465dcac67cf9003e58fc5341 100644
--- a/client/src/components/ui/TextInput/text-input.scss
+++ b/client/src/components/ui/TextInput/text-input.scss
@@ -37,23 +37,6 @@
resize: none;
height: 300px;
}
-
- input,
- textarea {
- width: 100%;
- font-size: 16px;
- border: none;
- padding: 20px;
- outline: none;
- border-radius: 15px;
- position: relative;
- display: block;
- border-radius: 15px;
- color: s.$text;
- font-weight: s.$weight-regular;
- font-family: s.$body-font;
- background: s.$background-input;
- }
}
.note {
diff --git a/client/src/components/ui/TimeInput/index.tsx b/client/src/components/ui/TimeInput/index.tsx
index f9acbe76bcdaa2743e21795919b66817d6065036..ea196b6d82ec4513aaf216f8acf4cfebf9de44e0 100644
--- a/client/src/components/ui/TimeInput/index.tsx
+++ b/client/src/components/ui/TimeInput/index.tsx
@@ -7,27 +7,34 @@ import './time-input.scss';
interface Props {
onChange: (state: number) => void;
+ initialTime?: number;
}
-export default function TimeInput({ onChange: userOnChange }: Props) {
- const [formatted, setFormatted] = useState('');
+function getFormatted(hours: number) {
+ if (hours > 0) {
+ return formatDuration(durationFor(hours, 'hour'), 'second', 2, true);
+ } else {
+ return 'none';
+ }
+}
+
+export default function TimeInput({ onChange: userOnChange, initialTime }: Props) {
+ const [formatted, setFormatted] = useState(initialTime ? getFormatted(initialTime) : 'none');
const onChange = useCallback(event => {
const value = parseFloat(event.target.value);
userOnChange(value);
if (!Number.isNaN(value)) {
- setFormatted(
- formatDuration(durationFor(value, 'hour'), 'second', 2, true)
- );
+ setFormatted(getFormatted(value));
} else {
- setFormatted('');
+ setFormatted('none');
}
}, [userOnChange]);
return (
<div className="time-field">
<label htmlFor="time">Time in hours</label>
- <input type="number" name="time" min={0} onChange={onChange} />
+ <input autoComplete="off" name="time" min={0} onChange={onChange} defaultValue={initialTime} />
<span className="formatted">{formatted}</span>
</div>
);
diff --git a/client/src/components/ui/TimeInput/time-input.scss b/client/src/components/ui/TimeInput/time-input.scss
index 83cb451067587bdf259e55d87d8a1686692ec38a..26d745bc941d3ecb1d3b389cb2da1916da489ba9 100644
--- a/client/src/components/ui/TimeInput/time-input.scss
+++ b/client/src/components/ui/TimeInput/time-input.scss
@@ -6,28 +6,17 @@
margin: 20px 0;
display: flex;
align-items: baseline;
+ border-radius: 15px;
+ color: s.$text;
+ background: s.$background-light;
.formatted {
flex: 0 0 auto;
- content: 'min';
- margin-left: 10px;
- min-width: 64px;
+ min-width: 75px;
white-space: nowrap;
text-align: center;
}
- input::-webkit-outer-spin-button,
- input::-webkit-inner-spin-button {
- -webkit-appearance: none;
- margin: 0;
- }
-
- /* Firefox */
- input[type=number] {
- -moz-appearance: textfield;
- }
-
-
label {
&:after {
content: ' *';
diff --git a/client/src/components/ui/User/user.scss b/client/src/components/ui/User/user.scss
index 2c687dd4d2124066c350bd0a419fbd78ddb71c4c..08a0b7a0db54dd55c9627a92afcdcdaaf091b88e 100644
--- a/client/src/components/ui/User/user.scss
+++ b/client/src/components/ui/User/user.scss
@@ -15,7 +15,7 @@
width: 60px;
height: 60px;
transform: translateX(-50%);
- font-size: 36px;
+ font-size: 28px;
img {
width: 100%;
diff --git a/client/src/images/logo.svg b/client/src/images/logo.svg
index 8dd917c53cf2b3ff54aa95cbcd06140fbca2ea59..568d5e5c92afb643193a07d707c97c69a787d86b 100644
--- a/client/src/images/logo.svg
+++ b/client/src/images/logo.svg
@@ -1,9 +1,6 @@
-<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 width="203" height="205" viewBox="0 0 203 205" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M65.8286 2.45654L77.6298 0.505527L93.2748 127.921L86.571 127.921L65.8286 2.45654Z" fill="#3A5255"/>
+<path d="M170.499 16.7898L133.94 46.7951L34.1256 67.891L27.8681 42.8571L124.078 12.109L170.499 16.7898Z" fill="#3A5255"/>
+<path d="M14.751 158.048C15.903 156.171 17.3963 154.699 19.231 153.632C21.1083 152.565 23.2417 152.032 25.631 152.032V161.44H23.263C20.447 161.44 18.3137 162.101 16.863 163.424C15.455 164.747 14.751 167.051 14.751 170.336V188H5.791V152.544H14.751V158.048ZM65.586 152.544L43.634 204.768H34.098L41.778 187.104L27.57 152.544H37.618L46.77 177.312L56.05 152.544H65.586ZM86.16 188.576C82.7467 188.576 79.6747 187.829 76.944 186.336C74.2133 184.8 72.0587 182.645 70.48 179.872C68.944 177.099 68.176 173.899 68.176 170.272C68.176 166.645 68.9653 163.445 70.544 160.672C72.1653 157.899 74.3627 155.765 77.136 154.272C79.9093 152.736 83.0027 151.968 86.416 151.968C89.8293 151.968 92.9227 152.736 95.696 154.272C98.4693 155.765 100.645 157.899 102.224 160.672C103.845 163.445 104.656 166.645 104.656 170.272C104.656 173.899 103.824 177.099 102.16 179.872C100.539 182.645 98.32 184.8 95.504 186.336C92.7307 187.829 89.616 188.576 86.16 188.576ZM86.16 180.768C87.7813 180.768 89.296 180.384 90.704 179.616C92.1547 178.805 93.3067 177.611 94.16 176.032C95.0133 174.453 95.44 172.533 95.44 170.272C95.44 166.901 94.544 164.32 92.752 162.528C91.0027 160.693 88.848 159.776 86.288 159.776C83.728 159.776 81.5733 160.693 79.824 162.528C78.1173 164.32 77.264 166.901 77.264 170.272C77.264 173.643 78.096 176.245 79.76 178.08C81.4667 179.872 83.6 180.768 86.16 180.768ZM132.221 188L120.189 172.896V188H111.229V140.64H120.189V167.584L132.093 152.544H143.741L128.125 170.336L143.869 188H132.221ZM164.348 188.576C160.934 188.576 157.862 187.829 155.132 186.336C152.401 184.8 150.246 182.645 148.668 179.872C147.132 177.099 146.364 173.899 146.364 170.272C146.364 166.645 147.153 163.445 148.732 160.672C150.353 157.899 152.55 155.765 155.324 154.272C158.097 152.736 161.19 151.968 164.604 151.968C168.017 151.968 171.11 152.736 173.884 154.272C176.657 155.765 178.833 157.899 180.412 160.672C182.033 163.445 182.844 166.645 182.844 170.272C182.844 173.899 182.012 177.099 180.347 179.872C178.726 182.645 176.508 184.8 173.692 186.336C170.918 187.829 167.804 188.576 164.348 188.576ZM164.348 180.768C165.969 180.768 167.484 180.384 168.892 179.616C170.342 178.805 171.494 177.611 172.348 176.032C173.201 174.453 173.628 172.533 173.628 170.272C173.628 166.901 172.732 164.32 170.94 162.528C169.19 160.693 167.036 159.776 164.476 159.776C161.916 159.776 159.761 160.693 158.012 162.528C156.305 164.32 155.452 166.901 155.452 170.272C155.452 173.643 156.284 176.245 157.948 178.08C159.654 179.872 161.788 180.768 164.348 180.768Z" fill="#3A5255"/>
+<path d="M193.384 188.448C191.763 188.448 190.419 187.957 189.352 186.976C188.328 185.952 187.816 184.693 187.816 183.2C187.816 181.707 188.328 180.469 189.352 179.488C190.419 178.464 191.763 177.952 193.384 177.952C194.963 177.952 196.264 178.464 197.288 179.488C198.312 180.469 198.824 181.707 198.824 183.2C198.824 184.693 198.312 185.952 197.288 186.976C196.264 187.957 194.963 188.448 193.384 188.448Z" fill="#AB41FE"/>
</svg>
diff --git a/client/src/images/preview/projects.jpg b/client/src/images/preview/projects.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..9b284c261b5e31bc40d4b97246aba4caff3afe19
Binary files /dev/null and b/client/src/images/preview/projects.jpg differ
diff --git a/client/src/images/preview/tasks.jpg b/client/src/images/preview/tasks.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..cd8f38b1d9d784e66c34d57cd1e2ba339041b6a7
Binary files /dev/null and b/client/src/images/preview/tasks.jpg differ
diff --git a/client/src/images/preview/teams.jpg b/client/src/images/preview/teams.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..45ae6740ade827f34c8813f55b27210004be0ad7
Binary files /dev/null and b/client/src/images/preview/teams.jpg differ
diff --git a/client/src/images/screen-design.jpg b/client/src/images/screen-design.jpg
deleted file mode 100644
index 918b3d9569cd9f63001cf2dd32b0c35280deefa4..0000000000000000000000000000000000000000
Binary files a/client/src/images/screen-design.jpg and /dev/null differ
diff --git a/client/src/index.scss b/client/src/index.scss
index 9ac10fce2d565e9b63dcb7b2f5b2d431a1e12605..52b5424743d6213ad8bfe3abbf1efd8bf1bde456 100644
--- a/client/src/index.scss
+++ b/client/src/index.scss
@@ -9,11 +9,13 @@
content: 'light';
}
- @each $key, $value in s.$light-colors {
+ @each $key,
+ $value in s.$light-colors {
--#{$key}: #{$value};
}
- @each $key, $value in s.$light-colors {
+ @each $key,
+ $value in s.$light-colors {
--#{$key}-rgb: #{red($value), green($value), blue($value)};
}
}
@@ -25,11 +27,13 @@
content: 'dark';
}
- @each $key, $value in s.$dark-colors {
+ @each $key,
+ $value in s.$dark-colors {
--#{$key}: #{$value};
}
- @each $key, $value in s.$dark-colors {
+ @each $key,
+ $value in s.$dark-colors {
--#{$key}-rgb: #{red($value), green($value), blue($value)};
}
}
@@ -41,11 +45,13 @@
content: 'light';
}
- @each $key, $value in s.$light-colors {
+ @each $key,
+ $value in s.$light-colors {
--#{$key}: #{$value};
}
- @each $key, $value in s.$light-colors {
+ @each $key,
+ $value in s.$light-colors {
--#{$key}-rgb: #{red($value), green($value), blue($value)};
}
}
@@ -56,21 +62,25 @@
content: 'dark';
}
- @each $key, $value in s.$dark-colors {
+ @each $key,
+ $value in s.$dark-colors {
--#{$key}: #{$value};
}
- @each $key, $value in s.$dark-colors {
+ @each $key,
+ $value in s.$dark-colors {
--#{$key}-rgb: #{red($value), green($value), blue($value)};
}
}
* {
transition: s.$transition;
+ transition-property: transform, opacity, color, background, box-shadow, stroke;
font-family: s.$body-font;
margin: 0;
padding: 0;
box-sizing: border-box;
+ scrollbar-width: thin;
}
html {
@@ -89,7 +99,8 @@ button {
outline: none;
}
-a, button {
+a,
+button {
font-size: 1em;
font-weight: s.$weight-semi-bold;
color: s.$primary;
@@ -108,8 +119,12 @@ a, button {
padding: 0 30px;
}
-h1, h2, h3,
-h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
font-weight: s.$weight-bold;
line-height: 1.2;
}
@@ -184,6 +199,10 @@ h4 {
}
}
+.text-primary {
+ color: s.$primary;
+}
+
@each $key,
$color in s.$themeDarkMap {
.bg-dark-#{$key} {
@@ -209,11 +228,11 @@ $color in s.$themeLightMap {
@each $key,
$color in s.$themeLightMap {
.bg-gradient-#{$key} {
- background: linear-gradient(to bottom, $color 0%, fn.getFrom(s.$themeDarkMap, $key) 100%);
+ background: linear-gradient(to bottom, $color 0%, fn.getFrom(s.$themeDarkMap, $key) 100%) !important;
}
.bg-gradient-horizontal-#{$key} {
- background: linear-gradient(to left, $color 0%, fn.getFrom(s.$themeDarkMap, $key) 100%);
+ background: linear-gradient(to left, $color 0%, fn.getFrom(s.$themeDarkMap, $key) 100%) !important;
}
.theme-#{$key} {
@@ -234,3 +253,15 @@ $color in s.$themeLightMap {
user-select: none;
}
+::-webkit-scrollbar {
+ width: 10px;
+}
+
+::-webkit-scrollbar-track {
+ background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+ background: s.$text;
+ border-radius: 5px;
+}
diff --git a/client/src/pages/AppWrapper.tsx b/client/src/pages/AppWrapper.tsx
index 15547fd899c035ff9840ce6a95198db56b5aacbf..36eeaca8631a10649add056da141cf030a6305ef 100644
--- a/client/src/pages/AppWrapper.tsx
+++ b/client/src/pages/AppWrapper.tsx
@@ -33,7 +33,7 @@ export default function AppWrapper() {
<Route path="/projects/:projectId/edit" component={ProjectEdit} />
<Route path="/projects/:projectId" component={ProjectDetail} />
<Route path="/projects" component={Projects} />
- <Route path="/stats" component={Stats} />
+ <Route path={['/stats/:time', '/stats']} component={Stats} />
<Route path="/settings" component={Settings} />
<Route path="/teams/create" exact component={TeamsCreate} />
<Route path="/teams/:teamId/edit" exact component={TeamsEdit} />
diff --git a/client/src/pages/Home/home.scss b/client/src/pages/Home/home.scss
deleted file mode 100644
index 478a096bf45ffe5cb45d372a7875dd113f807974..0000000000000000000000000000000000000000
--- a/client/src/pages/Home/home.scss
+++ /dev/null
@@ -1,433 +0,0 @@
-
-@use 'styles/settings.scss' as s;
-@use 'styles/mixins.scss' as mx;
-@use 'styles/functions.scss' as fn;
-
-.landing-page {
- // General
-
- h2 {
- @include mx.breakpoint(large) {
- margin: 0 auto fn.toRem(24) auto;
- max-width: 560px;
- text-align: center;
- }
- }
-
- section {
- margin-bottom: 70px;
-
- @include mx.breakpoint(large) {
- margin-bottom: 180px;
- }
-
- &.darker {
- padding: 30px 0;
- color: #f1f1f1;
- background: linear-gradient(180deg, #2E313B 0.01%, #0C0E18 100%);
-
- @include mx.breakpoint(large) {
- margin: 0 75px;
- padding: 75px 0;
- border-radius: 25px;
- }
- }
- }
-
- // Hero section
-
- header {
- display: flex;
- align-items: center;
- padding: 20px;
-
- @include mx.breakpoint(500) {
- padding-top: 80px;
- }
-
- @include mx.breakpoint(large) {
- width: 30%;
- padding-bottom: 160px;
- }
-
- nav {
- display: flex;
-
- a {
- color: s.$text;
- font-weight: s.$weight-bold;
- margin-left: 40px;
- display: none;
-
- @include mx.breakpoint(medium) {
- display: block;
- }
- }
- }
- }
-
- .hero-section {
- position: relative;
-
- .hero-container {
- display: flex;
- flex-direction: column;
- justify-content: space-between;
-
- @include mx.breakpoint(medium) {
- height: calc(100vh - 0.5rem);
- }
-
- @include mx.breakpoint(xlarge) {
- height: calc(100vh - 6rem);
- }
-
- .text-container {
- position: relative;
- z-index: 2;
- padding-bottom: 30px;
- font-size: fn.toRem(18);
-
- @include mx.breakpoint(500) {
- width: 50%;
- }
-
- @include mx.breakpoint(medium) {
- width: 30%;
- padding-bottom: 160px;
- }
-
- .button-container {
- margin-top: 40px;
- }
- }
-
- .preview-container {
- width: 50%;
- display: flex;
- justify-content: center;
- margin: 20px 0;
- padding: 30px 0;
- border-top-right-radius: 25px;
- border-bottom-right-radius: 25px;
- background: s.$linear-gradient;
-
- @include mx.breakpoint(500) {
- right: 0;
- height: 100%;
- width: 40%;
- top: 0;
- border-bottom-left-radius: 50px;
- position: absolute;
- margin: 0;
- border-top-right-radius: 0;
- border-bottom-right-radius: 0;
- }
-
- @include mx.breakpoint(large) {
- width: 45%;
- }
-
- .preview-phone {
- transform: translate(50%, 0%);
- width: 75vw;
-
- @include mx.breakpoint(500) {
- left: 0;
- top: 50%;
- transform: translate(-20%, -50%);
- position: absolute;
- width: 200px;
- }
-
- @include mx.breakpoint(medium) {
- left: 0;
- transform: translate(-30%, -50%);
- top: 50%;
- width: 300px;
- }
-
- .inner {
- padding-bottom: 177.77777777778%;
- background: url('/images/screen-design.jpg');
- background-size: 100% auto;
- background-repeat: no-repeat;
- background-position: top left;
- width: 100%;
- border: 7px solid #303030;
- border-radius: 25px;
- box-shadow: 0 0 40px rgba(s.$black, 0.15);
-
- @include mx.breakpoint(medium) {
- border-width: 10px;
- }
-
- &:before {
- content: ' ';
- position: absolute;
- width: 25%;
- height: 20px;
- background: #303030;
- left: 50%;
- top: 2px;
- border-radius: 5px;
- transform: translateX(-50%);
- }
- }
- }
- }
- }
- }
-
- // Intro Section
-
- .intro-section {
- .intro-container {
- @include mx.breakpoint(medium) {
- display: flex;
- align-items: center;
- }
- }
-
- .text-container {
- padding-right: 10%;
- margin-bottom: 50px;
-
- @include mx.breakpoint(medium) {
- flex-grow: 1;
- margin-bottom: 0;
- }
- }
-
- .preview-container {
- display: grid;
- grid-template-columns: 1fr 1fr;
- grid-template-rows: 1fr 1fr;
- grid-gap: 24px;
- justify-content: center;
- align-items: center;
- background: rgba(s.$background-white-rgb, 0.5);
- border-radius: 25px;
- padding: 24px;
-
- @include mx.breakpoint(large) {
- padding: 48px;
- }
- }
-
- .project-overview {
- display: grid;
- grid-gap: 20px;
- grid-template-areas:
- 'small-1 large'
- 'small-2 large';
-
- @include mx.breakpoint(medium) {
- grid-gap: 30px;
-
- .project-small {
- .project {
- width: 150px;
- height: 150px;
- }
- }
-
- .project-large {
- .project {
- width: 150px;
- height: 330px;
- }
- }
- }
-
- .small-1 {
- grid-area: small-1;
- }
-
- .small-2 {
- grid-area: small-2;
-
- .project {
- animation-delay: 3s;
- }
- }
-
- .large {
- grid-area: large;
-
- .project {
- animation-delay: 6s;
- height: 100%;
- }
- }
-
- .project {
- animation: move-up 9s ease-in infinite;
-
- svg {
- width: 70px;
- height: 70px;
- }
-
- @keyframes move-up {
- 5%, 35% {
- transform: translateY(0);
- box-shadow: 0px 5px 25px rgba(s.$black, 0.05);
- }
- 10%, 30% {
- transform: translateY(-10px);
- box-shadow: 0px 5px 30px rgba(s.$black, 0.15);
- }
- }
-
- }
- }
- }
-
- //Feature section
-
- .feature-section {
- .feature-container {
- display: flex;
- flex-direction: column;
- justify-content: center;
- margin: 5rem auto;
- }
-
- .feature-list {
- margin-top: 10px;
-
- @include mx.breakpoint(medium) {
- display: flex;
- justify-content: center;
- }
- }
-
- .feature-item {
- display: flex;
- flex-direction: column;
- width: 100%;
- padding: 1.5rem 0;
-
- @include mx.breakpoint(medium) {
- padding: 20px;
- }
- }
-
- .feature-icon {
- background: s.$radial-gradient;
- background-clip: text;
- -webkit-background-clip: text;
- color: transparent;
- font-size: 5rem;
- }
-
- .feature-title {
- margin: 1rem 0;
- }
- }
-
- // Team section
-
- .team-section {
- .team-container {
- @include mx.breakpoint(large) {
- display: flex;
- flex-direction: column;
- align-items: center;
- }
- }
-
- .team-list {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- margin-top: 20px;
- }
-
- .team-member {
- text-align: left;
- margin: 3rem 0;
-
- @include mx.breakpoint(medium) {
- display: flex;
- align-items: center;
- justify-content: center;
- }
-
- .team-member-title {
- font-size: fn.toRem(14);
- font-weight: s.$weight-bold;
- display: inline-block;
- padding: 2px 10px;
- text-transform: uppercase;
- background: radial-gradient(100% 1892.25% at 0% 0%, #AC42FF 0%, #8A24DA 100%);
- letter-spacing: 0.5px;
- margin-bottom: 10px;
- color: s.$white;
- border-radius: 5px;
- }
-
- .team-member-image {
- margin-right: 0;
- margin-bottom: 3rem;
- border-radius: 50%;
-
- @include mx.breakpoint(medium) {
- margin-right: 3rem;
- margin-bottom: 0;
- }
- }
- }
- }
-
- .contact-section {
- .contact-container {
- display: flex;
- flex-direction: column;
- text-align: center;
- }
-
- .contact-form {
- margin-top: 2rem;
- display: flex;
- width: 100%;
- flex-wrap: wrap;
- max-width: 960px;
- margin-left: auto;
- margin-right: auto;
-
- }
- }
-
- footer {
- .footer-container {
- padding: 100px 0;
- }
-
- .footer-copyright {
- flex: 1 1 100%;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- }
-
- .logo {
- margin-bottom: 10px;
- }
-
- .footer-nav {
- flex: 1 1 100%;
- display: flex;
- justify-content: center;
- margin-top: 30px;
-
- a {
- padding: 5px 10px;
- }
- }
- }
-}
-
diff --git a/client/src/pages/Home/index.tsx b/client/src/pages/Home/index.tsx
deleted file mode 100644
index 3811b72a7d723933b0dcda0869ff9d99307c4c6b..0000000000000000000000000000000000000000
--- a/client/src/pages/Home/index.tsx
+++ /dev/null
@@ -1,224 +0,0 @@
-
-import { Status } from 'adapters/common';
-
-import Page from 'components/layout/Page';
-import ContactForm from 'components/forms/ContactForm';
-import ButtonLink from 'components/navigation/ButtonLink';
-import Project from 'components/ui/Project';
-
-import Logo from 'images/logo.svg';
-import ImageRoland from 'images/roland-bernard.jpg';
-import ImageDaniel from 'images/daniel-planoetscher.jpg';
-
-import './home.scss';
-
-export default function Home(): JSX.Element {
- return (
- <Page className="landing-page">
- <section className="hero-section" id="hero">
- <div className="hero-container">
- <header>
- <a href="index.html">
- <img src={Logo} alt="Go home" width="100" height="35" />
- </a>
- <nav>
- <a href="#hero">Home</a>
- <a href="#team">Team</a>
- <a href="#contact">Contact</a>
- </nav>
- </header>
- <div className="preview-container">
- <div className="preview-phone">
- <div className="inner">
- </div>
- </div>
- </div>
- <div className="content-container">
- <div className="text-container">
- <h1>ryoko</h1>
- <p>Are you feeling lost with your tasks? Maximize your productivity now with ryoko.</p>
- <div className="button-container">
- <ButtonLink href="/tasks">Get started</ButtonLink>
- </div>
- </div>
- </div>
- </div>
- </section>
- <section className="intro-section" id="intro">
- <div className="content-container">
- <div className="intro-container">
- <div className="text-container">
- <h2 className="left">Plan your projects like a journey!</h2>
- <p>
- Do you want to boost your productivity and agility of your
- development? <br />
- With ryoko you are able to effectively plan your tasks
- and manage your projects. It is build with developers in mind and
- facilitates effective collaboration.
- </p>
- </div>
- <div className="preview-container">
- <Project demo={true} project={{
- id: '55',
- name: 'Hello world',
- text: 'xxx',
- color: 'yellow',
- status: Status.OPEN,
- deadline: new Date(),
- teams: [],
- }}/>
- <Project demo={true} project={{
- id: '73',
- name: 'Project',
- text: 'xxx',
- color: 'red',
- status: Status.OPEN,
- deadline: new Date(),
- teams: [],
- }}/>
- <Project demo={true} project={{
- id: '93',
- name: 'Api routes',
- text: 'xxx',
- color: 'blue',
- status: Status.CLOSED,
- deadline: new Date(),
- teams: [],
- }}/>
- <Project demo={true} project={{
- id: '5',
- name: 'Task list',
- text: 'xxx',
- color: 'green',
- status: Status.SUSPENDED,
- deadline: new Date(),
- teams: [],
- }}/>
- </div>
- </div>
- </div>
- </section>
- <section className="feature-section">
- <div className="content-container feature-container">
- <h2>Revolutionize your productivity</h2>
- <div className="feature-list">
- <div className="feature-item">
- <span className="feature-icon material-icons">query_stats</span>
- <h3 className="feature-title">Analyze your productivity</h3>
- <div className="feature-description">
- Find your <strong>weaknesses and strengths</strong> by analyzing graphs
- </div>
- </div>
- <div className="feature-item">
- <span className="feature-icon material-icons">event</span>
- <h3 className="feature-title">Automatic timetables</h3>
- <div className="feature-description">
- Generate your automatic timetables based on <strong>priorities and decencies</strong> of
- your tasks
- </div>
- </div>
- <div className="feature-item">
- <span className="feature-icon material-icons">group</span>
- <h3 className="feature-title">Team-based</h3>
- <div className="feature-description">
- Distribute task within your Teams based on <strong>profession and difficulty</strong>
- </div>
- </div>
- </div>
- </div>
- </section>
- <section className="team-section" id="team">
- <div className="content-container team-container">
- <h2>Our Team</h2>
- <p>
- People are what makes a project great, and here are the people that make us
- great.
- </p>
- <div className="team-list">
- <div className="team-member">
- <img className="team-member-image" src={ImageDaniel} width="200" height="200"
- alt="" />
- <div className="team-member-info">
- <div className="team-member-title">Web Developer</div>
- <h3 className="team-member-name">Daniel Planötscher</h3>
- <div className="team-member-description">
- Besides studying Computer Science, Daniel also enjoys taking photos and
- designing user interfaces for hobby projects, which is why he focuses on
- the FrontEnd of ryoko. Furthermore, he brings significant industry
- experience working as a web developer using state of the art tools and
- programming techniques. He is involved in the creation of modern
- websites for dozens of clients with advanced requirements.
- </div>
- </div>
- </div>
- <div className="team-member">
- <img className="team-member-image" src={ImageRoland} width="200" height="200"
- alt="" />
- <div className="team-member-info">
- <div className="team-member-title">Software Engineer</div>
- <h3 className="team-member-name">Roland Bernard</h3>
- <div className="team-member-description">
- Studying Computer Science and participating in Competitive Programming
- Competitions, Roland constitutes a integral part of our development team
- at ryoko. Like all members of our team he also has experience in the
- industry, mainly working on business management systems and software for
- the financial sector. He is also experienced in the implementation of
- development tools and infrastructure components.
- </div>
- </div>
- </div>
- </div>
- </div>
- </section>
- <section className="contact-section darker" id="contact">
- <div className="content-container contact-container">
- <h2>Get in touch</h2>
- <p>
- Do you still have a question? Just contact us directly and we will be glad
- to help you resolve the issue.
- </p>
- <ContactForm onSubmit={
- (
- firstname: string,
- basename: string,
- email: string,
- subject: string,
- message: string
- ) => {
- window.location.href = 'mailto:dplanoetscher@unibz.it'
- + '?subject='
- + encodeURIComponent(subject)
- + '&body='
- + encodeURIComponent(
- `Name: ${firstname} ${basename}\n`
- + `Email: ${email}\n`
- + 'Message:\n\n'
- + message
- );
- }
- }/>
- </div>
- </section>
- <footer>
- <div className="content-container footer-container">
- <div className="footer-copyright">
- <img src={Logo} className="logo" alt="" width="70" height="24" />
- <p>
- © <a href="index.html">ryoko</a>, 2021
- </p>
- <p>
- All rights reserved.
- </p>
- </div>
- <div className="footer-nav">
- <a href="#hero">Home</a>
- <a href="#team">Team</a>
- <a href="#contact">Contact</a>
- </div>
- </div>
- </footer>
- </Page>
- );
-}
-
-
diff --git a/client/src/pages/Introduction/index.tsx b/client/src/pages/Introduction/index.tsx
index 9b10c0a6f6d00680bd8cdbf1af10ee1a5f39701f..ad46eccc1bd35da4513d03599a0fbcf95ba9887f 100644
--- a/client/src/pages/Introduction/index.tsx
+++ b/client/src/pages/Introduction/index.tsx
@@ -57,7 +57,7 @@ export default function Introduction() {
<div className="lead-text">
You are one step away from getting started with ryoko.
</div>
- <div className="possibility">
+ <div className="possibility framed">
Ask one of your colleagues to add you to their team. <br />
Your username is: <strong>{username}</strong>
</div>
diff --git a/client/src/pages/Introduction/intro.scss b/client/src/pages/Introduction/intro.scss
index 19dc2d2479a59b529d91ff1f98d13443dc38a833..b88cd226db4a01b017ea7f4ed17f7513022c3c69 100644
--- a/client/src/pages/Introduction/intro.scss
+++ b/client/src/pages/Introduction/intro.scss
@@ -25,6 +25,12 @@
padding: 60px;
border-radius: 25px;
}
+
+ .introduction-container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
.lead-text {
font-size: 24px;
@@ -33,12 +39,20 @@
.possibility {
margin: 20px 0;
font-size: 18px;
+ &.framed {
+ padding: 20px 40px;
+ background: s.$background-white;
+ display: inline-block;
+ border-radius: 15px;
+ }
}
}
.logout-btn {
color: s.$primary;
font-weight: s.$weight-bold;
cursor: pointer;
+ margin-top: 30px;
+ text-decoration: underline;
&:hover {
color: s.$primary-dark;
diff --git a/client/src/pages/Landing/index.tsx b/client/src/pages/Landing/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..deaa1a47b9c984c161bd0d1ef3c825f5e747d72c
--- /dev/null
+++ b/client/src/pages/Landing/index.tsx
@@ -0,0 +1,33 @@
+
+import Page from 'components/layout/Page';
+import Logo from 'images/logo.svg';
+
+import Intro from './partials/Intro';
+import Features from './partials/Features';
+import AboutApp from './partials/AboutApp';
+import Team from './partials/Team';
+import Contact from './partials/Contact';
+
+import './landing.scss';
+
+export default function LandingPage(): JSX.Element {
+ return (
+ <Page className="landing-page">
+ <Intro />
+ <Features />
+ <AboutApp />
+ <Team />
+ <Contact />
+ <footer className="content-container">
+ <img src={Logo} className="logo" alt="" width="70" height="24" />
+ <p>
+ © <a href="index.html">ryoko</a>, 2021
+ </p>
+ <p>
+ All rights reserved.
+ </p>
+ </footer>
+ </Page>
+ )
+}
+
diff --git a/client/src/pages/Landing/landing.scss b/client/src/pages/Landing/landing.scss
new file mode 100644
index 0000000000000000000000000000000000000000..61ffbc2dcf9d0c0b9806c0083c8bd0b403dd6e15
--- /dev/null
+++ b/client/src/pages/Landing/landing.scss
@@ -0,0 +1,35 @@
+
+@use 'styles/mixins.scss' as mx;
+@use 'styles/settings.scss' as s;
+
+.landing-page {
+ width: 100%;
+ overflow: hidden;
+
+ section:not(:first-child) {
+ margin: 80px auto;
+
+ @include mx.breakpoint(large) {
+ margin: 180px auto;
+ }
+ }
+
+ .heading-lead {
+ font-size: 20px;
+ font-weight: s.$weight-semi-bold;
+ }
+
+ footer {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+ flex-direction: column;
+ img {
+ height: auto;
+ width: 100%;
+ max-width: 100px;
+ margin-bottom: 20px;
+ }
+ }
+}
diff --git a/client/src/pages/Landing/partials/AboutApp/about-app.scss b/client/src/pages/Landing/partials/AboutApp/about-app.scss
new file mode 100644
index 0000000000000000000000000000000000000000..89f5e95a66f716d7dd08b5c630be79ae6826825b
--- /dev/null
+++ b/client/src/pages/Landing/partials/AboutApp/about-app.scss
@@ -0,0 +1,91 @@
+
+@use 'styles/mixins.scss' as mx;
+@use 'styles/settings.scss' as s;
+
+.landing-page {
+ .about-app-section {
+ @include mx.breakpoint(medium) {
+ display: flex;
+ align-items: center;
+ }
+
+ .text-container {
+ padding-right: 10%;
+ margin-bottom: 50px;
+
+ @include mx.breakpoint(medium) {
+ flex-grow: 1;
+ margin-bottom: 0;
+ }
+
+ .lead {
+ font-size: 18px;
+ font-weight: s.$weight-semi-bold;
+ margin-bottom: 5px;
+ }
+ }
+
+ .preview-container {
+ background: rgba(s.$background-white-rgb, 0.5);
+ border-radius: 25px;
+ padding: 40px;
+
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ @include mx.breakpoint(large) {
+ padding: 60px;
+ }
+ }
+
+ .project-overview {
+ display: grid;
+ grid-gap: 35px;
+ grid-template-areas:
+ 'small-1 large'
+ 'small-2 large';
+
+ @include mx.breakpoint(medium) {
+ grid-gap: 50px;
+ }
+
+ .small-1 {
+ grid-area: small-1;
+ }
+
+ .small-2 {
+ grid-area: small-2;
+
+ .project {
+ animation-delay: 3s;
+ }
+ }
+
+ .large {
+ grid-area: large;
+
+ .project {
+ animation-delay: 6s;
+ height: 100%;
+ }
+ }
+
+ .project {
+ animation: move-up 9s ease-in infinite;
+
+ @keyframes move-up {
+ 5%, 35% {
+ transform: translateY(0);
+ box-shadow: 0px 5px 25px rgba(s.$black, 0.05);
+ }
+ 10%, 30% {
+ transform: translateY(-10px);
+ box-shadow: 0px 5px 30px rgba(s.$black, 0.15);
+ }
+ }
+ }
+ }
+ }
+}
+
diff --git a/client/src/pages/Landing/partials/AboutApp/index.tsx b/client/src/pages/Landing/partials/AboutApp/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..f0b5863ee0b87129028e51e65da3f7c3e6e4f3c4
--- /dev/null
+++ b/client/src/pages/Landing/partials/AboutApp/index.tsx
@@ -0,0 +1,63 @@
+
+import { Status } from 'adapters/common';
+
+import Project from 'components/ui/Project';
+
+import './about-app.scss';
+
+export default function AboutApp() {
+ return (
+ <section className="about-app-section content-container">
+ <div className="text-container">
+ <h2 className="left">Plan your projects like a journey!</h2>
+ <p className="lead">
+ Do you want to boost your productivity and agility of your
+ development?
+ </p>
+ <p>
+ With ryoko you are able to effectively plan your tasks
+ and manage your projects. It is build with developers in mind and
+ facilitates effective collaboration.
+ </p>
+ </div>
+ <div className="preview-container">
+ <div className="project-overview">
+ <div className="small-1">
+ <Project demo project={{
+ id: '55',
+ name: 'Travel app',
+ text: 'xxx',
+ color: 'red',
+ status: Status.OPEN,
+ deadline: new Date(),
+ teams: [],
+ }} />
+ </div>
+ <div className="small-2">
+ <Project demo project={{
+ id: '5',
+ name: 'Shopping List',
+ text: 'xxx',
+ color: 'orange',
+ status: Status.SUSPENDED,
+ deadline: new Date(),
+ teams: [],
+ }} />
+ </div>
+ <div className="large">
+ <Project demo large project={{
+ id: '93',
+ name: 'Redesign App',
+ text: 'xxx',
+ color: 'blue',
+ status: Status.CLOSED,
+ deadline: new Date(),
+ teams: [],
+ }} />
+ </div>
+ </div>
+ </div>
+ </section>
+ )
+}
+
diff --git a/client/src/pages/Landing/partials/Contact/contact.scss b/client/src/pages/Landing/partials/Contact/contact.scss
new file mode 100644
index 0000000000000000000000000000000000000000..8d69601c18d650066e7cf2adbb7f4607c48576dc
--- /dev/null
+++ b/client/src/pages/Landing/partials/Contact/contact.scss
@@ -0,0 +1,17 @@
+
+@use 'styles/mixins.scss' as mx;
+@use 'styles/settings.scss' as s;
+
+.landing-page {
+ .contact-section {
+ .heading-container {
+ margin-bottom: 40px;
+ text-align: center;
+
+ @include mx.breakpoint(medium) {
+ margin-bottom: 60px;
+ }
+ }
+ }
+}
+
diff --git a/client/src/pages/Landing/partials/Contact/index.tsx b/client/src/pages/Landing/partials/Contact/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..a3ff1315aa69edaebd2eb82da6c9a167499b5ca4
--- /dev/null
+++ b/client/src/pages/Landing/partials/Contact/index.tsx
@@ -0,0 +1,39 @@
+
+import ContactForm from 'components/forms/ContactForm';
+
+import './contact.scss';
+
+export default function Contact() {
+ return (
+ <section className="contact-section content-container">
+ <header className="heading-container">
+ <h2>Get in touch</h2>
+ <p className="heading-lead">
+ Do you still have a question? Just contact us directly and we will be glad
+ to help you resolve the issue.
+ </p>
+ </header>
+ <ContactForm onSubmit={
+ (
+ firstname: string,
+ basename: string,
+ email: string,
+ subject: string,
+ message: string
+ ) => {
+ window.location.href = 'mailto:dplanoetscher@unibz.it'
+ + '?subject='
+ + encodeURIComponent(subject)
+ + '&body='
+ + encodeURIComponent(
+ `Name: ${firstname} ${basename}\n`
+ + `Email: ${email}\n`
+ + 'Message:\n\n'
+ + message
+ );
+ }
+ } />
+ </section>
+ )
+}
+
diff --git a/client/src/pages/Landing/partials/Features/features.scss b/client/src/pages/Landing/partials/Features/features.scss
new file mode 100644
index 0000000000000000000000000000000000000000..f46b65b3f7fc018c2281e053939f2926338b2a63
--- /dev/null
+++ b/client/src/pages/Landing/partials/Features/features.scss
@@ -0,0 +1,72 @@
+
+@use 'styles/mixins.scss' as mx;
+@use 'styles/settings.scss' as s;
+
+.landing-page {
+ .features-section {
+ h2 {
+ text-align: center;
+ margin-bottom: 40px;
+ }
+
+ strong {
+ color: s.$primary;
+ }
+
+ .feature-list {
+ margin: -20px;
+
+ @include mx.breakpoint(medium) {
+ display: flex;
+ justify-content: space-between;
+ margin: -20px;
+ }
+ }
+
+ .feature-item {
+ background: s.$background-white;
+ padding: 1.5rem 0;
+ display: block;
+ padding: 30px;
+ border-radius: 25px;
+ margin: 20px;
+ will-change: transform;
+
+ @include mx.breakpoint(medium) {
+ padding: 40px;
+ width: calc(100% / 3 - 40px);
+ }
+
+ &:hover {
+ transform: translateY(-10px);
+ box-shadow: 0 -5px 40px rgba(s.$black, 0.05);
+ }
+ }
+
+ .feature-icon {
+ font-size: 42px;
+ color: s.$primary;
+ background: s.$background-light;
+ width: 80px;
+ height: 80px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border-radius: 15px;
+ margin-bottom: 20px;
+
+ @include mx.breakpoint(medium) {
+ margin-bottom: 40px;
+ }
+ }
+
+ .feature-title {
+ margin-bottom: 10px;
+
+ @include mx.breakpoint(medium) {
+ margin-bottom: 20px;
+ }
+ }
+ }
+}
+
diff --git a/client/src/pages/Landing/partials/Features/index.tsx b/client/src/pages/Landing/partials/Features/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..4d49580cddf3f3bd53e41bc879893a663c9d1588
--- /dev/null
+++ b/client/src/pages/Landing/partials/Features/index.tsx
@@ -0,0 +1,35 @@
+
+import './features.scss';
+
+export default function Features() {
+ return (
+ <section className="features-section content-container">
+ <h2>Revolutionize your<br />planning</h2>
+ <div className="feature-list">
+ <div className="feature-item">
+ <span className="feature-icon material-icons">query_stats</span>
+ <h3 className="feature-title">Analyze your productivity</h3>
+ <div className="feature-description">
+ Find your <strong>weaknesses and strengths</strong> by analyzing graphs
+ </div>
+ </div>
+ <div className="feature-item">
+ <span className="feature-icon material-icons">event</span>
+ <h3 className="feature-title">Automatic timetables</h3>
+ <div className="feature-description">
+ Generate your automatic timetables based on <strong>priorities and decencies</strong> of
+ your tasks
+ </div>
+ </div>
+ <div className="feature-item">
+ <span className="feature-icon material-icons">group</span>
+ <h3 className="feature-title">Team-based</h3>
+ <div className="feature-description">
+ Distribute task within your Teams based on <strong>profession and difficulty</strong>
+ </div>
+ </div>
+ </div>
+ </section>
+ )
+}
+
diff --git a/client/src/pages/Landing/partials/Intro/index.tsx b/client/src/pages/Landing/partials/Intro/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..23e4b40f2e5b9c13f1574208fc3eb232d41f2cbd
--- /dev/null
+++ b/client/src/pages/Landing/partials/Intro/index.tsx
@@ -0,0 +1,34 @@
+
+import ButtonLink from 'components/navigation/ButtonLink';
+
+import TasksImage from 'images/preview/tasks.jpg';
+import TeamsImage from 'images/preview/teams.jpg';
+import ProjectsImage from 'images/preview/projects.jpg';
+
+import './intro.scss';
+
+export default function Intro() {
+ return (
+ <section className="intro-section content-container">
+ <header className="heading-container">
+ <h1>ryoko<span className="text-primary">.</span></h1>
+ <div className="subtitle">Plan your projects like a journey</div>
+ <div className="button-container">
+ <ButtonLink href="/tasks">Get started</ButtonLink>
+ </div>
+ </header>
+ <div className="preview-images">
+ <div className="phone-image">
+ <img src={ProjectsImage} alt="Tasks preview" />
+ </div>
+ <div className="phone-image">
+ <img src={TasksImage} alt="Tasks preview" />
+ </div>
+ <div className="phone-image">
+ <img src={TeamsImage} alt="Tasks preview" />
+ </div>
+ </div>
+ </section>
+ )
+}
+
diff --git a/client/src/pages/Landing/partials/Intro/intro.scss b/client/src/pages/Landing/partials/Intro/intro.scss
new file mode 100644
index 0000000000000000000000000000000000000000..3f589dab9ff38ea3f0f0d8155427a8e9d2e06998
--- /dev/null
+++ b/client/src/pages/Landing/partials/Intro/intro.scss
@@ -0,0 +1,116 @@
+
+@use 'styles/mixins.scss' as mx;
+@use 'styles/settings.scss' as s;
+
+.landing-page {
+ .intro-section {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ padding-top: 60px;
+
+ @include mx.breakpoint(large) {
+ padding-top: 175px;
+ }
+
+ .heading-container {
+ text-align: center;
+ width: 100%;
+ max-width: 580px;
+ margin-bottom: 30px;
+
+ @include mx.breakpoint(large) {
+ margin-bottom: 60px;
+ }
+ }
+
+ h1 {
+ font-size: 24px;
+ text-align: center;
+
+ @include mx.breakpoint(medium) {
+ font-size: 36px;
+ }
+
+ @include mx.breakpoint(large) {
+ font-size: 64px;
+ }
+ }
+
+ .subtitle {
+ font-weight: s.$weight-semi-bold;
+ font-size: 16px;
+
+ @include mx.breakpoint(medium) {
+ font-size: 20px;
+ }
+
+ @include mx.breakpoint(large) {
+ font-size: 36px;
+ }
+ }
+
+ .preview-images {
+ display: flex;
+ align-items: flex-start;
+ }
+
+ .phone-image {
+ display: block;
+ border-radius: 25px;
+ position: relative;
+ z-index: 0;
+ box-shadow: 0 0 40px rgba(s.$black, 0.25);
+ overflow: hidden;
+ margin: 0 10px;
+ border: 10px solid s.$text;
+
+ img {
+ display: block;
+ width: 100%;
+ }
+
+ &:before {
+ content: ' ';
+ position: absolute;
+ width: 25%;
+ background: s.$text;
+ left: 50%;
+ height: 10px;
+ top: -5px;
+ border-radius: 5px;
+ z-index: 2;
+ transform: translateX(-50%);
+
+ @include mx.breakpoint(medium) {
+ height: 20px;
+ }
+ }
+
+ &:nth-child(2) {
+ @include mx.breakpoint(medium) {
+ margin-top: 100px;
+ }
+ }
+
+ &:nth-child(odd) {
+ display: none;
+
+ @include mx.breakpoint(medium) {
+ display: block
+ }
+ }
+
+ @include mx.breakpoint(medium) {
+ width: calc(100% / 3 - 60px);
+ margin: 0 30px;
+ }
+ }
+
+ .button-container {
+ margin-top: 30px;
+ }
+ }
+}
+
diff --git a/client/src/pages/Landing/partials/Team/index.tsx b/client/src/pages/Landing/partials/Team/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..5782907d3f765deb064969eea26bbd5a8a6b059c
--- /dev/null
+++ b/client/src/pages/Landing/partials/Team/index.tsx
@@ -0,0 +1,64 @@
+
+import Tag from 'components/ui/Tag';
+
+import ImageRoland from 'images/roland-bernard.jpg';
+import ImageDaniel from 'images/daniel-planoetscher.jpg';
+
+import './team.scss';
+
+export default function Team() {
+ return (
+ <section className="team-section content-container">
+ <header className="heading-container">
+ <h2>Our Team</h2>
+ <p className="heading-lead">
+ People are what makes a project great, and here are the people that make us
+ great.
+ </p>
+ </header>
+ <div className="team-list">
+ <div className="team-member">
+ <img
+ className="team-member-image"
+ src={ImageDaniel}
+ width="200" height="200"
+ alt=""
+ />
+ <div className="team-member-info">
+ <Tag label="Web Developer" color="purple" />
+ <h3 className="team-member-name">Daniel Planötscher</h3>
+ <div className="team-member-description">
+ Besides studying Computer Science, Daniel also enjoys taking photos and
+ designing user interfaces for hobby projects, which is why he focuses on
+ the FrontEnd of ryoko. Furthermore, he brings significant industry
+ experience working as a web developer using state of the art tools and
+ programming techniques. He is involved in the creation of modern
+ websites for dozens of clients with advanced requirements.
+ </div>
+ </div>
+ </div>
+ <div className="team-member">
+ <img
+ className="team-member-image"
+ src={ImageRoland}
+ width="200" height="200"
+ alt=""
+ />
+ <div className="team-member-info">
+ <Tag label="Software Engineer" color="purple" />
+ <h3 className="team-member-name">Roland Bernard</h3>
+ <div className="team-member-description">
+ Studying Computer Science and participating in Competitive Programming
+ Competitions, Roland constitutes a integral part of our development team
+ at ryoko. Like all members of our team he also has experience in the
+ industry, mainly working on business management systems and software for
+ the financial sector. He is also experienced in the implementation of
+ development tools and infrastructure components.
+ </div>
+ </div>
+ </div>
+ </div>
+ </section>
+ )
+}
+
diff --git a/client/src/pages/Landing/partials/Team/team.scss b/client/src/pages/Landing/partials/Team/team.scss
new file mode 100644
index 0000000000000000000000000000000000000000..b036e31dae1adfa6762308d7f1b1035a1cc6325c
--- /dev/null
+++ b/client/src/pages/Landing/partials/Team/team.scss
@@ -0,0 +1,53 @@
+
+@use 'styles/mixins.scss' as mx;
+@use 'styles/settings.scss' as s;
+
+.landing-page {
+ .team-section {
+ .heading-container {
+ text-align: center;
+ }
+
+ .team-container {
+ @include mx.breakpoint(large) {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+ }
+
+ .team-list {
+ margin-top: 20px;
+ }
+
+ .team-member {
+ margin: 30px 0;
+
+ @include mx.breakpoint(medium) {
+ background: s.$background-white;
+ padding: 50px;
+ border-radius: 25px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .tag {
+ margin-bottom: 10px;
+ padding: 2px 15px;
+ }
+
+ .team-member-image {
+ margin-right: 0;
+ margin-bottom: 3rem;
+ border-radius: 50%;
+
+ @include mx.breakpoint(medium) {
+ margin-right: 3rem;
+ margin-bottom: 0;
+ }
+ }
+ }
+ }
+}
+
diff --git a/client/src/pages/Projects/ProjectDetail/ProjectDetails/index.tsx b/client/src/pages/Projects/ProjectDetail/ProjectDetails/index.tsx
index cf083b7a2168b4854fe9807b6ddb5aae953826c7..d1f64bf4e338eabd3b60d0a11a9baf95728c1cbd 100644
--- a/client/src/pages/Projects/ProjectDetail/ProjectDetails/index.tsx
+++ b/client/src/pages/Projects/ProjectDetail/ProjectDetails/index.tsx
@@ -1,9 +1,11 @@
import { useEffect, useState } from 'react';
+import { useParams } from 'react-router';
import { getTeam } from 'adapters/team';
import { formatDate, subtractTime } from 'timely';
+import Dropdown from 'components/navigation/Dropdown';
import DetailGrid from 'components/layout/DetailGrid';
import LoadingScreen from 'components/ui/LoadingScreen';
import { getProjectActivity, Project } from 'adapters/project';
@@ -11,6 +13,16 @@ import BarChart, { ChartItem, parseActivity } from 'components/graphs/BarChart';
import './project-details.scss';
+enum Timespan {
+ WEEK = 'week',
+ MONTH = 'month',
+ YEAR = 'year',
+}
+
+interface Params {
+ time?: Timespan;
+}
+
interface Props {
project: Project
}
@@ -19,13 +31,34 @@ export default function ProjectDetails({ project }: Props) {
const [teams, setTeams] = useState<string[]>([]);
const [activity, setActivity] = useState<ChartItem[]>([]);
+ const time = useParams<Params>().time ?? Timespan.WEEK;
+ const dropdowns = [
+ {
+ time: 'week',
+ label: 'Last week',
+ route: '/projects/' + project.id + '/stats/week'
+ },
+ {
+ time: 'month',
+ label: 'Last month',
+ route: '/projects/' + project.id + '/stats/month'
+ },
+ {
+ time: 'year',
+ label: 'Last year',
+ route: '/projects/' + project.id + '/stats/year'
+ }
+ ];
+
useEffect(() => {
- project.teams.forEach(teamId => {
- getTeam(teamId).then((team) => setTeams(prev => [...prev, team.name]));
- });
- getProjectActivity(project.id, subtractTime(new Date(), 1, 'week'), new Date()).then((a) => setActivity(parseActivity(a)))
+ Promise.all(project.teams.map(getTeam))
+ .then(teams => setTeams(teams.map(team => team.name)));
}, [project]);
+ useEffect(() => {
+ getProjectActivity(project.id, subtractTime(new Date(), 1, time), new Date()).then((a) => setActivity(parseActivity(a)))
+ }, [project, time]);
+
let details = [{
icon: 'group',
title: 'Teams',
@@ -43,6 +76,12 @@ export default function ProjectDetails({ project }: Props) {
return (
<section className="project-details">
<DetailGrid details={details} />
+ <Dropdown items={dropdowns.filter(d => d.time !== time)}>
+ <span className="material-icons icon">
+ expand_more
+ </span>
+ {dropdowns.find(d => d.time === time)?.label}
+ </Dropdown>
{
activity
? <BarChart unit="h" multiplier={1 / 60 / 60 / 1000} data={activity} />
diff --git a/client/src/pages/Projects/ProjectDetail/ProjectDetails/project-details.scss b/client/src/pages/Projects/ProjectDetail/ProjectDetails/project-details.scss
index dd7355f9d6a58dcd7a4e02b7f6a4e1fa68cb1f62..b17dd3a72e1ed0a555fdb02c18b12f7b24840751 100644
--- a/client/src/pages/Projects/ProjectDetail/ProjectDetails/project-details.scss
+++ b/client/src/pages/Projects/ProjectDetail/ProjectDetails/project-details.scss
@@ -6,6 +6,7 @@
}
.bar-chart-container {
+ margin-top: 8px;
margin-bottom: 30px;
}
}
diff --git a/client/src/pages/Projects/ProjectDetail/ProjectTasks/index.tsx b/client/src/pages/Projects/ProjectDetail/ProjectTasks/index.tsx
index 9019cd44af9640919d3a0ee478a437d4295df52d..7c557b13b0eac276f9533729e5e9ad37a83e7b6c 100644
--- a/client/src/pages/Projects/ProjectDetail/ProjectTasks/index.tsx
+++ b/client/src/pages/Projects/ProjectDetail/ProjectTasks/index.tsx
@@ -27,7 +27,7 @@ export default function ProjectTasks({ project }: Props) {
useEffect(() => {
setShownTasks(allTasks.filter(task => (
- task.name.indexOf(filter.term) >= 0
+ task.name.toLowerCase().includes(filter.term.toLowerCase())
&& filter.tags.includes(task.status)
)));
}, [filter, allTasks])
@@ -38,7 +38,7 @@ export default function ProjectTasks({ project }: Props) {
setFilter={setFilter}
tags={
Object.values(Status).map(status => ({
- label: status.toString(),
+ label: status,
color: StatusColors.get(status.toString()),
}))
}
diff --git a/client/src/pages/Projects/ProjectDetail/index.tsx b/client/src/pages/Projects/ProjectDetail/index.tsx
index d345422d2fb6e3cb9abbebc54659a600b22f9fd4..0060bf511e8ec9a7cc9cad3d32630fca613254c5 100644
--- a/client/src/pages/Projects/ProjectDetail/index.tsx
+++ b/client/src/pages/Projects/ProjectDetail/index.tsx
@@ -35,7 +35,7 @@ export default function ProjectDetail() {
setTabs([
{
label: 'Details',
- route: '/projects/' + projectId,
+ route: ['/projects/' + projectId, '/projects/' + projectId + '/stats/:time'],
component: <ProjectDetails project={project} />
},
{
diff --git a/client/src/pages/Projects/index.tsx b/client/src/pages/Projects/index.tsx
index 888271e19ee36ec23320196002f5765f62cb3936..522864ad1cdcbd1f14940e79df84ce01783d8600 100644
--- a/client/src/pages/Projects/index.tsx
+++ b/client/src/pages/Projects/index.tsx
@@ -17,12 +17,10 @@ export default function Projects() {
const [shownProjects, setShownProjects] = useState<Project[]>([]);
const [slideProjects, setSlideProjects] = useState<Project[]>([]);
- const allStatus = Object.values(Status).map((status) => {
- return {
- label: status.toString(),
- color: StatusColors.get(status.toString())
- }
- });
+ const allStatus = Object.values(Status).map(status => ({
+ label: status,
+ color: StatusColors.get(status.toString())
+ }));
useEffect(() => {
getProjects().then((projects) => {
@@ -35,7 +33,7 @@ export default function Projects() {
useEffect(() => {
setShownProjects(allProjects.filter(project => {
- return project.name.includes(filter.term)
+ return project.name.toLowerCase().includes(filter.term.toLowerCase())
&& filter.tags.some(tag => tag === project.status);
}));
}, [filter, allProjects])
diff --git a/client/src/pages/Stats/index.tsx b/client/src/pages/Stats/index.tsx
index b4c571bf2d374e444976898309b45e7b928399c9..630a4fee807bf5a9d308770578411db63ba86149 100644
--- a/client/src/pages/Stats/index.tsx
+++ b/client/src/pages/Stats/index.tsx
@@ -1,42 +1,81 @@
import { useEffect, useState } from 'react';
+import { useParams } from 'react-router';
import { subtractTime } from 'timely';
import { getUserActivity, getUserCompletion } from 'adapters/user';
import LoadingScreen from 'components/ui/LoadingScreen';
import CompletionGrid from 'components/layout/CompletionGrid';
+import Dropdown from 'components/navigation/Dropdown';
import { CompletionProps, parseCompletion } from 'components/ui/Completion';
import BarChart, { ChartItem, parseActivity } from 'components/graphs/BarChart';
import './stats.scss';
+enum Timespan {
+ WEEK = 'week',
+ MONTH = 'month',
+ YEAR = 'year',
+}
+
+interface Params {
+ time?: Timespan;
+}
+
export default function Tasks() {
const [completions, setCompletions] = useState<CompletionProps[]>();
const [activity, setActivity] = useState<ChartItem[]>();
+ const time = useParams<Params>().time ?? Timespan.WEEK;
+ const dropdowns = [
+ {
+ time: 'week',
+ label: 'Last week',
+ route: '/stats/week'
+ },
+ {
+ time: 'month',
+ label: 'Last month',
+ route: '/stats/month'
+ },
+ {
+ time: 'year',
+ label: 'Last year',
+ route: '/stats/year'
+ }
+ ];
+
useEffect(() => {
getUserCompletion().then((completion) => setCompletions(parseCompletion(completion)));
- getUserActivity(subtractTime(new Date(), 1, 'week'), new Date()).then((a) => setActivity(parseActivity(a)))
- }, []);
+ getUserActivity(subtractTime(new Date(), 1, time), new Date()).then((a) => setActivity(parseActivity(a)))
+ }, [time]);
return (
- (completions && activity)
- ? (
- <div className="stats-page">
- <div className="content-container">
- <h1 className="underlined">Stats</h1>
- <div className="description-container">
- Here are some of your recent statistics.
- </div>
- <h2>Activity</h2>
- <BarChart unit="h" multiplier={1 / 60 / 60 / 1000} data={activity} />
- <h2>Completion</h2>
- <CompletionGrid items={completions} />
- </div>
+ <div className="stats-page">
+ <div className="content-container">
+ <h1 className="underlined">Stats</h1>
+ <div className="description-container">
+ Here are some of your recent statistics.
</div>
- )
- : <LoadingScreen />
+ <Dropdown items={dropdowns.filter(d => d.time !== time)}>
+ <span className="material-icons icon">
+ expand_more
+ </span>
+ {dropdowns.find(d => d.time === time)?.label}
+ </Dropdown>
+ <h2>Activity</h2>
+ { activity
+ ? <BarChart unit="h" multiplier={1 / 60 / 60 / 1000} data={activity} />
+ : <LoadingScreen />
+ }
+ <h2>Completion</h2>
+ { completions
+ ? <CompletionGrid items={completions} />
+ : <LoadingScreen />
+ }
+ </div>
+ </div>
);
}
diff --git a/client/src/pages/Tasks/TaskDetail/TaskAssignees/index.tsx b/client/src/pages/Tasks/TaskDetail/TaskAssignees/index.tsx
index ade815a68663716563f0ca1f225ecd7aa506c5cf..22c055f78223eae0dc426fcfb16158e06625c748 100644
--- a/client/src/pages/Tasks/TaskDetail/TaskAssignees/index.tsx
+++ b/client/src/pages/Tasks/TaskDetail/TaskAssignees/index.tsx
@@ -1,5 +1,6 @@
import { AssignedUser } from 'adapters/user';
+import { durationFor, formatDuration } from 'timely';
import UserList from 'components/layout/UserList';
import LoadingScreen from 'components/ui/LoadingScreen';
@@ -16,7 +17,9 @@ export default function TaskAssignees({ assignees }: Props) {
? (
<UserList
users={assignees}
- info={user => user.time + " min"}
+ info={user =>
+ formatDuration(durationFor(user.time, 'minute'), 'second', 2, true)
+ }
/>
)
: <LoadingScreen />
diff --git a/client/src/pages/Tasks/TaskDetail/index.tsx b/client/src/pages/Tasks/TaskDetail/index.tsx
index d49d84d1e36e98db26315b602215034fbd56e1d7..b3a8336fbf05819cd00219aeea70aab599314f39 100644
--- a/client/src/pages/Tasks/TaskDetail/index.tsx
+++ b/client/src/pages/Tasks/TaskDetail/index.tsx
@@ -1,6 +1,6 @@
import { Link } from 'react-router-dom';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
import { useHistory, useParams } from 'react-router';
import { getTeam } from 'adapters/team';
@@ -8,7 +8,7 @@ import { AssignedUser } from 'adapters/user';
import { StatusColors } from 'adapters/common';
import { getLoggedInUser } from 'adapters/auth';
import { getProject, Project } from 'adapters/project';
-import { getTask, getTaskAssignees, Task, TaskAssignment } from 'adapters/task';
+import { getTask, getTaskAssignees, Task, updateTask } from 'adapters/task';
import Tag from 'components/ui/Tag';
import LongText from 'components/ui/LongText';
@@ -21,6 +21,7 @@ import TaskAssignees from './TaskAssignees';
import TaskComments from './TaskComments';
import './task-detail.scss';
+import AssignForm from 'components/forms/AssignForm';
export interface Params {
taskId: string;
@@ -31,11 +32,11 @@ export default function TaskDetail() {
const [project, setProject] = useState<Project>();
const [teamNames, setTeamNames] = useState<string[]>([]);
const [assignees, setAssignees] = useState<AssignedUser[]>([]);
- const [assignment, setAssignment] = useState<TaskAssignment>();
const history = useHistory();
const { taskId } = useParams<Params>();
const userId = getLoggedInUser();
+ const assignment = task?.assigned.find(a => a.user === userId);
useEffect(() => {
getTask(taskId).then((task) => {
@@ -47,11 +48,30 @@ export default function TaskDetail() {
.map(team => team.name)
);
});
- getTaskAssignees(taskId).then(setAssignees);
- setAssignment(task.assigned.find(a => a.user === userId))
- }).catch(() => {});
+ }).catch(() => { });
+ getTaskAssignees(taskId).then(setAssignees);
}, [taskId, userId, history]);
+ const onAssign = useCallback((time: number) => {
+ const reloadData = () => {
+ getTask(taskId).then(setTask);
+ getTaskAssignees(taskId).then(setAssignees);
+ };
+ if (time > 0) {
+ updateTask(taskId, {
+ remove_assigned: [userId],
+ add_assigned: [{
+ user: userId,
+ time: time,
+ finished: assignment?.finished ?? false,
+ }],
+ }).then(reloadData);
+ } else {
+ updateTask(taskId, { remove_assigned: [userId] })
+ .then(reloadData);
+ }
+ }, [taskId, userId, assignment]);
+
if (task) {
return (
<div className={'tasks-detail-page theme-' + task.color}>
@@ -80,9 +100,12 @@ export default function TaskDetail() {
</ButtonLink>
)
}
- <ButtonLink href={'/tasks/' + taskId + '/edit'} className="dark expanded">
- Edit
- </ButtonLink>
+ <div className="button-container">
+ <AssignForm onAssign={onAssign} initialTime={assignment && assignment.time} />
+ <ButtonLink href={'/tasks/' + taskId + '/edit'} className="dark expanded">
+ Edit
+ </ButtonLink>
+ </div>
<Tabs
tabs={[
{
diff --git a/client/src/pages/Tasks/TaskDetail/task-detail.scss b/client/src/pages/Tasks/TaskDetail/task-detail.scss
index 421898b64cb3911e4eb83cee686be7e9910bd736..1cf31546f90899b5197ffc229c327e893f242487 100644
--- a/client/src/pages/Tasks/TaskDetail/task-detail.scss
+++ b/client/src/pages/Tasks/TaskDetail/task-detail.scss
@@ -1,3 +1,4 @@
+@use 'styles/mixins.scss' as mx;
.tasks-detail-page {
.tag {
@@ -19,5 +20,16 @@
.button {
margin-bottom: 10px;
}
-}
+ .button-container {
+ @include mx.breakpoint(medium) {
+ display: flex;
+ margin: -5px;
+
+ .button {
+ margin: 5px;
+
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/client/src/pages/Tasks/index.tsx b/client/src/pages/Tasks/index.tsx
index 93cd123d0c03feca9bc5c3d4b297104f319ba49b..18452f55c18de7909b37b83fdbf9f08f8ac6ee14 100644
--- a/client/src/pages/Tasks/index.tsx
+++ b/client/src/pages/Tasks/index.tsx
@@ -1,6 +1,7 @@
import { useEffect, useState } from 'react';
+import { durationFor, formatDuration } from 'timely';
import { getTeams, Team } from 'adapters/team';
import { getPossibleTasks, Task } from 'adapters/task';
import { getCurrentUser, getUserTasks, User } from 'adapters/user';
@@ -29,7 +30,7 @@ export default function Tasks() {
.filter(task =>
!task.assigned.some(ass => ass.user === user?.id)
&& task.requirements.some(
- req => teams?.some(team => team.role === req.role)
+ req => teams?.some(team => team.role === req.role)
)
);
@@ -39,32 +40,33 @@ export default function Tasks() {
<div className="content-container">
<section className="intro-section">
<h1 className="underlined">Tasks</h1>
+ <p>Hey {user.realname ?? user.username}, you have <strong>{tasks.length} {tasks.length !== 1 ? 'tasks' : 'task'}</strong>.</p>
</section>
- <p>Hey {user.realname ?? user.username}, you have <strong>{tasks.length} {tasks.length > 1 ? 'tasks' : 'task'}</strong>.</p>
<section className="tasks-container">
+ <h2>Your tasks</h2>
+ <p>Here are some tasks for which you were assigned directly, ordered by their priority.</p>
{
tasks.length > 0
? (
<div className="tasks-list">
- {
- tasks
- .map((task) => (
- <TaskComponent
- key={task.id}
- task={task}
- subtitle={
- task.assigned
- .find(assignee => assignee.user === user.id)?.time
- + ' min'
- }
- />
- ))
- }
+ {tasks.map((task) => {
+ const time = task.assigned.find(assignee => assignee.user === user.id)?.time ?? 0;
+ return (
+ <TaskComponent
+ key={task.id}
+ task={task}
+ subtitle={
+ formatDuration(durationFor(time, 'minute'), 'second', 2, true)
+ }
+ />
+ )
+ })}
</div>
)
- : (<div className="task-error">No open tasks found</div>)
+ : (<div className="task-error">No open tasks found.</div>)
}
- <h2>Other tasks you could do</h2>
+ <h2>Recommended tasks</h2>
+ <p>Here are some tasks you could do, since you fit their requirements.</p>
{
acceptableTasks.length > 0
? (
@@ -80,11 +82,11 @@ export default function Tasks() {
}
</div>
)
- : (<div className="task-error">You don't fit the requirements for any other tasks</div>)
+ : (<div className="task-error">No open tasks found.</div>)
}
</section>
</div>
- </div >
+ </div>
);
} else {
return <LoadingScreen />
diff --git a/client/src/pages/Tasks/tasks.scss b/client/src/pages/Tasks/tasks.scss
index 4da644bbc87ee5a450620ac07c6bbdc66b3e43fb..249d37f7382f9502259bcd2cfb8f3f1c753a09fc 100644
--- a/client/src/pages/Tasks/tasks.scss
+++ b/client/src/pages/Tasks/tasks.scss
@@ -6,13 +6,19 @@
.tasks-page {
h2 {
margin-top: 40px;
+ margin-bottom: 10px;
+
+ @include mx.breakpoint(medium) {
+ margin-top: 60px;
+ margin-bottom: 10px;
+ }
}
.intro-section {
font-size: fn.toRem(18);
@include mx.breakpoint(large) {
- font-size: fn.toRem(24);
+ font-size: fn.toRem(20);
}
}
@@ -21,15 +27,17 @@
margin-bottom: 60px;
.task {
+ margin-top: 15px;
margin-bottom: 30px;
}
}
-
+
.task-error {
margin-top: 20px;
border-radius: 5px;
padding: 20px;
background: s.$background-white;
+ text-align: center;
}
}
diff --git a/client/src/pages/Teams/TeamsStats/index.tsx b/client/src/pages/Teams/TeamsStats/index.tsx
index 255ccf61161f4d01737469b2f145c2eb9b108cc0..b56fc4eafa9b8ddcdb3e67bf130734bfe3a61451 100644
--- a/client/src/pages/Teams/TeamsStats/index.tsx
+++ b/client/src/pages/Teams/TeamsStats/index.tsx
@@ -7,7 +7,7 @@ import { getTeamActivity, getTeamCompletion } from 'adapters/team';
import LoadingScreen from 'components/ui/LoadingScreen';
import CompletionGrid from 'components/layout/CompletionGrid';
-import Dropdown, { DropDownItem } from 'components/navigation/Dropdown';
+import Dropdown from 'components/navigation/Dropdown';
import { CompletionProps, parseCompletion } from 'components/ui/Completion';
import BarChart, { ChartItem, parseActivity } from 'components/graphs/BarChart';
@@ -27,14 +27,13 @@ interface Params {
time: Timespan;
}
-interface FilterDropdownItem extends DropDownItem {
- time: string
-}
-
export default function TeamsStats({ teamId }: Props) {
const [activity, setActivity] = useState<ChartItem[]>([]);
const [completions, setCompletions] = useState<CompletionProps[]>([]);
- const [dropdowns] = useState<FilterDropdownItem[]>([
+ const history = useHistory();
+
+ const { time } = useParams<Params>();
+ const dropdowns = [
{
time: 'week',
label: 'Last week',
@@ -50,10 +49,7 @@ export default function TeamsStats({ teamId }: Props) {
label: 'Last year',
route: '/teams/' + teamId + '/stats/year'
}
- ]);
- const history = useHistory();
-
- const { time } = useParams<Params>();
+ ];
useEffect(() => {
getTeamActivity(teamId, subtractTime(new Date(), 1, time), new Date())
diff --git a/client/src/pages/Teams/index.tsx b/client/src/pages/Teams/index.tsx
index 445190902be222fd0686990c28e0abcf9af2eab3..8b1ddd9421c54b789c74efd4c95ac498716f75ca 100644
--- a/client/src/pages/Teams/index.tsx
+++ b/client/src/pages/Teams/index.tsx
@@ -16,12 +16,14 @@ import TeamsMembers from './TeamsMembers';
import TeamsStats from './TeamsStats';
import './teams.scss';
+import ErrorScreen from 'components/ui/ErrorScreen';
export interface Params {
teamId: string;
}
export default function Teams() {
+ const [error, setError] = useState<Boolean>(false);
const [teams, setTeams] = useState<Team[]>();
const [projects, setProjects] = useState<Project[]>([]);
const [members, setMembers] = useState<TeamMember[]>([]);
@@ -45,18 +47,18 @@ export default function Teams() {
}, [teamId, teamParamId, teams, history]);
useEffect(() => {
- getTeams().then(setTeams);
+ getTeams().then(setTeams).catch(setError);
}, []);
useEffect(() => {
if (teamId) {
- getTeamProjects(teamId).then(setProjects);
+ getTeamProjects(teamId).then(setProjects).catch(setError);
}
}, [teamId]);
useEffect(() => {
if (teamId) {
- getTeamMembers(teamId).then(setMembers);
+ getTeamMembers(teamId).then(setMembers).catch(setError);
}
}, [teamId]);
@@ -101,55 +103,61 @@ export default function Teams() {
], [members, projects]);
if (teamId) {
- return (
- <div className="teams-page">
- <div className="content-container">
- <h1 className="underlined">Teams</h1>
- <div className="description-container">
- <p>Here you can see information about your teams, as well as its stats and members.</p>
- </div>
- {
- dropdownList
- ? (
- <Dropdown items={dropdownList}>
- <h2>{currentTeam?.name}</h2>
- <span className="material-icons icon">
- expand_more
- </span>
- </Dropdown>
- )
- : <LoadingScreen />
- }
- {
- details
- ? <DetailGrid details={details} />
- : (<LoadingScreen />)
- }
- <div className="buttons">
- <div className="button-row">
- <ButtonLink href={'/teams/' + currentTeam?.id + '/edit'} className="expanded">
- Edit
- </ButtonLink>
- <ButtonLink href={'/teams/create'} className="expanded">
- Create a new team
- </ButtonLink>
+ if (!error) {
+
+ return (
+ <div className="teams-page">
+ <div className="content-container">
+ <h1 className="underlined">Teams</h1>
+ <div className="description-container">
+ <p>Here you can see information about your teams, as well as its stats and members.</p>
+ </div>
+ {
+ dropdownList
+ ? (
+ <Dropdown items={dropdownList}>
+ <h2>{currentTeam?.name}</h2>
+ <span className="material-icons icon">
+ expand_more
+ </span>
+ </Dropdown>
+ )
+ : <LoadingScreen />
+ }
+ {
+ details
+ ? <DetailGrid details={details} />
+ : (<LoadingScreen />)
+ }
+ <div className="buttons">
+ <div className="button-row">
+ <ButtonLink href={'/teams/' + currentTeam?.id + '/edit'} className="expanded">
+ Edit
+ </ButtonLink>
+ <ButtonLink href={'/teams/create'} className="expanded">
+ Create a new team
+ </ButtonLink>
+ </div>
+ {
+ teams && teams.length > 1 && (
+ <Button className="expanded dark" onClick={leaveCurrentTeam}>
+ Leave Team
+ </Button>
+ )
+ }
</div>
{
- teams && teams.length > 1 && (
- <Button className="expanded dark" onClick={leaveCurrentTeam}>
- Leave Team
- </Button>
- )
+ tabs
+ ? <Tabs tabs={tabs} />
+ : <LoadingScreen />
}
</div>
- {
- tabs
- ? <Tabs tabs={tabs} />
- : <LoadingScreen />
- }
</div>
- </div>
- )
+ )
+ } else {
+ return (<ErrorScreen />)
+ }
+
} else {
return (
<LoadingScreen />
diff --git a/client/src/styles/settings.scss b/client/src/styles/settings.scss
index 20d59225508503e1c0c606455996ecffa7d27e82..9e027a9dde61b38e8222064532ca4bd3484dfeee 100644
--- a/client/src/styles/settings.scss
+++ b/client/src/styles/settings.scss
@@ -7,7 +7,7 @@ $light-colors: (
'background-dark': #11061A,
'background-light': #f9f9f9,
'background-white': #ffffff,
- 'background-input': #f4f4f4,
+ 'background-input': #ffffff,
'background': #EEF5F5,
'text': #3A5255,
);
diff --git a/client/src/timely.test.ts b/client/src/timely.test.ts
index 79c7269ee15b267f374a6920cfc07461381196c4..62c1a9d26b43ff2c55aed39585935e093bc7bf0d 100644
--- a/client/src/timely.test.ts
+++ b/client/src/timely.test.ts
@@ -8,6 +8,7 @@ import {
addTime,
subtractTime,
durationFor,
+ formatDateShort
} from 'timely';
test('simple duration format works as expected', () => {
@@ -94,11 +95,11 @@ test('ten months can be formatted as expected', () => {
expect(formatDuration(10 * 30 * 24 * 60 * 60 * 1000)).toEqual('10 months');
});
-test('one month can be formatted as expected', () => {
+test('one year can be formatted as expected', () => {
expect(formatDuration(366 * 24 * 60 * 60 * 1000)).toEqual('one year');
});
-test('ten months can be formatted as expected', () => {
+test('ten years can be formatted as expected', () => {
expect(formatDuration(10 * 366 * 24 * 60 * 60 * 1000)).toEqual('10 years');
});
@@ -397,3 +398,6 @@ test('get duration from amount and unit', () => {
expect(durationFor(10, 'hour')).toEqual(10 * 60 * 60 * 1000);
});
+test('format simple date', () => {
+ expect(formatDateShort(new Date('2021-04-29T00:00:00'))).toEqual('2021-04-29');
+});
diff --git a/client/src/timely.ts b/client/src/timely.ts
index 6620021a2fc5df6cb59d3bf1f83ca4bf36af9bdf..3741c5d90596903c0195ec88f2cf3eedf5e7f30c 100644
--- a/client/src/timely.ts
+++ b/client/src/timely.ts
@@ -217,3 +217,6 @@ export function currentTime(): Date {
return new Date();
}
+export function formatDateShort(date: Date): string {
+ return date.getFullYear() + '-' + formatNumber(date.getMonth() + 1) + '-' + formatNumber(date.getDate());
+}
\ No newline at end of file