Increase font-size of cards, align board on the left with the toolbar & change style of „add list“ button

frontend/src/app/components/wp-card-view/wp-card-view.component.html

@@ -1,5 +1,5 @@
 <div #container
-     class="wp-cards-container -small-font">
+     class="wp-cards-container">
   <div *ngIf="inReference"
        class="wp-inline-create--reference-container">
     <ndc-dynamic [ndcDynamicComponent]="referenceClass"
@@ -53,7 +53,6 @@
             class="wp-card--subject -bold"></span>
       <wp-status-button *ngIf="showStatusButton"
                         [workPackage]="wp"
-                        containerClass="-small"
                         class="wp-card--status">
       </wp-status-button>
       <user-avatar *ngIf="hasAssignee(wp)"

frontend/src/app/components/wp-card-view/wp-card-view.component.sass

@@ -19,11 +19,12 @@
   width: 100%
   border: 1px solid var(--widget-box-block-border-color)
   border-radius: 2px
-  padding: 15px
+  padding: 10px
   margin-top: 10px
   position: relative
   box-shadow: 1px 1px 3px 0px lightgrey
   background: var(--body-background)
+  font-size: var(--card-font-size)
 
   &:hover
     box-shadow: 0px 0px 10px lightgrey
@@ -49,6 +50,7 @@
     white-space: normal
   .wp-card--assignee
     grid-area: avatar
+    place-self: center left
   .wp-card--status
     grid-area: attributeTag
     max-width: 120px

frontend/src/app/modules/boards/board/board-list/board-list.component.sass

@@ -45,7 +45,7 @@ $board-list-max-width: 300px
   background-color: var(--body-background)
   width: calc(100% - 30px)
   margin: 0 15px
-  box-shadow: 2px 2px 5px 0px lightgrey
+  box-shadow: 1px 1px 3px 0px lightgrey
 
   &:hover
     background-color: #eeeeee50

frontend/src/app/modules/boards/board/board.component.sass

@@ -4,6 +4,7 @@ $board-list-max-width: 300px
 .controller-boards\/boards
   #content-wrapper
     padding-bottom: 0
+    padding-left: 0
   #content
     height: 100%
 
@@ -23,10 +24,14 @@ $board-list-max-width: 300px
   max-width: $board-list-max-width
   position: relative
 
+  &:first-of-type
+    margin-left: 5px
+
 .board--header-container
   display: flex
   align-items: flex-start
   margin-bottom: 0
+  margin-left: 20px
 
 .boards-list-item-handle
   position: absolute
@@ -48,20 +53,17 @@ $board-list-max-width: 300px
     opacity: 1
 
 .boards-list--add-item
-  flex: 0 0 230px
+  flex: 0 0 auto
-  border: 1px dashed #ccc
-  border-radius: 5px
   // Same height as board list header
   height: 43px
-  margin-left: 30px
+  line-height: 43px
-
+  margin-left: 15px
-  // Center child text
+  font-size: 14px
-  display: flex
+  cursor: pointer
-  align-items: center
+  color: var(--gray-dark)
-  justify-content: center
 
-  // Align self at top
+  &:hover
-  align-self: flex-start
+    color: var(--body-font-color)
 
 .board--container
   position: relative
@@ -69,13 +71,5 @@ $board-list-max-width: 300px
   flex-direction: column
   height: 100%
 
-  // Changes when container is editable
-  &.-editable
-    .boards-list--add-item
-      cursor: pointer
-
-      &:hover
-        background-color: #f0f0f080
-
 .boards-filters-container .work-packages--filters-optional-container
   margin-bottom: 1rem

lib/open_project/design.rb

@@ -198,7 +198,8 @@ module OpenProject
       'timeline--separator'                                  => '3px solid #E7E7E7',
       'table-timeline--row-height'                           => '40px',
       'status-selector-bg-color'                             => '#F99601',
-      'status-selector-bg-hover-color'                       => '#E08600'
+      'status-selector-bg-hover-color'                       => '#E08600',
+      'card-font-size'                                       => '14px'
     }.freeze
 
     # Regular expression for references of other variables.