From b957d44aed800368b0169890b8e82f7e77a935af Mon Sep 17 00:00:00 2001
From: Dan Elbert <dan.elbert@gmail.com>
Date: Sun, 29 Sep 2024 09:44:40 -0500
Subject: [PATCH] style cleanup

---
 app/javascript/application.js                 |  91 --------
 app/javascript/components/App.vue             |   8 +-
 app/javascript/components/AppAutocomplete.vue |   6 +-
 .../components/AppExpandTransition.vue        |   3 +
 app/javascript/components/AppRating.vue       |   4 +-
 .../components/RecipeEditIngredientItem.vue   |   4 +-
 app/javascript/components/TaskItemList.vue    |   2 -
 .../components/TaskListDropdownItem.vue       |   2 +-
 app/javascript/lib/VuexResponsiveSync.js      |  49 ----
 app/javascript/lib/useGlobalTweenGroup.js     |  10 +
 app/javascript/packs/application.js           |  10 +-
 app/javascript/store/index.js                 | 218 ------------------
 .../styles/_responsive_controls.scss          |  68 +++---
 app/javascript/styles/_variables.scss         |  35 ---
 app/javascript/styles/_wide_modal.scss        |   8 +-
 app/javascript/styles/index.scss              |   4 +-
 16 files changed, 72 insertions(+), 450 deletions(-)
 delete mode 100644 app/javascript/application.js
 delete mode 100644 app/javascript/lib/VuexResponsiveSync.js
 create mode 100644 app/javascript/lib/useGlobalTweenGroup.js
 delete mode 100644 app/javascript/store/index.js
 delete mode 100644 app/javascript/styles/_variables.scss

diff --git a/app/javascript/application.js b/app/javascript/application.js
deleted file mode 100644
index cd7d79d..0000000
--- a/app/javascript/application.js
+++ /dev/null
@@ -1,91 +0,0 @@
-import './styles';
-import "vue-resize/dist/vue-resize";
-
-import Vue from 'vue'
-import { sync } from 'vuex-router-sync';
-import { swInit } from "./lib/ServiceWorker";
-import responsiveSync from "./lib/VuexResponsiveSync";
-import { createChannel } from "./lib/ActionCable";
-import VueProgressBar from "vue-progressbar";
-import VueResize from "vue-resize";
-import config from './lib/config';
-import store from './store';
-import router from './router';
-import './lib/GlobalMixins';
-import App from './components/App';
-
-import AppAutocomplete from "./components/AppAutocomplete";
-import AppConfirm from "./components/AppConfirm";
-import AppDateTime from "./components/AppDateTime";
-import AppDatePicker from "./components/AppDatePicker";
-import AppDropdown from "./components/AppDropdown";
-import AppExpandTransition from "./components/AppExpandTransition";
-import AppIcon from "./components/AppIcon";
-import AppIconicIcon from "./components/AppIconicIcon";
-import AppModal from "./components/AppModal";
-import AppNavbar from "./components/AppNavbar";
-import AppPager from "./components/AppPager";
-import AppRating from "./components/AppRating";
-import AppSearchText from "./components/AppSearchText";
-import AppTagEditor from "./components/AppTagEditor";
-import AppTextField from "./components/AppTextField";
-import AppValidationErrors from "./components/AppValidationErrors";
-
-Vue.component("AppAutocomplete", AppAutocomplete);
-Vue.component("AppConfirm", AppConfirm);
-Vue.component("AppDateTime", AppDateTime);
-Vue.component("AppDatePicker", AppDatePicker);
-Vue.component("AppDropdown", AppDropdown);
-Vue.component("AppExpandTransition", AppExpandTransition);
-Vue.component("AppIcon", AppIcon);
-Vue.component("AppIconicIcon", AppIconicIcon);
-Vue.component("AppModal", AppModal);
-Vue.component("AppNavbar", AppNavbar);
-Vue.component("AppPager", AppPager);
-Vue.component("AppRating", AppRating);
-Vue.component("AppSearchText", AppSearchText);
-Vue.component("AppTagEditor", AppTagEditor);
-Vue.component("AppTextField", AppTextField);
-Vue.component("AppValidationErrors", AppValidationErrors);
-
-
-Vue.use(VueProgressBar, {
-//  color: '#bffaf3',
-//  failedColor: '#874b4b',
-//   thickness: '5px',
-//   transition: {
-//     speed: '0.2s',
-//     opacity: '0.6s',
-//     termination: 300
-//   },
-//   autoRevert: true,
-//   location: 'left',
-//   inverse: false
-});
-
-Vue.use(VueResize);
-
-sync(store, router);
-responsiveSync(store);
-
-Vue.prototype.$createChannel = function(...args) {
-  createChannel(null, ...args);
-}
-
-document.addEventListener('DOMContentLoaded', () => {
-
-  const app = document.getElementById('app');
-  config.baseApiUrl = app.dataset.url;
-
-  window.$vm = new Vue({
-    el: '#app',
-    store,
-    router: router,
-    render: createElement => createElement('App'),
-    mounted() {
-      this.$nextTick(() => swInit(store));
-    },
-    components: { App }
-  });
-
-});
diff --git a/app/javascript/components/App.vue b/app/javascript/components/App.vue
index 359a5d6..5f1f39c 100644
--- a/app/javascript/components/App.vue
+++ b/app/javascript/components/App.vue
@@ -21,9 +21,11 @@
 <script>
 
   import { mapState } from "pinia";
