bugfixes

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']
 ]);

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']
 ]);

client/src/components/forms/ProjectForm/project-form.scss

+@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;
             }

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>

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

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;
             }

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);
         }
     }
 }

client/src/components/ui/AssigneeList/assignee-list.scss

@@ -9,6 +9,9 @@
             margin-left: 0;
         }
     }
+    .tooltip {
+        margin-left: -8px;
+    }
 
     .assignee,
     .avatar {

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 {

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))

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%;
         }
     }

client/src/components/ui/Tooltip/tooltip.scss

@@ -3,6 +3,7 @@
 .tooltip-container {
     position: relative;
     z-index: 20000;
+    text-align: center;
 
     &:hover {
         .tooltip {

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;
 

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]);
 

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} />

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;
     }