From c8f512ad545f8b4cf6f5f16e9ded4761c6555acb Mon Sep 17 00:00:00 2001
From: ctf0 <muah003@gmail.com>
Date: Wed, 10 Feb 2021 19:07:48 +0200
Subject: [PATCH] v3.8.5

---
 README.md                                     |   2 +-
 logs/v3.8.0.txt                               |   6 -
 logs/v3.8.5.txt                               |   1 +
 .../js/components/globalSearch/button.vue     |  22 +--
 .../js/components/globalSearch/panel.vue      |  40 ++---
 .../js/components/image/editor/controls.vue   |  64 ++++----
 .../components/image/editor/filters/index.vue | 140 ++++++++---------
 .../js/components/image/editor/main.vue       | 144 +++++++++---------
 .../assets/js/components/image/preview.vue    |  68 ++++-----
 .../assets/js/components/utils/icon-types.vue |  34 ++---
 src/resources/assets/js/modules/icons.js      |  86 +++++------
 src/resources/views/_manager.blade.php        |  32 ++--
 src/resources/views/partials/card.blade.php   |   2 +-
 .../views/partials/modal/ops.blade.php        |   4 +-
 14 files changed, 324 insertions(+), 321 deletions(-)
 delete mode 100644 logs/v3.8.0.txt
 create mode 100644 logs/v3.8.5.txt

