Merge pull request #117 from subquery/feat/new-typograph

feat: new typography
subquery · Aug 23, 2024 · 8a1c8ce · 8a1c8ce
2 parents 3536825 + 46554e1
commit 8a1c8ce
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 33 deletions.
diff --git a/components/common/chatUi/chatUi.tsx b/components/common/chatUi/chatUi.tsx
@@ -11,7 +11,7 @@ import { FiUser, FiSend } from 'react-icons/fi';
 import { RiRobot2Line } from 'react-icons/ri';
 import { AiFillApi } from 'react-icons/ai';
 import { Button, Input, InputRef, message } from 'antd';
-import localforage from 'localforage';
+// import localforage from 'localforage';
 import { Typography } from '../typography';
 import { v4 as uuidv4 } from 'uuid';
 import { cloneDeep, isString } from 'lodash-es';
@@ -453,7 +453,7 @@ export const ChatUi: FC<ChatUiProps> = ({ chatUrl, prompt, className, placeholde
                     const filtered = chats.filter((c) => c.id !== item.id);
                     setChats(filtered);
                     setCurrentChat(filtered[0]);
-                    await localforage.setItem(workspaceName, filtered);
+                    // await localforage.setItem(workspaceName, filtered);
                   }}
                 ></ConversationItem>
               );

diff --git a/components/common/typography/Typography.less b/components/common/typography/Typography.less
@@ -7,43 +7,44 @@
 
   &__h1 {
     font-family: var(--sq-font-family-header);
-    font-size: 80px;
-    line-height: 100px;
+    font-size: 160px;
+    line-height: 128px;
+    letter-spacing: -0.04em;
   }
 
   &__h2 {
     font-family: var(--sq-font-family-header);
-    font-size: 60px;
-    line-height: 88px;
+    font-size: 80px;
+    line-height: 72px;
   }
 
   &__h3 {
     font-family: var(--sq-font-family-header);
-    font-size: 48px;
-    line-height: 64px;
+    font-size: 32px;
+    line-height: 29px;
   }
 
   &__h4 {
     font-weight: bold;
-    font-size: 32px;
-    line-height: 48px;
+    font-size: 24px;
+    line-height: 26px;
   }
 
   &__h5 {
     font-weight: 500;
-    font-size: 24px;
-    line-height: 36px;
+    font-size: 20px;
+    line-height: 24px;
   }
-  
+
   &__h6 {
     font-weight: 500;
     font-size: 20px;
-    line-height: 30px;
+    line-height: 24px;
   }
 
   &__large {
     font-size: 18px;
-    line-height: 28px;
+    line-height: 24px;
   }
 
   &__text {
@@ -141,7 +142,7 @@
     color: #fff;
 
     &.subql-typography__secondary {
-      color: var(--sq-gray400);
+      color: rgba(255,255,255,0.6);
     }
   }
 

diff --git a/components/common/typography/Typography.tsx b/components/common/typography/Typography.tsx
@@ -4,10 +4,11 @@
 import * as React from 'react';
 import clsx from 'clsx';
 import './Typography.less';
-import { Space, Tooltip } from 'antd';
+import { Tooltip } from 'antd';
 import { createBEM } from 'components/utilities/createBem';
 import { Context } from '../provider';
 import { attachPropertiesToComponent } from 'components/utilities/attachPropertiesToCompnent';
