Move global shadows scss to module scss (#50167)

Joshuacobarrubia · Apr 16, 2024 · d945c30 · d945c30
1 parent 840606c
commit d945c30
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 5 deletions.
diff --git a/src/frame/stylesheets/index.scss b/src/frame/stylesheets/index.scss
@@ -10,7 +10,6 @@
 
 @import "headings.scss";
 @import "scroll-top.scss";
-@import "shadows.scss";
 @import "utilities.scss";
 
 @import "src/content-render/stylesheets/index.scss";

diff --git a/src/landings/components/GuideCard.tsx b/src/landings/components/GuideCard.tsx
@@ -1,4 +1,8 @@
 import type { FeaturedLink } from 'src/landings/components/ProductLandingContext'
+import cx from 'classnames'
+import styles from './Landings.module.scss'
+
+const { hoverShadowLarge } = styles
 
 type Props = {
   guide: FeaturedLink
@@ -10,7 +14,10 @@ export const GuideCard = ({ guide }: Props) => {
   return (
     <li className="col-lg-4 col-12 mb-4 list-style-none">
       <a
-        className="Box color-shadow-medium height-full d-block hover-shadow-large no-underline color-fg-default p-5"
+        className={cx(
+          'Box color-shadow-medium height-full d-block no-underline color-fg-default p-5',
+          hoverShadowLarge,
+        )}
         href={guide.href}
       >
         <h3 className="f2">{guide.title}</h3>

diff --git a/src/frame/stylesheets/shadows.scss → src/landings/components/Landings.module.scss b/src/frame/stylesheets/shadows.scss → src/landings/components/Landings.module.scss
@@ -1,4 +1,4 @@
-.hover-shadow-large {
+.hoverShadowLarge {
   transition: box-shadow 0.3s ease-in-out;
 
   &:hover {

diff --git a/src/landings/components/RepoCard.tsx b/src/landings/components/RepoCard.tsx
@@ -1,3 +1,7 @@
+import cx from 'classnames'
+import styles from './Landings.module.scss'
+const { hoverShadowLarge } = styles
+
 type Props = {
   repo: {
     repo: string
@@ -8,7 +12,10 @@ type Props = {
 export const RepoCard = ({ repo, href }: Props) => {
   return (
     <a
-      className="Box d-flex height-full color-shadow-medium hover-shadow-large no-underline color-fg-default p-4"
+      className={cx(
+        'Box d-flex height-full color-shadow-medium no-underline color-fg-default p-4',
+        hoverShadowLarge,
+      )}
       href={href || `https://github.com/${repo.repo}`}
     >
       <div className="flex-shrink-0 mr-3">

diff --git a/src/landings/components/UserCard.tsx b/src/landings/components/UserCard.tsx
@@ -1,3 +1,7 @@
+import cx from 'classnames'
+import styles from './Landings.module.scss'
+const { hoverShadowLarge } = styles
+
 type Props = {
   user: {
     username: string
@@ -8,7 +12,10 @@ type Props = {
 export const UserCard = ({ user, href }: Props) => {
   return (
     <a
-      className="Box d-flex height-full color-shadow-medium hover-shadow-large no-underline color-fg-default p-4"
+      className={cx(
+        'Box d-flex height-full color-shadow-medium no-underline color-fg-default p-4',
+        hoverShadowLarge,
+      )}
       href={href || `https://github.com/${user.username}`}
     >
       <div className="flex-shrink-0 mr-3">