Refactor: Apply BEM namings

redhat-cop · Jan 10, 2023 · 0b62008 · 0b62008
1 parent 03bee7d
commit 0b62008
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 9 deletions.
diff --git a/catalog/ui/src/app/Workshop/WorkshopContent.tsx b/catalog/ui/src/app/Workshop/WorkshopContent.tsx
@@ -35,22 +35,22 @@ const WorkshopContent: React.FC<{
   }
 
   return (
-    <PageSection variant={PageSectionVariants.light} className="workshop-access" padding={{ default: 'noPadding' }}>
+    <PageSection variant={PageSectionVariants.light} className="workshop-content" padding={{ default: 'noPadding' }}>
       <Hero image={heroImg}>
         <Title headingLevel="h1" size="xl" style={{ fontSize: '40px' }}>
           <b>{displayName}</b>
         </Title>
       </Hero>
-      <Stack hasGutter className="workshop-access__content">
+      <Stack hasGutter className="workshop-content__wrapper">
         <StackItem>
           <Bullseye>
-            <Title headingLevel="h3" className="workshop-access__title">
+            <Title headingLevel="h3" className="workshop-content__title">
               Instructions for {displayName}
             </Title>
           </Bullseye>
         </StackItem>
         {description ? (
-          <StackItem className="workshop-access__description">
+          <StackItem className="workshop-content__description">
             <div>
               {renderEditor ? (
                 <EditorViewer value={description} />

diff --git a/catalog/ui/src/app/Workshop/workshop-content.css b/catalog/ui/src/app/Workshop/workshop-content.css
@@ -1,18 +1,18 @@
-.workshop-access .pf-c-description-list__group {
+.workshop-content .pf-c-description-list__group {
   padding: var(--pf-global--spacer--md);
   background-color: var(--pf-global--palette--white);
   border-radius: 4px;
   box-shadow: 0 1px 5px 0 rgb(3 3 3 / 12%), 0 0 1px 0 rgb(3 3 3 / 6%);
 }
-.workshop-access__title,
-.workshop-access__description {
+.workshop-content__title,
+.workshop-content__description {
   text-align: center;
   padding-bottom: var(--pf-global--spacer--md);
   line-height: 1;
 }
-.workshop-access__content {
+.workshop-content__wrapper {
   width: 1100px;
   height: auto;
-  margin: 0 auto;
+  margin: 0 auto var(--pf-global--spacer--xl);
   padding: var(--pf-global--spacer--lg) var(--pf-global--spacer--md);
 }