[FLASK] Fix classnames for snaps components (#19234)

* renamed classnames according to BEM, removed unnecessary scss file * remove plurality in classnames
MetaMask · May 23, 2023 · a9429c5 · a9429c5
1 parent dfb2c0e
commit a9429c5
Show file tree

Hide file tree

Showing 8 changed files with 19 additions and 92 deletions.
diff --git a/ui/components/app/app-components.scss b/ui/components/app/app-components.scss
@@ -41,7 +41,6 @@
 @import 'snaps/snap-ui-markdown/index';
 @import 'snaps/snap-delineator/index';
 @import 'snaps/snap-settings-card/index';
-@import 'snaps/update-snap-permission-list/index';
 @import 'snaps/copyable/index';
 @import 'snaps/snap-version/index';
 @import 'gas-details-item/index';

diff --git a/ui/components/app/snaps/update-snap-permission-list/index.scss b/ui/components/app/snaps/update-snap-permission-list/index.scss
diff --git a/ui/pages/permissions-connect/snaps/snap-install/index.scss b/ui/pages/permissions-connect/snaps/snap-install/index.scss
@@ -1,10 +1,10 @@
 .snap-install {
   box-shadow: none;
 
-  .content {
+  &__content {
     flex: 1;
 
-    .loader-container {
+    &__loader-container {
       height: 100%;
     }
 

diff --git a/ui/pages/permissions-connect/snaps/snap-install/snap-install.js b/ui/pages/permissions-connect/snaps/snap-install/snap-install.js
@@ -84,7 +84,7 @@ export default function SnapInstall({
       flexDirection={FLEX_DIRECTION.COLUMN}
     >
       <Box
-        className="header"
+        className="snap-install__header"
         alignItems={AlignItems.center}
         paddingLeft={4}
         paddingRight={4}
@@ -101,10 +101,10 @@ export default function SnapInstall({
           </Text>
         )}
       </Box>
-      <Box className="content">
+      <Box className="snap-install__content">
         {isLoading && (
           <Box
-            className="loader-container"
+            className="snap-install__content__loader-container"
             flexDirection={FLEX_DIRECTION.COLUMN}
             alignItems={AlignItems.center}
             justifyContent={JustifyContent.center}
@@ -118,7 +118,7 @@ export default function SnapInstall({
         {hasPermissions && (
           <>
             <Text
-              className="content__permission-description"
+              className="snap-install__content__permission-description"
               paddingBottom={4}
               paddingLeft={4}
               paddingRight={4}
@@ -152,7 +152,7 @@ export default function SnapInstall({
         )}
       </Box>
       <Box
-        className="footers"
+        className="snap-install__footer"
         alignItems={AlignItems.center}
         flexDirection={FLEX_DIRECTION.COLUMN}
       >

diff --git a/ui/pages/permissions-connect/snaps/snap-result/index.scss b/ui/pages/permissions-connect/snaps/snap-result/index.scss
@@ -1,10 +1,10 @@
 .snap-result {
   box-shadow: none;
 
-  .headers {
+  &__header {
     flex: 1;
 
-    .loader-container {
+    &__loader-container {
       height: 100%;
     }
   }

diff --git a/ui/pages/permissions-connect/snaps/snap-result/snap-result.js b/ui/pages/permissions-connect/snaps/snap-result/snap-result.js
@@ -48,7 +48,7 @@ export default function SnapResult({
       flexDirection={FLEX_DIRECTION.COLUMN}
     >
       <Box
-        className="headers"
+        className="snap-result__header"
         paddingLeft={4}
         paddingRight={4}
         alignItems={AlignItems.center}
@@ -57,7 +57,7 @@ export default function SnapResult({
         <SnapAuthorship snapId={targetSubjectMetadata.origin} />
         {isLoading && (
           <Box
-            className="loader-container"
+            className="snap-result__header__loader-container"
             flexDirection={FLEX_DIRECTION.COLUMN}
             alignItems={AlignItems.center}
             justifyContent={JustifyContent.center}
@@ -94,7 +94,7 @@ export default function SnapResult({
         )}
       </Box>
       <Box
-        className="footers"
+        className="snap-result__footer"
         alignItems={AlignItems.center}
         flexDirection={FLEX_DIRECTION.COLUMN}
       >

diff --git a/ui/pages/permissions-connect/snaps/snap-update/index.scss b/ui/pages/permissions-connect/snaps/snap-update/index.scss
@@ -1,23 +1,13 @@
 .snap-update {
   box-shadow: none;
 
-  .content {
+  &__content {
     flex: 1;
 
-    .loader-container {
+    &__loader-container {
       height: 100%;
     }
 
-    .update-snap-permission-list {
-      padding: 0 24px;
-
-      .new-permission,
-      .approved-permission,
-      .revoked-permission {
-        padding: 8px 0;
-      }
-    }
-
     &__permission-description {
       border-bottom: 1px solid var(--color-border-default);
     }

diff --git a/ui/pages/permissions-connect/snaps/snap-update/snap-update.js b/ui/pages/permissions-connect/snaps/snap-update/snap-update.js
@@ -90,7 +90,7 @@ export default function SnapUpdate({
       flexDirection={FLEX_DIRECTION.COLUMN}
     >
       <Box
-        className="header"
+        className="snap-update__header"
         paddingLeft={4}
         paddingRight={4}
         alignItems={AlignItems.center}
@@ -107,10 +107,10 @@ export default function SnapUpdate({
           </Text>
         )}
       </Box>
-      <Box className="content">
+      <Box className="snap-update__content">
         {isLoading && (
           <Box
-            className="loader-container"
+            className="snap-update__content__loader-container"
             flexDirection={FLEX_DIRECTION.COLUMN}
             alignItems={AlignItems.center}
             justifyContent={JustifyContent.center}
@@ -124,7 +124,7 @@ export default function SnapUpdate({
         {hasPermissions && (
           <>
             <Text
-              className="content__permission-description"
+              className="snap-update__content__permission-description"
               paddingBottom={4}
               paddingLeft={4}
               paddingRight={4}
@@ -160,7 +160,7 @@ export default function SnapUpdate({
         )}
       </Box>
       <Box
-        className="footers"
+        className="snap-update__footer"
         alignItems={AlignItems.center}
         flexDirection={FLEX_DIRECTION.COLUMN}
       >