Fix imports, deprecated SCSS code

client/src/components/AssignmentWithSubmissions.vue

@@ -147,10 +147,10 @@
       margin-top: $large-spacing;
     }
 
-    /deep/ ul {
+    :deep(ul) {
       @include list-parent;
     }
-    /deep/ li {
+    :deep(li) {
       @include list-child;
     }
 

client/src/components/ContentBlock.vue

@@ -397,7 +397,7 @@
       @include content-box-base;
     }
 
-    /deep/ p {
+    :deep(p) {
       line-height: 1.5;
       margin-bottom: 1em;
 
@@ -406,7 +406,7 @@
       }
     }
 
-    /deep/ .text-block {
+    :deep(.text-block) {
       ul {
         @include list-parent;
       }

client/src/components/content-block-form/ContentsForm.vue

@@ -65,8 +65,8 @@
   const AddContentElement = () => import(/* webpackChunkName: "content-forms" */'@/components/AddContentElement');
   const ContentElement = () => import(/* webpackChunkName: "content-forms" */'@/components/content-block-form/ContentElement');
 
-  const Modal = () => import('@/components/Modal');
+  const Modal = () => import('@/components/Modal.vue');
-  const Checkbox = () => import('@/components/ui/Checkbox');
+  const Checkbox = () => import('@/components/ui/Checkbox.vue');
 
   export default {
     props: {

client/src/components/content-blocks/ContentListBlock.vue

@@ -12,8 +12,7 @@
 </template>
 
 <script>
-
+  import ContentList from '@/components/content-blocks/ContentList.vue';
-  import ContentList from '@/components/content-blocks/ContentList';
   export default {
     name: 'ContentBlockList',
     props: ['contents', 'parent'],
@@ -21,7 +20,7 @@
     components: {
       ContentList,
       // https://vuejs.org/v2/guide/components-edge-cases.html#Circular-References-Between-Components
-      ContentBlock: () => import('@/components/ContentBlock')
+      ContentBlock: () => import('@/components/ContentBlock.vue')
     },
 
     computed: {

client/src/components/content-blocks/Solution.vue

@@ -86,12 +86,12 @@
       font-size: toRem(18px);
       color: $color-silver-dark;
 
-      /deep/ p {
+      :deep(p) {
         font-size: toRem(18px);
         color: $color-silver-dark;
       }
 
-      /deep/ ul {
+      :deep(ul) {
         padding-left: $medium-spacing;
 
         > li {

client/src/components/content-blocks/TextBlock.vue

@@ -28,11 +28,11 @@
     margin-bottom: calc(#{$large-spacing} - 0.25rem); // to offset the 1.5 line height, which leaves a padding
     @include regular-paragraph;
 
-    /deep/ ul {
+    :deep(ul) {
       @include list-parent;
     }
 
-    /deep/ li {
+    :deep(li) {
       @include list-child;
     }
   }

client/src/components/content-blocks/assignment/Assignment.vue

@@ -277,11 +277,11 @@
     }
 
     &__main-text {
-      /deep/ ul{
+      :deep(ul){
         @include list-parent
       }
 
-      /deep/ li {
+      :deep(li) {
         @include list-child;
       }
     }

client/src/components/content-blocks/assignment/SubmissionForm.vue

@@ -48,9 +48,9 @@
 </template>
 
 <script>
-  const SubmissionInput = () => import('@/components/content-blocks/assignment/SubmissionInput');
+  const SubmissionInput = () => import('@/components/content-blocks/assignment/SubmissionInput.vue');
-  const FinalSubmission = () => import('@/components/content-blocks/assignment/FinalSubmission');
+  const FinalSubmission = () => import('@/components/content-blocks/assignment/FinalSubmission.vue');
-  const FileUpload = () => import('@/components/ui/file-upload/FileUpload');
+  const FileUpload = () => import('@/components/ui/file-upload/FileUpload.vue');
 
 
   export default {

client/src/components/content-forms/TipTap.vue

@@ -120,26 +120,26 @@
       margin-bottom: $medium-spacing;
     }
 
-    /deep/ &__editor {
+    :deep(.tip-tap__editor) {
       @include inputstyle;
       flex-direction: column;
       min-height: 150px;
     }
 
-    /deep/ ul {
+    :deep(ul) {
       padding-left: $medium-spacing;
       list-style: initial;
     }
 
-    /deep/ li {
+    :deep(li) {
       @include inputfont;
     }
 
-    /deep/ div {
+    :deep(div) {
       @include inputfont;
     }
 
-    /deep/ p {
+    :deep(p) {
       @include inputfont;
     }
   }

client/src/components/modules/Module.vue

@@ -141,7 +141,7 @@
     }
 
     &__intro {
-      > /deep/ p {
+      > :deep(p) {
         margin-bottom: $large-spacing;
         @include lead-paragraph;
 
@@ -150,7 +150,7 @@
         }
       }
 
-      > /deep/ ul {
+      > :deep(ul) {
         @include list-parent;
 
         > li {

client/src/components/portfolio/EditProjectEntryWizard.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script>
-  import ProjectEntryForm from './ProjectEntryForm';
+  import ProjectEntryForm from './ProjectEntryForm.vue';
 
   import {mapGetters} from 'vuex';
 

client/src/components/portfolio/NewProjectEntryWizard.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script>
-  import ProjectEntryForm from './ProjectEntryForm';
+  import ProjectEntryForm from './ProjectEntryForm.vue';
 
   import NEW_PROJECT_ENTRY_MUTATION from '@/graphql/gql/mutations/addProjectEntry.gql';
   import PROJECT_QUERY from '@/graphql/gql/queries/projectQuery.gql';

client/src/components/portfolio/PortfolioOnboarding.vue

@@ -28,8 +28,8 @@
 </template>
 
 <script>
-  const PortfolioIllustration = () => import(/* webpackChunkName: "illustrations" */'@/components/illustrations/PortfolioIllustration');
+  const PortfolioIllustration = () => import('@/components/illustrations/PortfolioIllustration.vue');
-  const CreateProjectButton = () => import('@/components/portfolio/CreateProjectButton');
+  const CreateProjectButton = () => import('@/components/portfolio/CreateProjectButton.vue');
   export default {
     components: {CreateProjectButton, PortfolioIllustration},
   };

client/src/components/portfolio/ProjectEntryForm.vue

@@ -54,7 +54,7 @@
   import ButtonWithIconAndText from '@/components/ui/ButtonWithIconAndText';
 
   import {PROJECT_ENTRY_TEMPLATE} from '@/consts/strings.consts';
-  const FileUpload = () => import('@/components/ui/file-upload/FileUpload');
+  const FileUpload = () => import('@/components/ui/file-upload/FileUpload.vue');
 
   export default {
     props: {

client/src/components/profile/ActivityEntry.vue

@@ -62,7 +62,7 @@
       width: 30px;
     }
 
-    /deep/ p {
+    :deep(p) {
       @include regular-text;
     }
   }

client/src/components/rooms/RoomEntryActions.vue

@@ -19,10 +19,10 @@
 </template>
 
 <script>
-  import PopoverLink from '@/components/ui/PopoverLink';
+  import PopoverLink from '@/components/ui/PopoverLink.vue';
-  import MoreActions from '@/components/rooms/MoreActions';
+  import MoreActions from '@/components/rooms/MoreActions.vue';
-  import DELETE_ROOM_ENTRY_MUTATION from 'gql/mutations/rooms/deleteRoomEntry';
+  import DELETE_ROOM_ENTRY_MUTATION from 'gql/mutations/rooms/deleteRoomEntry.gql';
-  import ROOM_ENTRIES_QUERY from 'gql/queries/roomEntriesQuery';
+  import ROOM_ENTRIES_QUERY from 'gql/queries/roomEntriesQuery.gql';
   import {UPDATE_ROOM_ENTRY_PAGE} from '@/router/room.names';
   import {removeAtIndex} from '@/graphql/immutable-operations';
 

client/src/components/ui/EmojiBar.vue

@@ -27,7 +27,7 @@
     display: flex;
     border-bottom: 1px solid $color-silver;
     padding: $small-spacing $medium-spacing;
-    margin: -$medium-spacing;
+    margin: (-$medium-spacing);
     margin-bottom: $medium-spacing;
 
     &__emoji {

client/src/components/ui/file-upload/FileUpload.vue

@@ -18,8 +18,8 @@
 </template>
 
 <script>
-  const SimpleFileUpload = () => import('@/components/ui/file-upload/SimpleFileUpload');
+  const SimpleFileUpload = () => import('@/components/ui/file-upload/SimpleFileUpload.vue');
-  const DocumentBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/DocumentBlock');
+  const DocumentBlock = () => import('@/components/content-blocks/DocumentBlock.vue');
 
   export default {
     props: {

client/src/components/ui/file-upload/SimpleFileUpload.vue

@@ -9,11 +9,10 @@
 </template>
 
 <script>
-
+  const SimpleFileUploadHiddenInput = () => import('@/components/ui/file-upload/SimpleFileUploadHiddenInput.vue');
-  const SimpleFileUploadHiddenInput = () => import('@/components/ui/file-upload/SimpleFileUploadHiddenInput');
+  const SimpleFileUploadIcon = () => import('@/components/ui/file-upload/SimpleFileUploadIcon.vue');
-  const SimpleFileUploadIcon = () => import('@/components/ui/file-upload/SimpleFileUploadIcon');
+  const SimpleFileUploadIconAndText = () => import('@/components/ui/file-upload/SimpleFileUploadIconAndText.vue');
-  const SimpleFileUploadIconAndText = () => import('@/components/ui/file-upload/SimpleFileUploadIconAndText');
+  const DocumentIcon = () => import('@/components/icons/DocumentIcon.vue');
-  const DocumentIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/DocumentIcon');
 
   export default {
     props: {
@@ -66,7 +65,7 @@
     }
   }
 
-  /deep/ .uploadcare--widget {
+  :deep(.uploadcare--widget) {
     display: none;
   }
 </style>

client/src/components/ui/file-upload/SimpleFileUploadWithIcon.vue

@@ -12,8 +12,8 @@
 </template>
 
 <script>
-  const SimpleFileUploadHiddenInput = () => import('@/components/ui/file-upload/SimpleFileUploadHiddenInput');
+  const SimpleFileUploadHiddenInput = () => import('@/components/ui/file-upload/SimpleFileUploadHiddenInput.vue');
-  const ButtonWithIconAndText = () => import('@/components/ui/ButtonWithIconAndText');
+  const ButtonWithIconAndText = () => import('@/components/ui/ButtonWithIconAndText.vue');
 
   export default {
     props: ['value'],
@@ -54,7 +54,7 @@
     }
   }
 
-  /deep/ .uploadcare--widget {
+  :deep(.uploadcare--widget) {
     display: none;
   }
 </style>

client/src/helpers/add-team.js

@@ -1,4 +1,4 @@
-import ME_QUERY from 'gql/queries/meQuery';
+import ME_QUERY from 'gql/queries/meQuery.gql';
 
 const addTeam = (store, team) => {
   const query = ME_QUERY;

client/src/mixins/add-school-class.js

@@ -1,5 +1,5 @@
-import ME_QUERY from '@/graphql/gql/queries/meQuery';
 import log from 'loglevel';
+import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
 
 export default {
   methods: {

client/src/mixins/logout.js

@@ -1,4 +1,4 @@
-import LOGOUT_MUTATION from '@/graphql/gql/mutations/logoutUser';
+import LOGOUT_MUTATION from '@/graphql/gql/mutations/logoutUser.gql';
 
 export default {
   methods: {

client/src/mixins/selected-class.js

@@ -1,4 +1,4 @@
-import MY_SCHOOL_CLASS_QUERY from '@/graphql/gql/queries/mySchoolClass';
+import MY_SCHOOL_CLASS_QUERY from '@/graphql/gql/queries/mySchoolClass.gql';
 
 export default {
   apollo: {

client/src/pages/instrument.vue

@@ -65,7 +65,7 @@
       line-height: $default-heading-line-height;
     }
 
-    & /deep/ {
+    & :deep() {
       & p {
         margin-bottom: $large-spacing;
       }

client/src/pages/joinClass.vue

@@ -13,8 +13,8 @@
 
 <script>
   import JOIN_CLASS_MUTATION from '@/graphql/gql/mutations/joinClass.gql';
-  import MY_SCHOOL_CLASS_QUERY from '@/graphql/gql/queries/mySchoolClass';
   import log from 'loglevel';
+  import MY_SCHOOL_CLASS_QUERY from '@/graphql/gql/queries/mySchoolClass.gql';
 
   import addSchoolClass from '@/mixins/add-school-class';
   import logout from '@/mixins/logout';

client/src/pages/license-activation.vue

@@ -73,7 +73,7 @@
   import me from '@/mixins/me';
   import logout from '@/mixins/logout';
 
-  const ValidatedInput = () => import('@/components/validation/ValidatedInput');
+  const ValidatedInput = () => import('@/components/validation/ValidatedInput.vue');
 
   export default {
     mixins: [me, logout],

client/src/pages/module/moduleVisibility.vue

@@ -48,7 +48,7 @@
   import me from '@/mixins/me';
 
   import SYNC_VISIBILITY_MUTATION from '@/graphql/gql/mutations/syncModuleVisibility.gql';
-  import MODULE_DETAILS_QUERY from '@/graphql/gql/queries/modules/moduleDetailsQuery';
+  import MODULE_DETAILS_QUERY from '@/graphql/gql/queries/modules/moduleDetailsQuery.gql';
   import {MODULE_PAGE} from '@/router/module.names';
 
   const EyeIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/EyeIcon');

client/src/pages/onboarding.vue

@@ -21,7 +21,7 @@
 <script>
 
   import UPDATE_ONBOARDING_PROGRESS from '@/graphql/gql/mutations/updateOnboardingProgress.gql';
-  import ME_QUERY from '@/graphql/gql/queries/meQuery';
+  import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
 
   export default {
     computed: {

client/src/pages/portfolio/portfolio.vue

@@ -91,7 +91,7 @@
       flex-direction: column;
       @supports (display: grid) {
         display: grid;
-        align-content: start;
+        align-content: flex-start;
         justify-content: center;
       }
       align-items: center;

client/src/pages/studentSubmission.vue

@@ -54,7 +54,7 @@
   import STUDENT_SUBMISSIONS_QUERY from '@/graphql/gql/queries/studentSubmissionQuery.gql';
   import UPDATE_FEEDBACK_MUTATION from '@/graphql/gql/mutations/updateFeedback.gql';
   import UPDATE_FEEDBACK_WITH_TEXT_MUTATION from '@/graphql/gql/mutations/updateFeedbackWithText.gql';
-  import SubmissionForm from '@/components/content-blocks/assignment/SubmissionForm';
+  import SubmissionForm from '@/components/content-blocks/assignment/SubmissionForm.vue';
 
   import me from '@/mixins/me';
   import EmojiBar from '@/components/ui/EmojiBar';

client/src/router/index.js

@@ -23,13 +23,13 @@ const news = () => import(/* webpackChunkName: "news" */'@/pages/news');
 
 const surveyPage = () => import(/* webpackChunkName: "survey" */'@/pages/survey');
 
-const styleGuidePage = () => import('@/pages/styleguide');
+const styleGuidePage = () => import('@/pages/styleguide.vue');
-const joinClass = () => import('@/pages/joinClass');
+const joinClass = () => import('@/pages/joinClass.vue');
 
-const topic = () => import('@/pages/topic-page');
+const topic = () => import('@/pages/topic-page.vue');
 
-const p404 = () => import('@/pages/p404');
+const p404 = () => import('@/pages/p404.vue');
-const submission = () => import('@/pages/studentSubmission');
+const submission = () => import('@/pages/studentSubmission.vue');
 
 const postLoginRedirectUrlKey = 'postLoginRedirectionUrl';
 

client/src/router/onboarding.routes.js

@@ -1,10 +1,10 @@
 import {ONBOARDING_STEP_1, ONBOARDING_STEP_2, ONBOARDING_STEP_3} from '@/router/onboarding.names';
 
-const onboarding = () => import(/* webpackChunkName: "onboarding" */'@/pages/onboarding');
+const onboarding = () => import('@/pages/onboarding.vue');
-const onboardingStart = () => import(/* webpackChunkName: "onboarding" */'@/pages/onboarding/start');
+const onboardingStart = () => import('@/pages/onboarding/start.vue');
-const onboardingStep1 = () => import(/* webpackChunkName: "onboarding" */'@/pages/onboarding/step1');
+const onboardingStep1 = () => import(/* webpackChunkName: "onboarding" */'@/pages/onboarding/step1.vue');
-const onboardingStep2 = () => import(/* webpackChunkName: "onboarding" */'@/pages/onboarding/step2');
+const onboardingStep2 = () => import(/* webpackChunkName: "onboarding" */'@/pages/onboarding/step2.vue');
-const onboardingStep3 = () => import(/* webpackChunkName: "onboarding" */'@/pages/onboarding/step3');
+const onboardingStep3 = () => import(/* webpackChunkName: "onboarding" */'@/pages/onboarding/step3.vue');
 
 export default [
   {

client/src/styles/_article.scss

@@ -42,7 +42,7 @@
     grid-row-gap: 40px;
     padding-bottom: 40px;
 
-    /deep/ p {
+    :deep(p) {
       font-size: toRem(18px);
       line-height: 1.5;
     }

client/src/styles/_functions.scss

@@ -1,5 +1,6 @@
 @import "variables";
 
 @function toRem($px) {
-  @return $px / $base-font-size-pixels * 1rem;
+  //@return $px / $base-font-size-pixels * 1rem;
+  @return calc($px / $base-font-size-pixels * 1rem);
 }

client/src/styles/_mixins.scss

@@ -66,7 +66,7 @@
   align-items: start;
   border-radius: $default-border-radius;
 
-  /deep/ .button {
+  :deep(.button) {
     background-color: $color-white;
   }
 }
@@ -75,7 +75,7 @@
   @include content-box-base;
   background-color: nth($color-list, 2);
 
-  /deep/ .button {
+  :deep(.button) {
     border-color: nth($color-list, 1);
   }
 }

client/src/styles/_room.scss

@@ -54,7 +54,7 @@
   }
 
   &__content {
-    margin: 0 -$medium-spacing;
+    margin: 0 (-$medium-spacing);
     grid-area: c;
     padding: 50px 15px;
     background-color: rgba($color-charcoal-dark, 0.18);

client/src/styles/_survey.scss

@@ -136,12 +136,14 @@
     }
   }
 
+  $half-spacing: calc($small-spacing / 2);
+
   thead {
     th {
       text-align: left;
       @include small-text;
       vertical-align: bottom;
-      padding: $small-spacing/2 $small-spacing/2 $small-spacing/2 0;
+      padding: $half-spacing $half-spacing $half-spacing 0;
 
       > span {
         margin-right: $small-spacing;