LF-5095: Migrate SCSS from @import to @use

packages/webapp/src/assets/variables.scss

@@ -1,17 +1,17 @@
-@import './mixin.scss';
+@use './mixin' as *;
 
 :root {
-    // GLOBAL CSS VARIABLES
-    --global-navbar-height: 64px;
-    --global-map-header-height: 48px;
-    --global-side-menu-width: 188px;
-    --global-compact-side-menu-width: 80px;
-    // 249px = 24px form padding + 41px form title and progress + 24px margin + 24px call to action + 16 px margin + 24px margin + 24 px padding + 48px button + 24 px padding
-    --global-multi-step-task-layout-aggregated-height: 249px;
+  // GLOBAL CSS VARIABLES
+  --global-navbar-height: 64px;
+  --global-map-header-height: 48px;
+  --global-side-menu-width: 188px;
+  --global-compact-side-menu-width: 80px;
+  // 249px = 24px form padding + 41px form title and progress + 24px margin + 24px call to action + 16 px margin + 24px margin + 24 px padding + 48px button + 24 px padding
+  --global-multi-step-task-layout-aggregated-height: 249px;
 
-    @include xs-breakpoint {
-        --global-navbar-height: 55px;
-        --global-side-menu-width: 0px;
-        --global-compact-side-menu-width: 0px;
-    }
+  @include xs-breakpoint {
+    --global-navbar-height: 55px;
+    --global-side-menu-width: 0px;
+    --global-compact-side-menu-width: 0px;
+  }
 }

packages/webapp/src/components/ActionMenu/styles.module.scss

@@ -12,7 +12,7 @@
  *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  *  GNU General Public License for more details, see <https://www.gnu.org/licenses/>.
  */