-  import TWEEN from '@tweenjs/tween.js';
+  import { useGlobalTweenGroup } from "../lib/useGlobalTweenGroup";
   import { useAppConfigStore } from "../stores/appConfig";
 
+  const globalTweenGroup = useGlobalTweenGroup();
+
   export default {
     data() {
       return {
@@ -59,8 +61,8 @@
 
     created() {
       // Setup global animation loop
-      function animate () {
-        TWEEN.update();
+      function animate(time) {
+        globalTweenGroup.update(time);
         requestAnimationFrame(animate);
       }
       animate();
diff --git a/app/javascript/components/AppAutocomplete.vue b/app/javascript/components/AppAutocomplete.vue
index 4330d59..3288ba0 100644
--- a/app/javascript/components/AppAutocomplete.vue
+++ b/app/javascript/components/AppAutocomplete.vue
@@ -220,13 +220,13 @@
 
 <style lang="scss" scoped>
 
-  @import "../styles/variables";
+  @use "bulma/sass/utilities" as bulma;
 
   $labelLineHeight: 0.8rem;
 
   input.input {
     &::placeholder {
-      color: $grey-darker;
+      color: bulma.$grey-darker;
     }
   }
 
@@ -251,7 +251,7 @@
 
     &.active {
       color: white;
-      background-color: $turquoise;
+      background-color: bulma.$turquoise;
     }
 
     .opt_value {
diff --git a/app/javascript/components/AppExpandTransition.vue b/app/javascript/components/AppExpandTransition.vue
index d272200..a83fb30 100644
--- a/app/javascript/components/AppExpandTransition.vue
+++ b/app/javascript/components/AppExpandTransition.vue
@@ -12,6 +12,7 @@
 <script>
 
   import TWEEN from '@tweenjs/tween.js';
+  import { useGlobalTweenGroup } from "../lib/useGlobalTweenGroup";
 
   export default {
     props: {
@@ -70,6 +71,7 @@
             }, 1000);
             done();
           })
+          .group(useGlobalTweenGroup())
           .start();
       },
 
@@ -92,6 +94,7 @@
             element.removeAttribute('style');
             done();
           })
+          .group(useGlobalTweenGroup())
           .start();
       }
     }
diff --git a/app/javascript/components/AppRating.vue b/app/javascript/components/AppRating.vue
index 01e247a..cffbf59 100644
--- a/app/javascript/components/AppRating.vue
+++ b/app/javascript/components/AppRating.vue
@@ -105,7 +105,7 @@
 
 <style lang="scss" scoped>
 