diff --git a/README.md b/README.md
index f07e426..5b7968c 100644
--- a/README.md
+++ b/README.md
@@ -42,7 +42,7 @@
 - [install dependencies](https://github.com/ctf0/Laravel-Media-Manager/wiki/Packages-In-Use)
 
     ```bash
-    yarn add vue vue-ls vue-infinite-loading vue-image-compare2 vue-tippy@v2 vue2-filters vue-input-autowidth vue-notif vue-clipboard2 vue-awesome@v2 vue-touch@next vue-focuspoint-component axios dropzone cropperjs keycode lottie-web plyr fuse.js music-metadata-browser idb-keyval annyang
+    yarn add vue vue-ls vue-infinite-loading vue-image-compare2 vue-tippy@v2 vue2-filters vue-input-autowidth vue-notif vue-clipboard2 vue-awesome vue-touch@next vue-focuspoint-component axios dropzone cropperjs keycode lottie-web plyr fuse.js music-metadata-browser idb-keyval annyang
     yarn add buffer process --dev
     ```
 
diff --git a/logs/v3.8.0.txt b/logs/v3.8.0.txt
deleted file mode 100644
index 6cbdf59..0000000
--- a/logs/v3.8.0.txt
+++ /dev/null
@@ -1,6 +0,0 @@
-- use laravel mix v6
-- change minimum version for laravel to v7
-- remove `worker-loader` & use wp native worker support instead
-- add `buffer & process` to dev deps
-- update demo repo with the new changes
-- add new wiki for v6 upgrade https://github.com/ctf0/Laravel-Media-Manager/wiki/Laravel-Mix-V6
diff --git a/logs/v3.8.5.txt b/logs/v3.8.5.txt
new file mode 100644
index 0000000..4de74c0
--- /dev/null
+++ b/logs/v3.8.5.txt
@@ -0,0 +1 @@
+- update vue-awesome to v4, make sure to update it in your package.json
\ No newline at end of file
diff --git a/src/resources/assets/js/components/globalSearch/button.vue b/src/resources/assets/js/components/globalSearch/button.vue
index 669a449..e2de7d2 100644
--- a/src/resources/assets/js/components/globalSearch/button.vue
+++ b/src/resources/assets/js/components/globalSearch/button.vue
@@ -6,7 +6,7 @@
             @click.stop="done ? showSearchPanel() : init()">
         <span class="icon">
             <icon :spin="loading"
-                  name="globe"/>
+                  name="globe-americas"/>
         </span>
     </button>
 </template>
@@ -16,8 +16,8 @@ export default {
     props: ['route', 'isLoading', 'trans', 'showNotif'],
     data() {
         return {
-            loading: false,
-            done: false
+            loading : false,
+            done    : false
         }
     },
     mounted() {
@@ -30,15 +30,15 @@ export default {
             this.loading = true
 
             axios.get(this.route)
-                    .then(({data}) => {
-                        this.loading = false
-                        this.done = true
-                        EventHub.fire('global-search-index', data)
-                        this.showNotif(this.trans('glbl_search_avail'))
+                .then(({data}) => {
+                    this.loading = false
+                    this.done    = true
+                    EventHub.fire('global-search-index', data)
+                    this.showNotif(this.trans('glbl_search_avail'))
 
-                    }).catch((err) => {
-                        console.error(err)
-                    })
+                }).catch((err) => {
+                    console.error(err)
+                })
         },
         showSearchPanel() {
             EventHub.fire('toggle-global-search', true)
diff --git a/src/resources/assets/js/components/globalSearch/panel.vue b/src/resources/assets/js/components/globalSearch/panel.vue
index 3adc582..af7e374 100644
--- a/src/resources/assets/js/components/globalSearch/panel.vue
+++ b/src/resources/assets/js/components/globalSearch/panel.vue
@@ -72,7 +72,7 @@
                                       :title="trans('go_to_folder')">{{ item.dir_path }}</span>
                             </p>
                             <time>
-                                <span class="icon"><icon name="clock-o"/></span>
+                                <span class="icon"><icon name="regular/clock"/></span>
                                 <span>{{ item.last_modified_formated }}</span>
                             </time>
                             <p class="subtitle is-marginless link"
@@ -107,9 +107,9 @@
 <style scoped lang="scss" src="../../../sass/modules/global-search.scss"></style>
 
 <script>
-import debounce from 'lodash/debounce'
+import debounce          from 'lodash/debounce'
 import VueInputAutowidth from 'vue-input-autowidth'
-import panels from '../../mixins/panels'
+import panels            from '../../mixins/panels'
 
 export default {
     components: {
@@ -118,8 +118,8 @@ export default {
     directives: {
         VueInputAutowidth
     },
-    mixins: [panels],
-    props: [
+    mixins : [panels],
+    props  : [
         'trans',
         'fileTypeIs',
         'noScroll',
@@ -129,20 +129,20 @@ export default {
     ],
     data() {
         return {
-            filesIndex: [],
-            filterdFilesList: [],
-            search: '',
-            noData: false,
-            linkCopied: false,
-            firstRun: false,
-            showPanel: false
+            filesIndex       : [],
+            filterdFilesList : [],
+            search           : '',
+            noData           : false,
+            linkCopied       : false,
+            firstRun         : false,
+            showPanel        : false
         }
     },
     computed: {
         fuseLib() {
             return new Fuse(this.filesIndex, {
-                keys: ['name'],
-                threshold: 0.4
+                keys      : ['name'],
+                threshold : 0.4
             })
         },
         listCount() {
@@ -181,19 +181,19 @@ export default {
             EventHub.fire('global-search-delete-item', item)
         },
         closePanel() {
-            this.search = ''
+            this.search    = ''
             this.showPanel = false
             EventHub.fire('toggle-global-search', false)
         },
         goToFolder(dir, name) {
             EventHub.fire('global-search-go-to-folder', {
-                dir: dir,
-                name: name
+                dir  : dir,
+                name : name
             })
 
             this.closePanel()
         },
-        getList: debounce(function () {
+        getList: debounce(function() {
             let search = this.search
 
             if (search) {
@@ -205,7 +205,7 @@ export default {
             this.filterdFilesList = []
         }, 500),
         ontransitionend() {
-            this.noData = this.search && !this.listCount ? true : false
+            this.noData   = this.search && !this.listCount ? true : false
             this.firstRun = true
         }
     },
@@ -217,7 +217,7 @@ export default {
                 this.$nextTick(() => this.$refs.search.focus())
             } else {
                 this.$nextTick(() => {
-                    this.noData = false
+                    this.noData   = false
                     this.firstRun = false
                 })
             }
diff --git a/src/resources/assets/js/components/image/editor/controls.vue b/src/resources/assets/js/components/image/editor/controls.vue
index 283e065..0f0fc95 100644
--- a/src/resources/assets/js/components/image/editor/controls.vue
+++ b/src/resources/assets/js/components/image/editor/controls.vue
@@ -28,52 +28,52 @@ export default {
         return {
             controlsList: [
                 {
-                    trans: 'move',
-                    op   : 'move',
-                    mode : 'move',
-                    icon : 'arrows'
+                    trans : 'move',
+                    op    : 'move',
+                    mode  : 'move',
+                    icon  : 'arrows-alt'
                 },
                 {
-                    trans: 'crop',
-                    op   : 'crop',
-                    mode : 'crop',
-                    icon : 'crop'
+                    trans : 'crop',
+                    op    : 'crop',
+                    mode  : 'crop',
+                    icon  : 'crop'
                 },
                 {
-                    trans: 'crop_zoom_in',
-                    op   : 'zoom-in',
-                    mode : null,
-                    icon : 'search-plus'
+                    trans : 'crop_zoom_in',
+                    op    : 'zoom-in',
+                    mode  : null,
+                    icon  : 'search-plus'
                 },
                 {
-                    trans: 'crop_zoom_out',
-                    op   : 'zoom-out',
-                    mode : null,
-                    icon : 'search-minus'
+                    trans : 'crop_zoom_out',
+                    op    : 'zoom-out',
+                    mode  : null,
+                    icon  : 'search-minus'
                 },
                 {
-                    trans: 'crop_rotate_left',
-                    op   : 'rotate-left',
-                    mode : null,
-                    icon : 'rotate-left'
+                    trans : 'crop_rotate_left',
+                    op    : 'undo',
+                    mode  : null,
+                    icon  : 'undo'
                 },
                 {
-                    trans: 'crop_rotate_right',
-                    op   : 'rotate-right',
-                    mode : null,
-                    icon : 'rotate-right'
+                    trans : 'crop_rotate_right',
+                    op    : 'redo',
+                    mode  : null,
+                    icon  : 'redo'
                 },
                 {
-                    trans: 'crop_flip_horizontal',
-                    op   : 'flip-horizontal',
-                    mode : null,
-                    icon : 'arrows-h'
+                    trans : 'crop_flip_horizontal',
+                    op    : 'flip-horizontal',
+                    mode  : null,
+                    icon  : 'arrows-alt-h'
                 },
                 {
-                    trans: 'crop_flip_vertical',
-                    op   : 'flip-vertical',
-                    mode : null,
-                    icon : 'arrows-v'
+                    trans : 'crop_flip_vertical',
+                    op    : 'flip-vertical',
+                    mode  : null,
+                    icon  : 'arrows-alt-v'
                 }
             ]
         }
diff --git a/src/resources/assets/js/components/image/editor/filters/index.vue b/src/resources/assets/js/components/image/editor/filters/index.vue
index a22e8e9..a28f30a 100644
--- a/src/resources/assets/js/components/image/editor/filters/index.vue
+++ b/src/resources/assets/js/components/image/editor/filters/index.vue
@@ -33,102 +33,102 @@ export default {
         return {
             filtersList: [
                 {
-                    step      : 1,
-                    min       : -100,
-                    max       : 100,
-                    icon      : 'sun-o',
-                    filterName: 'brightness'
+                    step       : 1,
+                    min        : -100,
+                    max        : 100,
+                    icon       : 'regular/sun',
+                    filterName : 'brightness'
                 },
                 {
-                    step      : 1,
-                    min       : -100,
-                    max       : 100,
-                    icon      : 'adjust',
-                    filterName: 'contrast'
+                    step       : 1,
+                    min        : -100,
+                    max        : 100,
+                    icon       : 'adjust',
+                    filterName : 'contrast'
                 },
                 {
-                    step      : 1,
-                    min       : -100,
-                    max       : 100,
-                    icon      : 'low-vision',
-                    filterName: 'saturation'
+                    step       : 1,
+                    min        : -100,
+                    max        : 100,
+                    icon       : 'low-vision',
+                    filterName : 'saturation'
                 },
                 {
-                    step      : 1,
-                    min       : -100,
-                    max       : 100,
-                    icon      : 'flash',
-                    filterName: 'vibrance'
+                    step       : 1,
+                    min        : -100,
+                    max        : 100,
+                    icon       : 'bolt',
+                    filterName : 'vibrance'
                 },
                 {
-                    step      : 1,
-                    min       : -100,
-                    max       : 100,
-                    icon      : 'thermometer-half',
-                    filterName: 'exposure'
+                    step       : 1,
+                    min        : -100,
+                    max        : 100,
+                    icon       : 'thermometer-half',
+                    filterName : 'exposure'
                 },
                 {
-                    step      : 1,
-                    min       : 0,
-                    max       : 100,
-                    icon      : 'eyedropper',
-                    filterName: 'hue'
+                    step       : 1,
+                    min        : 0,
+                    max        : 100,
+                    icon       : 'eye-dropper',
+                    filterName : 'hue'
                 },
                 {
-                    step      : 1,
-                    min       : 0,
-                    max       : 100,
-                    icon      : 'lemon-o',
-                    filterName: 'sepia'
+                    step       : 1,
+                    min        : 0,
+                    max        : 100,
+                    icon       : 'regular/lemon',
+                    filterName : 'sepia'
                 },
                 {
-                    step      : 0.1,
-                    min       : 0,
-                    max       : 10,
-                    icon      : 'flask',
-                    filterName: 'gamma'
+                    step       : 0.1,
+                    min        : 0,
+                    max        : 10,
+                    icon       : 'flask',
+                    filterName : 'gamma'
                 },
                 {
-                    step      : 1,
-                    min       : 0,
-                    max       : 100,
-                    icon      : 'dot-circle-o',
-                    filterName: 'noise'
+                    step       : 1,
+                    min        : 0,
+                    max        : 100,
+                    icon       : 'regular/dot-circle',
+                    filterName : 'noise'
                 },
                 {
-                    step      : 1,
-                    min       : 0,
-                    max       : 100,
-                    icon      : 'scissors',
-                    filterName: 'clip'
+                    step       : 1,
+                    min        : 0,
+                    max        : 100,
+                    icon       : 'cut',
+                    filterName : 'clip'
                 },
                 {
-                    step      : 1,
-                    min       : 0,
-                    max       : 100,
-                    icon      : 'diamond',
-                    filterName: 'sharpen'
+                    step       : 1,
+                    min        : 0,
+                    max        : 100,
+                    icon       : 'regular/gem',
+                    filterName : 'sharpen'
                 },
                 {
-                    step      : 1,
-                    min       : 0,
-                    max       : 20,
-                    icon      : 'glass',
-                    filterName: 'stackBlur'
+                    step       : 1,
+                    min        : 0,
+                    max        : 20,
+                    icon       : 'glass-martini',
+                    filterName : 'stackBlur'
                 },
                 {
-                    step      : null,
-                    min       : null,
-                    max       : null,
-                    icon      : 'shield',
-                    filterName: 'greyscale'
+                    step       : null,
+                    min        : null,
+                    max        : null,
+                    icon       : 'shield-alt',
+                    filterName : 'greyscale'
                 },
                 {
-                    step      : null,
-                    min       : null,
-                    max       : null,
-                    icon      : 'cube',
-                    filterName: 'invert'
+                    step       : null,
+                    min        : null,
+                    max        : null,
+                    icon       : 'cube',
+                    filterName : 'invert'
                 }
             ],
             noController: [
diff --git a/src/resources/assets/js/components/image/editor/main.vue b/src/resources/assets/js/components/image/editor/main.vue
index 667766f..8812838 100644
--- a/src/resources/assets/js/components/image/editor/main.vue
+++ b/src/resources/assets/js/components/image/editor/main.vue
@@ -134,20 +134,18 @@
     </div>
 </template>
 
-<style lang="scss" src="../../../../sass/modules/image-editor.scss"></style>
-
 <script>
-import omit      from 'lodash/omit'
-import isEmpty   from 'lodash/isEmpty'
-import cloneDeep from 'lodash/cloneDeep'
 import Cropper   from 'cropperjs'
+import cloneDeep from 'lodash/cloneDeep'
+import isEmpty   from 'lodash/isEmpty'
+import omit      from 'lodash/omit'
 
 export default {
     components: {
-        filters     : require('./filters/index.vue').default,
-        presets     : require('./filters/presets.vue').default,
-        controls    : require('./controls.vue').default,
-        imageCompare: require('vue-image-compare2').default
+        filters      : require('./filters/index.vue').default,
+        presets      : require('./filters/presets.vue').default,
+        controls     : require('./controls.vue').default,
+        imageCompare : require('vue-image-compare2').default
     },
     props: [
         'file',
@@ -157,23 +155,23 @@ export default {
     ],
     data() {
         return {
-            url          : this.file.path,
-            imageCropper : null,
-            dragMode     : 'move',
-            rotation     : 45,
-            croppedByUser: false,
-            initData     : null,
-
-            diffOriginal: null,
-            diffCurrent : null,
-            showDiff    : false,
-            diffDisable : true,
-
-            hasChanged  : false,
-            processing  : false,
-            reset       : false,
-            imageCaman  : null,
-            camanFilters: {}
+            url           : this.file.path,
+            imageCropper  : null,
+            dragMode      : 'move',
+            rotation      : 45,
+            croppedByUser : false,
+            initData      : null,
+
+            diffOriginal : null,
+            diffCurrent  : null,
+            showDiff     : false,
+            diffDisable  : true,
+
+            hasChanged   : false,
+            processing   : false,
+            reset        : false,
+            imageCaman   : null,
+            camanFilters : {}
         }
     },
     // make cropperjs rotation follow the new value
@@ -183,7 +181,7 @@ export default {
         },
         ranges() {
             let final = []
-            let list = Array.from(Array(this.angles).keys())
+            let list  = Array.from(Array(this.angles).keys())
             list.shift() // remove 0
 
             list.forEach((item) => {
@@ -203,9 +201,9 @@ export default {
         hiddenBtns() {
             if (this.showDiff) {
                 return {
-                    opacity         : 0,
-                    visibility      : 'hidden',
-                    'pointer-events': 'none'
+                    'opacity'        : 0,
+                    'visibility'     : 'hidden',
+                    'pointer-events' : 'none'
                 }
             }
 
@@ -244,13 +242,13 @@ export default {
             let image = document.querySelector('#cropper')
 
             this.imageCropper = new Cropper(image, {
-                viewMode                : 1,
-                dragMode                : this.dragMode,
-                guides                  : false,
-                highlight               : false,
-                autoCrop                : false,
-                toggleDragModeOnDblclick: true,
-                responsive              : false
+                viewMode                 : 1,
+                dragMode                 : this.dragMode,
+                guides                   : false,
+                highlight                : false,
+                autoCrop                 : false,
+                toggleDragModeOnDblclick : true,
+                responsive               : false
             })
 
             image.addEventListener('ready', () => {
@@ -265,11 +263,11 @@ export default {
 
                 switch (e.detail.action) {
                     case 'move':
-                        break
                     case 'crop':
                         this.croppedByUser = true
-                        this.hasChanged = true
+                        this.hasChanged    = true
                         break
+
                     case 'zoom':
                         this.hasChanged = true
                         break
@@ -292,33 +290,41 @@ export default {
                     this.dragMode = action
                     cropper.setDragMode(action)
                     break
+
                 case 'zoom-in':
                     cropper.zoom(0.1)
 
                     return this.hasChanged = true
+
                 case 'zoom-out':
                     cropper.zoom(-0.1)
 
                     return this.hasChanged = true
-                case 'rotate-left':
+
+                case 'undo':
                     cropper.rotate(-this.rotation)
                     break
-                case 'rotate-right':
+
+                case 'redo':
                     cropper.rotate(this.rotation)
                     break
+
                 case 'flip-horizontal':
                     this.ranges.includes(getData.rotate)
                         ? cropper.scaleY(-getData.scaleY)
                         : cropper.scaleX(-getData.scaleX)
                     break
+
                 case 'flip-vertical':
                     this.ranges.includes(getData.rotate)
                         ? cropper.scaleX(-getData.scaleX)
                         : cropper.scaleY(-getData.scaleY)
                     break
+
                 case 'reset':
                     this.resetAll()
                     break
+
                 case 'clear':
                     this.croppedByUser = false
                     cropper.clear()
@@ -343,11 +349,11 @@ export default {
             this.$nextTick(() => {
                 let cropper = this.imageCropper
 
-                this.dragMode = cropper.options.dragMode
-                this.hasChanged = false
+                this.dragMode      = cropper.options.dragMode
+                this.hasChanged    = false
                 this.croppedByUser = false
-                this.reset = true
-                this.diffDisable = true
+                this.reset         = true
+                this.diffDisable   = true
 
                 cropper.reset() // position, rotation, flip, zoom
                 cropper.clear() // selection
@@ -365,7 +371,7 @@ export default {
 
         // filters
         resetFilters() {
-            this.diffDisable = true
+            this.diffDisable  = true
             this.camanFilters = {}
             this.imageCaman.reset()
             this.imageCropper.replace(this.initData, true) // init
@@ -377,7 +383,7 @@ export default {
             this.hasChanged = true
 
             let filters = this.camanFilters
-            let caman = this.imageCaman
+            let caman   = this.imageCaman
 
             // make nullable filters switchable
             if (!val && filters.hasOwnProperty(name)) {
@@ -398,7 +404,7 @@ export default {
             this.renderImage()
         },
         renderImage() {
-            let caman = this.imageCaman
+            let caman   = this.imageCaman
             let cropper = this.imageCropper
 
             return caman.render(function() {
@@ -414,16 +420,16 @@ export default {
             if (!this.croppedByUser) {
                 cropper.crop()
                 cropper.setCropBoxData({
-                    height: cropper.getContainerData().height,
-                    left  : 0,
-                    top   : 0,
-                    width : cropper.getContainerData().width
+                    height : cropper.getContainerData().height,
+                    left   : 0,
+                    top    : 0,
+                    width  : cropper.getContainerData().width
                 })
             }
 
             let url = cropper.getCroppedCanvas({
-                fillColor            : type.includes('png') ? 'transparent' : '#fff',
-                imageSmoothingQuality: 'high'
+                fillColor             : type.includes('png') ? 'transparent' : '#fff',
+                imageSmoothingQuality : 'high'
             }).toDataURL(type)
 
             // reset the auto crop selection we made
@@ -440,10 +446,10 @@ export default {
             parent.showNotif(this.trans('stand_by'), 'info')
 
             axios.post(this.route, {
-                data     : data,
-                path     : parent.files.path,
-                name     : this.file.name,
-                mime_type: this.file.type
+                data      : data,
+                path      : parent.files.path,
+                name      : this.file.name,
+                mime_type : this.file.type
             }).then(({data}) => {
                 parent.toggleLoading()
                 data.success
@@ -471,13 +477,13 @@ export default {
              * otherwise we wont be able to reset to the original image without extra work
              */
             let cropperClone = cloneDeep(this.imageCropper)
-            let getData = cropperClone.getData()
-            let x = getData.scaleX
-            let y = getData.scaleY
+            let getData      = cropperClone.getData()
+            let x            = getData.scaleX
+            let y            = getData.scaleY
             cropperClone.setData({
-                rotate: 0, // reset rotation
-                scaleX: x < 1 ? -x : x, // reset flip-horizontal
-                scaleY: y < 1 ? -y : y // reset flip-vertical
+                rotate : 0, // reset rotation
+                scaleX : x < 1 ? -x : x, // reset flip-horizontal
+                scaleY : y < 1 ? -y : y // reset flip-vertical
             })
 
             cropperClone.replace(this.initData, true)
@@ -521,16 +527,16 @@ export default {
                  */
                 this.renderImage()
 
-                this.processing = false
-                this.diffOriginal = null
-                this.diffCurrent = null
+                this.processing                   = false
+                this.diffOriginal                 = null
+                this.diffCurrent                  = null
                 this.$refs.editor.style.marginTop = ''
             }
         },
         imageDiffIsReady(val) {
             if (val) {
                 let t = setInterval(() => {
-                    let diff = document.querySelector('.__diff').offsetHeight
+                    let diff   = document.querySelector('.__diff').offsetHeight
                     let canvas = document.querySelector('.__cropper').offsetHeight
 
                     if (diff) {
@@ -546,3 +552,5 @@ export default {
     }
 }
 </script>
+
+<style lang="scss" src="../../../../sass/modules/image-editor.scss"></style>
diff --git a/src/resources/assets/js/components/image/preview.vue b/src/resources/assets/js/components/image/preview.vue
index 056704a..5daeffc 100644
--- a/src/resources/assets/js/components/image/preview.vue
+++ b/src/resources/assets/js/components/image/preview.vue
@@ -6,27 +6,27 @@
         </div>
 
         <div class="goo">
-            <div class="circular-menu"
-                v-if="showOps"
-                :class="{'active' : opsMenu}">
+            <div v-if="showOps"
+                 class="circular-menu"
+                 :class="{'active' : opsMenu}">
                 <div class="floating-btn"
-                    @click="toggleOpsMenu()">
-                    <span class="icon is-large"><icon name="cog"></icon></span>
+                     @click="toggleOpsMenu()">
+                    <span class="icon is-large"><icon name="cog"/></span>
                 </div>
 
                 <menu class="items-wrapper">
                     <!-- move -->
                     <div class="menu-item">
                         <button class="button btn-plain"
-                            :disabled="ops_btn_disable"
-                            @click.stop="addToMovableList()">
+                                :disabled="ops_btn_disable"
+                                @click.stop="addToMovableList()">
                             <span class="icon is-large">
                                 <icon v-if="inMovableList()"
-                                    name="shopping-cart"
-                                    scale="1.2"></icon>
+                                      name="shopping-cart"
+                                      scale="1.2"/>
                                 <icon v-else
-                                    name="cart-plus"
-                                    scale="1.2"></icon>
+                                      name="cart-plus"
+                                      scale="1.2"/>
                             </span>
                         </button>
                     </div>
@@ -34,11 +34,11 @@
                     <!-- rename -->
                     <div class="menu-item">
                         <button class="button btn-plain"
-                            :disabled="ops_btn_disable"
-                            @click.stop="renameItem()">
+                                :disabled="ops_btn_disable"
+                                @click.stop="renameItem()">
                             <span class="icon is-large">
                                 <icon name="terminal"
-                                    scale="1.2"></icon>
+                                      scale="1.2"/>
                             </span>
                         </button>
                     </div>
@@ -46,23 +46,23 @@
                     <!-- editor -->
                     <div class="menu-item">
                         <button class="button btn-plain"
-                            :disabled="ops_btn_disable"
-                            @click.stop="imageEditorCard()">
+                                :disabled="ops_btn_disable"
+                                @click.stop="imageEditorCard()">
                             <span class="icon is-large">
-                                <icon name="object-ungroup"
-                                    scale="1.2"></icon>
+                                <icon name="regular/object-ungroup"
+                                      scale="1.2"/>
                             </span>
                         </button>
                     </div>
 
                     <!-- delete -->
                     <div class="menu-item">
-                         <button class="button btn-plain"
-                            :disabled="ops_btn_disable"
-                            @click.stop="deleteItem()">
+                        <button class="button btn-plain"
+                                :disabled="ops_btn_disable"
+                                @click.stop="deleteItem()">
                             <span class="icon is-large">
-                                <icon name="trash"
-                                    scale="1.2"></icon>
+                                <icon name="regular/trash-alt"
+                                      scale="1.2"/>
                             </span>
                         </button>
                     </div>
@@ -85,7 +85,7 @@
 </template>
 
 <script>
-import debounce from 'lodash/debounce'
+import debounce        from 'lodash/debounce'
 import animateScrollTo from '../../packages/animated-scroll-to'
 
 export default {
@@ -102,8 +102,8 @@ export default {
     data() {
         return {
             scrollBtn: {
-                state: false,
-                dir: 'down'
+                state : false,
+                dir   : 'down'
             },
             opsMenu: false
         }
@@ -125,8 +125,8 @@ export default {
                 return this.scrollBtn.state = item.scrollHeight > item.offsetHeight
             }
         },
-        updateScrollDir: debounce(function (e) {
-            let item = e.target
+        updateScrollDir: debounce(function(e) {
+            let item   = e.target
             let margin = 3
 
             return this.scrollBtn.dir = (item.scrollTop + item.clientHeight) >= (item.scrollHeight - margin)
@@ -137,17 +137,17 @@ export default {
             let item = this.getContainer(e.target.parentNode)
 
             return animateScrollTo(item, {
-                speed: 250,
-                maxDuration: 500,
-                offset: this.scrollBtn.dir == 'up' ? -item.scrollHeight : item.scrollHeight,
-                element: item,
-                useKeys: true
+                speed       : 250,
+                maxDuration : 500,
+                offset      : this.scrollBtn.dir == 'up' ? -item.scrollHeight : item.scrollHeight,
+                element     : item,
+                useKeys     : true
             })
         },
         getContainer(el) {
             return el.querySelector('[data-img-container]')
         },
-        toggleOpsMenu(){
+        toggleOpsMenu() {
             return this.opsMenu = !this.opsMenu
         }
     }
diff --git a/src/resources/assets/js/components/utils/icon-types.vue b/src/resources/assets/js/components/utils/icon-types.vue
index b7248fa..0e4e1bd 100644
--- a/src/resources/assets/js/components/utils/icon-types.vue
+++ b/src/resources/assets/js/components/utils/icon-types.vue
@@ -17,36 +17,36 @@ export default {
     ],
     data() {
         return {
-            iconScale: this.scale || 1.2,
-            exclude: this.except || [],
-            list: [
+            iconScale : this.scale || 1.2,
+            exclude   : this.except || [],
+            list      : [
                 {
-                    type: 'folder',
-                    icon: 'folder'
+                    type : 'folder',
+                    icon : 'folder'
                 },
                 {
-                    type: 'application',
-                    icon: 'cogs'
+                    type : 'application',
+                    icon : 'cogs'
                 },
                 {
-                    type: 'compressed',
-                    icon: 'file-archive-o'
+                    type : 'compressed',
+                    icon : 'regular/file-archive'
                 },
                 {
-                    type: 'image',
-                    icon: 'image'
+                    type : 'image',
+                    icon : 'image'
                 },
                 {
-                    type: 'video',
-                    icon: 'film'
+                    type : 'video',
+                    icon : 'film'
                 },
                 {
-                    type: 'audio',
-                    icon: 'music'
+                    type : 'audio',
+                    icon : 'music'
                 },
                 {
-                    type: 'text',
-                    icon: 'file-text-o'
+                    type : 'text',
+                    icon : 'regular/file-alt'
                 }
             ]
         }
diff --git a/src/resources/assets/js/modules/icons.js b/src/resources/assets/js/modules/icons.js
index 708006b..d8b6c5f 100644
--- a/src/resources/assets/js/modules/icons.js
+++ b/src/resources/assets/js/modules/icons.js
@@ -1,12 +1,12 @@
 import 'vue-awesome/icons/shopping-basket'
 import 'vue-awesome/icons/map'
-import 'vue-awesome/icons/map-o'
+import 'vue-awesome/icons/regular/map'
 import 'vue-awesome/icons/folder'
-import 'vue-awesome/icons/folder-open-o'
-import 'vue-awesome/icons/refresh'
+import 'vue-awesome/icons/regular/folder-open'
+import 'vue-awesome/icons/sync'
 import 'vue-awesome/icons/share'
 import 'vue-awesome/icons/terminal'
-import 'vue-awesome/icons/trash'
+import 'vue-awesome/icons/regular/trash-alt'
 import 'vue-awesome/icons/minus'
 import 'vue-awesome/icons/plus'
 import 'vue-awesome/icons/puzzle-piece'
@@ -14,34 +14,34 @@ import 'vue-awesome/icons/image'
 import 'vue-awesome/icons/music'
 import 'vue-awesome/icons/times'
 import 'vue-awesome/icons/search'
-import 'vue-awesome/icons/globe'
+import 'vue-awesome/icons/globe-americas'
 import 'vue-awesome/icons/angle-double-right'
 import 'vue-awesome/icons/angle-double-left'
 import 'vue-awesome/icons/bars'
-import 'vue-awesome/icons/clone'
-import 'vue-awesome/icons/file-pdf-o'
+import 'vue-awesome/icons/regular/clone'
+import 'vue-awesome/icons/regular/file-pdf'
 import 'vue-awesome/icons/power-off'
-import 'vue-awesome/icons/file-text-o'
+import 'vue-awesome/icons/regular/file-alt'
 import 'vue-awesome/icons/download'
-import 'vue-awesome/icons/warning'
+import 'vue-awesome/icons/exclamation-triangle'
 import 'vue-awesome/icons/archive'
-import 'vue-awesome/icons/unlock'
+import 'vue-awesome/icons/lock-open'
 import 'vue-awesome/icons/lock'
 import 'vue-awesome/icons/eye'
 import 'vue-awesome/icons/eye-slash'
 import 'vue-awesome/icons/film'
-import 'vue-awesome/icons/object-ungroup'
+import 'vue-awesome/icons/regular/object-ungroup'
 import 'vue-awesome/icons/circle'
 import 'vue-awesome/icons/link'
 import 'vue-awesome/icons/spinner'
 import 'vue-awesome/icons/key'
 import 'vue-awesome/icons/cogs'
 import 'vue-awesome/icons/cog'
-import 'vue-awesome/icons/clock-o'
-import 'vue-awesome/icons/file-archive-o'
+import 'vue-awesome/icons/regular/clock'
+import 'vue-awesome/icons/regular/file-archive'
 import 'vue-awesome/icons/chevron-down'
 import 'vue-awesome/icons/angle-down'
-import 'vue-awesome/icons/cloud-upload'
+import 'vue-awesome/icons/cloud-upload-alt'
 import 'vue-awesome/icons/shopping-cart'
 import 'vue-awesome/icons/cart-plus'
 import 'vue-awesome/icons/microphone'
@@ -49,49 +49,49 @@ import 'vue-awesome/icons/microphone'
 import 'vue-awesome/icons/crop'
 import 'vue-awesome/icons/ban'
 import 'vue-awesome/icons/check'
-import 'vue-awesome/icons/arrows'
+import 'vue-awesome/icons/arrows-alt'
 import 'vue-awesome/icons/search-plus'
 import 'vue-awesome/icons/search-minus'
-import 'vue-awesome/icons/rotate-left'
-import 'vue-awesome/icons/rotate-right'
-import 'vue-awesome/icons/arrows-h'
-import 'vue-awesome/icons/arrows-v'
+import 'vue-awesome/icons/undo'
+import 'vue-awesome/icons/redo'
+import 'vue-awesome/icons/arrows-alt-h'
+import 'vue-awesome/icons/arrows-alt-v'
 import 'vue-awesome/icons/code'
 import 'vue-awesome/icons/arrow-left'
 import 'vue-awesome/icons/arrow-right'
 // filters
-import 'vue-awesome/icons/sun-o'
+import 'vue-awesome/icons/regular/sun'
 import 'vue-awesome/icons/adjust'
-import 'vue-awesome/icons/flash'
+import 'vue-awesome/icons/bolt'
 import 'vue-awesome/icons/thermometer-half'
-import 'vue-awesome/icons/eyedropper'
-import 'vue-awesome/icons/lemon-o'
+import 'vue-awesome/icons/eye-dropper'
+import 'vue-awesome/icons/regular/lemon'
 import 'vue-awesome/icons/flask'
-import 'vue-awesome/icons/dot-circle-o'
-import 'vue-awesome/icons/scissors'
-import 'vue-awesome/icons/diamond'
-import 'vue-awesome/icons/glass'
+import 'vue-awesome/icons/regular/dot-circle'
+import 'vue-awesome/icons/cut'
+import 'vue-awesome/icons/regular/gem'
+import 'vue-awesome/icons/glass-martini'
 import 'vue-awesome/icons/cube'
-import 'vue-awesome/icons/shield'
+import 'vue-awesome/icons/shield-alt'
 import 'vue-awesome/icons/low-vision'
 
 // custom
 import Icon from 'vue-awesome/components/Icon'
 Icon.register({
     pill: {
-        width: 21,
-        height: 27,
-        d: 'M3.500, 25.187 C0.152, 23.254 -0.995, 18.973 0.938, 15.625 C0.938, 15.625 7.938, 3.500 7.938, 3.500 C9.871, 0.152 14.152, -0.995 17.500, 0.938 C20.848, 2.871 21.995, 7.152 20.062, 10.500 C20.062, 10.500 13.062, 22.625 13.062, 22.625 C11.129, 25.973 6.848, 27.120 3.500, 25.187 ZM15.201, 1.920 C13.527, 0.954 11.386, 1.527 10.420, 3.201 C9.903, 4.097 9.839, 5.123 10.136, 6.034 C10.225, 5.681 10.345, 5.332 10.536, 5.000 C11.640, 3.087 14.087, 2.432 16.000, 3.536 C16.331, 3.727 16.610, 3.970 16.863, 4.232 C16.665, 3.294 16.097, 2.437 15.201, 1.920 ZM14.830, 15.562 C14.830, 15.562 6.170, 10.563 6.170, 10.563 C6.170, 10.563 2.670, 16.625 2.670, 16.625 C1.289, 19.016 2.109, 22.074 4.500, 23.455 C6.891, 24.835 9.949, 24.016 11.330, 21.625 C11.330, 21.625 14.830, 15.562 14.830, 15.562 ZM5.866, 23.089 C5.090, 22.641 4.601, 21.895 4.437, 21.081 C4.505, 21.126 4.562, 21.181 4.634, 21.223 C6.547, 22.327 8.994, 21.672 10.098, 19.759 C10.139, 19.687 10.161, 19.610 10.198, 19.537 C10.463, 20.325 10.412, 21.214 9.964, 21.991 C9.136, 23.426 7.301, 23.917 5.866, 23.089 Z'
+        width  : 21,
+        height : 27,
+        d      : 'M3.500, 25.187 C0.152, 23.254 -0.995, 18.973 0.938, 15.625 C0.938, 15.625 7.938, 3.500 7.938, 3.500 C9.871, 0.152 14.152, -0.995 17.500, 0.938 C20.848, 2.871 21.995, 7.152 20.062, 10.500 C20.062, 10.500 13.062, 22.625 13.062, 22.625 C11.129, 25.973 6.848, 27.120 3.500, 25.187 ZM15.201, 1.920 C13.527, 0.954 11.386, 1.527 10.420, 3.201 C9.903, 4.097 9.839, 5.123 10.136, 6.034 C10.225, 5.681 10.345, 5.332 10.536, 5.000 C11.640, 3.087 14.087, 2.432 16.000, 3.536 C16.331, 3.727 16.610, 3.970 16.863, 4.232 C16.665, 3.294 16.097, 2.437 15.201, 1.920 ZM14.830, 15.562 C14.830, 15.562 6.170, 10.563 6.170, 10.563 C6.170, 10.563 2.670, 16.625 2.670, 16.625 C1.289, 19.016 2.109, 22.074 4.500, 23.455 C6.891, 24.835 9.949, 24.016 11.330, 21.625 C11.330, 21.625 14.830, 15.562 14.830, 15.562 ZM5.866, 23.089 C5.090, 22.641 4.601, 21.895 4.437, 21.081 C4.505, 21.126 4.562, 21.181 4.634, 21.223 C6.547, 22.327 8.994, 21.672 10.098, 19.759 C10.139, 19.687 10.161, 19.610 10.198, 19.537 C10.463, 20.325 10.412, 21.214 9.964, 21.991 C9.136, 23.426 7.301, 23.917 5.866, 23.089 Z'
     },
     pref: {
-        height: 26,
-        width: 26,
-        d: 'M25.567, 14.005 C25.567, 14.005 22.847, 16.726 22.847, 16.726 C22.283, 17.289 21.370, 17.289 20.806, 16.726 C20.243, 16.162 20.243, 15.249 20.806, 14.685 C20.806, 14.685 22.507, 12.985 22.507, 12.985 C22.507, 12.985 20.806, 11.285 20.806, 11.285 C20.243, 10.721 20.243, 9.808 20.806, 9.244 C21.370, 8.681 22.283, 8.681 22.847, 9.244 C22.847, 9.244 25.567, 11.965 25.567, 11.965 C26.131, 12.528 26.131, 13.442 25.567, 14.005 ZM13.000, 18.000 C10.238, 18.000 8.000, 15.761 8.000, 13.000 C8.000, 10.238 10.238, 8.000 13.000, 8.000 C15.761, 8.000 18.000, 10.238 18.000, 13.000 C18.000, 15.761 15.761, 18.000 13.000, 18.000 ZM13.000, 11.000 C11.895, 11.000 11.000, 11.895 11.000, 13.000 C11.000, 14.104 11.895, 15.000 13.000, 15.000 C14.104, 15.000 15.000, 14.104 15.000, 13.000 C15.000, 11.895 14.104, 11.000 13.000, 11.000 ZM14.685, 5.163 C14.685, 5.163 12.985, 3.463 12.985, 3.463 C12.985, 3.463 11.285, 5.163 11.285, 5.163 C10.721, 5.727 9.807, 5.727 9.244, 5.163 C8.681, 4.600 8.681, 3.686 9.244, 3.123 C9.244, 3.123 11.965, 0.402 11.965, 0.402 C12.528, -0.161 13.441, -0.161 14.005, 0.402 C14.005, 0.402 16.726, 3.123 16.726, 3.123 C17.289, 3.686 17.289, 4.600 16.726, 5.163 C16.162, 5.727 15.249, 5.727 14.685, 5.163 ZM5.163, 16.726 C4.600, 17.289 3.686, 17.289 3.123, 16.726 C3.123, 16.726 0.402, 14.005 0.402, 14.005 C-0.161, 13.442 -0.161, 12.528 0.402, 11.965 C0.402, 11.965 3.123, 9.244 3.123, 9.244 C3.686, 8.681 4.600, 8.681 5.163, 9.244 C5.727, 9.808 5.727, 10.721 5.163, 11.285 C5.163, 11.285 3.463, 12.985 3.463, 12.985 C3.463, 12.985 5.163, 14.685 5.163, 14.685 C5.727, 15.249 5.727, 16.162 5.163, 16.726 ZM11.285, 20.806 C11.285, 20.806 12.985, 22.507 12.985, 22.507 C12.985, 22.507 14.685, 20.806 14.685, 20.806 C15.249, 20.243 16.162, 20.243 16.726, 20.806 C17.289, 21.370 17.289, 22.283 16.726, 22.847 C16.726, 22.847 14.005, 25.567 14.005, 25.567 C13.441, 26.131 12.528, 26.131 11.965, 25.567 C11.965, 25.567 9.244, 22.847 9.244, 22.847 C8.681, 22.283 8.681, 21.370 9.244, 20.806 C9.807, 20.243 10.721, 20.243 11.285, 20.806 Z'
+        height : 26,
+        width  : 26,
+        d      : 'M25.567, 14.005 C25.567, 14.005 22.847, 16.726 22.847, 16.726 C22.283, 17.289 21.370, 17.289 20.806, 16.726 C20.243, 16.162 20.243, 15.249 20.806, 14.685 C20.806, 14.685 22.507, 12.985 22.507, 12.985 C22.507, 12.985 20.806, 11.285 20.806, 11.285 C20.243, 10.721 20.243, 9.808 20.806, 9.244 C21.370, 8.681 22.283, 8.681 22.847, 9.244 C22.847, 9.244 25.567, 11.965 25.567, 11.965 C26.131, 12.528 26.131, 13.442 25.567, 14.005 ZM13.000, 18.000 C10.238, 18.000 8.000, 15.761 8.000, 13.000 C8.000, 10.238 10.238, 8.000 13.000, 8.000 C15.761, 8.000 18.000, 10.238 18.000, 13.000 C18.000, 15.761 15.761, 18.000 13.000, 18.000 ZM13.000, 11.000 C11.895, 11.000 11.000, 11.895 11.000, 13.000 C11.000, 14.104 11.895, 15.000 13.000, 15.000 C14.104, 15.000 15.000, 14.104 15.000, 13.000 C15.000, 11.895 14.104, 11.000 13.000, 11.000 ZM14.685, 5.163 C14.685, 5.163 12.985, 3.463 12.985, 3.463 C12.985, 3.463 11.285, 5.163 11.285, 5.163 C10.721, 5.727 9.807, 5.727 9.244, 5.163 C8.681, 4.600 8.681, 3.686 9.244, 3.123 C9.244, 3.123 11.965, 0.402 11.965, 0.402 C12.528, -0.161 13.441, -0.161 14.005, 0.402 C14.005, 0.402 16.726, 3.123 16.726, 3.123 C17.289, 3.686 17.289, 4.600 16.726, 5.163 C16.162, 5.727 15.249, 5.727 14.685, 5.163 ZM5.163, 16.726 C4.600, 17.289 3.686, 17.289 3.123, 16.726 C3.123, 16.726 0.402, 14.005 0.402, 14.005 C-0.161, 13.442 -0.161, 12.528 0.402, 11.965 C0.402, 11.965 3.123, 9.244 3.123, 9.244 C3.686, 8.681 4.600, 8.681 5.163, 9.244 C5.727, 9.808 5.727, 10.721 5.163, 11.285 C5.163, 11.285 3.463, 12.985 3.463, 12.985 C3.463, 12.985 5.163, 14.685 5.163, 14.685 C5.727, 15.249 5.727, 16.162 5.163, 16.726 ZM11.285, 20.806 C11.285, 20.806 12.985, 22.507 12.985, 22.507 C12.985, 22.507 14.685, 20.806 14.685, 20.806 C15.249, 20.243 16.162, 20.243 16.726, 20.806 C17.289, 21.370 17.289, 22.283 16.726, 22.847 C16.726, 22.847 14.005, 25.567 14.005, 25.567 C13.441, 26.131 12.528, 26.131 11.965, 25.567 C11.965, 25.567 9.244, 22.847 9.244, 22.847 C8.681, 22.283 8.681, 21.370 9.244, 20.806 C9.807, 20.243 10.721, 20.243 11.285, 20.806 Z'
     },
     desktop: {
-        height: 72,
-        width: 90,
-        paths: [
+        height : 72,
+        width  : 90,
+        paths  : [
             {
                 d: 'm84.68.56h-79.36c-2.93977172.00551553-5.32000517 2.39022311-5.32 5.33v46.69c.00550306 2.9358724 2.38412759 5.3144969 5.32 5.32h31.46v4.5c.0014433.8471475-.2722874 1.6718489-.78 2.35l-3.28 4.36c-.3274215.4412156-.3794159 1.0288913-.1345469 1.5207401.2448689.4918488.7451344.8045797 1.2945469.8092599h22.25c.5494125-.0046802 1.049678-.3174111 1.2945469-.8092599.244869-.4918488.1928746-1.0795245-.1345469-1.5207401l-3.29-4.36c-.5112826-.6768965-.7885602-1.5017096-.79-2.35v-4.5h31.47c2.9358724-.0055031 5.3144969-2.3841276 5.32-5.32v-46.69c.0000052-2.93977689-2.3802283-5.32448447-5.32-5.33zm-33 65.94 1.53 2h-16.43l1.53-2c.8885236-1.1822932 1.3692791-2.6210508 1.37-4.1v-4.5h10.64v4.5c.0007209 1.4789492.4814764 2.9177068 1.37 4.1zm35.42-13.92c-.0054795 1.3342528-1.0857472 2.4145205-2.42 2.42h-79.36c-1.3342528-.0054795-2.41452045-1.0857472-2.42-2.42v-46.69c0-1.33652909 1.08347091-2.42 2.42-2.42h79.36c1.3365291 0 2.42 1.08347091 2.42 2.42z'
             },
@@ -110,9 +110,9 @@ Icon.register({
         ]
     },
     laptop: {
-        height: 60,
-        width: 90,
-        paths: [
+        height : 60,
+        width  : 90,
+        paths  : [
             {
                 d: 'm39.63 28.56 4.81-4.81c.425074-.5836248.3559972-1.3910642-.1620329-1.8940061-.5180302-.5029419-1.3271582-.5481285-1.8979671-.1059939l-4.8 4.8c-.4148987.4109913-.5427446 1.0307734-.3243475 1.5723982s.7404066.8993684 1.3243475.9076018c.400097-.003987.7804967-.1742611 1.05-.47z'
             },
@@ -146,9 +146,9 @@ Icon.register({
         ]
     },
     mobile: {
-        height: 90,
-        width: 52,
-        paths: [
+        height : 90,
+        width  : 52,
+        paths  : [
             {
                 d: 'm19.87 9.34h12.26c.8008129 0 1.45-.64918711 1.45-1.45s-.6491871-1.45-1.45-1.45h-12.26c-.8008129 0-1.45.64918711-1.45 1.45s.6491871 1.45 1.45 1.45z'
             },
diff --git a/src/resources/views/_manager.blade.php b/src/resources/views/_manager.blade.php
index aae5e83..b8d4dbc 100644
--- a/src/resources/views/_manager.blade.php
+++ b/src/resources/views/_manager.blade.php
@@ -121,7 +121,7 @@ class="hide-native-scrollbar"
         'sharpen' => trans('MediaManager::messages.editor.sharpen'),
         'stack_blur' => trans('MediaManager::messages.editor.stack_blur'),
         'greyscale' => trans('MediaManager::messages.editor.greyscale'),
-        'invert' => trans('MediaManager::messages.editor.invert'),
+        'invert' => trans('MediaManager::messages.editor.invert')
     ]) }}"
     :in-modal="{{ isset($modal) ? 'true' : 'false' }}"
     :hide-ext="{{ isset($hideExt) ? json_encode($hideExt) : '[]' }}"
@@ -227,7 +227,7 @@ class="hide-native-scrollbar"
                                     v-tippy="{arrow: true}"
                                     title="e"
                                     @click.stop="imageEditor()">
-                                    <span class="icon"><icon name="object-ungroup" scale="1.2"></icon></span>
+                                    <span class="icon"><icon name="regular/object-ungroup" scale="1.2"></icon></span>
                                     <span>{{ trans('MediaManager::messages.editor.main') }}</span>
                                 </button>
                             </div>
@@ -240,7 +240,7 @@ class="hide-native-scrollbar"
                                     v-tippy="{arrow: true}"
                                     title="d / del"
                                     @click.stop="deleteItem()">
-                                    <span class="icon"><icon name="trash"></icon></span>
+                                    <span class="icon"><icon name="regular/trash-alt"></icon></span>
                                     <span>{{ trans('MediaManager::messages.delete.main') }}</span>
                                 </button>
                             </div>
@@ -261,7 +261,7 @@ class="hide-native-scrollbar"
                                     @tap="refresh()"
                                     @hold="clearAll()">
                                     <span class="icon">
-                                        <icon name="refresh" :spin="isLoading"></icon>
+                                        <icon name="sync" :spin="isLoading"></icon>
                                     </span>
                                 </v-touch>
                             </div>
@@ -275,7 +275,7 @@ class="hide-native-scrollbar"
                                     title="(L) ock"
                                     @click.stop="lockFileForm()">
                                     <span class="icon">
-                                        <icon :name="IsLocked(selectedFile) ? 'lock' : 'unlock'"></icon>
+                                        <icon :name="IsLocked(selectedFile) ? 'lock' : 'lock-open'"></icon>
                                     </span>
                                 </button>
                             </div>
@@ -476,7 +476,7 @@ class="btn-plain">
                             <span class="icon is-large">
                                 <icon>
                                     <icon name="circle" scale="2.5"></icon>
-                                    <icon class="icon-btn" name="cloud-upload"/>
+                                    <icon class="icon-btn" name="cloud-upload-alt"/>
                                 </icon>
                             </span>
                         </button>
@@ -630,7 +630,7 @@ class="__box-copy-link icon"
                                     :title="linkCopied ? trans('copied') : trans('to_cp')"
                                     v-tippy="{arrow: true, hideOnClick: false}"
                                     @hidden="linkCopied = false">
-                                    <icon name="clone" scale="0.9"></icon>
+                                    <icon name="regular/clone" scale="0.9"></icon>
                                 </div>
 
                                 <div class="__box-data">
@@ -647,11 +647,11 @@ class="__box-copy-link icon"
                                         <span v-else class="icon is-large">
                                             <icon v-if="fileTypeIs(file, 'folder')" name="folder" scale="2.6"></icon>
                                             <icon v-else-if="fileTypeIs(file, 'application')" name="cogs" scale="2.6"></icon>
-                                            <icon v-else-if="fileTypeIs(file, 'compressed')" name="file-archive-o" scale="2.6"></icon>
+                                            <icon v-else-if="fileTypeIs(file, 'compressed')" name="regular/file-archive" scale="2.6"></icon>
                                             <icon v-else-if="fileTypeIs(file, 'video')" name="film" scale="2.6"></icon>
                                             <icon v-else-if="fileTypeIs(file, 'audio')" name="music" scale="2.6"></icon>
-                                            <icon v-else-if="fileTypeIs(file, 'pdf')" name="file-pdf-o" scale="2.6"></icon>
-                                            <icon v-else-if="fileTypeIs(file, 'text')" name="file-text-o" scale="2.6"></icon>
+                                            <icon v-else-if="fileTypeIs(file, 'pdf')" name="regular/file-pdf" scale="2.6"></icon>
+                                            <icon v-else-if="fileTypeIs(file, 'text')" name="regular/file-alt" scale="2.6"></icon>
                                         </span>
                                     </div>
 
@@ -755,7 +755,7 @@ class="link"
                                 v-tippy="{arrow: true, placement: 'left'}"
                                 title="{{ trans('MediaManager::messages.space') }}"
                                 @click.stop="toggleModal('preview_modal')">
-                                <icon class="svg-prev-icon" name="file-pdf-o" scale="4"></icon>
+                                <icon class="svg-prev-icon" name="regular/file-pdf" scale="4"></icon>
                             </div>
 
                             <div key="text" v-else-if="selectedFileIs('text')"
@@ -763,7 +763,7 @@ class="link"
                                 v-tippy="{arrow: true, placement: 'left'}"
                                 title="{{ trans('MediaManager::messages.space') }}"
                                 @click.stop="toggleModal('preview_modal')">
-                                <icon class="svg-prev-icon" name="file-text-o" scale="4"></icon>
+                                <icon class="svg-prev-icon" name="regular/file-alt" scale="4"></icon>
                             </div>
 
                             <icon-types v-else
@@ -1004,7 +1004,7 @@ class="p-l-0 level"
                                         <span class="level-item m-l-5 is-marginless">{{ trans('MediaManager::messages.library') }}</span>
                                     </a>
                                     <p v-else class="p-l-0 level">
-                                        <span class="icon level-item is-marginless"><icon name="map-o"></icon></span>
+                                        <span class="icon level-item is-marginless"><icon name="regular/map"></icon></span>
                                         <span class="level-item m-l-5 is-marginless">{{ trans('MediaManager::messages.library') }}</span>
                                     </p>
                                 </li>
@@ -1012,7 +1012,7 @@ class="p-l-0 level"
                                 <li v-for="(folder, index) in pathBarDirsList" :key="`${index}-${folder}`">
                                     <p v-if="isLastItemByIndex(index, pathBarDirsList) || isBulkSelecting() || isLoading"
                                         class="level">
-                                        <span class="icon level-item is-marginless"><icon name="folder-open-o"></icon></span>
+                                        <span class="icon level-item is-marginless"><icon name="regular/folder-open"></icon></span>
                                         <span class="level-item m-l-5 is-marginless">@{{ folder }}</span>
                                     </p>
                                     <a v-else
@@ -1080,11 +1080,11 @@ class="level"
 </media-manager>
 
 {{-- styles --}}
-@push('styles')
+@push ('styles')
     <link rel="stylesheet" href="{{ asset('assets/vendor/MediaManager/style.css') }}"/>
 @endpush
 
 {{-- scripts --}}
-@push('scripts')
+@push ('scripts')
     <script src="//cdnjs.cloudflare.com/ajax/libs/camanjs/4.1.2/caman.full.min.js"></script>
 @endpush
diff --git a/src/resources/views/partials/card.blade.php b/src/resources/views/partials/card.blade.php
index c696de1..fcf2eba 100644
--- a/src/resources/views/partials/card.blade.php
+++ b/src/resources/views/partials/card.blade.php
@@ -113,7 +113,7 @@ class="icon is-large link"
                         :title="IsLocked(selectedFile) ? '{{ trans('MediaManager::messages.unlock') }}' : '{{ trans('MediaManager::messages.lock') }}'"
                         v-tippy="{arrow: true, hideOnClick: false}"
                         @click.stop="$refs.lock.click()">
-                        <icon :name="IsLocked(selectedFile) ? 'lock' : 'unlock'" scale="1.1"></icon>
+                        <icon :name="IsLocked(selectedFile) ? 'lock' : 'lock-open'" scale="1.1"></icon>
                     </span>
                 </div>
 
diff --git a/src/resources/views/partials/modal/ops.blade.php b/src/resources/views/partials/modal/ops.blade.php
index 5ff4ec8..aaec437 100644
--- a/src/resources/views/partials/modal/ops.blade.php
+++ b/src/resources/views/partials/modal/ops.blade.php
@@ -145,7 +145,7 @@ class="button is-warning"
                 <p class="modal-card-title">
                     <transition :name="copyFilesNotMove ? 'mm-info-in' : 'mm-info-out'" mode="out-in">
                         <span class="icon" :key="copyFilesNotMove ? 1 : 2">
-                            <icon :name="copyFilesNotMove ? 'clone' : 'share'"></icon>
+                            <icon :name="copyFilesNotMove ? 'regular/clone' : 'share'"></icon>
                         </span>
                     </transition>
 
@@ -232,7 +232,7 @@ class="button is-warning"
 
                     {{-- deleting folder warning --}}
                     <h5 v-show="folderDeleteWarning" class="__modal-folder-warning">
-                        <span class="icon is-medium"><icon name="warning" scale="1.2"></icon></span>
+                        <span class="icon is-medium"><icon name="exclamation-triangle" scale="1.2"></icon></span>
                         <span>{{ trans('MediaManager::messages.delete.folder') }}</span>
                     </h5>
                 </section>