Added ruleset to create project, fixes for Safari

apps/red-ui/src/app/common/file-actions/file-actions.component.scss

@@ -1,6 +1,9 @@
 .file-actions {
     display: flex;
-    gap: 2px;
+
+    > *:not(last-child) {
+        margin-right: 2px;
+    }
 }
 
 .reviewer {

apps/red-ui/src/app/common/filter/filter.component.scss

@@ -8,7 +8,10 @@
 
     .actions {
         display: flex;
-        gap: 8px;
+
+        > *:not(last-child) {
+            margin-right: 8px;
+        }
     }
 }
 

apps/red-ui/src/app/common/initials-avatar/initials-avatar.component.html

@@ -2,7 +2,7 @@
     <div [className]="colorClass + ' oval ' + size" [matTooltipPosition]="'above'" [matTooltip]="username">
         {{ initials }}
     </div>
-    <div *ngIf="withName" class="clamp-2">
+    <div *ngIf="withName" class="clamp-2 username">
         {{ username || ('initials-avatar.unassigned' | translate) }}
     </div>
 </div>

apps/red-ui/src/app/common/initials-avatar/initials-avatar.component.scss

@@ -2,5 +2,8 @@
     display: flex;
     align-items: center;
     width: fit-content;
-    gap: 6px;
+
+    .username {
+        margin-left: 6px;
+    }
 }

apps/red-ui/src/app/components/comments/comments.component.scss

