Add documentation link and icon

constantgillet · Apr 27, 2024 · 7dbc3da · 7dbc3da
1 parent 058eb34
commit 7dbc3da
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 6 deletions.
diff --git a/app/components/Icon.tsx b/app/components/Icon.tsx
@@ -32,7 +32,8 @@ export type IconName =
   | "text-case-lowercase"
   | "image"
   | "arrow-upload"
-  | "checkmark-circle";
+  | "checkmark-circle"
+  | "open";
 
 export const iconStyle = cva({
   base: {

diff --git a/app/routes/_app._main-layout.onboarding.tsx b/app/routes/_app._main-layout.onboarding.tsx
@@ -385,6 +385,18 @@ const SecondStepComponent = ({ templateId }: { templateId: string | null }) => {
           </div>
         </div>
       )}
+      <div>
+        If you need more information, you can check the{" "}
+        <a
+          href="https://docs.rendless.com"
+          className={css({
+            color: "var(--accent-9)",
+            textDecoration: "underline",
+          })}
+        >
+          documentation
+        </a>
+      </div>
     </div>
   );
 };
diff --git a/app/routes/_app._main-layout.tsx b/app/routes/_app._main-layout.tsx
@@ -120,11 +120,16 @@ export default function MainLayout() {
           </div>
           <div className={css({ display: "flex", gap: 4 })}>
             <div className={css({ display: "flex", gap: "2" })}>
-              <Link to={"/"} className={linkClassName}>
-                {m.help()}
-              </Link>
-              <Link to={"/"} className={linkClassName}>
-                Docs
+              <Link to={"https://doc.rendless.com"} className={linkClassName}>
+                Doc
+                <Icon
+                  name="open"
+                  size="md"
+                  className={css({
+                    transform: "translateY(-8px)",
+                    ml: "1",
+                  })}
+                />
               </Link>
             </div>
             <DropdownMenu.Root>

diff --git a/public/images/icons-sprite.svg b/public/images/icons-sprite.svg