Small UI improvements, update dependencies

client/src/components/Project/EditPopup.jsx

@@ -78,6 +78,7 @@ const EditStep = React.memo(({
       </Popup.Header>
       <Popup.Content>
         <Form onSubmit={handleSubmit}>
+          <div className={styles.text}>{t('common.title')}</div>
           <Input
             fluid
             ref={nameField}

client/src/components/Project/EditPopup.module.css

@@ -8,3 +8,10 @@
 .field {
   margin-bottom: 8px;
 }
+
+.text {
+  color: #444444;
+  font-size: 12px;
+  font-weight: bold;
+  padding-bottom: 6px;
+}

client/src/components/Project/Project.jsx

@@ -33,15 +33,19 @@ const Project = React.memo(
         <Grid className={styles.header}>
           <Grid.Row>
             <Grid.Column>
-              <EditPopup
-                defaultData={{
-                  name,
-                }}
-                onUpdate={onUpdate}
-                onDelete={onDelete}
-              >
-                <Button content={name} disabled={!isEditable} className={styles.name} />
-              </EditPopup>
+              {isEditable ? (
+                <EditPopup
+                  defaultData={{
+                    name,
+                  }}
+                  onUpdate={onUpdate}
+                  onDelete={onDelete}
+                >
+                  <Button content={name} disabled={!isEditable} className={styles.name} />
+                </EditPopup>
+              ) : (
+                <span className={styles.name}>{name}</span>
+              )}
               <span className={styles.users}>
                 {memberships.map((membership) => (
                   <span key={membership.id} className={styles.user}>

client/src/components/Project/Project.module.css

@@ -22,9 +22,11 @@
 .name {
   background: transparent !important;
   color: #fff !important;
+  display: inline-block !important;
   font-size: 32px !important;
   font-weight: bold !important;
   line-height: 36px !important;
+  margin-right: 8px !important;
   padding: 0 !important;
 }