fix border dynamic color change

subvisual · Oct 3, 2024 · f4f6c9e · f4f6c9e
1 parent 825625f
commit f4f6c9e
Show file tree

Hide file tree

Showing 5 changed files with 6 additions and 13 deletions.
diff --git a/package.json b/package.json
@@ -29,6 +29,7 @@
     "@payloadcms/plugin-seo": "^1.0.10",
     "@payloadcms/richtext-lexical": "^0.11.3",
     "@payloadcms/richtext-slate": "^1.0.0",
+    "clsx": "^2.1.1",
     "cross-env": "^7.0.3",
     "dotenv": "^8.2.0",
     "escape-html": "^1.0.3",

diff --git a/src/app/_blocks/HubContentGrid/index.tsx b/src/app/_blocks/HubContentGrid/index.tsx
@@ -26,12 +26,6 @@ export default function HubContentGrid({ articles }: HubContentGridProps) {
 
   const [activeButton, setActiveButton] = useState<keyof ContentTypeArrays | 'All'>('All')
 
-  let windowWidth = window.innerWidth
-
-  window.addEventListener('resize', () => {
-    windowWidth = window.innerWidth
-  })
-
   const handleActiveButtonChange = (buttonName: keyof ContentTypeArrays) => {
     setActiveButton(buttonName)
   }
@@ -47,9 +41,7 @@ export default function HubContentGrid({ articles }: HubContentGridProps) {
       <ContentNavBar activeButton={activeButton} onActiveButtonChange={handleActiveButtonChange} />
       <div
         className={styles.contentGridContainer}
-        style={{
-          borderColor: windowWidth >= 1024 ? colorMap[activeButton] : 'var(--dark-rock-800)',
-        }}
+        style={{ '--dynamic-color': colorMap[activeButton] }}
       >
         <div className={styles.contentGrid}>
           {filteredArticles.map((article, i) => (

diff --git a/src/app/_blocks/HubContentGrid/styles.module.css b/src/app/_blocks/HubContentGrid/styles.module.css
@@ -7,7 +7,7 @@
   border-bottom-right-radius: 45px;
   border-bottom-left-radius: 45px;
   border-top-right-radius: 45px;
-  border: 1px solid;
+  border: 1px solid var(--dark-rock-800);
   border-top: none;
   overflow: hidden;
   z-index: 3;
@@ -36,7 +36,7 @@
   }
 
   .contentGridContainer {
-    border-top: 1px solid;
+    border-top: 1px solid var(--dynamic-color);
     border-radius: 25px;
     margin: 0 auto;
   }

diff --git a/src/app/_blocks/HubHead/Highlights/index.tsx b/src/app/_blocks/HubHead/Highlights/index.tsx
@@ -16,7 +16,7 @@ export function Highlights({ content, main }) {
       <h6> {title} </h6>
       <div className={styles.metadataContainer}>
         {/* TODO: is this a good approach for multi category items? */}
-        {categories.length > 1 ? (
+        {categories.length > 5 ? (
           <CategoryPill title={categories[0].title} />
         ) : (
           categories.map((category, i) => <CategoryPill key={i} title={category.title} />)

diff --git a/yarn.lock b/yarn.lock
@@ -3452,7 +3452,7 @@ clone-deep@^4.0.1:
     kind-of "^6.0.2"
     shallow-clone "^3.0.0"
 
-clsx@^2.1.0:
+clsx@^2.1.0, clsx@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999"
   integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==