styles

Vizzuality · Apr 10, 2024 · 710f4cb · 710f4cb
1 parent 3864421
commit 710f4cb
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 10 deletions.
diff --git a/client/src/containers/datasets/item.tsx b/client/src/containers/datasets/item.tsx
@@ -5,6 +5,7 @@ import { useCallback } from 'react';
 import Markdown from 'react-markdown';
 
 import { Info as InfoIcon } from 'lucide-react';
+import remarkGfm from 'remark-gfm';
 
 import type { LayerListResponseDataItem } from '@/types/generated/strapi.schemas';
 
@@ -58,9 +59,16 @@ export default function DatasetsItem(props: LayerListResponseDataItem) {
                 {/* {props.attributes.title} */}
                 {props.attributes.name}
               </h3>
-              <div className="border-b border-t border-gray-100 py-2.5">
+              <div className="border-b border-t border-gray-100">
+                {/* <Info /> */}
+
                 {props.attributes.dialog && (
-                  <div dangerouslySetInnerHTML={{ __html: props.attributes.dialog }} />
+                  <Markdown
+                    remarkPlugins={[remarkGfm]}
+                    className="prose info-dialog px-6 py-4 text-xs"
+                  >
+                    {props.attributes.dialog}
+                  </Markdown>
                 )}
               </div>
               <div className="flex w-full px-6 pb-4">

diff --git a/client/src/styles/globals.css b/client/src/styles/globals.css
@@ -89,13 +89,32 @@ input[type="search"]::-webkit-search-cancel-button,
 input[type="search"]::-webkit-search-results-button,
 input[type="search"]::-webkit-search-results-decoration { display: none; }
 
-.info-layer {
-  display: flex;
-  flex-direction: column;
-  padding: 24px;
-}
+.info-dialog {
+  color: #9CA3AF;
+  font-size: 12px;
+  max-width: none;
+
+  h3 {
+    color: #9CA3AF;
+    font-size: 12px;
+    font-weight: 600;
+    margin-top: 10px;
+    text-transform: uppercase;
+  }
+
+  a {
+    color: #EFB82A;
+    &:hover {
+      text-decoration: none;
+    }
+  }
+
+  p {
+    border-bottom: dashed 1px #D8E4E2;
+    padding-bottom: 12px;
+  }
 
-.info-layer-block {
-  display: flex;
-  margin-bottom: 16px;
+  p:last-of-type {
+    border-bottom: none;
+  }
 }