From df014a4715a4b4c151cc6c4aecfa2b5272e926b5 Mon Sep 17 00:00:00 2001
From: Ahmad Abdolsaheb <ahmad.abdolsaheb@gmail.com>
Date: Thu, 28 Jan 2021 20:39:16 +0300
Subject: [PATCH] fix(client): add visual hierarchy to card blocks (#40822)

---
 .../templates/Introduction/SuperBlockIntro.js |  3 +++
 .../Introduction/components/Block.js          |  2 --
 client/src/templates/Introduction/intro.css   | 24 +++++++++++++++----
 3 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/client/src/templates/Introduction/SuperBlockIntro.js b/client/src/templates/Introduction/SuperBlockIntro.js
index 6d0379f07b5..401999fc8dd 100644
--- a/client/src/templates/Introduction/SuperBlockIntro.js
+++ b/client/src/templates/Introduction/SuperBlockIntro.js
@@ -190,6 +190,9 @@ export class SuperBlockIntroductionPage extends Component {
                       )}
                       superBlockDashedName={superBlockDashedName}
                     />
+                    {blockDashedName !== 'project-euler' ? (
+                      <Spacer size={2} />
+                    ) : null}
                   </div>
                 ))}
                 {superBlock !== 'Coding Interview Prep' && (
diff --git a/client/src/templates/Introduction/components/Block.js b/client/src/templates/Introduction/components/Block.js
index 997d4627df7..09357e83737 100644
--- a/client/src/templates/Introduction/components/Block.js
+++ b/client/src/templates/Introduction/components/Block.js
@@ -11,7 +11,6 @@ import Challenges from './Challenges';
 import Caret from '../../../assets/icons/Caret';
 import GreenPass from '../../../assets/icons/GreenPass';
 import GreenNotCompleted from '../../../assets/icons/GreenNotCompleted';
-import { Spacer } from '../../../components/helpers';
 
 const mapStateToProps = (state, ownProps) => {
   const expandedSelector = makeExpandedBlockSelector(ownProps.blockDashedName);
@@ -166,7 +165,6 @@ export class Block extends Component {
             isProjectBlock={isProjectBlock}
           />
         )}
-        {blockDashedName !== 'project-euler' ? <Spacer size={2} /> : null}
       </div>
     );
   }
diff --git a/client/src/templates/Introduction/intro.css b/client/src/templates/Introduction/intro.css
index 412e269b748..a9d657844e1 100644
--- a/client/src/templates/Introduction/intro.css
+++ b/client/src/templates/Introduction/intro.css
@@ -51,7 +51,7 @@
 
 button.map-title {
   cursor: pointer;
-  padding: 18px 8px;
+  padding: 18px 15px;
 }
 
 .map-title:hover {
@@ -77,7 +77,7 @@ button.map-title {
   display: flex;
   align-items: center;
   padding: 18px 8px;
-  background: transparent;
+  background: var(--secondary-background);
   border: none;
   text-align: left;
   width: 100%;
@@ -96,6 +96,18 @@ button.map-title {
   background-color: var(--tertiary-background);
 }
 
+.block-ui .block {
+  background: var(--primary-background);
+}
+
+.block-ui .block .big-block-title {
+  padding: 25px 15px 10px;
+}
+.block-ui .block .block-description {
+  padding: 0 15px 15px;
+  border-bottom: 3px solid var(--secondary-background);
+}
+
 .map-cert-title > h3 {
   font-size: 1.17rem;
   margin: 0 0 0 15px;
@@ -134,10 +146,14 @@ button.map-title {
   stroke: var(--color-quaternary);
 }
 
-.open > .map-title svg:first-child {
+.map-title svg:first-child {
   transform: rotate(90deg);
 }
 
+.open > .map-title svg:first-child {
+  transform: rotate(-90deg);
+}
+
 .map-challenges-ul {
   padding-inline-start: 0;
 }
@@ -151,7 +167,7 @@ button.map-title {
 
 .map-challenge-title a {
   width: 100%;
-  padding: 10px 20px 10px 30px;
+  padding: 10px 15px;
 }
 
 .block-description {