jobdone-shared-files 1.0.13 → 1.0.16

package/ProjectManagement/projectNavbar.vue

@@ -1,364 +1,364 @@
-<template>
-    <div class="bg-gray-000 sticky-top d-print-none">
-        <nav class="navbar navbar-main navbar-expand-lg border-bottoms py-0" data-bs-theme="dark">
-            <div class="navbar-placeholder-content px-4 placeholder-glow">
-                <span class="placeholder w-1rem"></span>
-                <span class="placeholder w-20rem"></span>
-                <span class="placeholder w-5rem"></span>
-                <span class="placeholder w-5rem"></span>
-                <span class="placeholder w-5rem"></span>
-            </div>
-            <div class="navbar-content opacity-0 d-flex align-items-center flex-fill w-100">
-                <div class="border-end">
-                    <a :href="arrowBackLink" class="btn btn-normal btn-square" title="離開專案"><span class="material-icons">home</span></a>
-                </div>
-                <span class="fs-6 mb-0 mx-4 text-nowrap text-project-title text-overflow"><b class="">{{projectInfo?.name}}</b></span>
-                <!--TODO: 解決 overflow scroll 與 dropdown 衝突-->
-                <div class="flex-grow-1 text-nowrap">
-                    <div class="d-flex flex-grow-1 border-start">
-                        <nav class="navbar-nav navbar-main navbar-tab navbar-line navbar-line-lg">
-                            <div class="nav-item navbar-line-item btn nav-link border-0 dropdown"
-                                    :class="{'active': isActive(null)}">
-                                <a class="dropdown-link" :href="finalRootDomain + '/ProjectManagement/ProjectInfo?id=' + projectId">
-                                    專案資訊
-                                </a>
-                            </div>
-                            <div class="nav-item navbar-line-item btn nav-link border-0 dropdown"
-                                 :class="{'active': isActive(navLinkObj.moduleLink)}">
-                                 <!-- NOTE 自己的獨立AP 沒有list，目前因為隕石已被GeneralLink取代 -->
-                                <a :href="navLinkObj.url + projectId" class="dropdown-link" v-if="navLinkObj?.moduleLink?.selfIsApp">
-                                    <span class="material-icons icon-18 me-2">{{ navLinkObj?.moduleLink?.icon }}</span>
-                                    {{ navLinkObj?.moduleLink?.name }}
-                                </a>
-                                <span class="dropdown-link dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" v-else>
-                                    <span class="material-icons icon-18 icon-shine me-1">{{ navLinkObj?.moduleLink?.icon }}</span>
-                                    功能選單
-                                </span>
-                                <ul class="dropdown-menu" :class="{'p-0': navLinkObj?.moduleLink?.apps?.length == 0}">
-                                    <li v-if="navLinkObj?.moduleLink?.apps?.length > 0">
-                                        <a class="dropdown-item" :href="app.url + '?projectId=' + projectId" v-for="(app, index) in navLinkObj.moduleLink.apps" :key="index">
-                                            <span class="material-icons icon-18 align-middle me-2">{{app.icon}}</span>
-                                            <span class="align-middle">{{app.name}}</span>
-                                        </a>
-                                    </li>
-                                </ul>
-                            </div>
-                            <div class="nav-item navbar-line-item btn nav-link border-0 dropdown"
-                                 :class="{'active': isActive(item.id)}"
-                                 v-for="item in navLinkObj.generalLink">
-                                <a :href="item.url + '?projectId=' + projectId" class="dropdown-link">
-                                    <span class="material-icons icon-18 me-2">{{item.icon}}</span>
-                                    {{item.name}}
-                                </a>
-                            </div>
-                        </nav>
-                        <nav class="navbar-nav navbar-main navbar-line navbar-line-lg ms-auto">
-                            <div class="nav-item navbar-line-item btn nav-link border-0">
-                                <a href="https://docs.jobdone.cc/" target="_blank">
-                                    <span class="align-middle">使用指南</span>
-                                    <span class="material-icons icon-18 align-middle icon-help ms-1">help</span>
-                                </a>
-                            </div>
-                            <div class="nav-item navbar-line-item btn nav-link border-0 dropdown">
-                                <span class="dropdown-link dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
-                                    <div class="thumbnail-content thumbnail-32 rounded-circle me-2" :style="'background-image: url(' + userPicture + ');'"></div>
-                                    {{userId}}
-                                </span>
-                                <ul class="dropdown-menu dropdown-menu-end">
-                                    <li>
-                                        <a class="dropdown-item" :href="finalRootDomain + '/Profile'">個人資訊</a>
-                                    </li>
-                                    <li><hr class="dropdown-divider"></li>
-                                    <li>
-                                        <a class="dropdown-item" :href="logOutLink">登出</a>
-                                    </li>
-                                </ul>
-                            </div>
-                        </nav>
-                    </div>
-                </div>
-            </div>
-        </nav>
-        <div class="info-project bg-primary bg-opacity-25 border-top border-bottom border-primary border-opacity-25 py-2">
-            <div class="navbar-placeholder-content px-5 placeholder-glow">
-                <span class="placeholder placeholder-xs w-10rem ms-4"></span>
-                <span class="placeholder placeholder-xs w-12rem"></span>
-                <span class="placeholder placeholder-xs w-6rem"></span>
-            </div>
-            <div class="navbar-content opacity-0 d-flex align-items-center">
-                <span class="badge badge-outline-purple me-3">{{ navLinkObj?.moduleLink?.name }}</span>
-                <small class="d-flex me-4" v-if="projectInfo?.caseNo">
-                    <b class="me-2">案號</b>
-                    <span>{{projectInfo?.caseNo}}</span>
-                </small>
-                <small class="d-flex me-4">
-                    <b class="me-2">開工/完工日期</b>
-                    <span>{{formatDate(projectInfo?.beginDT)}} - {{formatDate(projectInfo?.endDT)}}</span>
-                </small>
-                <small class="d-flex me-4">
-                    <b class="me-2">核定工期</b>
-                    <span>{{projectInfo?.approvedWorkingPeriod}}天</span>
-                </small>
-                <small class="d-flex" v-if="projectInfo?.extendToDT">
-                    <b class="me-2">展延至</b>
-                    <span>{{ formatDate(projectInfo?.extendToDT) }} ({{projectInfo?.extendDays}}天)</span>
-                </small>
-                <small class="d-flex ms-auto">
-                    <slot></slot>
-                </small>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-    import { formatDate } from '../../../node_modules/jobdone-shared-files/common/format';
-    import { onMounted, ref, computed, nextTick } from 'vue';
-    import axios from 'axios';
-    import '../../bootstrap/js/dist/dropdown.js';
-
-    export default {
-        props: {
-            arrowBackLink: {
-                type: String,
-                required: true
-            },
-            projectId: {
-                type: String,
-                required: true
-            },
-            projectInfo: {
-                type: [String, Object],
-                required: true
-            },
-            projectApps: {
-                type: [String, Object],
-                required: true
-            },
-            activeClientId: {
-                type: String,
-                required: false,
-            },
-            rootDomain: {
-                type: String,
-                required: true
-            },
-            userId: {
-                type: String,
-                required: true
-            },
-            userPicture: {
-                type: String,
-                required: true
-            },
-            logOutLink: {
-                type: String,
-                required: true
-            }
-        },
-        setup(props) {
-            const projectInfo = ref({});
-            const navLinkObj = ref({});
-            const finalRootDomain = computed(() => {
-                if (props.rootDomain.substr(-1) === "/") {
-                    return props.rootDomain.slice(0, -1);
-                }
-                return props.rootDomain;
-            });
-
-            const isActive = (target) => {
-                if (target === null) {
-                    // 專案資訊
-                    return target === null && !props.activeClientId;
-                }
-                if (typeof target === 'object') {
-                    // 功能選單
-                    return !!props.activeClientId && (target.clientId === props.activeClientId || target.apps.some(x => x.clientId == props.activeClientId))
-                }
-                if (!!props.activeClientId && target == props.activeClientId) {
-                    // 功能選單
-                    return true;
-                }
-                return false;
-            }
-
-            onMounted(async () => {
-                try {
-                    switch (typeof props.projectInfo) {
-                        case 'string':
-                            axios.get(props.projectInfo).then((res) => {
-                                projectInfo.value = res.data;
-                            });
-                            break;
-                        case 'object':
-                            projectInfo.value = props.projectInfo;
-                            break;
-                        default:
-                            projectInfo.value = {
-                                caseNo: '',
-                                name: '',
-                                beginDT: '',
-                                endDT: '',
-                                approvedWorkingPeriod: '',
-                                extendToDT: '',
-                                extendDays: ''
-                            };
-                            break;
-                    }
-                } catch (e) {
-                    projectInfo.value = {
-                        caseNo: '',
-                        name: '',
-                        beginDT: '',
-                        endDT: '',
-                        approvedWorkingPeriod: '',
-                        extendToDT: '',
-                        extendDays: ''
-                    };
-                }
-                try {
-                    switch (typeof props.projectApps) {
-                        case 'string':
-                            axios.get(props.projectApps).then((res) => {
-                                navLinkObj.value = res.data;
-                            });
-                            break;
-                        case 'object':
-                            navLinkObj.value = props.projectApps;
-                            break;
-                        default:
-                            navLinkObj.value = {
-                                "moduleLink": {
-                                    "apps": [],
-                                    "icon": "edit_document",
-                                    "name": "Module",
-                                    "url": "",
-                                    "mobileUrl": "",
-                                    "mobileAppRoute": "",
-                                    "clientId": null,
-                                    "selfIsApp": false
-                                },
-                                "generalLink": []
-                            }
-                            break;
-                    }
-                } catch (e) {
-                    navLinkObj.value = {
-                        "moduleLink": {
-                            "apps": [],
-                            "icon": "edit_document",
-                            "name": "Module",
-                            "url": "",
-                            "mobileUrl": "",
-                            "mobileAppRoute": "",
-                            "clientId": null,
-                            "selfIsApp": false
-                        },
-                        "generalLink": []
-                    }
-                }
-                
-
-                nextTick(() => {
-                    let navbarElements = document.getElementsByClassName('navbar-content');
-                    Array.from(navbarElements).forEach(function (item) {
-                        item.classList.remove("opacity-0");
-                    });
-
-                    let placeholderElements = document.getElementsByClassName('navbar-placeholder-content');
-                    Array.from(placeholderElements).forEach(function (item) {
-                        item.classList.add("opacity-0");
-                    });
-                });
-            });
-
-
-            return {
-                formatDate,
-                projectInfo,
-                navLinkObj,
-                finalRootDomain,
-                isActive
-            }
-        }
-    }
-</script>
-
-<style scoped lang="scss">
-    @import "../../bootstrap/scss/functions";
-    @import "../../bootstrap/scss/mixins";
-    @import "../style/scss/Settings/bs-variables";
-    @import "../style/scss/Settings/Mixins";
-
-    .navbar-content{
-        transition: .5s;
-    }
-
-    .navbar-placeholder-content{
-        @include position-center();
-        display: flex;
-        align-items: center;
-        gap: 1rem;
-        mix-blend-mode: color-burn;
-        pointer-events: none;
-    }
-
-    .text-project-title {
-        color: var(--dark-theme-primary);
-    }
-
-    .navbar[data-bs-theme="dark"] {
-        --bs-body-color: var(--gray-500);
-        color: var(--bs-body-color);
-    }
-
-    .navbar-main {
-        .navbar-line-item {
-            --bs-navbar-nav-link-padding-x: 1rem;
-        }
-        .dropdown-menu {
-            max-height: 80vh;
-        }
-    }
-
-
-    .navbar[data-bs-theme="dark"], .navbar-main {
-        background-color: var(--gray-900);
-    }
-
-    .navbar-line-item.active {
-        background-color: var(--gray-800);
-    }
-
-    .navbar-tab{
-        min-height: 60px;
-        padding-top: 0.75rem;
-        padding-left: 0.5rem;
-        .navbar-line-item{
-            min-height: auto;
-        }
-    }
-
-    .navbar-line-item.dropdown .dropdown-menu {
-        z-index: $zindex-sticky + 1;
-    }
-    .navbar-line-item.dropdown .dropdown-toggle[aria-expanded=true]{
-        color: $white;
-    }
-
-    .info-project {
-        position: relative;
-        padding-left: 60px;
-        padding-right: 1rem;
-    }
-
-    .icon-shine{
-        background: linear-gradient(120deg, #fff 20%, #24BCE7 40%, #e8ecff 45%, #5872ff 60%, #fff 90%);
-        -webkit-background-clip: text;
-        color: transparent;
-    }
-
-    .icon-help{
-        color: #c8d1ff;
-    }
+<template>
+    <div class="bg-gray-000 sticky-top d-print-none">
+        <nav class="navbar navbar-main navbar-expand-lg border-bottoms py-0" data-bs-theme="dark">
+            <div class="navbar-placeholder-content px-4 placeholder-glow">
+                <span class="placeholder w-1rem"></span>
+                <span class="placeholder w-20rem"></span>
+                <span class="placeholder w-5rem"></span>
+                <span class="placeholder w-5rem"></span>
+                <span class="placeholder w-5rem"></span>
+            </div>
+            <div class="navbar-content opacity-0 d-flex align-items-center flex-fill w-100">
+                <div class="border-end">
+                    <a :href="arrowBackLink" class="btn btn-normal btn-square" title="離開專案"><span class="material-icons">home</span></a>
+                </div>
+                <span class="fs-6 mb-0 mx-4 text-nowrap text-project-title text-overflow"><b class="">{{projectInfo?.name}}</b></span>
+                <!--TODO: 解決 overflow scroll 與 dropdown 衝突-->
+                <div class="flex-grow-1 text-nowrap">
+                    <div class="d-flex flex-grow-1 border-start">
+                        <nav class="navbar-nav navbar-main navbar-tab navbar-line navbar-line-lg">
+                            <div class="nav-item navbar-line-item btn nav-link border-0 dropdown"
+                                    :class="{'active': isActive(null)}">
+                                <a class="dropdown-link" :href="finalRootDomain + '/ProjectManagement/ProjectInfo?id=' + projectId">
+                                    專案資訊
+                                </a>
+                            </div>
+                            <div class="nav-item navbar-line-item btn nav-link border-0 dropdown"
+                                 :class="{'active': isActive(navLinkObj.moduleLink)}">
+                                 <!-- NOTE 自己的獨立AP 沒有list，目前因為隕石已被GeneralLink取代 -->
+                                <a :href="navLinkObj.url + projectId" class="dropdown-link" v-if="navLinkObj?.moduleLink?.selfIsApp">
+                                    <span class="material-icons icon-18 me-2">{{ navLinkObj?.moduleLink?.icon }}</span>
+                                    {{ navLinkObj?.moduleLink?.name }}
+                                </a>
+                                <span class="dropdown-link dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" v-else>
+                                    <span class="material-icons icon-18 icon-shine me-1">{{ navLinkObj?.moduleLink?.icon }}</span>
+                                    功能選單
+                                </span>
+                                <ul class="dropdown-menu" :class="{'p-0': navLinkObj?.moduleLink?.apps?.length == 0}">
+                                    <li v-if="navLinkObj?.moduleLink?.apps?.length > 0">
+                                        <a class="dropdown-item" :href="app.url + '?projectId=' + projectId" v-for="(app, index) in navLinkObj.moduleLink.apps" :key="index">
+                                            <span class="material-icons icon-18 align-middle me-2">{{app.icon}}</span>
+                                            <span class="align-middle">{{app.name}}</span>
+                                        </a>
+                                    </li>
+                                </ul>
+                            </div>
+                            <div class="nav-item navbar-line-item btn nav-link border-0 dropdown"
+                                 :class="{'active': isActive(item.id)}"
+                                 v-for="item in navLinkObj.generalLink">
+                                <a :href="item.url + '?projectId=' + projectId" class="dropdown-link">
+                                    <span class="material-icons icon-18 me-2">{{item.icon}}</span>
+                                    {{item.name}}
+                                </a>
+                            </div>
+                        </nav>
+                        <nav class="navbar-nav navbar-main navbar-line navbar-line-lg ms-auto">
+                            <div class="nav-item navbar-line-item btn nav-link border-0">
+                                <a href="https://docs.jobdone.cc/" target="_blank">
+                                    <span class="align-middle">使用指南</span>
+                                    <span class="material-icons icon-18 align-middle icon-help ms-1">help</span>
+                                </a>
+                            </div>
+                            <div class="nav-item navbar-line-item btn nav-link border-0 dropdown">
+                                <span class="dropdown-link dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+                                    <div class="thumbnail-content thumbnail-32 rounded-circle me-2" :style="'background-image: url(' + userPicture + ');'"></div>
+                                    {{userId}}
+                                </span>
+                                <ul class="dropdown-menu dropdown-menu-end">
+                                    <li>
+                                        <a class="dropdown-item" :href="finalRootDomain + '/Profile'">個人資訊</a>
+                                    </li>
+                                    <li><hr class="dropdown-divider"></li>
+                                    <li>
+                                        <a class="dropdown-item" :href="logOutLink">登出</a>
+                                    </li>
+                                </ul>
+                            </div>
+                        </nav>
+                    </div>
+                </div>
+            </div>
+        </nav>
+        <div class="info-project bg-primary bg-opacity-25 border-top border-bottom border-primary border-opacity-25 py-2">
+            <div class="navbar-placeholder-content px-5 placeholder-glow">
+                <span class="placeholder placeholder-xs w-10rem ms-4"></span>
+                <span class="placeholder placeholder-xs w-12rem"></span>
+                <span class="placeholder placeholder-xs w-6rem"></span>
+            </div>
+            <div class="navbar-content opacity-0 d-flex align-items-center">
+                <span class="badge badge-outline-purple me-3">{{ navLinkObj?.moduleLink?.name }}</span>
+                <small class="d-flex me-4" v-if="projectInfo?.caseNo">
+                    <b class="me-2">案號</b>
+                    <span>{{projectInfo?.caseNo}}</span>
+                </small>
+                <small class="d-flex me-4">
+                    <b class="me-2">開工/完工日期</b>
+                    <span>{{formatDate(projectInfo?.beginDT)}} - {{formatDate(projectInfo?.endDT)}}</span>
+                </small>
+                <small class="d-flex me-4">
+                    <b class="me-2">核定工期</b>
+                    <span>{{projectInfo?.approvedWorkingPeriod}}天</span>
+                </small>
+                <small class="d-flex" v-if="projectInfo?.extendToDT">
+                    <b class="me-2">展延至</b>
+                    <span>{{ formatDate(projectInfo?.extendToDT) }} ({{projectInfo?.extendDays}}天)</span>
+                </small>
+                <small class="d-flex ms-auto">
+                    <slot></slot>
+                </small>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import { formatDate } from '../../../node_modules/jobdone-shared-files/common/format';
+    import { onMounted, ref, computed, nextTick } from 'vue';
+    import axios from 'axios';
+    import '../../bootstrap/js/dist/dropdown.js';
+
+    export default {
+        props: {
+            arrowBackLink: {
+                type: String,
+                required: true
+            },
+            projectId: {
+                type: String,
+                required: true
+            },
+            projectInfo: {
+                type: [String, Object],
+                required: true
+            },
+            projectApps: {
+                type: [String, Object],
+                required: true
+            },
+            activeClientId: {
+                type: String,
+                required: false,
+            },
+            rootDomain: {
+                type: String,
+                required: true
+            },
+            userId: {
+                type: String,
+                required: true
+            },
+            userPicture: {
+                type: String,
+                required: true
+            },
+            logOutLink: {
+                type: String,
+                required: true
+            }
+        },
+        setup(props) {
+            const projectInfo = ref({});
+            const navLinkObj = ref({});
+            const finalRootDomain = computed(() => {
+                if (props.rootDomain.substr(-1) === "/") {
+                    return props.rootDomain.slice(0, -1);
+                }
+                return props.rootDomain;
+            });
+
+            const isActive = (target) => {
+                if (target === null) {
+                    // 專案資訊
+                    return target === null && !props.activeClientId;
+                }
+                if (typeof target === 'object') {
+                    // 功能選單
+                    return !!props.activeClientId && (target.clientId === props.activeClientId || target.apps.some(x => x.clientId == props.activeClientId))
+                }
+                if (!!props.activeClientId && target == props.activeClientId) {
+                    // 功能選單
+                    return true;
+                }
+                return false;
+            }
+
+            onMounted(async () => {
+                try {
+                    switch (typeof props.projectInfo) {
+                        case 'string':
+                            axios.get(props.projectInfo).then((res) => {
+                                projectInfo.value = res.data;
+                            });
+                            break;
+                        case 'object':
+                            projectInfo.value = props.projectInfo;
+                            break;
+                        default:
+                            projectInfo.value = {
+                                caseNo: '',
+                                name: '',
+                                beginDT: '',
+                                endDT: '',
+                                approvedWorkingPeriod: '',
+                                extendToDT: '',
+                                extendDays: ''
+                            };
+                            break;
+                    }
+                } catch (e) {
+                    projectInfo.value = {
+                        caseNo: '',
+                        name: '',
+                        beginDT: '',
+                        endDT: '',
+                        approvedWorkingPeriod: '',
+                        extendToDT: '',
+                        extendDays: ''
+                    };
+                }
+                try {
+                    switch (typeof props.projectApps) {
+                        case 'string':
+                            axios.get(props.projectApps).then((res) => {
+                                navLinkObj.value = res.data;
+                            });
+                            break;
+                        case 'object':
+                            navLinkObj.value = props.projectApps;
+                            break;
+                        default:
+                            navLinkObj.value = {
+                                "moduleLink": {
+                                    "apps": [],
+                                    "icon": "edit_document",
+                                    "name": "Module",
+                                    "url": "",
+                                    "mobileUrl": "",
+                                    "mobileAppRoute": "",
+                                    "clientId": null,
+                                    "selfIsApp": false
+                                },
+                                "generalLink": []
+                            }
+                            break;
+                    }
+                } catch (e) {
+                    navLinkObj.value = {
+                        "moduleLink": {
+                            "apps": [],
+                            "icon": "edit_document",
+                            "name": "Module",
+                            "url": "",
+                            "mobileUrl": "",
+                            "mobileAppRoute": "",
+                            "clientId": null,
+                            "selfIsApp": false
+                        },
+                        "generalLink": []
+                    }
+                }
+                
+
+                nextTick(() => {
+                    let navbarElements = document.getElementsByClassName('navbar-content');
+                    Array.from(navbarElements).forEach(function (item) {
+                        item.classList.remove("opacity-0");
+                    });
+
+                    let placeholderElements = document.getElementsByClassName('navbar-placeholder-content');
+                    Array.from(placeholderElements).forEach(function (item) {
+                        item.classList.add("opacity-0");
+                    });
+                });
+            });
+
+
+            return {
+                formatDate,
+                projectInfo,
+                navLinkObj,
+                finalRootDomain,
+                isActive
+            }
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+    @import "../../bootstrap/scss/functions";
+    @import "../../bootstrap/scss/mixins";
+    @import "../style/scss/Settings/bs-variables";
+    @import "../style/scss/Settings/Mixins";
+
+    .navbar-content{
+        transition: .5s;
+    }
+
+    .navbar-placeholder-content{
+        @include position-center();
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+        mix-blend-mode: color-burn;
+        pointer-events: none;
+    }
+
+    .text-project-title {
+        color: var(--dark-theme-primary);
+    }
+
+    .navbar[data-bs-theme="dark"] {
+        --bs-body-color: var(--gray-500);
+        color: var(--bs-body-color);
+    }
+
+    .navbar-main {
+        .navbar-line-item {
+            --bs-navbar-nav-link-padding-x: 1rem;
+        }
+        .dropdown-menu {
+            max-height: 80vh;
+        }
+    }
+
+
+    .navbar[data-bs-theme="dark"], .navbar-main {
+        background-color: var(--gray-900);
+    }
+
+    .navbar-line-item.active {
+        background-color: var(--gray-800);
+    }
+
+    .navbar-tab{
+        min-height: 60px;
+        padding-top: 0.75rem;
+        padding-left: 0.5rem;
+        .navbar-line-item{
+            min-height: auto;
+        }
+    }
+
+    .navbar-line-item.dropdown .dropdown-menu {
+        z-index: $zindex-sticky + 1;
+    }
+    .navbar-line-item.dropdown .dropdown-toggle[aria-expanded=true]{
+        color: $white;
+    }
+
+    .info-project {
+        position: relative;
+        padding-left: 60px;
+        padding-right: 1rem;
+    }
+
+    .icon-shine{
+        background: linear-gradient(120deg, #fff 20%, #24BCE7 40%, #e8ecff 45%, #5872ff 60%, #fff 90%);
+        -webkit-background-clip: text;
+        color: transparent;
+    }
+
+    .icon-help{
+        color: #c8d1ff;
+    }
 </style>