Merge pull request #136 from OpenConext/feature/upgrade

Upgrade to Symfony 7.4

Author: johanib

.github/workflows/test-integration.yml

@@ -18,6 +18,10 @@ jobs:
 
       - name: Composer install
         run: composer install
-      
+
+      # node modules are needed for jscpd
+      - name: Yarn install
+        run: yarn install --frozen-lockfile --ignore-scripts
+
       - name: Run QA tests
-        run: composer check
+        run: composer check-ci

assets/scss/application.scss

@@ -1,22 +1,20 @@
-@import "../../node_modules/compass-mixins";
-@include global-reset ;
+@use "sass:meta";
 
-$fa-font-path: "../../fonts";
-@import "fonts/font-awesome";
-@import "fonts/roboto";
+@include meta.load-css("fonts/font-awesome", $with: ("fa-font-path": "../../fonts"));
+@include meta.load-css("fonts/roboto");
 
-@import "vars";
-@import "utilities/reset";
+@include meta.load-css("vars");
+@include meta.load-css("utilities/reset");
 
-@import "base/base";
-@import "base/mixins";
-@import "utilities/media_queries";
-@import "components/header";
-@import "components/button";
-@import "components/form";
-@import "components/alerts";
-@import "components/icon_legend";
-@import "components/table";
-@import "components/navigation";
-@import "components/footer";
-@import "pages/base";
+@include meta.load-css("base/base");
+@include meta.load-css("base/mixins");
+@include meta.load-css("utilities/media_queries");
+@include meta.load-css("components/header");
+@include meta.load-css("components/button");
+@include meta.load-css("components/form");
+@include meta.load-css("components/alerts");
+@include meta.load-css("components/icon_legend");
+@include meta.load-css("components/table");
+@include meta.load-css("components/navigation");
+@include meta.load-css("components/footer");
+@include meta.load-css("pages/base");

assets/scss/base/base.scss

@@ -1,11 +1,13 @@
+@use "../vars";
+
 body {
   font-family: "Roboto", Sans-serif;
   font-weight: 400;
   font-size: 14px;
   line-height: 20px;
-  color: $dark-grey;
+  color: vars.$dark-grey;
   -webkit-font-smoothing: antialiased;
-  background-color: $background;
+  background-color: vars.$background;
 
 }
 
@@ -18,11 +20,11 @@ a {
 }
 
 ::-webkit-input-placeholder {
-  color: $blue;
+  color: vars.$blue;
 }
 
 ::-moz-placeholder {
-  color: $blue;
+  color: vars.$blue;
   opacity: 1;
 }
 

assets/scss/base/mixins.scss

