diff --git a/client/src/adapters/project.ts b/client/src/adapters/project.ts
index 8fcb83a80a4de25d851e8f755338a8ffc5f523fd..1fcac4becfe1960c0d301c9916e8cf06996cd6da 100644
--- a/client/src/adapters/project.ts
+++ b/client/src/adapters/project.ts
@@ -12,7 +12,7 @@ export enum Status {
}
export const StatusColors = new Map<string, string>([
- ['open', 'lightblue'],
+ ['open', 'blue'],
['closed', 'purple'],
['suspended', 'red']
]);
diff --git a/client/src/adapters/task.ts b/client/src/adapters/task.ts
index 44f2f24bd048a053313b4b1bb8cbe0ecbf3c9afd..23a56f88d152cd5ab650e581348b4cd8c28a1983 100644
--- a/client/src/adapters/task.ts
+++ b/client/src/adapters/task.ts
@@ -16,7 +16,7 @@ export enum Status {
}
export const StatusColors = new Map<string, string>([
- ['open', 'lightblue'],
+ ['open', 'blue'],
['closed', 'purple'],
['suspended', 'red']
]);
diff --git a/client/src/components/forms/ProjectForm/project-form.scss b/client/src/components/forms/ProjectForm/project-form.scss
index 066c46a02ecf2c07e39923472dac72c5299359f8..893fa614e72f9365781637840cc4193bf09daa17 100644
--- a/client/src/components/forms/ProjectForm/project-form.scss
+++ b/client/src/components/forms/ProjectForm/project-form.scss
@@ -1,16 +1,37 @@
+@use 'styles/mixins.scss'as mx;
+
.project-form {
.color-list {
display: flex;
flex-wrap: wrap;
- margin-right: -20px;
+ margin-right: -10px;
+ @include mx.breakpoint(large) {
+ margin-right: -20px;
+ }
+
.color-item {
- width: calc(100% / 7 - 20px);
- margin-right: 20px;
- margin-bottom: 20px;
- padding-bottom: calc(100% / 7 - 20px);
border-radius: 50%;
cursor: pointer;
- opacity: 0.7;
+ opacity: 0.5;
+ margin-right: 10px;
+ margin-bottom: 10px;
+
+ width: calc(100% / 2 - 10px);
+ padding-bottom: calc(100% / 2 - 10px);
+
+ @include mx.breakpoint(medium) {
+ width: calc(100% / 5 - 10px);
+ padding-bottom: calc(100% / 5 - 10px);
+
+ }
+
+ @include mx.breakpoint(large) {
+ margin-right: 20px;
+ margin-bottom: 20px;
+ width: calc(100% / 7 - 20px);
+ padding-bottom: calc(100% / 7 - 20px);
+ }
+
&.active {
opacity: 1;
}
diff --git a/client/src/components/forms/UserForm/index.tsx b/client/src/components/forms/UserForm/index.tsx
index 69eadca8f653e9e0e4eabd1aa6bdc68a57ec833e..0687297c818a508c49735f0654f2bca4e63ff34f 100644
--- a/client/src/components/forms/UserForm/index.tsx
+++ b/client/src/components/forms/UserForm/index.tsx
@@ -68,6 +68,7 @@ export default function UserForm({ user, onSubmit }: Props) {
setAvatar(e.target.files[0])
}
}} />
+ {avatar ? 'Selected file: ' + avatar.name : 'Select a file'}
</label>
</div>
</div>
diff --git a/client/src/components/forms/UserForm/user-form.scss b/client/src/components/forms/UserForm/user-form.scss
index 9e478c136507f6e527dc36398a3409c7da65c678..30b7ff3e54e6db41b69da172dfc6dd7a42ce94e9 100644
--- a/client/src/components/forms/UserForm/user-form.scss
+++ b/client/src/components/forms/UserForm/user-form.scss
@@ -26,6 +26,9 @@
.avatar-upload {
width: 100%;
position: relative;
+ input {
+ display: none;
+ }
.label {
position: absolute;
top: -2px;
@@ -42,6 +45,7 @@
height: 80px;
margin-bottom: 20px;
background: s.$light;
+ font-size: 18px;
}
}
}
\ No newline at end of file
diff --git a/client/src/components/helpers/Filter/filter.scss b/client/src/components/helpers/Filter/filter.scss
index ea813ad59c9f22986573ffe415fd98bf25608edf..adc3182edb4bcb02034a2c36822954d22b41737f 100644
--- a/client/src/components/helpers/Filter/filter.scss
+++ b/client/src/components/helpers/Filter/filter.scss
@@ -32,7 +32,7 @@
.tag-item {
margin: 10px;
cursor: pointer;
- opacity: 0.75;
+ opacity: 0.5;
&.active {
opacity: 1;
}
diff --git a/client/src/components/layout/DetailGrid/detail-grid.scss b/client/src/components/layout/DetailGrid/detail-grid.scss
index 07a53db5e40184d79e4c9694d09578d41e706531..04dbb15cbdf26bd5ef019e6b78d162bf5b93386c 100644
--- a/client/src/components/layout/DetailGrid/detail-grid.scss
+++ b/client/src/components/layout/DetailGrid/detail-grid.scss
@@ -5,17 +5,17 @@
flex-wrap: wrap;
margin: -12px;
@include mx.breakpoint(medium) {
- margin: -16px;
+ margin: -10px;
}
.box-container {
margin: 12px;
width: calc(50% - 24px);
@include mx.breakpoint(medium) {
- width: calc(25% - 32px);
- margin: 16px;
+ width: calc(33.33% - 20px);
+ margin: 10px;
}
@include mx.breakpoint(large) {
- width: calc(20% - 32px);
+ width: calc(20% - 20px);
}
}
}
diff --git a/client/src/components/ui/AssigneeList/assignee-list.scss b/client/src/components/ui/AssigneeList/assignee-list.scss
index 827f07650ae702b7be669cd5026c01464a81fba8..0a639694e8349604f48719b90ffc8f4b157b459a 100644
--- a/client/src/components/ui/AssigneeList/assignee-list.scss
+++ b/client/src/components/ui/AssigneeList/assignee-list.scss
@@ -9,6 +9,9 @@
margin-left: 0;
}
}
+ .tooltip {
+ margin-left: -8px;
+ }
.assignee,
.avatar {
diff --git a/client/src/components/ui/Button/button.scss b/client/src/components/ui/Button/button.scss
index eb5c39e51bdff36a58be95076f85252c740906ea..aaece48879b2e341d7b4617870b2efde40a46ce4 100644
--- a/client/src/components/ui/Button/button.scss
+++ b/client/src/components/ui/Button/button.scss
@@ -25,10 +25,11 @@
cursor: pointer;
color: s.$white;
transform: translateY(-5%);
+ transform-origin: top center;
}
&:active {
- transform: scale(0.9);
+ transform: scale(0.99);
}
&.dark {
diff --git a/client/src/components/ui/Project/index.tsx b/client/src/components/ui/Project/index.tsx
index b0aff8ab45355cc33dfbe8bdae6cdc9461530c2e..ed1d3893f678b9a59b9f4be0986620dd27f70de6 100644
--- a/client/src/components/ui/Project/index.tsx
+++ b/client/src/components/ui/Project/index.tsx
@@ -9,7 +9,7 @@ import { useEffect, useState } from 'react';
import { Completion } from 'adapters/util';
import LoadingScreen from '../LoadingScreen';
import Tag from '../Tag';
-import { StatusColors } from 'adapters/task';
+import { StatusColors } from 'adapters/project';
export interface ProjectProps {
project: IProject
@@ -19,7 +19,6 @@ export interface ProjectProps {
export default function Project({ project, large }: ProjectProps) {
const [assignees, setAssignees] = useState<AssignedUser[]>([]);
const [completion, setCompletion] = useState<Completion>();
- console.log(completion);
useEffect(() => {
getProjectAssignees(project.id).then((assignee) => setAssignees(assignee))
diff --git a/client/src/components/ui/Task/task.scss b/client/src/components/ui/Task/task.scss
index 5aaca98d4f686495f6673377f51df27bbfab12a0..5f42087dd2451bd51473a8ed4166b7b409f14a0c 100644
--- a/client/src/components/ui/Task/task.scss
+++ b/client/src/components/ui/Task/task.scss
@@ -16,7 +16,7 @@
box-shadow: 0 5px 30px rgba(s.$black, 0.15);
transform: translateY(-5px);
- .project-indicator {
+ .indicator {
height: 40%;
}
}
diff --git a/client/src/components/ui/Tooltip/tooltip.scss b/client/src/components/ui/Tooltip/tooltip.scss
index 14e3cabb0cb1cbd93a4f129ef1796fc05789b124..a2673ddedf74ba3053ca18a247a2d961384f507a 100644
--- a/client/src/components/ui/Tooltip/tooltip.scss
+++ b/client/src/components/ui/Tooltip/tooltip.scss
@@ -3,6 +3,7 @@
.tooltip-container {
position: relative;
z-index: 20000;
+ text-align: center;
&:hover {
.tooltip {
diff --git a/client/src/index.scss b/client/src/index.scss
index 4823cc0b00e37dbf33b64b93e2b0400297c46752..fe2baa3f721297354b26253c405af78a91647630 100644
--- a/client/src/index.scss
+++ b/client/src/index.scss
@@ -68,14 +68,15 @@ h1 {
&.underlined {
position: relative;
display: inline-block;
+ z-index: 1;
- &:after {
+ &:before {
content: ' ';
position: absolute;
right: -7px;
bottom: 0;
width: 90px;
- background: rgba(s.$secondary, .5);
+ background: rgba(s.$secondary, 0.5);
height: 20px;
z-index: -1;
diff --git a/client/src/pages/Settings/index.tsx b/client/src/pages/Settings/index.tsx
index 204a830381fb189cfb4a518149834bd21bea31ec..e9b4e954e09206b467651b1fc031ffa802c4ab62 100644
--- a/client/src/pages/Settings/index.tsx
+++ b/client/src/pages/Settings/index.tsx
@@ -18,14 +18,11 @@ export default function Settings() {
try {
if (user && updateUser({realname: name, email })) {
if(avatar) {
- console.log(avatar);
updateUserImage(avatar);
}
history.push('/tasks');
}
} catch (e) {
- console.log(e);
-
}
}, [history, user]);
diff --git a/client/src/pages/Teams/index.tsx b/client/src/pages/Teams/index.tsx
index e7191f044579894f8bc3dedaa8772bd23f0052a8..958810726a9f4453c7414f8541e31d512efbf7e2 100644
--- a/client/src/pages/Teams/index.tsx
+++ b/client/src/pages/Teams/index.tsx
@@ -112,16 +112,17 @@ export default function Teams() {
<LoadingScreen />
)
}
-
- <ButtonLink href={'/teams/' + currentTeam?.id + '/edit'} className="expanded">
- Edit
- </ButtonLink>
- {
- allTeams && allTeams.length > 1 &&
- <Button className="expanded dark" onClick={leaveCurrentTeam}>
- Leave Team
- </Button>
- }
+ <div className="buttons">
+ <ButtonLink href={'/teams/' + currentTeam?.id + '/edit'} className="expanded">
+ Edit
+ </ButtonLink>
+ {
+ allTeams && allTeams.length > 1 && (
+ <Button className="expanded dark" onClick={leaveCurrentTeam}>
+ Leave Team
+ </Button>)
+ }
+ </div>
{
tabs ? (
<Tabs tabs={tabs} />
diff --git a/client/src/pages/Teams/teams.scss b/client/src/pages/Teams/teams.scss
index a02934d917e5af285e394589ed0291b164112000..c066f145bf66305de9153b629e7f7669d87c9be3 100644
--- a/client/src/pages/Teams/teams.scss
+++ b/client/src/pages/Teams/teams.scss
@@ -5,9 +5,12 @@
margin: 0;
}
}
- .button {
+ .buttons {
margin: 25px 0;
}
+ .button {
+ margin: 5px 0;
+ }
.detail-grid {
margin-top: 10px;
}