Update docs

icflorescu · Nov 13, 2023 · 4e30294 · 4e30294
1 parent 30e18e3
commit 4e30294
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 5 deletions.
diff --git a/app/getting-started/page.tsx b/app/getting-started/page.tsx
@@ -31,8 +31,9 @@ export default async function GettingStartedPage() {
         {PRODUCT_NAME} depends on <Code>@mantine/core</Code>, <Code>@mantine/hooks</Code> and <Code>clsx</Code>.
       </Txt>
       <Txt>
-        Create a new <ExternalLink to={`${MANTINE_LINK}/getting-started/`}>application with Mantine</ExternalLink> and
-        install the package:
+        Create a new <ExternalLink to={`${MANTINE_LINK}/getting-started/`}>application with Mantine</ExternalLink>,
+        install <Code>{process.env.PACKAGE_NAME}</Code> and make sure you have the <Code>clsx</Code> dependency
+        installed as well:
       </Txt>
       <CodeBlock
         tabs={[
@@ -48,8 +49,12 @@ export default async function GettingStartedPage() {
       <Txt>
         Don’t forget to import the necessary CSS files and apply the styles <strong>in the correct order</strong>.
       </Txt>
-      <Txt idea>
+      <Txt warning title="Very important">
         The <Code>@mantine/core</Code> package styles must be applied before {PRODUCT_NAME} styles.
+        <br />
+        Make sure to go through and <strong>understand</strong> the information in the{' '}
+        <InternalLink to="/styling">styling guide</InternalLink> before jumping into examples or starting your own
+        project.
       </Txt>
       <Txt>
         For example, if you’re using a <ExternalLink to={`${MANTINE_LINK}/guides/next/`}></ExternalLink>Next.js

diff --git a/app/styling/page.tsx b/app/styling/page.tsx
@@ -67,7 +67,9 @@ export default async function StylingPage() {
         you to control the order of stylesheets in your application when importing CSS files.
       </Txt>
       <Txt>
-        You can mitigate this by making use of{' '}
+        As Mantine documentation{' '}
+        <ExternalLink to={`${MANTINE_LINK}/styles/mantine-styles/#css-layers`}>suggests</ExternalLink>, you can mitigate
+        this by making use of{' '}
         <ExternalLink to="https://developer.mozilla.org/en-US/docs/Web/CSS/@layer">CSS layers</ExternalLink>.
       </Txt>
       <Txt idea>

diff --git a/components/Txt.module.css b/components/Txt.module.css
@@ -0,0 +1,7 @@
+.alertMessage {
+  line-height: 1.6;
+}
+
+.alertMessageWithoutTitle {
+  margin-top: 0;
+}
diff --git a/components/Txt.tsx b/components/Txt.tsx
@@ -1,5 +1,7 @@
 import { Alert, Text } from '@mantine/core';
 import { IconAlertSquareRoundedFilled, IconBulbFilled, IconInfoCircle } from '@tabler/icons-react';
+import clsx from 'clsx';
+import classes from './Txt.module.css';
 
 export type TxtProps = React.PropsWithChildren<
   | {
@@ -27,7 +29,7 @@ export function Txt({ info, warning, idea, title, children }: TxtProps) {
     <Alert
       my="xl"
       color={warning ? 'red' : idea ? 'orange' : undefined}
-      styles={{ message: { lineHeight: 1.6 } }}
+      classNames={{ message: clsx(classes.alertMessage, { [classes.alertMessageWithoutTitle]: !title }) }}
       icon={info ? <IconInfoCircle /> : idea ? <IconBulbFilled /> : <IconAlertSquareRoundedFilled />}
       title={title}
     >