-@import '../../assets/mixin.scss';
+@use '../../assets/mixin' as *;
 
 @mixin calculate-icon-group-width($iconCount) {
   // gap between iconGroup is 8px

packages/webapp/src/components/AddSensors/styles.module.scss

@@ -13,7 +13,7 @@
  *  GNU General Public License for more details, see <https://www.gnu.org/licenses/>.
  */
 
-@import '../../assets/mixin.scss';
+@use '../../assets/mixin' as *;
 
 .wrapper {
   padding: 34px 32px 0 32px;

packages/webapp/src/components/Animals/AddAnimalsForm/AnimalFormHeaderItem/styles.module.scss

@@ -13,7 +13,7 @@
  *  GNU General Public License for more details, see <https://www.gnu.org/licenses/>.
  */
 
-@import '../../../../assets/mixin';
+@use '../../../../assets/mixin' as *;
 
 // Set up desktop and mobile layout
 .mainContent {

packages/webapp/src/components/Animals/AddAnimalsForm/styles.module.scss

@@ -12,7 +12,7 @@
  *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  *  GNU General Public License for more details, see <https://www.gnu.org/licenses/>.
  */
-@import '../../../assets/mixin.scss';
+@use '../../../assets/mixin' as *;
 
 .card {
   // Layout

packages/webapp/src/components/Animals/AddAnimalsFormCard/styles.module.scss

@@ -13,7 +13,7 @@
  *  GNU General Public License for more details, see <https://www.gnu.org/licenses/>.
  */
 
-@import '../../../assets/mixin';
+@use '../../../assets/mixin' as *;
 
 .form {
   display: flex;

packages/webapp/src/components/Animals/AddAnimalsSummaryCard/IconSummary/styles.module.scss

@@ -13,7 +13,7 @@
  *  GNU General Public License for more details, see <https://www.gnu.org/licenses/>.
  */
 
-@import '../../../../assets/mixin';
+@use '../../../../assets/mixin' as *;
 
 .iconContainer {
   width: 40px; // width of the larger (batch) icon

packages/webapp/src/components/Animals/AddAnimalsSummaryCard/styles.module.scss

@@ -13,7 +13,7 @@
  *  GNU General Public License for more details, see <https://www.gnu.org/licenses/>.
  */
 
-@import '../../../assets/mixin';
+@use '../../../assets/mixin' as *;
 
 .container {
   display: flex;

packages/webapp/src/components/Animals/AnimalSingleViewHeader/styles.module.scss

@@ -13,7 +13,7 @@
 *  GNU General Public License for more details, see <https://www.gnu.org/licenses/>.
 */
 
-@import '../../../assets/mixin';
+@use '../../../assets/mixin' as *;
 
 .containerWithButtons {
   height: 80px;

packages/webapp/src/components/Animals/FixedHeaderContainer/styles.module.scss

@@ -13,7 +13,7 @@
 *  GNU General Public License for more details, see <https://www.gnu.org/licenses/>.
 */
 
-@import '../../../assets/mixin.scss';
+@use '../../../assets/mixin' as *;
 
 .wrapper {
   height: calc(100vh - var(--global-navbar-height));

packages/webapp/src/components/Badge/styles.module.scss

@@ -13,7 +13,7 @@
  *  GNU General Public License for more details, see <https://www.gnu.org/licenses/>.
  */
 
-@import '../../assets/mixin.scss';
+@use '../../assets/mixin' as *;
 
 .tooltip {
   color: #000;

packages/webapp/src/components/Card/NotificationCard/styles.module.scss

@@ -13,7 +13,7 @@
  *  GNU General Public License for more details, see <https://www.gnu.org/licenses/>.
  */
 
-@import '@assets/mixin';
+@use '@assets/mixin' as *;
 
 .notificationCard {
   display: flex;

packages/webapp/src/components/Card/card.module.scss

@@ -1,4 +1,4 @@
-@import '../../assets/mixin';
+@use '../../assets/mixin' as *;
 .container {
   box-sizing: border-box;
   border-radius: 4px;
@@ -57,7 +57,6 @@
 }
 
 .none {
-
 }
 
 // task styles
@@ -91,11 +90,11 @@
 
 // notification styles
 .notificationUnread {
-  background-color:  var(--white);
+  background-color: var(--white);
 }
 
 .notificationRead {
-  background-color:  var(--grey200);
+  background-color: var(--grey200);
 }
 
 // SummaryCard
@@ -121,13 +120,15 @@ h4.lgSummaryData {
 }
 
 .negative {
-  h4, p {
+  h4,
+  p {
     color: var(--red700);
   }
 }
 
 .positive {
-  h4, p {
+  h4,
+  p {
     color: var(--green800);
   }
 }

packages/webapp/src/components/CardWithStatus/ManagementPlanCard/styles.module.scss

@@ -1,4 +1,4 @@
-@import '@assets/mixin.scss';
+@use '@assets/mixin' as *;
 
 .info {
   display: flex;
@@ -38,12 +38,12 @@
   color: var(--fontColor);
 }
 
-.repeatPlan{
+.repeatPlan {
   margin-left: 8px;
   color: var(--teal700);
 }
 
-.underline{
+.underline {
   text-decoration: underline;
 }
 
@@ -66,7 +66,6 @@
   gap: 3px;
 }
 
-
 .circle {
   display: flex;
   align-items: center;

packages/webapp/src/components/CardWithStatus/TaskCard/styles.module.scss

@@ -1,4 +1,4 @@
-@import '@assets/mixin.scss';
+@use '@assets/mixin' as *;
 
 .card {
   display: flex;
@@ -44,7 +44,7 @@
   display: flex;
   flex-direction: row;
   gap: 8px;
-  color: var(--fontColor)
+  color: var(--fontColor);
 }
 
 .iconTextContainer {
@@ -110,4 +110,4 @@
   @include md-breakpoint {
     visibility: hidden;
   }
-}
+}

packages/webapp/src/components/ChooseFarm/ChooseFarmMenu/ChooseFarmMenuItem/chooseFarmMenuItem.module.scss

@@ -1,4 +1,4 @@
-@import '../../../../assets/mixin';
+@use '../../../../assets/mixin' as *;
 .leftColumn {
   margin-left: 18px;
   margin-right: 12px;

packages/webapp/src/components/ChooseFarm/styles.scss

@@ -1,4 +1,4 @@
-@import '../../assets/mixin';
+@use '../../assets/mixin' as *;
 .title {
   font-style: normal;
   font-weight: normal;

packages/webapp/src/components/Consent/consent.module.scss

@@ -1,4 +1,4 @@
-@import '@assets/mixin.scss';
+@use '@assets/mixin' as *;
 
 .floatLabelRight {
   float: right;

packages/webapp/src/components/Crop/ManagementDetail/styles.module.scss

@@ -1,4 +1,4 @@
-@import '@assets/mixin.scss';
+@use '@assets/mixin' as *;
 
 .title {
   font-style: normal;

packages/webapp/src/components/Crop/PlantingDate/styles.module.scss

@@ -1,12 +1,12 @@
-@import '@assets/mixin.scss';
+@use '@assets/mixin' as *;
 
 .label {
-    font-style: normal;
-    font-weight: normal;
-    color: var(--grey900);
-    font-size: 16px;
-    line-height: 16px;
-    @include fontFamily();
-    margin-bottom: 4px;
-    margin-top: 0;
+  font-style: normal;
+  font-weight: normal;
+  color: var(--grey900);
+  font-size: 16px;
+  line-height: 16px;
+  @include fontFamily();
+  margin-bottom: 4px;
+  margin-top: 0;
 }

packages/webapp/src/components/CustomSignUp/styles.module.scss

@@ -13,7 +13,7 @@
 //  *  GNU General Public License for more details, see <https://www.gnu.org/licenses/>.
 //  */
 
-@import '@assets/mixin.scss';
+@use '@assets/mixin' as *;
 
 .home .lander {
   color: var(--primary);

packages/webapp/src/components/ErrorHandler/PureReactErrorFallback/styles.module.scss

@@ -13,7 +13,7 @@
  *  GNU General Public License for more details, see <https://www.gnu.org/licenses/>.
  */
 
-@import '../../../assets/mixin';
+@use '../../../assets/mixin' as *;
 
 .container {
   min-height: 100vh;

packages/webapp/src/components/Expandable/styles.module.scss

@@ -12,7 +12,7 @@
  *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  *  GNU General Public License for more details, see <https://www.gnu.org/licenses/>.
  */
-@import '@assets/mixin.scss';
+@use '@assets/mixin' as *;
 
 .mainContentWithIcon {
   display: flex;

packages/webapp/src/components/FarmSwitchOutro/styles.module.scss

@@ -13,7 +13,7 @@
  *  GNU General Public License for more details, see <https://www.gnu.org/licenses/>.
  */
 
-@import '@assets/mixin.scss';
+@use '@assets/mixin' as *;
 
 .outroContainer {
   /* Rectangle 49 */
@@ -26,7 +26,7 @@
   border-radius: 7.05466px;
   align-items: center;
   justify-content: space-between;
-  padding: 20px
+  padding: 20px;
 }
 
 .descriptionTop {

packages/webapp/src/components/FilePicker/styles.module.scss

@@ -13,7 +13,7 @@
 *  GNU General Public License for more details, see <https://www.gnu.org/licenses/>.
 */
 
-@import '../../assets/mixin.scss';
+@use '../../assets/mixin' as *;
 
 .filePickerContainer {
   flex-grow: 1;
@@ -22,4 +22,4 @@
   row-gap: 24px;
   align-items: center;
   padding-bottom: 16px;
-}
+}

packages/webapp/src/components/Filter/FilterControls/styles.module.scss

@@ -13,7 +13,7 @@
  *  GNU General Public License for more details, see <https://wwwl.gnu.org/licenses/>.
  */
 
-@import '@assets/mixin.scss';
+@use '@assets/mixin' as *;
 
 .filterControlsContainer {
   display: flex;

packages/webapp/src/components/Filter/FilterMultiSelectV2/styles.module.scss

@@ -13,7 +13,7 @@
  *  GNU General Public License for more details, see <https://www.gnu.org/licenses/>.
  */
 
-@import '../../../assets/mixin.scss';
+@use '../../../assets/mixin' as *;
 
 .menuPortal {
   z-index: 1300;

packages/webapp/src/components/Finances/FinancesCarrousel/styles.module.scss

@@ -13,7 +13,7 @@
  *  GNU General Public License for more details, see <https://www.gnu.org/licenses/>.
  */
 
-@import '@assets/mixin.scss';
+@use '@assets/mixin' as *;
 
 .cardContent {
   display: flex;

packages/webapp/src/components/Finances/PureFinanceTypeSelection/CantFindCustomType/styles.module.scss

@@ -13,7 +13,7 @@
  *  GNU General Public License for more details, see <https://www.gnu.org/licenses/>.
  */
 
-@import '@assets/mixin.scss';
+@use '@assets/mixin' as *;
 
 // 100vw background colour on small screens
 .background {