fix: guide markown spacing

trezor · Oct 2, 2024 · 862e7e2 · 862e7e2
1 parent 622098d
commit 862e7e2
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 42 deletions.
diff --git a/packages/components/src/components/Markdown/Markdown.tsx b/packages/components/src/components/Markdown/Markdown.tsx
@@ -2,21 +2,20 @@ import styled from 'styled-components';
 
 import ReactMarkdown, { Options } from 'react-markdown';
 import { variables } from '../../config';
+import { typography } from '@trezor/theme';
 
 const StyledMarkdown = styled.div`
-    color: ${({ theme }) => theme.legacy.TYPE_LIGHT_GREY};
-    font-size: ${variables.FONT_SIZE.SMALL};
-    font-weight: ${variables.FONT_WEIGHT.MEDIUM};
-    line-height: 1.5;
-    padding: 0 0 32px;
+    ${typography.hint}
+
+    color: ${({ theme }) => theme.textSubdued};
 
     h1,
     h2,
     h3,
     h4,
     h5,
     h6 {
-        color: ${({ theme }) => theme.legacy.TYPE_DARK_GREY};
+        color: ${({ theme }) => theme.textDefault};
         font-weight: ${variables.FONT_WEIGHT.DEMI_BOLD};
     }
 
@@ -54,7 +53,7 @@ const StyledMarkdown = styled.div`
     }
 
     a {
-        color: ${({ theme }) => theme.legacy.TYPE_GREEN};
+        color: ${({ theme }) => theme.textPrimaryDefault};
 
         &:hover {
             text-decoration: underline;
@@ -70,10 +69,8 @@ const StyledMarkdown = styled.div`
     }
 `;
 
-export const Markdown = (options: Readonly<Options>) => {
-    return (
-        <StyledMarkdown>
-            <ReactMarkdown {...options}></ReactMarkdown>
-        </StyledMarkdown>
-    );
-};
+export const Markdown = (options: Readonly<Options>) => (
+    <StyledMarkdown>
+        <ReactMarkdown {...options}></ReactMarkdown>
+    </StyledMarkdown>
+);
diff --git a/packages/suite/src/components/guide/Guide.tsx b/packages/suite/src/components/guide/Guide.tsx
@@ -12,13 +12,8 @@ import {
     GuideCategories,
     GuideSearch,
 } from 'src/components/guide';
-import { Icon } from '@trezor/components';
+import { Column, Divider, Icon } from '@trezor/components';
 
-const FeedbackBorder = styled.div`
-    height: 1px;
-    background-color: ${({ theme }) => theme.borderElevation1};
-    margin: 0 ${spacingsPx.md};
-`;
 const FeedbackLinkWrapper = styled.div`
     padding: ${spacingsPx.md};
 `;
@@ -79,25 +74,34 @@ export const Guide = () => {
     return (
         <GuideViewWrapper>
             <GuideHeader label={<Translation id="TR_GUIDE_VIEW_HEADLINE_LEARN_AND_DISCOVER" />} />
-            <GuideContent>
-                <GuideSearch pageRoot={indexNode} setSearchActive={setSearchActive} />
-                {!searchActive && <GuideCategories node={indexNode} />}
-            </GuideContent>
-            <FeedbackBorder />
-            <FeedbackLinkWrapper>
-                <FeedbackButton
-                    data-testid="@guide/button-feedback"
-                    onClick={handleFeedbackButtonClick}
-                >
-                    <Icon name="users" size={24} color={theme.iconOnTertiary} />
-                    <FeedbackButtonLabel>
-                        <Translation id="TR_GUIDE_SUPPORT_AND_FEEDBACK" />
-                    </FeedbackButtonLabel>
-                    <FeedbackIconWrapper>
-                        <Icon name="circleRight" size={24} color={theme.iconPrimaryDefault} />
-                    </FeedbackIconWrapper>
-                </FeedbackButton>
-            </FeedbackLinkWrapper>
+            <Column justifyContent="space-between" alignItems="stretch" height="100%">
+                <GuideContent>
+                    <GuideSearch pageRoot={indexNode} setSearchActive={setSearchActive} />
+                    {!searchActive && <GuideCategories node={indexNode} />}
+                </GuideContent>
+
+                <div>
+                    <Divider margin={{ bottom: 0, top: 0 }} />
+                    <FeedbackLinkWrapper>
+                        <FeedbackButton
+                            data-testid="@guide/button-feedback"
+                            onClick={handleFeedbackButtonClick}
+                        >
+                            <Icon name="users" size={24} color={theme.iconOnTertiary} />
+                            <FeedbackButtonLabel>
+                                <Translation id="TR_GUIDE_SUPPORT_AND_FEEDBACK" />
+                            </FeedbackButtonLabel>
+                            <FeedbackIconWrapper>
+                                <Icon
+                                    name="circleRight"
+                                    size={24}
+                                    color={theme.iconPrimaryDefault}
+                                />
+                            </FeedbackIconWrapper>
+                        </FeedbackButton>
+                    </FeedbackLinkWrapper>
+                </div>
+            </Column>
         </GuideViewWrapper>
     );
 };
diff --git a/packages/suite/src/components/guide/GuideArticle.tsx b/packages/suite/src/components/guide/GuideArticle.tsx
@@ -1,8 +1,15 @@
+import styled from 'styled-components';
+
 import { useSelector } from 'src/hooks/suite';
 import { GuideHeader, GuideContent, GuideViewWrapper, GuideMarkdown } from 'src/components/guide';
 import { Translation } from 'src/components/suite';
 import { useGuideLoadArticle } from 'src/hooks/guide';
 import { selectLanguage } from 'src/reducers/suite/suiteReducer';
+import { spacingsPx } from '@trezor/theme';
+
+const ArticleWrapper = styled.div`
+    padding-bottom: ${spacingsPx.xxl};
+`;
 
 export const GuideArticle = () => {
     const currentNode = useSelector(state => state.guide.currentNode);
@@ -14,7 +21,9 @@ export const GuideArticle = () => {
         <GuideViewWrapper>
             <GuideHeader useBreadcrumb />
             <GuideContent>
-                <GuideMarkdown markdown={markdown} />
+                <ArticleWrapper>
+                    <GuideMarkdown markdown={markdown} />
+                </ArticleWrapper>
                 {hasError && <Translation id="TR_GENERIC_ERROR_TITLE" />}
             </GuideContent>
         </GuideViewWrapper>

diff --git a/packages/suite/src/components/guide/GuideContent.tsx b/packages/suite/src/components/guide/GuideContent.tsx
@@ -1,9 +1,10 @@
 import { ReactNode } from 'react';
 import styled from 'styled-components';
+import { spacingsPx } from '@trezor/theme';
 
 const Wrapper = styled.div`
-    height: 100%;
-    padding: 15px 21px 0;
+    padding: ${spacingsPx.md} ${spacingsPx.lg} 0;
+    flex: 1;
 `;
 
 type GuideContentProps = {