+import { useMemo } from 'react';
 
 export type TypographProps = {
   variant?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'large' | 'text' | 'medium' | 'small' | 'overline';
@@ -17,8 +18,24 @@ export type TypographProps = {
   className?: string;
   tooltipIcon?: React.ReactNode;
   disabled?: boolean;
+  center?: boolean;
+  maxWidth?: string | number | undefined;
 } & React.HTMLProps<HTMLParagraphElement>;
 
+const componentsName: { [key in string]: keyof JSX.IntrinsicElements } = {
+  h1: 'h1',
+  h2: 'h2',
+  h3: 'h3',
+  h4: 'h4',
+  h5: 'h5',
+  h6: 'h6',
+  large: 'article',
+  text: 'article',
+  medium: 'article',
+  small: 'article',
+  overline: 'article',
+};
+
 export interface LinkProps extends TypographProps {
   href?: string;
   children?: React.ReactNode;
@@ -38,12 +55,20 @@ const TypographyInner: React.FC<TypographProps> = ({
   tooltipIcon,
   className,
   disabled,
+  center,
+  style,
+  width,
+  maxWidth,
+  color,
   ...htmlProps
 }) => {
+  const Component = useMemo<keyof JSX.IntrinsicElements>(() => componentsName[variant], [variant]);
   const { theme } = React.useContext(Context);
-
   const inner = () => (
-    <article
+    // TODO: fix this type
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    <Component
       {...htmlProps}
       className={clsx(
         bem(),
@@ -54,20 +79,19 @@ const TypographyInner: React.FC<TypographProps> = ({
         bem({ disabled }),
         className,
       )}
+      style={{ textAlign: center ? 'center' : undefined, width, maxWidth, color, ...style }}
     >
       {children}
-    </article>
+    </Component>
   );
   if (!tooltip) {
-    return <Space>{inner()}</Space>;
+    return inner();
   }
   return (
     <Tooltip title={tooltip} placement="topLeft" className={tooltip && clsx(bem({ tooltip: 'tooltip' }))}>
-      <Space className={clsx(bem({ space: 'space' }))}>
-        {inner()}
+      {inner()}
 
-        {tooltipIcon}
-      </Space>
+      {tooltipIcon}
     </Tooltip>
   );
 };

diff --git a/components/styles.css b/components/styles.css
@@ -19,14 +19,16 @@
   --sq-primary-card-deephover: #e968dd66;
   --sq-primary-link-hover: #d25ec7;
 
-  --sq-primary-pink: #ff4581;
-  --sq-primary-blue: #1677ff;
-  --sq-gradient: linear-gradient(96.26deg, var(--sq-primary-blue) 13.8%, var(--sq-primary-pink) 82.83%);
-  --sq-background-gradient: linear-gradient(
-    96.26deg,
-    rgba(var(--sq-primary-blue-rgb), 0.08) 13.8%,
-    rgba(var(--sq-primary-pink-rgb), 0.08) 82.83%
-  );
+  --sq-primary-pink: #e968dd;
+  --sq-primary-blue: #385ce5;
+  --sq-primary-green: #1bdfbd;
+  --sq-primary-orange: #ffb21d;
+  --sq-gradient: linear-gradient(96.5deg, #ffffff 57.69%, #a7dee5 89.18%),
+    linear-gradient(142.44deg, #f7cdf2 3.83%, #ffffff 35.89%, #ffffff 72.52%, #a7dee5 95.42%),
+    linear-gradient(0deg, var(--Gray-white, #ffffff), var(--Gray-white, #ffffff)),
+    linear-gradient(180.56deg, #f094e8 -11.03%, #ffffff 55%, #ffffff 130.46%, #a7dee5 177.62%);
+
+  --sq-background-gradient: linear-gradient(180deg, #ffffff 47%, #e968dd 64.5%, #385ce5 85.5%);
 
   /* Blue */
   --sq-blue100: #a1c4ee;
@@ -59,6 +61,18 @@
   --sq-gray900: #1a202c;
   --sq-graylight: #c2c9d1;
 
+  /* --sq-gray100: #E6E6E6;
+  --sq-gray200: #CCCCCC;
+  --sq-gray300: #B3B3B3;
+  --sq-gray400: #808080;
+  --sq-gray500: #666666;
+  --sq-gray600: #4D4D4D;
+  --sq-gray700: #333333;
+  --sq-gray800: #1a1a1a;
+  --sq-gray900: #000000; */
+
+  --sq-white: #ffffff;
+
   /* Semantic  */
   --sq-success: #65cd45;
   --sq-warning: #f87c4f;