Change import to use in sass files (#3316)

* run sass-migrator module --migrate-deps filename * manually migrate entrypoint * manual adjustments to get scss to build again and look ok * prefer relative assets * fix spacing on dashboard * move up spacing rather than having it on every header on patient edit page * fix header and footer * fix color of clinic finder and spacing on practical support updates * fix doofy html mistake
DARIAEngineering · Jan 26, 2025 · 0c4c230 · 0c4c230
1 parent d04dbf4
commit 0c4c230
Show file tree

Hide file tree

Showing 32 changed files with 150 additions and 140 deletions.
diff --git a/app/assets/stylesheets/application.bootstrap.scss b/app/assets/stylesheets/application.bootstrap.scss
@@ -1,25 +1,25 @@
 // Major library config
-@import './styles/bootstrap';
-@import './styles/vendor/jquery-ui';
+@use './styles/bootstrap';
+@use './styles/vendor/jquery-ui';
 
 // Custom styling
-@import './styles/globals';
-@import './styles/call_list';
-@import './styles/devise';
-@import './styles/users';
-@import './styles/budget_bar';
-@import './styles/clinic_finder';
-@import './styles/calls';
-@import './styles/pagination';
-@import './styles/events';
-@import './styles/patient_menu';
-@import './styles/patient_edit';
-@import './styles/tables';
-@import './styles/footer';
-@import './styles/modals';
-@import './styles/navbar';
-@import './styles/tooltips';
-@import './styles/lines';
-@import './styles/flash';
-@import './styles/forms';
-@import './styles/buttons';
+@use './styles/globals';
+@use './styles/call_list';
+@use './styles/devise';
+@use './styles/users';
+@use './styles/budget_bar';
+@use './styles/clinic_finder';
+@use './styles/calls';
+@use './styles/pagination';
+@use './styles/events';
+@use './styles/patient_menu';
+@use './styles/patient_edit';
+@use './styles/tables';
+@use './styles/footer';
+@use './styles/modals';
+@use './styles/navbar';
+@use './styles/tooltips';
+@use './styles/lines';
+@use './styles/flash';
+@use './styles/forms';
+@use './styles/buttons';
diff --git a/app/assets/stylesheets/styles/bootstrap_config.scss b/app/assets/stylesheets/styles/bootstrap_config.scss
@@ -1,8 +1,9 @@
+@use "sass:map";
 $spacer: .5rem !default;
 
 $spacers: () !default;
 // stylelint-disable-next-line scss/dollar-variable-default
-$spacers: map-merge(
+$spacers: map.merge(
   (
     0: 0,
     1: ($spacer * .25), //.125 rem

diff --git a/app/assets/stylesheets/styles/budget_bar.scss b/app/assets/stylesheets/styles/budget_bar.scss
@@ -1,11 +1,11 @@
 // Styling related to the budget bar utility.
 
-@import './_variables';
+@use './_variables';
 
 $budget-bar-font-size: 14px;
 
 .expenditure-block {
-  border-right: 1px solid $black;
-  color: $black !important;
+  border-right: 1px solid variables.$black;
+  color: variables.$black !important;
   font-size: $budget-bar-font-size;
 }
diff --git a/app/assets/stylesheets/styles/buttons.scss b/app/assets/stylesheets/styles/buttons.scss
@@ -1,69 +1,70 @@
 // Button styling.
-@import './_variables';
+@use "sass:color";
+@use './_variables';
 
 // btn-primary
 .btn-primary {
   @extend .btn-primary;
-  background-color: $daria-color;
+  background-color: variables.$daria-color;
   border: none;
-  color: $white;
+  color: variables.$white;
   margin-bottom: 2px;
-  font-size: $font-size;
+  font-size: variables.$font-size;
 }
 
 .btn-primary:hover {
-  background-color: lighten($daria-color,15%);
+  background-color: color.adjust(variables.$daria-color,$lightness: 15%);
 }
 
 .btn-primary:focus {
-  background-color: lighten($daria-color,15%);
-  color: $white;
+  background-color: color.adjust(variables.$daria-color,$lightness: 15%);
+  color: variables.$white;
   text-decoration: none;
 }
 
 // btn-danger
 .btn-danger {
-  background-color: $dark-red !important;
-  border-color: $dark-red !important;
+  background-color: variables.$dark-red !important;
+  border-color: variables.$dark-red !important;
 }
 
 // btn-warning
 .btn-warning {
-  color: $black;
-  border-color: $daria-color;
-  background-color: $white;
+  color: variables.$black;
+  border-color: variables.$daria-color;
+  background-color: variables.$white;
 
   &:hover {
-    background-color: $daria-color-lt;
-    border-color: $daria-color;
+    background-color: variables.$daria-color-lt;
+    border-color: variables.$daria-color;
   }
   &:active {
-    background-color: $soft-blue !important;
+    background-color: variables.$soft-blue !important;
   }
   &:focus {
-    background-color: $daria-color;
+    background-color: variables.$daria-color;
     &:hover {
-      background-color: $daria-color-lt;
+      background-color: variables.$daria-color-lt;
     }
   }
 }
 
 // btn-success
 .btn-success {
-  background-color: $daria-color;
-  border-color: $daria-color;
+  background-color: variables.$daria-color;
+  border-color: variables.$daria-color;
 
   &:hover {
-    background-color: $daria-color-lt;
-    border-color: $daria-color;
+    background-color: variables.$daria-color-lt;
+    border-color: variables.$daria-color;
   }
   &:active {
-    background-color: $soft-blue !important;
+    background-color: variables.$soft-blue !important;
   }
   &:focus {
-    background-color: $daria-color;
+    background-color: variables.$daria-color;
     &:hover {
-      background-color: $daria-color-lt;
+      background-color: variables.$daria-color-lt;
     }
   }
 }
@@ -76,19 +77,19 @@
 
 // Disabled button styling
 @mixin disabled-button {
-  color: $white;
+  color: variables.$white;
   background-color: gray;
-  border-color: $daria-color;
+  border-color: variables.$daria-color;
   &:hover {
     background-color: gray;
-    border-color: $daria-color;
+    border-color: variables.$daria-color;
   }
   &:focus {
     background-color: gray;
-    border-color: $daria-color;
+    border-color: variables.$daria-color;
     &:hover {
       background-color: gray;
-      border-color: $daria-color;
+      border-color: variables.$daria-color;
     }
   }
 }
@@ -103,5 +104,5 @@
 
 // Styling for the cancel button on pledge modal
 .btn[data-orientation='cancel'] {
-  color: $red;
+  color: variables.$red;
 }
diff --git a/app/assets/stylesheets/styles/call_list.scss b/app/assets/stylesheets/styles/call_list.scss
@@ -1,10 +1,10 @@
 // Styling related to the call list and patient search.
 
-@import './_variables';
+@use './_variables';
 
 .call-icon {
-  color: $white;
-  background-color: $phone-icon-blue;
+  color: variables.$white;
+  background-color: variables.$phone-icon-blue;
   padding: 5px;
   border-radius: 50%;
 }
@@ -29,7 +29,7 @@
 // Drag and drop functionality/stylings
 // Activated when dragging around
 .ui-state-highlight {
-  background-color: $lavendar !important;
+  background-color: variables.$lavendar !important;
 }
 .active-item-shadow {
   -webkit-box-shadow: rgba(133,133,133,0.1) 0 0 5px 2px,rgba(133,133,133,0.3) 0 0 2px;
@@ -38,5 +38,5 @@
 }
 // Keeps the rows white when dragging around
 #call_list tr {
-  background-color: $white;
+  background-color: variables.$white;
 }
diff --git a/app/assets/stylesheets/styles/calls.scss b/app/assets/stylesheets/styles/calls.scss
@@ -1,27 +1,27 @@
 // Styling related to log-a-call modals.
 
-@import './_variables';
+@use './_variables';
 
 // Core new call modal
 .calls-layout {
   padding: 1rem .5rem 1rem 2rem;
 
   .calls-request {
-    font-size: $font-size-large;
+    font-size: variables.$font-size-large;
   }
 
   .calls-phone {
-    font-size: $font-size-xlarge;
+    font-size: variables.$font-size-xlarge;
     font-weight: 900;
   }
 
   .calls-response {
-    font-size: $font-size;
+    font-size: variables.$font-size;
     text-decoration: underline;
   }
 
   .calls-btn {
-    font-size: $font-size;
+    font-size: variables.$font-size;
     padding: 10px 40px;
   }
 }
diff --git a/app/assets/stylesheets/styles/clinic_finder.scss b/app/assets/stylesheets/styles/clinic_finder.scss
@@ -1,11 +1,11 @@
 // Styling related to the clinic finder utility.
 
-@import './_variables';
+@use './_variables';
 
 .clinic_finder_container {
-  background-color: $grey-color;
+  background-color: variables.$light-gray;
   border-style: solid;
-  border-color: black;
+  border-color: variables.$grey-color;
   border-width: thin;
 
   .button-right {

diff --git a/app/assets/stylesheets/styles/devise.scss b/app/assets/stylesheets/styles/devise.scss
@@ -1,12 +1,13 @@
 // Styles pertaining to the login form or other devise-related views.
 
-@import './_variables';
+@use 'bootstrap/scss/bootstrap';
+@use './_variables';
 
 .authform {
   @extend .card-header;
   @extend .mx-auto;
   padding-top: 20px;
-  border: 1px solid $light-gray;
+  border: 1px solid variables.$light-gray;
   border-radius: 6px;
   margin: 0 auto;
 }

diff --git a/app/assets/stylesheets/styles/events.scss b/app/assets/stylesheets/styles/events.scss
@@ -1,21 +1,22 @@
 // Styling for the events log on the patient dashboard.
 
-@import './_variables';
+@use 'bootstrap/scss/bootstrap';
+@use './_variables';
 
 svg.event-item {
   border-radius: 50%;
   margin-right: 1em;
   color: white;
   padding: 4px;
-  background-color: $teal;
+  background-color: variables.$teal;
   font-size: 1.25em;
 
   &.fa-thumbs-up {
     background-color: green;
   }
 
   &.fa-comment {
-    background-color: $light-gray;
+    background-color: variables.$light-gray;
     color: black;
   }
 }  

diff --git a/app/assets/stylesheets/styles/flash.scss b/app/assets/stylesheets/styles/flash.scss
@@ -1,5 +1,7 @@
 // Styling around flash messages.
-@import './_variables';
+
+@use 'bootstrap/scss/bootstrap';
+@use './_variables';
 
 #flash {
   position: fixed;

diff --git a/app/assets/stylesheets/styles/forms.scss b/app/assets/stylesheets/styles/forms.scss
@@ -1,5 +1,7 @@
 // Styling around forms.
 
+@use './variables';
+
 // Override rails_bootstrap_forms checkbox styling
 .form-check label {
   min-height: 20px;
@@ -13,7 +15,7 @@
 
 // Override rails bootstrap form-text for accessible color contrast
 .form-text {
-  color: $grey-color !important;
+  color: variables.$grey-color !important;
 }
 
 // On date inputs, don't do the annoying

diff --git a/app/assets/stylesheets/styles/globals.scss b/app/assets/stylesheets/styles/globals.scss
@@ -1,17 +1,17 @@
 // Global styling patterns.
 
-@import "./_variables";
-@import "./vendor/googleapis_source_sans_pro";
+@use 'bootstrap/scss/bootstrap';
+@use "vendor/googleapis_source_sans_pro";
+@use "./_variables";
 
 @charset "utf-8";
 
 html {
-  font-size: $font-size;
+  font-size: variables.$font-size;
 }
 
 body {
-  font-family: "Source Sans Pro", sans-serif;
-  font-size: $font-size;
+  font-size: variables.$font-size;
 }
 
 main {
@@ -65,20 +65,20 @@ label {
 
 // Links
 a {
-  color: $link-blue;
+  color: variables.$link-blue;
   text-decoration: none;
 }
 
 a:hover,
 a:active,
 a:visited,
 a:focus {
-  color: $dark-blue;
+  color: variables.$dark-blue;
   text-decoration: underline;
 }
 
 .border-bottom {
-  border-bottom: 1px solid $black;
+  border-bottom: 1px solid variables.$black;
   padding-bottom: 10px;
 }