@@ -3,12 +3,18 @@
 .wrapper {
     display: flex;
     flex-direction: column;
-    gap: 10px;
     margin-top: 10px;
 
+    > *:not(last-child) {
+        margin-bottom: 10px;
+    }
+
     .comment {
         display: flex;
-        gap: 12px;
+
+        > *:not(last-child) {
+            margin-right: 12px;
+        }
 
         .owner {
             opacity: 0.7;
@@ -45,13 +51,19 @@
     .comment-actions-container,
     .actions-container {
         display: flex;
-        gap: 15px;
         align-items: center;
+
+        > *:not(last-child) {
+            margin-right: 15px;
+        }
     }
 
     .actions-container {
         margin-left: 26px;
-        gap: 5px;
+
+        > *:not(last-child) {
+            margin-right: 5px;
+        }
 
         > div:not(:last-child):after {
             content: '•';

apps/red-ui/src/app/components/needs-work-badge/needs-work-badge.component.scss

@@ -3,5 +3,8 @@
     flex-direction: row;
     align-items: center;
     justify-content: flex-start;
-    gap: 4px;
+
+    > *:not(last-child) {
+        margin-right: 4px;
+    }
 }

apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.scss

@@ -8,10 +8,19 @@
     position: relative;
     display: flex;
     align-items: center;
-    gap: 20px;
+
+    &:not(.column) {
+        > *:not(last-child) {
+            margin-right: 20px;
+        }
+    }
 
     &.column {
         flex-direction: column;
+
+        > *:not(last-child) {
+            margin-bottom: 20px;
+        }
     }
 }
 
@@ -33,19 +42,19 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: 8px;
     margin-left: -8px;
 
     > div {
         width: fit-content;
-        display: flex;
-        flex-direction: column;
-        gap: 8px;
 
         > div {
             border-radius: 4px;
             padding: 3px 8px;
 
+            &:not(last-child) {
+                margin-bottom: 8px;
+            }
+
             &:not(.filter-disabled) {
                 cursor: pointer;
             }

apps/red-ui/src/app/components/status-bar/status-bar.component.scss

@@ -14,7 +14,10 @@
         .section-wrapper {
             display: flex;
             align-items: center;
-            gap: 10px;
+
+            > *:not(last-child) {
+                margin-right: 10px;
+            }
         }
     }
 

apps/red-ui/src/app/components/table-col-name/table-col-name.component.scss

@@ -9,7 +9,6 @@
         display: flex;
         width: 100%;
         line-height: 11px;
-        gap: 8px;
         padding: 0 24px;
     }
 
@@ -20,6 +19,8 @@
     .sort-arrows-container {
         display: none;
         color: $primary;
+        margin-left: 8px;
+
         mat-icon {
             height: 14px;
             width: 6px;

apps/red-ui/src/app/components/type-filter/type-filter.component.scss

@@ -2,5 +2,8 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    gap: 8px;
+
+    redaction-annotation-icon {
+        margin-right: 8px;
+    }
 }

apps/red-ui/src/app/dialogs/add-edit-project-dialog/add-edit-project-dialog.component.html

@@ -10,12 +10,24 @@
                 <label translate="project-listing.add-edit-dialog.form.name"></label>
                 <input formControlName="projectName" name="projectName" type="text" />
             </div>
+
+            <div class="red-input-group" *ngIf="!project">
+                <mat-form-field floatLabel="always">
+                    <mat-label>{{ 'project-listing.add-edit-dialog.form.rule-set' | translate }}</mat-label>
+                    <mat-select value="EFSA 1 (Authors by vertebrates)" style="width: 100%;">
+                        <mat-option *ngFor="let type of ['EFSA 1 (Authors by vertebrates)']" [value]="type">
+                            {{ type }}
+                        </mat-option>
+                    </mat-select>
+                </mat-form-field>
+            </div>
+
             <div class="red-input-group">
                 <label translate="project-listing.add-edit-dialog.form.description"></label>
                 <textarea formControlName="description" name="description" type="text" rows="5"></textarea>
             </div>
 
-            <mat-form-field class="mt-20">
+            <mat-form-field>
                 <mat-label>{{ 'project-listing.add-edit-dialog.form.due-date' | translate }}</mat-label>
                 <input matInput [matDatepicker]="picker" formControlName="dueDate" />
                 <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>

apps/red-ui/src/app/screens/file/annotation-actions/annotation-actions.component.scss

@@ -10,7 +10,6 @@
     justify-content: flex-end;
     width: 120px;
     padding-right: 16px;
-    background: linear-gradient(to right, transparent 0%, #f9fafb, #f9fafb, #f9fafb);
 
     .confirm.active {
         background-color: $grey-2;

apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss

@@ -99,11 +99,11 @@
 
                 .details {
                     display: flex;
-                    gap: 10px;
                 }
 
-                redaction-annotation-icon {
+                redaction-type-annotation-icon {
                     margin-top: 6px;
+                    margin-right: 10px;
                 }
 
                 &:hover {
@@ -129,8 +129,11 @@
 
 .assign-actions-wrapper {
     display: flex;
-    gap: 2px;
     margin-left: 8px;
+
+    > *:not(last-child) {
+        margin-right: 2px;
+    }
 }
 
 .mr-16 {

apps/red-ui/src/app/screens/project-listing-screen/project-listing-details/project-listing-details.component.scss

@@ -21,7 +21,6 @@
             .project-stats-item {
                 display: flex;
                 width: fit-content;
-                gap: 5px;
                 margin-top: 25px;
 
                 &:first-of-type {
@@ -31,6 +30,7 @@
                 mat-icon {
                     height: 16px;
                     margin-top: 2px;
+                    margin-right: 5px;
                 }
             }
         }

apps/red-ui/src/app/screens/project-overview-screen/bulk-actions/bulk-actions.component.scss

@@ -1,5 +1,8 @@
 :host {
     display: flex;
     align-items: center;
-    gap: 2px;
+
+    > *:not(last-child) {
+        margin-right: 2px;
+    }
 }

apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.scss

@@ -8,14 +8,13 @@
     redaction-circle-button {
         position: absolute;
         top: -5px;
-        left: 277px;
+        left: 290px;
     }
 }
 
 .legend {
     display: flex;
     flex-direction: column;
-    gap: 4px;
     margin-left: -8px;
 
     > div {
@@ -32,13 +31,20 @@
         &.active {
             background-color: rgba($primary, 0.1);
         }
+
+        &:not(:last-of-type) {
+            margin-bottom: 4px;
+        }
     }
 }
 
 .stats-subtitle {
-    gap: 0;
     flex-direction: column;
     align-items: flex-start;
+
+    > * {
+        margin-right: 0;
+    }
 }
 
 .mt-8 {

apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.scss

@@ -49,15 +49,16 @@ redaction-table-col-name::ng-deep {
             flex-direction: row;
             align-items: center;
             justify-content: flex-start;
-            gap: 4px;
             opacity: 0.7;
             color: $grey-1;
             font-size: 11px;
             letter-spacing: 0;
             line-height: 14px;
+
             .mat-icon {
                 width: 10px;
                 height: 10px;
+                margin-right: 4px;
             }
         }
 
@@ -68,13 +69,13 @@ redaction-table-col-name::ng-deep {
 }
 
 .left-container {
-    width: calc(100vw - 358px);
+    width: calc(100vw - 375px);
 }
 
 .right-container {
     display: flex;
-    width: 358px;
+    width: 375px;
-    min-width: 358px;
+    min-width: 375px;
     padding: 16px 16px 16px 24px;
 
     redaction-project-details {

apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts

@@ -165,7 +165,7 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy {
     }
 
     public get areAllFilesSelected() {
-        return this.appStateService.activeProject.files.length !== 0 && this.selectedFileIds.length === this.displayedFiles.length;
+        return this.displayedFiles.length !== 0 && this.selectedFileIds.length === this.displayedFiles.length;
     }
 
     public get areSomeFilesSelected() {

apps/red-ui/src/assets/i18n/en.json

@@ -101,11 +101,12 @@
             "form": {
                 "description": "Description",
                 "name": "Name",
-                "due-date": "Due Date"
+                "due-date": "Due Date",
+                "rule-set": "Rule Set"
             },
             "actions": {
                 "save": "Save",
-                "save-and-add-members": "Save and edit Team"
+                "save-and-add-members": "Save and Edit Team"
             }
         },
         "header": "Projects",

apps/red-ui/src/assets/styles/red-breadcrumbs.scss

@@ -4,7 +4,10 @@
 .breadcrumbs-container {
     display: flex;
     align-items: center;
-    gap: 6px;
+
+    > *:not(last-child) {
+        margin-right: 6px;
+    }
 
     .breadcrumb {
         text-decoration: none;

apps/red-ui/src/assets/styles/red-button.scss

@@ -13,7 +13,10 @@
         display: flex;
         align-items: center;
         line-height: 34px;
-        gap: 6px;
+
+        > *:not(last-child) {
+            margin-right: 6px;
+        }
     }
 }
 
@@ -34,6 +37,7 @@ redaction-icon-button,
 redaction-chevron-button,
 redaction-circle-button {
     position: relative;
+    display: flex;
     transition: background-color 0.2s;
 
     button {

apps/red-ui/src/assets/styles/red-checkbox.scss

@@ -24,6 +24,9 @@
 
         display: flex;
         align-items: center;
-        gap: 8px;
+
+        > *:not(last-child) {
+            margin-right: 8px;
+        }
     }
 }

apps/red-ui/src/assets/styles/red-components.scss

@@ -66,7 +66,6 @@
 
 .stats-subtitle {
     display: flex;
-    gap: 12px;
 
     > div {
         display: flex;
@@ -77,6 +76,10 @@
             width: 10px;
             margin-right: 4px;
         }
+
+        &:not(last-child) {
+            margin-right: 12px;
+        }
     }
 }
 

apps/red-ui/src/assets/styles/red-grid.scss

@@ -8,15 +8,21 @@
     display: flex;
     align-items: center;
     z-index: 1;
-    gap: 10px;
     border-bottom: 1px solid $separator;
     box-sizing: border-box;
     @include inset-shadow;
 
+    > *:not(last-child) {
+        margin-right: 10px;
+    }
+
     .actions {
         display: flex;
         align-items: center;
-        gap: 25px;
+
+        > *:not(last-child) {
+            margin-right: 25px;
+        }
     }
 
     &.justify-end {

apps/red-ui/src/assets/styles/red-input.scss

@@ -38,6 +38,10 @@
         display: none;
     }
 
+    .mat-form-field-wrapper {
+        padding-bottom: 0;
+    }
+
     .mat-form-field-label {
         opacity: 0.7 !important;
         color: $grey-1 !important;

apps/red-ui/src/assets/styles/red-menu.scss

@@ -23,7 +23,10 @@
 
         display: flex;
         align-items: center;
-        gap: 8px;
+
+        > *:not(last-child) {
+            margin-right: 8px;
+        }
 
         .arrow-wrapper {
             width: 16px;

apps/red-ui/src/assets/styles/red-page-layout.scss

@@ -23,12 +23,15 @@ body {
     background-color: $white;
 
     .filters {
-        gap: 2px;
         display: flex;
         align-items: center;
 
+        > *:not(last-child) {
+            margin-right: 2px;
+        }
+
         > div:first-child {
-            margin-right: 6px;
+            margin-right: 8px;
         }
 
         form {
@@ -43,7 +46,10 @@ body {
     .actions {
         display: flex;
         align-items: center;
-        gap: 2px;
+
+        > *:not(last-child) {
+            margin-right: 2px;
+        }
     }
 }
 
@@ -251,9 +257,12 @@ body {
     justify-content: center;
     align-items: center;
     flex-direction: column;
-    gap: 12px;
     height: calc(100vh - 61px);
     position: relative;
+
+    > *:not(last-child) {
+        margin-bottom: 2px;
+    }
 }
 
 .fit-content {

apps/red-ui/src/assets/styles/red-select.scss

@@ -8,10 +8,6 @@
         line-height: 14px;
     }
 
-    .mat-form-field-wrapper {
-        padding-bottom: 0;
-    }
-
     .mat-form-field-infix {
         padding: 0;
         border: none;

apps/red-ui/src/assets/styles/red-toasts.scss

@@ -11,9 +11,12 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    gap: 10px;
     box-shadow: none;
 
+    > *:not(last-child) {
+        margin-right: 10px;
+    }
+
     &:hover {
         box-shadow: none;
     }
@@ -21,7 +24,10 @@
     .actions-wrapper {
         margin-top: 24px;
         display: flex;
-        gap: 24px;
+
+        > *:not(last-child) {
+            margin-right: 24px;
+        }
 
         a {
             font-size: 11px;