Now using more digi-core components

apps/dafa-web/src/app/pages/administration/pages/staff/components/staff-list/staff-list.component.html

@@ -1,4 +1,4 @@
-<digi-ng-table>
+<digi-table af-variation="secondary">
   <table>
     <thead>
       <tr>
@@ -41,7 +41,7 @@
       </tr>
     </tbody>
   </table>
-</digi-ng-table>
+</digi-table>
 
 <digi-navigation-pagination
   *ngIf="staff.length > pagedStaff.length"

apps/dafa-web/src/app/pages/administration/pages/staff/staff.component.scss

@@ -4,11 +4,6 @@
     margin-top: var(--digi--layout--gutter);
   }
 
-  &__link {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--digi--layout--gutter--s);
-  }
   &__search-wrapper {
     display: flex;
     max-width: var(--digi--typography--text--max-width);

apps/dafa-web/src/app/pages/participants/components/participants-list/participants-list.component.html

@@ -1,4 +1,4 @@
-<digi-ng-table>
+<digi-table af-variation="secondary">
   <table>
     <thead>
       <tr>
@@ -69,7 +69,7 @@
       </tr>
     </tbody>
   </table>
-</digi-ng-table>
+</digi-table>
 
 <digi-navigation-pagination
   *ngIf="participants.length > pagedParticipants.length"

apps/dafa-web/src/app/pages/start/start.component.html

@@ -1,10 +1,10 @@
 <section class="start">
   <digi-typography>
-    <h1>Välkommen till DAFA 2.0</h1>
+    <h1>Välkommen till Mina Sidor FA</h1>
     <p>Här finner du de senaste nyheterna om uppdateringar, notiser och mer.</p>
   </digi-typography>
   <div class="start__wrapper">
-    <div class="start__main">
+    <div class="start__notifications">
       <digi-info-card af-heading="Notiser" af-heading-level="h1" af-type="info" af-link-text="Deltagare">
         <p>
           Det har kommit in nya avrop med deltagare, länken nedan tar dig till fliken Nya deltagare. Du finner den också
@@ -15,25 +15,19 @@
       </digi-info-card>
     </div>
 
-    <div class="start__sidebar">
+    <div class="start__alerts">
-      <digi-ng-notification-alert afVariation="info" afSize="l" afHeading="Viktig information" afHeadingLevel="h3">
+      <digi-notification-alert af-variation="info" af-heading="Viktig information" af-heading-level="h3">
         <p>Large alert! Check the knobs section and play around!</p>
-      </digi-ng-notification-alert>
+      </digi-notification-alert>
-      <div class="start__sidebar-alert">
+      <digi-notification-alert af-variation="success" af-heading="Allt gick bra" af-heading-level="h3">
-        <digi-ng-notification-alert
-          afVariation="success"
-          afSize="l"
-          afCloseable="true"
-          afHeading="Allt gick bra"
-          afHeadingLevel="h3"
-        >
         <p>Dina skickade tilldelningar har nått fram till handledare som godkänt och arbetat vidare med deltagarna</p>
-        </digi-ng-notification-alert>
+      </digi-notification-alert>
     </div>
-    </div>
+    <div class="start__statistics">
-    <div class="start__footer">
+      <digi-info-card af-heading="Statistik" af-heading-level="h2" af-type="info">
-      <digi-info-card af-heading="Statistik" af-heading-level="h1" af-type="info">
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores dolores debitis enim. Voluptatum debitis
-        <p><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></p>
+        necessitatibus, distinctio expedita officiis maiores eum sapiente molestiae eveniet soluta dolores non, porro
+        quo vitae tenetur?
       </digi-info-card>
     </div>
   </div>

apps/dafa-web/src/app/pages/start/start.component.scss

@@ -1,24 +1,28 @@
 @import 'variables/gutters';
 .start {
   &__wrapper {
+    margin-top: $digi--layout--gutter--l;
     display: grid;
     grid-template-rows: auto;
     grid-template-areas:
-      'header header '
+      'header header'
-      'main  sidebar'
+      'notifications alerts'
-      'footer footer ';
+      'statistics statistics ';
-    grid-gap: var(--digi--layout--gutter);
+    gap: $digi--layout--gutter--l;
   }
-  &__main {
+
-    grid-area: main;
+  &__notifications {
+    grid-area: notifications;
   }
-  &__sidebar {
+
-    grid-area: sidebar;
+  &__alerts {
+    grid-area: alerts;
+    display: flex;
+    flex-direction: column;
+    gap: var(--digi--layout--gutter);
   }
-  &__sidebar-alert {
+
-    margin-top: var(--digi--layout--gutter);
+  &__statistics {
-  }
+    grid-area: statistics;
-  &__footer {
-    grid-area: footer;
   }
 }

apps/dafa-web/src/styles/styles.scss

@@ -1,4 +1,4 @@
-@import '~@digi/styles/src/digi';
+@import '@digi/core/dist/digi/digi.css';
 @import 'mixins/a11y';
 @import 'mixins/icon';