[#2001] Extract SCSS from c-zoom.vue

[jq1836]

Part of #2001

Proposed commit message

Currently, frontend code for c-zoom.vue is especially hard to read and is in
need of refactoring.

Let's extract SCSS and package related logic together to reduce the size of
c-zoom.vue and make it more readable.

Other information

Tasks to be done before PR is ready:

• Extract SCSS
• Repackage fileType checkboxes as vue component
• Repackage daily commit result boxes as vue component

[jq1836]

While trying to create a general file type checkbox component that can be used in c-zoom.vue, c-authorship.vue and c-summary.vue, reducing repeating of code, issues regarding the propagation of data from child components to parent components arose.

To resolve the issue with propagating data from child to parent, the following are possible solutions:

1. Storing data globally on existing Vuex store.
2. Making use of Vue component events.

Solution 1 vs Solution 2:

• Solution 1 is already being used to transmit application data globally.
• Solution 1 clutters the global Vuex store and further couples the store with components using it.
• Solution 2 couples the parent and child components, and anything in between.

Personal opinion:
Due to the proximity of the c-zoom.vue, c-authorship.vue and c-summary.vue with a potential implementation of file type checkbox component, in this case due to the parent component being composed of the child component, the coupling introduced will be far less significant compared to coupling the child component with a global store. Hence, if we are to proceed with repackaging the file type checkbox and in future when splitting larger components into smaller ones, we should do so via Solution 2.

[jq1836]

While trying to implement the Vuex store based solution, I experienced difficulty making the file type checkboxes reusable. The following are the options for implementing the global store based solution that is reusable (the main point of this PR).

1. Pass relevant store mutation functions through props.
   • Has to be done in the parent's scope
   • Goes against observer design pattern
   • Relatively simple to implement
2. Vue component events (Pros and cons discussed earlier).

Do share any thoughts/ideas on this issue.

[jq1836]

PR is not moving forward as of now, more discussions to be made at #2001 before pursuing again.

[github-actions]

The following links are for previewing this pull request:

• Dashboard Preview: https://dashboard-2032-pr-reposense-reposense.surge.sh
• Docs Preview: https://docs-2032-pr-reposense-reposense.surge.sh