Multiple small styling fixes

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 >

client/src/components/forms/RoleForm/role-form.scss

@@ -102,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 {

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;

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

client/src/components/ui/Comment/comment.scss

@@ -19,6 +19,7 @@
             height: 65px;
             border-radius: 50%;
             overflow: hidden;
+            font-size: 28px;
 
             img {
                 width: 100%;

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

client/src/index.scss

@@ -75,6 +75,7 @@
 
 * {
     transition: s.$transition;
+    transition-property: transform, opacity, color, background, box-shadow, stroke;
     font-family: s.$body-font;
     margin: 0;
     padding: 0;

client/src/pages/Projects/ProjectDetail/ProjectDetails/project-details.scss

@@ -6,6 +6,7 @@
     }
 
     .bar-chart-container {
+        margin-top: 8px;
         margin-bottom: 30px;
     }
 }

client/src/pages/Tasks/index.tsx

@@ -44,7 +44,7 @@ export default function Tasks() {
                     </section>
                     <section className="tasks-container">
                         <h2>Your tasks</h2>
-                        <p>Here are some tasks for which you were assigned directly, ordered by their importancy.</p>
+                        <p>Here are some tasks for which you were assigned directly, ordered by their priority.</p>
                         {
                             tasks.length > 0
                                 ? (
@@ -86,7 +86,7 @@ export default function Tasks() {
                         }
                     </section>
                 </div>
-            </div >
+            </div>
         );
     } else {
         return <LoadingScreen />

client/src/pages/Tasks/tasks.scss

-@use 'styles/settings'as s;
-@use 'styles/mixins'as mx;
-@use 'styles/functions'as fn;
+
+@use 'styles/settings' as s;
+@use 'styles/mixins' as mx;
+@use 'styles/functions' as fn;
 
 .tasks-page {
     h2 {
-
         margin-top: 40px;
         margin-bottom: 10px;
 
@@ -27,6 +27,7 @@
         margin-bottom: 60px;
 
         .task {
+            margin-top: 15px;
             margin-bottom: 30px;
         }
     }
@@ -38,4 +39,5 @@
         background: s.$background-white;
         text-align: center;
     }
-}
\ No newline at end of file
+}
+

client/src/styles/settings.scss

@@ -95,6 +95,5 @@ $breakpoints: (
 );
 
 // General
-$tTime: 300ms ease;
-$transition: transform $tTime, opacity $tTime, color $tTime, background $tTime, box-shadow $tTime, visibility $tTime;
+$transition: 300ms ease;