From 1b67934b1d0eaa11a30fa01d2e51fffd87266a13 Mon Sep 17 00:00:00 2001
From: Gao Sun <gao@silverhand.io>
Date: Mon, 29 Jul 2024 10:03:50 +0800
Subject: [PATCH] refactor(console, experience): solve sass deprecations
 (#6356)

---
 .../CreateConnectorForm/Skeleton/index.module.scss        | 6 +++---
 .../src/components/DetailsPage/Skeleton/index.module.scss | 8 ++++----
 .../src/components/FormCard/Skeleton/index.module.scss    | 4 ++--
 .../src/components/Guide/StepsSkeleton/index.module.scss  | 6 +++---
 .../Topbar/UserInfo/UserInfoSkeleton/index.module.scss    | 4 ++--
 .../containers/ConsoleContent/Sidebar/index.module.scss   | 2 +-
 .../src/ds-components/FormField/Skeleton.module.scss      | 2 +-
 .../src/ds-components/Table/Skeleton/index.module.scss    | 8 ++++----
 .../pages/SignInExperience/Skeleton/index.module.scss     | 4 ++--
 .../ProtectedAppSettings/index.module.scss                | 2 +-
 .../PageLoadingSkeleton/index.module.scss                 | 5 ++---
 .../pages/Dashboard/components/Skeleton/index.module.scss | 6 +++---
 .../GetStarted/ProtectedAppCreationForm/index.module.scss | 2 +-
 .../pages/Profile/components/Skeleton/index.module.scss   | 6 +++---
 .../src/pages/SignInExperience/Skeleton/index.module.scss | 4 ++--
 .../SigningKeys/SigningKeyFormCard/index.module.scss      | 2 +-
 .../OrganizationItem/index.module.scss                    | 2 +-
 17 files changed, 36 insertions(+), 37 deletions(-)

diff --git a/packages/console/src/components/CreateConnectorForm/Skeleton/index.module.scss b/packages/console/src/components/CreateConnectorForm/Skeleton/index.module.scss
index dbe6a3872..e53ce9df5 100644
--- a/packages/console/src/components/CreateConnectorForm/Skeleton/index.module.scss
+++ b/packages/console/src/components/CreateConnectorForm/Skeleton/index.module.scss
@@ -7,23 +7,23 @@
 }
 
 .logo {
-  @include _.shimmering-animation;
   width: 40px;
   height: 40px;
   border-radius: 8px;
+  @include _.shimmering-animation;
 }
 
 .name {
-  @include _.shimmering-animation;
   width: 50px;
   height: 16px;
   margin-bottom: _.unit(1);
+  @include _.shimmering-animation;
 }
 
 .description {
-  @include _.shimmering-animation;
   height: 14px;
   margin-bottom: _.unit(0.5);
+  @include _.shimmering-animation;
 
   &.shortDescription {
     width: 50%;
diff --git a/packages/console/src/components/DetailsPage/Skeleton/index.module.scss b/packages/console/src/components/DetailsPage/Skeleton/index.module.scss
index f01e5691a..d7a86f5d7 100644
--- a/packages/console/src/components/DetailsPage/Skeleton/index.module.scss
+++ b/packages/console/src/components/DetailsPage/Skeleton/index.module.scss
@@ -18,11 +18,11 @@
     background-color: var(--color-layer-1);
 
     .icon {
-      @include _.shimmering-animation;
       width: 60px;
       height: 60px;
       border-radius: 12px;
       margin-right: _.unit(6);
+      @include _.shimmering-animation;
     }
 
     .wrapper {
@@ -30,23 +30,23 @@
       flex-direction: column;
 
       .title {
-        @include _.shimmering-animation;
         width: 113px;
         height: 28px;
+        @include _.shimmering-animation;
       }
 
       .tags {
-        @include _.shimmering-animation;
         width: 453px;
         height: 20px;
         margin-top: _.unit(3);
+        @include _.shimmering-animation;
       }
     }
 
     .button {
-      @include _.shimmering-animation;
       width: 158px;
       height: 44px;
+      @include _.shimmering-animation;
     }
   }
 
diff --git a/packages/console/src/components/FormCard/Skeleton/index.module.scss b/packages/console/src/components/FormCard/Skeleton/index.module.scss
index d85372508..6a11b36f3 100644
--- a/packages/console/src/components/FormCard/Skeleton/index.module.scss
+++ b/packages/console/src/components/FormCard/Skeleton/index.module.scss
@@ -1,15 +1,15 @@
 @use '@/scss/underscore' as _;
 
 .title {
-  @include _.shimmering-animation;
   height: 16px;
   width: 80px;
+  @include _.shimmering-animation;
 }
 
 .text {
-  @include _.shimmering-animation;
   width: 100%;
   height: 10px;
+  @include _.shimmering-animation;
 }
 
 .text + .text {
diff --git a/packages/console/src/components/Guide/StepsSkeleton/index.module.scss b/packages/console/src/components/Guide/StepsSkeleton/index.module.scss
index e221c5164..e9c657a4a 100644
--- a/packages/console/src/components/Guide/StepsSkeleton/index.module.scss
+++ b/packages/console/src/components/Guide/StepsSkeleton/index.module.scss
@@ -11,11 +11,11 @@
   margin: 0 auto;
 
   .index {
-    @include _.shimmering-animation;
     width: 28px;
     height: 28px;
     border-radius: 50%;
     margin-right: _.unit(4);
+    @include _.shimmering-animation;
   }
 
   .wrapper {
@@ -24,16 +24,16 @@
     flex-direction: column;
 
     .title {
-      @include _.shimmering-animation;
       width: 140px;
       height: 24px;
+      @include _.shimmering-animation;
     }
 
     .subtitle {
-      @include _.shimmering-animation;
       width: 400px;
       height: 20px;
       margin-top: _.unit(1);
+      @include _.shimmering-animation;
     }
   }
 }
diff --git a/packages/console/src/components/Topbar/UserInfo/UserInfoSkeleton/index.module.scss b/packages/console/src/components/Topbar/UserInfo/UserInfoSkeleton/index.module.scss
index d7a194491..105793633 100644
--- a/packages/console/src/components/Topbar/UserInfo/UserInfoSkeleton/index.module.scss
+++ b/packages/console/src/components/Topbar/UserInfo/UserInfoSkeleton/index.module.scss
@@ -8,17 +8,17 @@
   border-radius: 8px;
 
   .image {
-    @include _.shimmering-animation;
     width: 36px;
     height: 36px;
     margin-right: _.unit(2);
     border-radius: 6px;
+    @include _.shimmering-animation;
   }
 
   .name {
-    @include _.shimmering-animation;
     width: 85px;
     height: 20px;
     color: var(--color-text);
+    @include _.shimmering-animation;
   }
 }
