From a71d794780fad610aaeb39950bb89ba4a3865c6a Mon Sep 17 00:00:00 2001
From: Alvin Bryan <107407814+alvinometric@users.noreply.github.com>
Date: Fri, 19 Apr 2024 13:09:19 +0100
Subject: [PATCH] Correctly applied styles to `Figure` component in docs
 (#6894)

It turns out the styles that we had in `style.modules.css` were
overridden by browser defaults.

## Before


![image](https://github.com/Unleash/unleash/assets/107407814/c43dee92-c055-4e16-a632-c462dbf3ed59)


## After


![image](https://github.com/Unleash/unleash/assets/107407814/de84166a-8798-4be7-8639-6cae042fc89f)


Now taking into account all the styles that were in the CSS files
(notice margin and border)
---
 website/src/components/Figure/Figure.tsx        | 5 ++---
 website/src/components/Figure/styles.module.css | 8 ++++----
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/website/src/components/Figure/Figure.tsx b/website/src/components/Figure/Figure.tsx
index 89d7e2ea20..95624e2e69 100644
--- a/website/src/components/Figure/Figure.tsx
+++ b/website/src/components/Figure/Figure.tsx
@@ -66,8 +66,7 @@
 // biome-ignore lint/style/useImportType: <explanation>
 import React from 'react';
 import useBaseUrl from '@docusaurus/useBaseUrl';
-
-import './styles.module.css';
+import styles from './styles.module.css';
 
 type Props = {
     // An optional alt text, if the caption does not already convey all relevant
@@ -81,7 +80,7 @@ type Props = {
 
 const Component: React.FC<Props> = ({ img, alt, caption }) => {
     return (
-        <figure>
+        <figure className={styles.figure}>
             <img alt={alt} src={useBaseUrl(img)} />
             <figcaption>{caption}</figcaption>
         </figure>
diff --git a/website/src/components/Figure/styles.module.css b/website/src/components/Figure/styles.module.css
index 514dafce5f..6b0db0a661 100644
--- a/website/src/components/Figure/styles.module.css
+++ b/website/src/components/Figure/styles.module.css
@@ -1,5 +1,5 @@
 /* Figures (with captions) */
-.main-wrapper figure {
+.figure {
     box-shadow: var(--ifm-global-shadow-lw);
     border-radius: var(--ifm-global-radius);
     border: var(--ifm-global-border-width) solid var(--unleash-color-gray);
@@ -7,16 +7,16 @@
     margin-inline: 0;
 }
 
-figure img {
+.figure img {
     box-shadow: none;
     border: none;
 }
 
-figure * + * {
+.figure * + * {
     margin-block-start: var(--ifm-pre-padding);
 }
 
-figcaption {
+.figure figcaption {
     font-size: var(--unleash-font-size-smaller);
     padding-inline: var(--ifm-pre-padding);
     border-inline-start: 5px solid var(--ifm-color-primary);