@@ -1,36 +1,40 @@
+@use "sass:color";
+@use "../vars";
+@use "../utilities/media_queries";
+
 @mixin card {
   background-color: white;
-  border-bottom-left-radius: $br;
-  border-bottom-right-radius: $br;
+  border-bottom-left-radius: vars.$br;
+  border-bottom-right-radius: vars.$br;
   padding: 0 15px;
-  border-top: 2px solid $blue;
+  border-top: 2px solid vars.$blue;
   box-shadow: 0 0 4px 0 rgba(0,0,0,0.05);
 }
 
 @mixin page {
-  max-width: $medium;
+  max-width: vars.$medium;
   margin: 0 auto 15px auto;
   padding: 0 15px;
 }
 
 @mixin tool-tip {
-  box-shadow: 1px 2px 6px 1px $lighter-grey;
+  box-shadow: 1px 2px 6px 1px vars.$lighter-grey;
   padding: 10px !important;
   font-size: 14px !important;
   pointer-events: auto !important;
-  color: $dark-grey !important;
+  color: vars.$dark-grey !important;
   background-color: white !important;
   &.show {
     opacity: 1 !important;
   }
   max-width: 390px;
-  @include phone {
+  @include media_queries.phone {
     max-width: 200px;
   }
 }
 
 @mixin info-icon {
-  color: $blue;
+  color: vars.$blue;
   margin-left: 5px;
   font-size: 16px;
   font-weight: bold;
@@ -43,8 +47,8 @@
   }
 
   div.Select-control {
-    border-radius: $br;
-    border: 1px solid $lighter-grey;
+    border-radius: vars.$br;
+    border: 1px solid vars.$lighter-grey;
     margin-top: 5px;
     display: table;
     border-spacing: 0;
@@ -56,7 +60,7 @@
 
   span.Select-arrow-zone {
     padding: 0 12px;
-    background-color: $light-grey;
+    background-color: vars.$light-grey;
   }
 
   span.select-option {
@@ -86,7 +90,7 @@
       box-shadow: 0 0 0 0 white;
     }
     70% {
-      box-shadow: 0 0 10px 8px lighten($blue, 15%);
+      box-shadow: 0 0 10px 8px color.adjust(vars.$blue, $lightness: 15%);
     }
     100% {
       box-shadow: 0 0 0 0 white;

assets/scss/components/alerts.scss

@@ -1,24 +1,27 @@
+@use "sass:color";
+@use "../vars";
+
 div.alert {
 
   border: 1px solid transparent;
   padding: .75rem 1.25rem;
   margin: 0.75rem 0;
   border-radius: .25rem;
 
-  background-color: $light-grey;
+  background-color: vars.$light-grey;
 
   &.alert-info,
   &.info {
-    background-color: darken($green, 15%);
+    background-color: color.adjust(vars.$green, $lightness: -15%);
   }
   &.alert-warning,
   &.warning {
-    background-color: $orange;
+    background-color: vars.$orange;
   }
   &.alert-error,
   &.error {
-    background-color: $red;
-    color: $light-grey;
+    background-color: vars.$red;
+    color: vars.$light-grey;
   }
 
   i.fa {

assets/scss/components/button.scss

@@ -1,17 +1,20 @@
+@use "../vars";
+@use "../base/mixins";
+
 .button {
   display: inline-block;
   padding: 10px 15px;
   text-transform: uppercase;
   background-color: white;
-  color: $blue;
-  border: 1px solid $lighter-grey;
-  border-radius: $br;
+  color: vars.$blue;
+  border: 1px solid vars.$lighter-grey;
+  border-radius: vars.$br;
   font-size: larger;
   font-weight: bold;
   text-align: center;
   cursor: pointer;
 
-  @include no-text-decoration;
+  @include mixins.no-text-decoration;
 
   &:not(:last-child) {
     margin-right: 15px;
@@ -23,27 +26,27 @@
 
   i {
     margin-left: 10px;
-    color: $medium-grey;
+    color: vars.$medium-grey;
   }
 
   &.blue {
-    background-color: $blue;
+    background-color: vars.$blue;
     color: white;
     border: none;
     &.error {
-      background-color: $red;
+      background-color: vars.$red;
     }
     i {
       color: white;
     }
   }
   &.grey {
-    background-color: $lighter-grey;
+    background-color: vars.$lighter-grey;
     color: white;
     border: none;
   }
   &.green {
-    background-color: $green;
+    background-color: vars.$green;
     color: white;
     border: none;
     border-top-left-radius: 0;

assets/scss/components/footer.scss

@@ -1,17 +1,22 @@
+@use "sass:color";
+@use "../vars";
+@use "../utilities/media_queries";
+@use "../base/mixins";
+
 div.footer {
 
   padding: 15px;
   border-top: 3px solid white;
   margin-top: 25px;
 
   div.footer-inner {
-    @include page;
+    @include mixins.page;
 
     display: flex;
     align-items: flex-end;
 
     span {
-      border-right: 1px solid $lighter-grey;
+      border-right: 1px solid vars.$lighter-grey;
       &:first-child {
         margin-left: auto;
       }
@@ -21,15 +26,15 @@ div.footer {
     }
 
     a {
-      color: darken($blue, 10%);
+      color: color.adjust(vars.$blue, $lightness: -10%);
       &:visited, &:hover {
         text-decoration: none;
       }
       text-decoration: none;
       padding: 0 15px;
     }
 
-    @include phone {
+    @include media_queries.phone {
       flex-direction: column;
       span {
         padding: 5px 0;

assets/scss/components/form.scss

@@ -1,11 +1,14 @@
+@use "../vars";
+@use "../base/mixins";
+
 form {
   .form-row {
     position: relative;
   }
 
   .help-button {
     i.fa {
-      color: $blue;
+      color: vars.$blue;
     }
 
     cursor: pointer;
@@ -15,7 +18,7 @@ form {
     top: 0;
 
     .balloon {
-      @include tool-tip;
+      @include mixins.tool-tip;
 
       display: none;
       font-weight: normal;