build: update tailwindcss and dependencies (#5107)

* build: update tailwindcss and dependencies Signed-off-by: sulmo <[email protected]> * style(mirinae): update CSS utility classes for consistency - Replace `row-gap` with `gap-y` in various components for uniformity. - Change `rounded` to `rounded-default` in dropdown button styles. - Update background color class from `bg-gray` to `bg-gray-500`. - Modify text color class from `text-gray` to `text-gray-default`. - Correct typo in whitespace utility class from `whitespace-no-wrap` to `whitespace-nowrap`. - Simplify responsive design by using shorthand syntax for screen size utilities. Signed-off-by: sulmo <[email protected]> * style(web-console): update CSS utility classes for consistency - Replaced `@apply` with direct CSS properties for better readability. - Updated color utility classes to use consistent naming conventions. - Simplified responsive design by using shorthand syntax for media queries. - Removed redundant or unused styles to improve maintainability. Signed-off-by: sulmo <[email protected]> * style(monitoring, ptag, ptextlist): update styles for components Signed-off-by: sulmo <[email protected]> * refactor(dependencies): relocate tailwindcss to postcss-config-custom - Moved `tailwindcss` from root dependencies to `postcss-config-custom` - Updated package files to reflect the dependency relocation Signed-off-by: sulmo <[email protected]> --------- Signed-off-by: sulmo <[email protected]>
cloudforet-io · Nov 28, 2024 · 670ac8a · 670ac8a
1 parent c0a221d
commit 670ac8a
Show file tree

Hide file tree

Showing 73 changed files with 972 additions and 1,138 deletions.
diff --git a/apps/web/src/common/components/marks/BetaMark.vue b/apps/web/src/common/components/marks/BetaMark.vue
@@ -7,7 +7,7 @@
 
 <style lang="postcss">
 .beta-mark {
-    @apply text-coral;
+    @apply text-coral-default;
     font-size: 0.625rem;
     vertical-align: text-top;
     cursor: default;

diff --git a/apps/web/src/common/modules/monitoring/MetricChart.vue b/apps/web/src/common/modules/monitoring/MetricChart.vue
@@ -164,7 +164,7 @@ useResizeObserver(chartContext, throttle(() => {
             @apply text-sm font-bold capitalize truncate;
         }
         .chart-unit {
-            @apply text-sm text-gray flex-shrink ml-2;
+            @apply text-sm text-gray-default flex-shrink ml-2;
         }
     }
 

diff --git a/apps/web/src/common/modules/monitoring/Monitoring.vue b/apps/web/src/common/modules/monitoring/Monitoring.vue
@@ -12,7 +12,7 @@
             <span class="title">
                 {{ $t('COMMON.MONITORING.RESOURCE') }}
             </span>
-            <span class="ml-4 text-gray text-sm">
+            <span class="ml-4 text-gray-default text-sm">
                 * {{ $t('COMMON.MONITORING.LIMIT_OF_RESOURCE', {
                     limitCount: 16,
                 }) }}
@@ -62,7 +62,7 @@
         <section class="chart-section">
             <i18n path="COMMON.MONITORING.DISPLAY_TIMEZONE"
                   tag="p"
-                  class="text-sm text-gray mb-12"
+                  class="text-sm text-gray-default mb-12"
             >
                 <template #timezone>
                     <strong>{{ $t('COMMON.MONITORING.LOCAL_TIME') }}</strong>
@@ -471,18 +471,11 @@ section {
         grid-auto-rows: auto;
         row-gap: 3rem;
         column-gap: 1rem;
-
-        .p-metric-chart {
-            @apply col-span-3;
-
-            @screen laptop {
-                @apply col-span-4;
-            }
-
-            @screen tablet {
-                @apply col-span-12;
-            }
-        }
+    }
+    .p-metric-chart {
+        @apply col-span-3;
+        @apply laptop:col-span-4;
+        @apply tablet:col-span-12;
     }
 
     /* custom design-system component - p-button */

diff --git a/apps/web/src/common/modules/navigations/gnb/GNBNavigationRail.vue b/apps/web/src/common/modules/navigations/gnb/GNBNavigationRail.vue
@@ -298,7 +298,7 @@ onMounted(async () => {
                 &.is-selected {
                     @apply relative bg-violet-100 text-violet-600;
                     &::before {
-                        @apply absolute bg-violet;
+                        @apply absolute bg-violet-default;
                         content: '';
                         top: 0.125rem;
                         left: -0.75rem;

diff --git a/apps/web/src/common/modules/navigations/lsb/modules/LSBRouterMenuItem.vue b/apps/web/src/common/modules/navigations/lsb/modules/LSBRouterMenuItem.vue
@@ -158,9 +158,9 @@ const getIconName = (icon: LSBIcon): string => {
         @apply bg-blue-100 cursor-pointer;
     }
     .text-wrapper {
-        @apply inline-flex items-center overflow-hidden whitespace-no-wrap;
+        @apply inline-flex items-center overflow-hidden whitespace-nowrap;
         .text {
-            @apply overflow-hidden whitespace-no-wrap;
+            @apply overflow-hidden whitespace-nowrap;
             text-overflow: ellipsis;
         }
         .icon {

diff --git a/apps/web/src/common/modules/navigations/top-bar/TopBar.vue b/apps/web/src/common/modules/navigations/top-bar/TopBar.vue
@@ -103,7 +103,7 @@ const handleOpenMenu = (menuId: MenuId) => {
 @screen mobile {
     .top-bar {
         .middle-section {
-            @apply justify-end;
+            justify-content: flex-end;
         }
     }
 }

diff --git a/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-header/TopBarWorkspaces.vue b/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-header/TopBarWorkspaces.vue
@@ -309,9 +309,7 @@ onMounted(() => {
             gap: 0.25rem;
 
             .omitable-text {
-                @screen mobile {
-                    @apply hidden;
-                }
+                @apply mobile:hidden;
             }
         }
 
@@ -442,17 +440,13 @@ onMounted(() => {
             vertical-align: bottom;
             padding-left: 0.5rem;
 
-            @screen tablet {
-                @apply hidden;
-            }
+            @apply tablet:hidden;
         }
         .tablet-selected {
             @apply hidden text-label-lg text-gray-800;
             padding-left: 0.75rem;
 
-            @screen tablet {
-                @apply inline-block;
-            }
+            @apply tablet:inline-block;
         }
     }
 }

diff --git a/...les/navigations/top-bar/modules/top-bar-toolset/modules/top-bar-profile/TopBarProfile.vue b/...les/navigations/top-bar/modules/top-bar-toolset/modules/top-bar-profile/TopBarProfile.vue
@@ -418,17 +418,15 @@ watch(() => props.visible, (value) => {
         }
     }
 
-    @define-mixin menu-dropdown {
+    .profile-menu-wrapper {
         @apply bg-white border border-gray-200 rounded-xs;
         position: absolute;
         top: 100%;
         right: -0.5rem;
         left: auto;
         z-index: 1000;
         box-shadow: 0 0 0.875rem rgba(0, 0, 0, 0.1);
-    }
-    .profile-menu-wrapper {
-        @mixin menu-dropdown;
+
         min-width: 19.5rem;
 
         .user-info {
@@ -486,7 +484,12 @@ watch(() => props.visible, (value) => {
                     .value {
                         position: relative;
                         .language-menu-wrapper, .currency-menu-wrapper {
-                            @mixin menu-dropdown;
+                            @apply bg-white border border-gray-200 rounded-xs;
+                            position: absolute;
+                            top: 100%;
+                            right: -0.5rem;
+                            box-shadow: 0 0 0.875rem rgba(0, 0, 0, 0.1);
+
                             left: -1rem;
                             min-width: 9.25rem;
                             max-height: 21rem;

diff --git a/apps/web/src/common/modules/portals/HandbookButton.vue b/apps/web/src/common/modules/portals/HandbookButton.vue
@@ -195,7 +195,7 @@ export default defineComponent({
 
 @screen lg {
     .handbook-contents {
-        @apply overflow-auto;
+        overflow: auto;
         height: calc(100vh - 10.325rem);
         &::before {
             bottom: 2.225rem;
@@ -209,7 +209,7 @@ export default defineComponent({
                 height: calc(100% - 3.5rem);
             }
             .tab-pane {
-                @apply overflow-auto;
+                overflow: auto;
                 height: calc(100% - 6.25rem);
             }
         }

diff --git a/apps/web/src/common/modules/widgets/DailyUpdates.vue b/apps/web/src/common/modules/widgets/DailyUpdates.vue
@@ -345,7 +345,8 @@ export default {
             background-color: rgba(theme('colors.white'));
         }
         .title {
-            @apply text-sm leading-normal;
+            font-size: 0.875rem;
+            line-height: 1.5;
         }
     }
 }
@@ -373,7 +374,7 @@ export default {
 }
 
 .card-wrapper {
-    @apply overflow-hidden whitespace-no-wrap w-full rounded-md;
+    @apply overflow-hidden whitespace-nowrap w-full rounded-md;
     height: 100%;
     &.fixed-height {
         height: 16rem;

diff --git a/apps/web/src/common/pages/AlertPublicDetailPage.vue b/apps/web/src/common/pages/AlertPublicDetailPage.vue
@@ -399,7 +399,9 @@ const handleRouteToSignInWithRedirectPath = () => {
         @screen tablet {
             margin-top: 0;
             .main-contents-wrapper {
-                @apply row-start-1 row-end-1 col-span-12;
+                grid-row-start: 1;
+                grid-row-end: 1;
+                grid-column: span 12 / span 12;
             }
         }
     }

diff --git a/apps/web/src/services/advanced/components/BookmarkLSB.vue b/apps/web/src/services/advanced/components/BookmarkLSB.vue
@@ -122,7 +122,7 @@ const state = reactive({
         @apply w-full;
     }
     .search-result-text {
-        @apply overflow-hidden whitespace-no-wrap;
+        @apply overflow-hidden whitespace-nowrap;
         text-overflow: ellipsis;
     }
     .search-empty {

diff --git a/...eb/src/services/advanced/pages/admin/AdminDomainSettingsAutoDormancyConfigurationPage.vue b/...eb/src/services/advanced/pages/admin/AdminDomainSettingsAutoDormancyConfigurationPage.vue
@@ -390,13 +390,14 @@ onMounted(async () => {
 
     @screen tablet {
         .cost-report-button {
-            @apply hidden;
+            display: none;
         }
     }
 
     @screen mobile {
         .cost-wrapper {
-            @apply flex-col items-center;
+            flex-direction: column;
+            align-items: center;
             .cost-threshold-chart {
                 width: auto;
                 height: auto;

diff --git a/apps/web/src/services/alert-manager/components/AlertDashboardAlertHistoryWidget.vue b/apps/web/src/services/alert-manager/components/AlertDashboardAlertHistoryWidget.vue
@@ -249,16 +249,18 @@ watch(() => state.currentDate, async () => {
     @screen tablet {
         .content-wrapper {
             .summary-wrapper {
-                @apply col-span-12 row-start-2;
+                grid-column: span 12 / span 12;
+                grid-row-start: 2;
 
                 /* custom design-system component - p-card */
                 :deep(.p-card) {
-                    @apply col-span-6;
+                    grid-column: span 6 / span 6;
                 }
             }
 
             .chart-wrapper {
-                @apply col-span-12 row-start-1;
+                grid-column: span 12 / span 12;
+                grid-row-start: 1;
                 height: 12rem;
                 padding-bottom: 1rem;
             }
@@ -270,7 +272,7 @@ watch(() => state.currentDate, async () => {
             .summary-wrapper {
                 /* custom design-system component - p-card */
                 :deep(.p-card) {
-                    @apply col-span-12;
+                    grid-column: span 12 / span 12;
                 }
             }
         }

diff --git a/apps/web/src/services/alert-manager/components/AlertDashboardAlertHistoryWidgetChart.vue b/apps/web/src/services/alert-manager/components/AlertDashboardAlertHistoryWidgetChart.vue
@@ -213,10 +213,3 @@ watch(() => props.activatedProjects, async (activatedProjects) => {
     }
 }
 </style>
-<style lang="postcss">
-.AlertHistoryChartAxisRendererX-group {
-    @screen tablet {
-        display: none;
-    }
-}
-</style>
diff --git a/apps/web/src/services/alert-manager/components/AlertDashboardAlertStateWidget.vue b/apps/web/src/services/alert-manager/components/AlertDashboardAlertStateWidget.vue
@@ -481,7 +481,9 @@ watch([() => state.isAssignedToMe, () => tabState.activeTab], async () => {
                         }
                     }
                     .body {
-                        @apply border-t-0 rounded-t-none;
+                        border-top-width: 0;
+                        border-top-left-radius: 0;
+                        border-top-right-radius: 0;
                         max-height: 21.875rem;
                     }
                 }

diff --git a/apps/web/src/services/alert-manager/components/AlertDashboardProjectSearchWidget.vue b/apps/web/src/services/alert-manager/components/AlertDashboardProjectSearchWidget.vue
@@ -229,7 +229,7 @@ watch(() => props.activatedProjects, async (activatedProjects) => {
     @screen mobile {
         .box-group {
             .box {
-                @apply col-span-12;
+                grid-column: span 12 / span 12;
             }
         }
     }

diff --git a/apps/web/src/services/alert-manager/components/AlertMainDataTableActions.vue b/apps/web/src/services/alert-manager/components/AlertMainDataTableActions.vue
@@ -253,11 +253,11 @@ const onConfirmResolve = () => {
 
     @screen mobile {
         .only-desktop {
-            @apply hidden;
+            display: none;
         }
 
         .only-mobile {
-            @apply inline-block;
+            display: inline-block;
         }
     }
 }

diff --git a/apps/web/src/services/alert-manager/components/AlertMainDataTableBottomFilters.vue b/apps/web/src/services/alert-manager/components/AlertMainDataTableBottomFilters.vue
@@ -158,29 +158,30 @@ watch([() => state.selectedAlertState, () => state.selectedUrgency, () => state.
     }
 
     @screen mobile {
-        @apply overflow-x-auto w-full flex-wrap;
-
+        width: 100%;
+        flex-wrap: wrap;
+        overflow-x: auto;
         .filter {
-            @apply w-full;
+            width: 100%;
             margin: 0.5rem 0;
 
             &.filter-assigned {
                 /* custom design-system component - p-checkbox */
                 :deep(.p-checkbox) {
                     .text {
-                        @apply inline-block;
+                        display: inline-block;
                         margin-left: 0.375rem;
                     }
                 }
             }
         }
 
         .only-desktop {
-            @apply hidden;
+            display: none;
         }
 
         .only-mobile {
-            @apply inline-block;
+            display: inline-block;
         }
     }
 }