diff --git a/packages/console/src/containers/ConsoleContent/Sidebar/index.module.scss b/packages/console/src/containers/ConsoleContent/Sidebar/index.module.scss
index 117802ee4..e3d479f24 100644
--- a/packages/console/src/containers/ConsoleContent/Sidebar/index.module.scss
+++ b/packages/console/src/containers/ConsoleContent/Sidebar/index.module.scss
@@ -8,7 +8,7 @@
 }
 
 .skeleton {
-  @include _.shimmering-animation;
   width: 248px;
   height: 100%;
+  @include _.shimmering-animation;
 }
diff --git a/packages/console/src/ds-components/FormField/Skeleton.module.scss b/packages/console/src/ds-components/FormField/Skeleton.module.scss
index a42e51013..0b6050fd4 100644
--- a/packages/console/src/ds-components/FormField/Skeleton.module.scss
+++ b/packages/console/src/ds-components/FormField/Skeleton.module.scss
@@ -1,9 +1,9 @@
 @use '@/scss/underscore' as _;
 
 .field {
-  @include _.shimmering-animation;
   width: 100%;
   height: 44px;
+  @include _.shimmering-animation;
 }
 
 .field + .field {
diff --git a/packages/console/src/ds-components/Table/Skeleton/index.module.scss b/packages/console/src/ds-components/Table/Skeleton/index.module.scss
index 9ce639640..78d5984aa 100644
--- a/packages/console/src/ds-components/Table/Skeleton/index.module.scss
+++ b/packages/console/src/ds-components/Table/Skeleton/index.module.scss
@@ -1,9 +1,9 @@
 @use '@/scss/underscore' as _;
 
 .rect {
-  @include _.shimmering-animation;
   height: 26px;
   max-width: 344px;
+  @include _.shimmering-animation;
 }
 
 .row {
@@ -12,26 +12,26 @@
     align-items: center;
 
     .avatar {
-      @include _.shimmering-animation;
       width: 40px;
       height: 40px;
       margin-right: _.unit(4);
       border-radius: 12px;
       flex-shrink: 0;
+      @include _.shimmering-animation;
     }
 
     .content {
       width: 100%;
 
       .title {
-        @include _.shimmering-animation;
         height: 12px;
+        @include _.shimmering-animation;
       }
 
       .subTitle {
-        @include _.shimmering-animation;
         height: 8px;
         margin-top: _.unit(2);
+        @include _.shimmering-animation;
       }
     }
   }
diff --git a/packages/console/src/onboarding/pages/SignInExperience/Skeleton/index.module.scss b/packages/console/src/onboarding/pages/SignInExperience/Skeleton/index.module.scss
index 46d96fdff..ae2d44bd6 100644
--- a/packages/console/src/onboarding/pages/SignInExperience/Skeleton/index.module.scss
+++ b/packages/console/src/onboarding/pages/SignInExperience/Skeleton/index.module.scss
@@ -8,15 +8,15 @@
   }
 
   .title {
-    @include _.shimmering-animation;
     width: 80px;
     height: 16px;
+    @include _.shimmering-animation;
   }
 
   .field {
-    @include _.shimmering-animation;
     width: 100%;
     height: 44px;
+    @include _.shimmering-animation;
   }
 
   &:not(:first-child) {
diff --git a/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/ProtectedAppSettings/index.module.scss b/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/ProtectedAppSettings/index.module.scss
index c2e979428..935f6ee3b 100644
--- a/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/ProtectedAppSettings/index.module.scss
+++ b/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/ProtectedAppSettings/index.module.scss
@@ -115,8 +115,8 @@
   border: 1px solid var(--color-divider);
 
   .bone {
-    @include _.shimmering-animation;
     border-radius: 8px;
+    @include _.shimmering-animation;
   }
 
   .title {
diff --git a/packages/console/src/pages/CustomizeJwtDetails/PageLoadingSkeleton/index.module.scss b/packages/console/src/pages/CustomizeJwtDetails/PageLoadingSkeleton/index.module.scss
index f9be76686..02c74e428 100644
--- a/packages/console/src/pages/CustomizeJwtDetails/PageLoadingSkeleton/index.module.scss
+++ b/packages/console/src/pages/CustomizeJwtDetails/PageLoadingSkeleton/index.module.scss
@@ -21,9 +21,9 @@
 }
 
 .blockShimmer {
-  @include _.shimmering-animation;
   border-radius: 8px;
   flex: 1;
+  @include _.shimmering-animation;
 }
 
 .card:not(:last-child) {
@@ -32,10 +32,10 @@
 
 
 .textShimmer {
-  @include _.shimmering-animation;
   width: 100%;
   height: _.unit(6);
   border-radius: 8px;
+  @include _.shimmering-animation;
 
   &:not(:last-child) {
     margin-bottom: _.unit(4);
@@ -49,4 +49,3 @@
     height: _.unit(8);
   }
 }
-
diff --git a/packages/console/src/pages/Dashboard/components/Skeleton/index.module.scss b/packages/console/src/pages/Dashboard/components/Skeleton/index.module.scss
index f60aaa181..1242c7d92 100644
--- a/packages/console/src/pages/Dashboard/components/Skeleton/index.module.scss
+++ b/packages/console/src/pages/Dashboard/components/Skeleton/index.module.scss
@@ -1,14 +1,14 @@
 @use '@/scss/underscore' as _;
 
 .title {
-  @include _.shimmering-animation;
   height: 24px;
   margin-bottom: _.unit(6);
+  @include _.shimmering-animation;
 }
 
 .number {
-  @include _.shimmering-animation;
   height: 32px;
+  @include _.shimmering-animation;
 }
 
 .blocks {
@@ -30,9 +30,9 @@
 }
 
 .curve {
-  @include _.shimmering-animation;
   margin: _.unit(10) 0 _.unit(6);
   height: 168px;
+  @include _.shimmering-animation;
 }
 
 .activeBlocks {
diff --git a/packages/console/src/pages/GetStarted/ProtectedAppCreationForm/index.module.scss b/packages/console/src/pages/GetStarted/ProtectedAppCreationForm/index.module.scss
index ddfdcf20d..d01ec6ee4 100644
--- a/packages/console/src/pages/GetStarted/ProtectedAppCreationForm/index.module.scss
+++ b/packages/console/src/pages/GetStarted/ProtectedAppCreationForm/index.module.scss
@@ -71,8 +71,8 @@
   border: 1px solid var(--color-divider);
 
   .bone {
-    @include _.shimmering-animation;
     border-radius: 8px;
+    @include _.shimmering-animation;
   }
 
   .columnWrapper {
diff --git a/packages/console/src/pages/Profile/components/Skeleton/index.module.scss b/packages/console/src/pages/Profile/components/Skeleton/index.module.scss
index bb6e4fb58..dd02832fe 100644
--- a/packages/console/src/pages/Profile/components/Skeleton/index.module.scss
+++ b/packages/console/src/pages/Profile/components/Skeleton/index.module.scss
@@ -30,25 +30,25 @@
 }
 
 .title {
-  @include _.shimmering-animation;
   width: 200px;
   height: 20px;
+  @include _.shimmering-animation;
 }
 
 .card {
   flex-grow: 1;
 
   .label {
-    @include _.shimmering-animation;
     width: 250px;
     height: 16px;
     margin-bottom: _.unit(2);
+    @include _.shimmering-animation;
   }
 
   .item {
-    @include _.shimmering-animation;
     width: 350px;
     height: 20px;
+    @include _.shimmering-animation;
   }
 
   .table {
diff --git a/packages/console/src/pages/SignInExperience/Skeleton/index.module.scss b/packages/console/src/pages/SignInExperience/Skeleton/index.module.scss
index c6c40319a..0634358e7 100644
--- a/packages/console/src/pages/SignInExperience/Skeleton/index.module.scss
+++ b/packages/console/src/pages/SignInExperience/Skeleton/index.module.scss
@@ -18,15 +18,15 @@
       }
 
       .title {
-        @include _.shimmering-animation;
         width: 80px;
         height: 16px;
+        @include _.shimmering-animation;
       }
 
       .field {
-        @include _.shimmering-animation;
         width: 100%;
         height: 44px;
+        @include _.shimmering-animation;
       }
 
       &:not(:first-child) {
diff --git a/packages/console/src/pages/SigningKeys/SigningKeyFormCard/index.module.scss b/packages/console/src/pages/SigningKeys/SigningKeyFormCard/index.module.scss
index 4cd70f350..b897592c6 100644
--- a/packages/console/src/pages/SigningKeys/SigningKeyFormCard/index.module.scss
+++ b/packages/console/src/pages/SigningKeys/SigningKeyFormCard/index.module.scss
@@ -32,7 +32,7 @@
 }
 
 .bone {
-  @include _.shimmering-animation;
   height: 26px;
   max-width: 344px;
+  @include _.shimmering-animation;
 }
diff --git a/packages/experience/src/pages/Consent/OrganizationSelector/OrganizationItem/index.module.scss b/packages/experience/src/pages/Consent/OrganizationSelector/OrganizationItem/index.module.scss
index 99c3b640b..cb102c657 100644
--- a/packages/experience/src/pages/Consent/OrganizationSelector/OrganizationItem/index.module.scss
+++ b/packages/experience/src/pages/Consent/OrganizationSelector/OrganizationItem/index.module.scss
@@ -4,6 +4,7 @@
   border-radius: _.unit(2);
   padding: _.unit(2.5) _.unit(2);
   cursor: pointer;
+  @include _.flex-row;
 
   .icon {
     width: 20px;
@@ -28,5 +29,4 @@
       color: var(--color-brand-default);
     }
   }
-  @include _.flex-row;
 }