-  @import "../styles/variables";
+  @use "bulma/sass/utilities" as bulma;
 
   span.rating {
     position: relative;
@@ -125,7 +125,7 @@
     }
 
     .filled-set {
-      color: $yellow;
+      color: bulma.$yellow;
       position: absolute;
       top: 0;
       left: 0;
diff --git a/app/javascript/components/RecipeEditIngredientItem.vue b/app/javascript/components/RecipeEditIngredientItem.vue
index d35191c..74b551b 100644
--- a/app/javascript/components/RecipeEditIngredientItem.vue
+++ b/app/javascript/components/RecipeEditIngredientItem.vue
@@ -100,10 +100,10 @@
 
 <style lang="scss" scoped>
 
-  @import "../styles/variables";
+  @use "bulma/sass/utilities" as bulma;
 
   .edit-ingredient-item {
-    border-bottom: solid 1px $grey-light;
+    border-bottom: solid 1px bulma.$grey-light;
     margin-bottom: 1.25rem;
 
     &:last-child {
diff --git a/app/javascript/components/TaskItemList.vue b/app/javascript/components/TaskItemList.vue
index d92072c..2a0b0e6 100644
--- a/app/javascript/components/TaskItemList.vue
+++ b/app/javascript/components/TaskItemList.vue
@@ -190,8 +190,6 @@
 
 <style lang="scss" scoped>
 
-  @import "../styles/variables";
-
   .columns {
     margin-top: 0;
     margin-bottom: 0;
diff --git a/app/javascript/components/TaskListDropdownItem.vue b/app/javascript/components/TaskListDropdownItem.vue
index f55f725..6703e82 100644
--- a/app/javascript/components/TaskListDropdownItem.vue
+++ b/app/javascript/components/TaskListDropdownItem.vue
@@ -53,7 +53,7 @@
 
 <style lang="scss" scoped>
 
-  @use "bulma/sass" as bulma;
+  @use "bulma/sass/utilities" as bulma;
   @use 'sass:color';
 
   div.dropdown-item {
diff --git a/app/javascript/lib/VuexResponsiveSync.js b/app/javascript/lib/VuexResponsiveSync.js
deleted file mode 100644
index 01bcf96..0000000
--- a/app/javascript/lib/VuexResponsiveSync.js
+++ /dev/null
@@ -1,49 +0,0 @@
-// Adds a module to a vuex store with a set of media query states
-
-const defaultOptions = {
-  module: "mediaQueries"
-};
-
-// Hard coded values taken directly from Bulma css
-const mobileBp = 768;
-const desktopBp = 1024;
-const widscreenBp = 1216;
-const fullHdBp = 1408;
-
-const mediaQueries = {
-  mobile: `screen and (max-width: ${mobileBp}px)`,
-  tablet: `screen and (min-width: ${mobileBp + 1}px)`,
-  tabletOnly: `screen and (min-width: ${mobileBp + 1}px) and (max-width: ${desktopBp - 1}px)`,
-  touch: `screen and (max-width: ${desktopBp - 1}px)`,
-  desktop: `screen and (min-width: ${desktopBp}px)`,
-  desktopOnly: `screen and (min-width: ${desktopBp}px) and (max-width: ${widscreenBp - 1}px)`,
-  widescreen: `screen and (min-width: ${widscreenBp}px)`,
-  widescreenOnly: `screen and (min-width: ${widscreenBp}px) and (max-width: ${fullHdBp - 1}px)`,
-  fullhd: `screen and (min-width: ${fullHdBp}px)`
-};
-
-export default function(store, options) {
-  let opts = Object.assign({}, defaultOptions, options || {});
-  const moduleName = opts.module;
-
-  const initialState = {};
-
-  for (let device in mediaQueries) {
-    const query = window.matchMedia(mediaQueries[device]);
-    query.onchange = (q) => {
-      store.commit(moduleName + "/MEDIA_QUERY_CHANGED", {mediaName: device, value: q.matches});
-    };
-    initialState[device] = query.matches;
-  }
-
-  store.registerModule(moduleName, {
-    namespaced: true,
-    state: initialState,
-    mutations: {
-      "MEDIA_QUERY_CHANGED" (state, data) {
-        state[data.mediaName] = data.value;
-      }
-    }
-  });
-
-}
\ No newline at end of file
diff --git a/app/javascript/lib/useGlobalTweenGroup.js b/app/javascript/lib/useGlobalTweenGroup.js
new file mode 100644
index 0000000..58485be
--- /dev/null
+++ b/app/javascript/lib/useGlobalTweenGroup.js
@@ -0,0 +1,10 @@
+import { Group } from '@tweenjs/tween.js'
+
+let group = null;
+
+export function useGlobalTweenGroup() {
+  if (group === null) {
+    group = new Group();
+  }
+  return group;
+}
diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
index 3018933..871cdc5 100644
--- a/app/javascript/packs/application.js
+++ b/app/javascript/packs/application.js
@@ -25,7 +25,15 @@ import AppValidationErrors from "../components/AppValidationErrors";
 
 import App from '../components/App.vue'
 
+// Resize?
+// Progressbar?
+
 document.addEventListener('DOMContentLoaded', () => {
+  const appElement = document.getElementById('app');
+  if (!appElement) { return; }
+
+  config.baseApiUrl = appElement.dataset.url;
+
   const app = createApp(App);
   const pinia = createPinia();
   app.use(pinia);
@@ -50,5 +58,5 @@ document.addEventListener('DOMContentLoaded', () => {
   app.component("AppTextField", AppTextField);
   app.component("AppValidationErrors", AppValidationErrors);
   
-  app.mount('#app');
+  app.mount(appElement);
 });
diff --git a/app/javascript/store/index.js b/app/javascript/store/index.js
deleted file mode 100644
index ff3d4e4..0000000
--- a/app/javascript/store/index.js
+++ /dev/null
@@ -1,218 +0,0 @@
-import Vue from 'vue'
-import Vuex from 'vuex'
-
-import api from '../lib/Api';
-import { createChannel } from '../lib/ActionCable';
-
-Vue.use(Vuex);
-
-let taskChannel = null;
-
-export default new Vuex.Store({
-  strict: process.env.NODE_ENV !== 'production',
-  state: {
-    initialLoad: false,
-    updateAvailable: false,
-    loadingCount: 0,
-    error: null,
-    authChecked: false,
-    user: null,
-    loginMessage: null,
-
-    taskLists: [],
-    currentTaskList: null,
-
-    nutrientList: {
-      kcal: { label: "Calories", unit: "kcal" },
-      protein: { label: "Protein", unit: "g" },
-      lipids: { label: "Fat", unit: "g" },
-      carbohydrates: { label: "Carbohydrates", unit: "g" },
-      water: { label: "Water", unit: "g" },
-      sugar: { label: "Sugar", unit: "g" },
-      fiber: { label: "Fiber", unit: "g" },
-      cholesterol: { label: "Cholesterol", unit: "mg" },
-      sodium: { label: "Sodium", unit: "mg" },
-      calcium: { label: "Calcium", unit: "mg" },
-      iron: { label: "Iron", unit: "mg" },
-      magnesium: { label: "Magnesium", unit: "mg" },
-      phosphorus: { label: "Phosphorus", unit: "mg" },
-      potassium: { label: "Potassium", unit: "mg" },
-      zinc: { label: "Zinc", unit: "mg" },
-      copper: { label: "Copper", unit: "mg" },
-      manganese: { label: "Manganese", unit: "mg" },
-      vit_a: { label: "Vitamin A", unit: "μg" },
-      vit_b6: { label: "Vitamin B6", unit: "mg" },
-      vit_b12: { label: "Vitamin B12", unit: "μg" },
-      vit_c: { label: "Vitamin C", unit: "mg" },
-      vit_d: { label: "Vitamin D", unit: "μg" },
-      vit_e: { label: "Vitamin E", unit: "mg" },
-      vit_k: { label: "Vitamin K", unit: "μg" },
-      ash: { label: "ash", unit: "g" }
-
-    }
-  },
-  getters: {
-    isLoading(state) {
-      return state.loadingCount > 0;
-    },
-    isLoggedIn(state) {
-      return state.user !== null;
-    },
-    isAdmin(state) {
-      return state.user !== null && state.user.admin === true;
-    }
-  },
-  mutations: {
-    setUpdateAvailable(state, value) {
-      state.updateAvailable = value;
-    },
-
-    setInitialLoad(state, value) {
-      state.initialLoad = value;
-    },
-
-    setLoading(state, value) {
-      if (value) {
-        state.loadingCount = state.loadingCount + 1;
-      } else {
-        state.loadingCount = state.loadingCount - 1;
-      }
-      state.loading = state.loadingCount !== 0;
-    },
-
-    setError(state, value) {
-      console.log(value);
-      state.error = value;
-    },
-
-    setUser(state, user) {
-      state.authChecked = true;
-      state.user = user;
-    },
-
-    setLoginMessage(state, msg) {
-      state.loginMessage = msg;
-    },
-
-    setTaskLists(state, lists) {
-      state.taskLists = lists || [];
-    },
-
-    setCurrentTaskList(state, list) {
-      state.currentTaskList = list || null;
-    },
-
-    replaceTaskList(state, list) {
-      if (state.taskLists) {
-        const listIdx = state.taskLists.findIndex(l => l.id === list.id);
-        if (listIdx >= 0) {
-          state.taskLists.splice(listIdx, 1, list);
-        }
-        if (state.currentTaskList && state.currentTaskList.id === list.id) {
-          state.currentTaskList = list;
-        }
-      }
-    }
-  },
-  actions: {
-    updateCurrentUser({commit}) {
-      return api.getCurrentUser()
-        .then(user => {
-          commit("setUser", user);
-          return user;
-        });
-    },
-
-    login({commit}, authData) {
-      return api.postLogin(authData.username, authData.password)
-        .then(data => {
-          if (data.success) {
-            commit("setUser", data.user);
-            commit("setLoginMessage", null);
-          } else {
-            commit("setUser", null);
-            commit("setLoginMessage", data.message);
-          }
-          return data;
-        });
-    },
-
-    logout({commit}) {
-      return api.getLogout()
-        .then(() => {
-          commit("setUser", null);
-        });
-    },
-
-    refreshTaskLists({commit, dispatch, state}) {
-      const cb = function(data) {
-        commit("setTaskLists", data);
-        let ctl = null;
-
-        if (state.currentTaskList) {
-          ctl = data.find(l => l.id === state.currentTaskList.id);
-        }
-
-        ctl = ctl || data[0] || null;
-        commit("setCurrentTaskList", ctl);
-        dispatch('ensureTaskListChannel');
-      };
-
-      return api.getTaskLists(cb)
-    },
-
-    ensureTaskLists({dispatch, state}) {
-      if (state.user && state.taskLists.length === 0) {
-        return dispatch("refreshTaskLists");
-      } else {
-        return Promise.resolve();
-      }
-    },
-
-    ensureTaskListChannel({ commit }) {
-      if (taskChannel === null) {
-        taskChannel = createChannel(null, "TaskChannel", {
-          received(data) {
-            if (data && data.action === 'updated') {
-              commit('replaceTaskList', data.task_list);
-            }
-          }
-        });
-      }
-    },
-
-    createTaskList({commit, dispatch}, newList) {
-      return api.postTaskList(newList)
-        .then(data => commit("setCurrentTaskList", data))
-        .then(() => dispatch("refreshTaskLists"))
-    },
-
-    deleteTaskList({dispatch}, taskList) {
-      return api.deleteTaskList(taskList)
-        .then(() => dispatch("refreshTaskLists"));
-    },
-
-    createTaskItem({commit, dispatch}, taskItem) {
-
-      return api.postTaskItem(taskItem.task_list_id, taskItem)
-        .then(data => {
-          return data;
-        });
-    },
-
-    updateTaskItem({commit}, taskItem) {
-      return api.patchTaskItem(taskItem.task_list_id, taskItem)
-        .then(data => {
-          return data;
-        });
-    },
-
-    deleteTaskItems({commit}, payload) {
-      return api.deleteTaskItems(payload.taskList.id, payload.taskItems);
-    },
-
-    completeTaskItems({commit}, payload) {
-      return api.completeTaskItems(payload.taskList.id, payload.taskItems, !payload.completed);
-    }
-  }
-});
diff --git a/app/javascript/styles/_responsive_controls.scss b/app/javascript/styles/_responsive_controls.scss
index 565dced..40d7f47 100644
--- a/app/javascript/styles/_responsive_controls.scss
+++ b/app/javascript/styles/_responsive_controls.scss
@@ -1,107 +1,97 @@
-@mixin responsive-button-size($size) {
-  &.is-small-#{$size} {
-    @include button-small;
-  }
-
-  &.is-medium-#{$size} {
-    @include button-medium;
-  }
-
-  &.is-large-#{$size} {
-    @include button-large;
-  }
-}
+@use "bulma/sass/utilities" as bulma;
+@use "bulma/sass/utilities/controls";
+@use "bulma/sass/utilities/mixins";
 
 @mixin responsive-label-size($size) {
   &.is-small-#{$size} {
-    font-size: $size-small;
+    font-size: bulma.$size-small;
   }
 
   &.is-medium-#{$size} {
-    font-size: $size-medium;
+    font-size: bulma.$size-medium;
   }
 
   &.is-large-#{$size} {
-    font-size: $size-large;
+    font-size: bulma.$size-large;
   }
 }
 
 @mixin responsive-control-size($size) {
   &.is-small-#{$size} {
-    @include control-small;
+    @include controls.control-small;
   }
 
   &.is-medium-#{$size} {
-    @include control-medium;
+    @include controls.control-medium;
   }
 
   &.is-large-#{$size} {
