Skip to content

Commit

Permalink
DIFM: Update landing page styling to use WordPress blue (#98141)
Browse files Browse the repository at this point in the history
* Enhance styling of FoldableFAQ and CTA components in difm-landing.tsx

- Added border-radius to FoldableFAQ
- Updated `border` and `box-shadow` colors to use `studio-wordpress-blue-50` for consistency.
- Adjusted button styling in CTASectionWrapper to include border-radius and updated color references.
  • Loading branch information
michalczaplinski authored Jan 14, 2025
1 parent f64616f commit 75929d8
Showing 1 changed file with 7 additions and 10 deletions.
17 changes: 7 additions & 10 deletions client/my-sites/marketing/do-it-for-me/difm-landing.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -128,6 +128,7 @@ const FAQSection = styled.div`
const FoldableFAQ = styled( FoldableFAQComponent )`
border: 1px solid #e9e9ea;
padding: 0;
border-radius: 4px;
margin-bottom: 24px;
.foldable-faq__question {
padding: 24px 16px 24px 24px;
Expand All @@ -144,12 +145,7 @@ const FoldableFAQ = styled( FoldableFAQComponent )`
}
}
&.is-expanded {
border: 2px solid var( --studio-blue-50 );
background: linear-gradient(
180deg,
rgba( 6, 117, 196, 0.2 ) -44.3%,
rgba( 255, 255, 255, 0 ) 100%
);
border: 2px solid var( --studio-wordpress-blue-50 );
.foldable-faq__answer {
margin: 0 16px 24px 0;
ul {
Expand All @@ -158,8 +154,7 @@ const FoldableFAQ = styled( FoldableFAQComponent )`
}
}
&:not( .is-expanded ) .foldable-faq__question:focus {
box-shadow: 0 0 0 var( --wp-admin-border-width-focus )
var( --wp-components-color-accent, var( --wp-admin-theme-color, #3858e9 ) );
box-shadow: 0 0 0 var( --studio-wordpress-blue-50, var( --wp-admin-theme-color, #3858e9 ) );
outline: 3px solid transparent;
}
.foldable-faq__answer {
Expand Down Expand Up @@ -187,10 +182,12 @@ const CTASectionWrapper = styled.div`
}
}
.components-button.is-secondary {
box-shadow: inset 0 0 0 1px var( --studio-blue-50, var( --wp-admin-theme-color, #3858e9 ) );
border-radius: 4px;
box-shadow: inset 0 0 0 1px
var( --studio-wordpress-blue-50, var( --wp-admin-theme-color, #3858e9 ) );
outline: 1px solid transparent;
white-space: nowrap;
color: var( --studio-blue-50, var( --wp-admin-theme-color, #3858e9 ) );
color: var( --studio-wordpress-blue-50, var( --wp-admin-theme-color, #3858e9 ) );
background: transparent;
border: none;
&:focus {
Expand Down

0 comments on commit 75929d8

Please sign in to comment.