feature: admin-project-list

src/views/admin/page-admin-projects.pug

-.content-box.flex.full-width.with-form
+.content-box.full-width.with-form
   solid-router(default-route='admin-project-list', hidden)
     solid-route(name='admin-project-list')
     solid-route(name='admin-project-create')
     solid-route(name='project-left')
 
-  div.content-box__header.flex.space-between
-    h1.without-margin(data-trans='project.list.title')
-    button.mobile-sidebar-button.jsMobileSidebarOpenButton.icon-arrow-left-circle(data-trans='project.list.buttonMobile')
+  div.segment.padding-xlarge.border-bottom
+    div
+      h2.text-uppercase.text-xlarge.text-letter-spacing-large(data-trans='project.list.title')
+    div.segment.lg-hidden
+      button.mobile-sidebar-button.jsMobileSidebarOpenButton.icon-arrow-left-circle(data-trans='project.list.buttonMobile')
 
   #project-left(hidden, data-view="project-left")
     include ../project/page-project-left.pug
@@ -14,28 +16,30 @@
   #admin-project-list.content-box__height(hidden, data-view="admin-project-list")
     include ../../templates/hubl-user-avatar.pug
 
-    div.content-box__info.flex
-      div.admin-header.flex
-        h3(data-trans='project.list.subTitle')
-        solid-ac-checker(data-src=`${endpoints.projects || (endpoints.post && endpoints.post.projects)}`, permission='acl:Append')
-          solid-link(
-            class='button text-bold text-uppercase reversed button-primary bordered with-icon icon-plus'
-            next='admin-project-create'
-            data-trans='project.list.buttonCreate'
-          )
+    div.segment.padding-xlarge
+      div.segment.padding-y-small.margin-bottom.clearfix
+        div.segment.lg-half.float-left
+          h3.text-large.text-bold.text-letter-spacing-large(data-trans='project.list.subTitle')
+        div.segment.lg-half.float-left.text-right
+          solid-ac-checker(data-src=`${endpoints.projects || (endpoints.post && endpoints.post.projects)}`, permission='acl:Append')
+            solid-link(
+              class='button text-bolder text-uppercase reversed button-secondary bordered icon icon-plus'
+              next='admin-project-create'
+              data-trans='project.list.buttonCreate'
+            )
 
       .table-wrapper
-        .table
-          div.table-header.grey-color
-            div.w280(data-trans='project.list.tableHeader1')
-            div.w280(data-trans='project.list.tableHeader2')
-            div.w280(data-trans='project.list.tableHeader3')
-            div.w230(data-trans='project.list.tableHeader4')
+        .table.segment.margin-bottom
+          div.table-header
+            div.table-cell.w280(data-trans='project.list.tableHeader1')
+            div.table-cell.w280(data-trans='project.list.tableHeader2')
+            div.table-cell.w280(data-trans='project.list.tableHeader3')
+            div.table-cell.w230(data-trans='project.list.tableHeader4')
 
           solid-widget(name="hubl-admin-project-leave-button")
             template
               solid-delete(
-                class='button text-bold text-uppercase reversed button-secondary bordered with-icon icon-close'
+                class='button text-bolder text-uppercase button-secondary bordered icon icon-close'
                 data-src="${src}"
                 data-label=''
                 data-trans='data-label=project.list.buttonQuit'
@@ -74,7 +78,7 @@
           solid-widget(name='hubl-admin-project-leave-button')
             template
               solid-delete(
-                class='button text-bold text-uppercase reversed button-secondary bordered with-icon icon-close'
+                class='button text-bolder text-uppercase button-secondary bordered icon icon-close'
                 data-src="${src}"
                 data-label=''
                 data-trans='data-label=project.list.buttonQuit'
@@ -88,10 +92,10 @@
             fields='project.name, project.members, project.captain, leaveButton'
             loader-id='loader-admin-projects'
 
-            class-project.name='w280 cell border cell-with-name'
-            class-project.members='w280 cell border cell-with-id-card'
-            class-project.captain='w280 cell border cell-with-id-card'
-            class-leaveButton='w230 cell border cell-with-buttons is-spaced'
+            class-project.name='table-cell w280 text-color-heading text-bold text-letter-spacing-large text-underline'
+            class-project.members='table-cell w280 cell border cell-with-id-card'
+            class-project.captain='table-cell w280 cell border cell-with-id-card'
+            class-leaveButton='table-cell w230'
 
             action-leaveButton="joinButton"
             widget-leaveButton="hubl-admin-project-leave-button"
@@ -104,7 +108,8 @@
 
           solid-widget(name='hubl-admin-project-join-button')
             template
-              solid-form.button.text-bold.text-uppercase.reversed.button-primary.bordered.with-icon.icon-arrow-right-circle.flex(
+              solid-form(
+                class='button text-bolder text-uppercase reversed button-secondary bordered icon icon-arrow-right-circle'
                 data-src='${src}'
                 nested-field="members"
 
@@ -129,10 +134,10 @@
             fields='name, members, captain, joinButton'
             loader-id='loader-admin-projects'
 
-            class-name='w280 cell border cell-with-name'
-            class-members='w280 cell border cell-with-id-card'
-            class-captain='w280 cell border cell-with-id-card'
-            class-joinButton='w230 cell border cell-with-buttons is-spaced'
+            class-name='table-cell w280 text-color-heading text-bold text-letter-spacing-large text-underline'
+            class-members='table-cell w280 cell border cell-with-id-card'
+            class-captain='table-cell w280 cell border cell-with-id-card'
+            class-joinButton='table-cell w230'
 
             action-joinButton="joinButton" # Workaround: I need members two times
             widget-joinButton="hubl-admin-project-join-button"