refactor(console, experience): solve sass deprecations (#6356)

logto-io · Jul 29, 2024 · 1b67934 · 1b67934
1 parent 05bd162
commit 1b67934
Show file tree

Hide file tree

Showing 17 changed files with 36 additions and 37 deletions.
diff --git 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
@@ -18,35 +18,35 @@
     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 {
       display: flex;
       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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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/...pages/ApplicationDetails/ApplicationDetailsContent/ProtectedAppSettings/index.module.scss b/...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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -32,7 +32,7 @@
 }
 
 .bone {
-  @include _.shimmering-animation;
   height: 26px;
   max-width: 344px;
+  @include _.shimmering-animation;
 }
diff --git a/...ages/experience/src/pages/Consent/OrganizationSelector/OrganizationItem/index.module.scss b/...ages/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;
 }