From 42c46ad2586407b8a4a23ac3b915def22aa1eb66 Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <asaadmahmood@users.noreply.github.com>
Date: Fri, 16 Dec 2022 20:47:03 +0500
Subject: [PATCH] GH-4332 - Updating card editor classes (#4350)

---
 .../__snapshots__/cardDialog.test.tsx.snap    | 26 +++++++++----------
 .../__snapshots__/cardDetail.test.tsx.snap    |  2 +-
 .../src/components/cardDetail/cardDetail.scss |  2 +-
 .../src/components/cardDetail/cardDetail.tsx  |  4 +--
 webapp/src/components/dialog.scss             |  4 +--
 5 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/webapp/src/components/__snapshots__/cardDialog.test.tsx.snap b/webapp/src/components/__snapshots__/cardDialog.test.tsx.snap
index 8b46e1a21..09e1eab15 100644
--- a/webapp/src/components/__snapshots__/cardDialog.test.tsx.snap
+++ b/webapp/src/components/__snapshots__/cardDialog.test.tsx.snap
@@ -72,7 +72,7 @@ exports[`components/cardDialog already following card 1`] = `
           </div>
         </div>
         <div
-          class="CardDetail content"
+          class="CardDetail "
         >
           <div
             class="IconSelector"
@@ -165,7 +165,7 @@ exports[`components/cardDialog already following card 1`] = `
           </div>
         </div>
         <div
-          class="CardDetail content fullwidth content-blocks"
+          class="CardDetail CardDetail--fullwidth content-blocks"
         >
           <div
             class="octo-content CardDetailContents"
@@ -250,7 +250,7 @@ exports[`components/cardDialog limited card shows hidden view (no toolbar) 1`] =
           </div>
         </div>
         <div
-          class="CardDetail content is-limited"
+          class="CardDetail  CardDetail--is-limited"
         >
           <div
             class="IconSelector"
@@ -501,7 +501,7 @@ exports[`components/cardDialog return a cardDialog readonly 1`] = `
           </div>
         </div>
         <div
-          class="CardDetail content"
+          class="CardDetail "
         >
           <div
             class="IconSelector"
@@ -551,7 +551,7 @@ exports[`components/cardDialog return a cardDialog readonly 1`] = `
           />
         </div>
         <div
-          class="CardDetail content fullwidth content-blocks"
+          class="CardDetail CardDetail--fullwidth content-blocks"
         >
           <div
             class="octo-content CardDetailContents"
@@ -780,7 +780,7 @@ exports[`components/cardDialog return cardDialog menu content 1`] = `
           </div>
         </div>
         <div
-          class="CardDetail content"
+          class="CardDetail "
         >
           <div
             class="IconSelector"
@@ -873,7 +873,7 @@ exports[`components/cardDialog return cardDialog menu content 1`] = `
           </div>
         </div>
         <div
-          class="CardDetail content fullwidth content-blocks"
+          class="CardDetail CardDetail--fullwidth content-blocks"
         >
           <div
             class="octo-content CardDetailContents"
@@ -990,7 +990,7 @@ exports[`components/cardDialog return cardDialog menu content and cancel delete
           </div>
         </div>
         <div
-          class="CardDetail content"
+          class="CardDetail "
         >
           <div
             class="IconSelector"
@@ -1083,7 +1083,7 @@ exports[`components/cardDialog return cardDialog menu content and cancel delete
           </div>
         </div>
         <div
-          class="CardDetail content fullwidth content-blocks"
+          class="CardDetail CardDetail--fullwidth content-blocks"
         >
           <div
             class="octo-content CardDetailContents"
@@ -1200,7 +1200,7 @@ exports[`components/cardDialog should match snapshot 1`] = `
           </div>
         </div>
         <div
-          class="CardDetail content"
+          class="CardDetail "
         >
           <div
             class="IconSelector"
@@ -1293,7 +1293,7 @@ exports[`components/cardDialog should match snapshot 1`] = `
           </div>
         </div>
         <div
-          class="CardDetail content fullwidth content-blocks"
+          class="CardDetail CardDetail--fullwidth content-blocks"
         >
           <div
             class="octo-content CardDetailContents"
@@ -1400,7 +1400,7 @@ exports[`components/cardDialog should match snapshot without permissions 1`] = `
           </div>
         </div>
         <div
-          class="CardDetail content"
+          class="CardDetail "
         >
           <div
             class="IconSelector"
@@ -1450,7 +1450,7 @@ exports[`components/cardDialog should match snapshot without permissions 1`] = `
           />
         </div>
         <div
-          class="CardDetail content fullwidth content-blocks"
+          class="CardDetail CardDetail--fullwidth content-blocks"
         >
           <div
             class="octo-content CardDetailContents"
diff --git a/webapp/src/components/cardDetail/__snapshots__/cardDetail.test.tsx.snap b/webapp/src/components/cardDetail/__snapshots__/cardDetail.test.tsx.snap
index 12024c2ba..10113eaad 100644
--- a/webapp/src/components/cardDetail/__snapshots__/cardDetail.test.tsx.snap
+++ b/webapp/src/components/cardDetail/__snapshots__/cardDetail.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`components/cardDetail/CardDetail should render hidden view if limited 1`] = `
 <div>
   <div
-    class="CardDetail content is-limited"
+    class="CardDetail  CardDetail--is-limited"
   >
     <div
       class="IconSelector"
diff --git a/webapp/src/components/cardDetail/cardDetail.scss b/webapp/src/components/cardDetail/cardDetail.scss
index 9bdbb0fac..91ad4ee3f 100644
--- a/webapp/src/components/cardDetail/cardDetail.scss
+++ b/webapp/src/components/cardDetail/cardDetail.scss
@@ -175,7 +175,7 @@
         }
     }
 
-    &.content.is-limited {
+    &.CardDetail--is-limited {
         flex: 1;
     }
 
diff --git a/webapp/src/components/cardDetail/cardDetail.tsx b/webapp/src/components/cardDetail/cardDetail.tsx
index 477ae166b..0aa50bae5 100644
--- a/webapp/src/components/cardDetail/cardDetail.tsx
+++ b/webapp/src/components/cardDetail/cardDetail.tsx
@@ -195,7 +195,7 @@ const CardDetail = (props: Props): JSX.Element|null => {
 
     return (
         <>
-            <div className={`CardDetail content${limited ? ' is-limited' : ''}`}>
+            <div className={`CardDetail ${limited ? ' CardDetail--is-limited' : ''}`}>
                 <BlockIconSelector
                     block={card}
                     size='l'
@@ -314,7 +314,7 @@ const CardDetail = (props: Props): JSX.Element|null => {
 
             {/* Content blocks */}
 
-            {!limited && <div className='CardDetail content fullwidth content-blocks'>
+            {!limited && <div className='CardDetail CardDetail--fullwidth content-blocks'>
                 {newBoardsEditor && (
                     <BlocksEditor
                         boardId={card.boardId}
diff --git a/webapp/src/components/dialog.scss b/webapp/src/components/dialog.scss
index 830eec5da..a5a9e98c1 100644
--- a/webapp/src/components/dialog.scss
+++ b/webapp/src/components/dialog.scss
@@ -118,7 +118,7 @@
             height: 28px;
         }
 
-        > .content {
+        > .CardDetail {
             display: flex;
             flex-direction: column;
             align-items: flex-start;
@@ -132,7 +132,7 @@
             }
         }
 
-        > .content.fullwidth {
+        > .CardDetail--fullwidth {
             padding-left: 78px;
         }
     }