fix(categories): fix root/child themes styles

SocialGouv · Oct 3, 2018 · caea169 · caea169
1 parent c1243b6
commit caea169
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 9 deletions.
diff --git a/pages/theme.js b/pages/theme.js
@@ -116,7 +116,11 @@ class Theme extends React.Component {
           {(theme &&
             theme.children &&
             theme.children.length && (
-              <Categories title={null} themes={theme.children} />
+              <Categories
+                isRoot={parents.length === 0}
+                title={null}
+                themes={theme.children}
+              />
             )) ||
             null}
           {theme &&

diff --git a/src/Categories.js b/src/Categories.js
@@ -1,21 +1,22 @@
 import React from "react";
 import { Link } from "../routes";
 
-import {
-  BreadCrumbs,
-  Container,
-  Categories
-} from "@socialgouv/code-du-travail-ui";
+import { Container, Categories } from "@socialgouv/code-du-travail-ui";
 
 import themes from "./data/themes2";
 
 const Category = ({
   title,
   text,
   slug,
+  small = false,
   icon = "/static/assets/icons/chat.svg"
 }) => (
-  <li className="categories__list-item categories__list-item--small">
+  <li
+    className={`categories__list-item ${(small &&
+      "categories__list-item--small") ||
+      ""}`}
+  >
     <Link route="theme" params={{ slug: slug || "/" }}>
       <a title={title}>
         <figure>
@@ -32,7 +33,7 @@ const Category = ({
 
 class _Categories extends React.Component {
   render() {
-    const { title, themes } = this.props;
+    const { title, themes, isRoot } = this.props;
     return (
       (themes.length && (
         <Container>
@@ -45,7 +46,11 @@ class _Categories extends React.Component {
           )}
           <Categories>
             {themes.map(theme => (
-              <Category key={theme.slug + theme.title} {...theme} />
+              <Category
+                key={theme.slug + theme.title}
+                small={!isRoot}
+                {...theme}
+              />
             ))}
           </Categories>
           <br />