Merge pull request #438 from liam-hq/error-message-erd-styling

💄 Style to ErrorDisplay component
liam-hq · Jan 10, 2025 · 8de526a · 8de526a
2 parents bed6c63 + aedea4b
commit 8de526a
Show file tree

Hide file tree

Showing 6 changed files with 235 additions and 16 deletions.
diff --git a/frontend/apps/docs/content/docs/parser/index.mdx b/frontend/apps/docs/content/docs/parser/index.mdx
@@ -0,0 +1,5 @@
+---
+title: Parser
+---
+
+TBD
diff --git a/frontend/apps/docs/content/docs/parser/troubleshooting.mdx b/frontend/apps/docs/content/docs/parser/troubleshooting.mdx
@@ -0,0 +1,5 @@
+---
+title: Troubleshooting
+---
+
+TBD
diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/AppBar/HelpButton/HelpButton.tsx b/frontend/packages/erd-core/src/components/ERDRenderer/AppBar/HelpButton/HelpButton.tsx
@@ -46,8 +46,7 @@ export const HelpButton = forwardRef<HTMLButtonElement>((_, ref) => {
           <DropdownMenuItem
             size="sm"
             leftIcon={<BookText />}
-            // TODO: Update the URL
-            onSelect={handleSelect('https://liam-docs-sigma.vercel.app/docs')}
+            onSelect={handleSelect('https://liambx.com/docs')}
           >
             Documentation
           </DropdownMenuItem>

diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDRenderer.module.css b/frontend/packages/erd-core/src/components/ERDRenderer/ERDRenderer.module.css
@@ -58,4 +58,7 @@
     width: 0;
     margin: 0;
   }
+  .main {
+    overflow: hidden;
+  }
 }
diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ErrorDisplay.module.css b/frontend/packages/erd-core/src/components/ERDRenderer/ErrorDisplay.module.css
@@ -1,8 +1,162 @@
-/* TODO: styling */
 .wrapper {
-  position: relative;
-  width: 100%;
+  font-family: var(--main-font, Inter);
+  display: flex;
+  padding: 0px var(--spacing-6, 24px);
+  flex-direction: column;
+
   height: 100%;
+
+  justify-content: center;
+  align-items: center;
+  gap: var(--spacing-10, 40px);
+
   background-color: var(--global-background);
-  color: blanchedalmond;
+}
+
+.main {
+  display: flex;
+  padding: var(--spacing-8, 32px);
+  align-items: flex-start;
+  gap: var(--spacing-6, 24px);
+
+  border-left: 1px solid var(--callout-warning-border, rgba(255, 215, 72, 0.2));
+  background: var(--callout-warning-background, rgba(255, 215, 72, 0.1));
+}
+
+.iconWrapper {
+  display: flex;
+  width: 24px;
+  padding-top: var(--spacing-1, 4px);
+  align-items: center;
+}
+
+.inner {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: var(--spacing-8, 32px);
+}
+
+.message1 {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-2, 8px);
+}
+
+.message1Title {
+  color: var(--callout-warning-text, #c3b476);
+  font-family: var(--message-font, Montserrat);
+  font-size: var(--font-size-8, 20px);
+  font-weight: 700;
+  line-height: 160%;
+}
+
+.message1Sentence {
+  color: var(--callout-warning-text, #c3b476);
+  font-size: var(--font-size-5, 14px);
+  font-weight: 400;
+  line-height: 160%;
+}
+
+.message2 {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-2, 8px);
+}
+
+.message2Title {
+  color: var(--callout-warning-text, #c3b476);
+  font-size: var(--font-size-7, 18px);
+  font-weight: 700;
+  line-height: 160%;
+}
+
+.message2Sentence {
+  color: var(--callout-warning-text, #c3b476);
+
+  font-size: var(--font-size-5, 14px);
+  font-weight: 400;
+  line-height: 160%;
+}
+
+.callout {
+  color: var(--callout-warning-link, #e7ddb3);
+  font-size: var(--font-size-5, 14px);
+  font-weight: 400;
+  line-height: normal;
+
+  text-decoration: underline;
+  text-decoration-color: var(
+    --callout-warning-underline,
+    rgba(231, 221, 179, 0.4)
+  );
+}
+
+.message3 {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-2, 8px);
+  align-self: stretch;
+}
+
+.message3Title {
+  color: var(--callout-warning-text, #c3b476);
+  font-size: var(--font-size-5, 14px);
+  font-weight: 700;
+  line-height: 160%;
+}
+
+.message3Sentence {
+  color: var(--callout-warning-text, #c3b476);
+
+  font-size: var(--font-size-5, 14px);
+  font-weight: 400;
+  line-height: 160%;
+}
+
+/* TODO: This component has been partially adjusted for responsiveness, but confirm the designer's intentions and make any necessary corrections if needed. */
+@media screen and (max-width: 768px) {
+  .message1 {
+    gap: var(--spacing-1, 4px);
+  }
+
+  .message1Title {
+    font-size: var(--font-size-6);
+  }
+
+  .message1Sentence {
+    font-size: var(--font-size-3);
+  }
+
+  .message2 {
+    gap: var(--spacing-1, 4px);
+  }
+
+  .message2Title {
+    font-size: var(--font-size-5);
+  }
+
+  .message2Sentence {
+    font-size: var(--font-size-3);
+  }
+
+  .callout {
+    font-size: var(--font-size-3);
+  }
+
+  .message3 {
+    gap: var(--spacing-1, 4px);
+  }
+
+  .message3Title {
+    font-size: var(--font-size-3);
+  }
+
+  .message3Sentence {
+    font-size: var(--font-size-3);
+  }
 }
diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ErrorDisplay.tsx b/frontend/packages/erd-core/src/components/ERDRenderer/ErrorDisplay.tsx
@@ -1,4 +1,5 @@
 import type { ProcessError } from '@liam-hq/db-structure'
+import { InfoIcon } from '@liam-hq/ui'
 import type { FC } from 'react'
 import styles from './ErrorDisplay.module.css'
 
@@ -7,18 +8,70 @@ type Props = {
 }
 
 export const ErrorDisplay: FC<Props> = ({ errors }) => {
-  // TODO: styling
   return (
     <div className={styles.wrapper}>
-      <div>something went wrong</div>
-      <ul>
-        {errors.map((error) => (
-          // NOTE: error.stack is not available in the browser now.
-          <li key={error.message}>
-            {error.name}: {error.message}
-          </li>
-        ))}
-      </ul>
+      <div className={styles.main}>
+        <div className={styles.iconWrapper}>
+          <InfoIcon color="var(--callout-warning-text)" />
+        </div>
+        <div className={styles.inner}>
+          <div className={styles.message1}>
+            <div className={styles.message1Title}>
+              Oh no! We’ve encountered {errors.length} errors 🛸💫
+            </div>
+            <div className={styles.message1Sentence}>
+              <p>
+                It seems {errors.length} SQL statements couldn’t make it through
+                the parser’s orbit.
+              </p>
+              <p>
+                Parsing every SQL dialect is like navigating an asteroid
+                field—it’s tricky, but we’re working on it!
+              </p>
+            </div>
+          </div>
+
+          <div className={styles.message2}>
+            <div className={styles.message2Title}>
+              🚀 Here’s what you can do next
+            </div>
+            <div className={styles.message2Sentence}>
+              <p>Adjust your SQL: A small update might clear things up.</p>
+              <p>
+                Move ahead with your project: You can still create it! The
+                unrecognized statements will just be skipped.
+              </p>
+            </div>
+            <a
+              href="https://liambx.com/docs/parser/troubleshooting"
+              target="_blank"
+              className={styles.callout}
+              rel="noreferrer"
+            >
+              Check out the troubleshooting guide →
+            </a>
+          </div>
+
+          <div className={styles.message3}>
+            <div className={styles.message3Title}>🌟 Send a signal!</div>
+            <div className={styles.message3Sentence}>
+              <p>
+                Your report will help me and the team refine our SQL engines to
+                handle even the most out-of-this-world syntax.
+              </p>
+              <p>Thanks for helping us explore the SQL galaxy together! </p>
+            </div>
+            <a
+              href="https://github.com/liam-hq/liam/discussions"
+              target="_blank"
+              className={styles.callout}
+              rel="noreferrer"
+            >
+              Send Signal →
+            </a>
+          </div>
+        </div>
+      </div>
     </div>
   )
 }