-    @include control-large;
+    @include controls.control-large;
   }
 }
 
 .button {
-  @include mobile {
-    @include responsive-button-size("mobile");
+  @include mixins.mobile {
+    @include responsive-control-size("mobile");
   }
 
-  @include tablet {
-    @include responsive-button-size("tablet");
+  @include mixins.tablet {
+    @include responsive-control-size("tablet");
   }
 
-  @include desktop {
-    @include responsive-button-size("desktop");
+  @include mixins.desktop {
+    @include responsive-control-size("desktop");
   }
 
-  @include widescreen {
-    @include responsive-button-size("widescreen");
+  @include mixins.widescreen {
+    @include responsive-control-size("widescreen");
   }
 
-  @include fullhd {
-    @include responsive-button-size("fullhd");
+  @include mixins.fullhd {
+    @include responsive-control-size("fullhd");
   }
 }
 
 .label {
-  @include mobile {
+  @include mixins.mobile {
     @include responsive-label-size("mobile");
   }
 
-  @include tablet {
+  @include mixins.tablet {
     @include responsive-label-size("tablet");
   }
 
-  @include desktop {
+  @include mixins.desktop {
     @include responsive-label-size("desktop");
   }
 
-  @include widescreen {
+  @include mixins.widescreen {
     @include responsive-label-size("widescreen");
   }
 
-  @include fullhd {
+  @include mixins.fullhd {
     @include responsive-label-size("fullhd");
   }
 }
 
 .input, .textarea {
-  @include mobile {
+  @include mixins.mobile {
     @include responsive-control-size("mobile");
   }
 
-  @include tablet {
+  @include mixins.tablet {
     @include responsive-control-size("tablet");
   }
 
-  @include desktop {
+  @include mixins.desktop {
     @include responsive-control-size("desktop");
   }
 
-  @include widescreen {
+  @include mixins.widescreen {
     @include responsive-control-size("widescreen");
   }
 
-  @include fullhd {
+  @include mixins.fullhd {
     @include responsive-control-size("fullhd");
   }
 }
\ No newline at end of file
diff --git a/app/javascript/styles/_variables.scss b/app/javascript/styles/_variables.scss
deleted file mode 100644
index 79b67f3..0000000
--- a/app/javascript/styles/_variables.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-
-
-// coolors.co pallet
-$coolors-dark: rgba(29, 30, 24, 1);
-$coolors-blue: rgba(67, 127, 151, 1);
-$coolors-green: rgba(121, 167, 54, 1);
-$coolors-red: #ab4c34;
-$coolors-yellow: rgba(240, 162, 2, 1);
-
-//$family-sans-serif: "Verdana", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default
-$family-serif: Georgia, "Times New Roman", Times, serif;
-
-// Bluma default overrides
-//$green: #79A736;
-//$red: #d4424e;
-//$blue: #9c36a7;
-
-$green: $coolors-green;
-$blue: $coolors-blue;
-$red: $coolors-red;
-$yellow: $coolors-yellow;
-$dark: $coolors-dark;
-
-$primary: $green;
-$family-primary: $family-serif;
-
-$modal-content-width: 750px;
-
-
-// Make all Bulma variables and functions available
-@import "~bulma/sass/utilities/initial-variables";
-@import "~bulma/sass/utilities/functions";
-@import "~bulma/sass/utilities/derived-variables";
-
-//$dropdown-item-hover-background-color: $white-ter;
\ No newline at end of file
diff --git a/app/javascript/styles/_wide_modal.scss b/app/javascript/styles/_wide_modal.scss
index c19d548..d76d13c 100644
--- a/app/javascript/styles/_wide_modal.scss
+++ b/app/javascript/styles/_wide_modal.scss
@@ -1,5 +1,9 @@
 
-@include until($desktop) {
+@use "bulma/sass/utilities" as bulma;
+@use "bulma/sass/utilities/mixins";
+
+
+@include mixins.until(bulma.$desktop) {
   .modal.is-wide {
     .modal-content, .modal-card {
       margin: 0 20px;
@@ -8,7 +12,7 @@
   }
 }
 
-@include from($desktop) {
+@include mixins.from(bulma.$desktop) {
   .modal.is-wide {
     .modal-content, .modal-card {
       margin: 0 auto;
diff --git a/app/javascript/styles/index.scss b/app/javascript/styles/index.scss
index 8d686a2..2bce11f 100644
--- a/app/javascript/styles/index.scss
+++ b/app/javascript/styles/index.scss
@@ -18,8 +18,8 @@ $family-serif: Georgia, "Times New Roman", Times, serif;
   $modal-content-width: 750px
 );
 
-// @import "./responsive_controls";
-// @import "./wide_modal";
+@import "./responsive_controls";
+@import "./wide_modal";
 @import "./iconic";
 @import "./transitions";