styles: update pro styles

Author: wangdicoder

apps/pro/src/app/blocks/[category]/category-page.module.scss

@@ -7,27 +7,29 @@
 .content {
   flex: 1;
   margin-left: 240px;
-  padding: 40px 48px 80px;
+  padding: 32px 40px 80px;
   max-width: calc(100% - 240px);
 }
 
 .pageHeader {
-  margin-bottom: 36px;
-  padding-bottom: 24px;
-  border-bottom: 1px solid var(--ty-color-border-secondary);
+  margin-bottom: 28px;
+  padding-bottom: 20px;
+  border-bottom: 1px solid var(--ty-color-border);
 }
 
 .title {
-  font-size: 26px;
-  font-weight: 700;
-  letter-spacing: -0.025em;
-  margin: 0 0 6px;
+  font-size: 30px;
+  font-weight: 750;
+  letter-spacing: -0.03em;
+  margin: 0 0 4px;
   color: var(--ty-color-text);
 }
 
 .count {
-  font-size: 13px;
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
   color: var(--ty-color-text-tertiary);
   margin: 0;
-  font-weight: 500;
+  font-weight: 700;
 }

apps/pro/src/blocks/authentication/sign-in-simple.tsx

@@ -5,37 +5,54 @@ const { Heading, Text } = Typography;
 
 export default function SignInSimple() {
   return (
-    <Flex justify="center" align="center" style={{ minHeight: '100vh', padding: '40px 16px', background: 'linear-gradient(135deg, #f0f4ff 0%, #fdf2f8 50%, #fef3c7 100%)' }}>
-      <Card variant="elevated" style={{ width: '100%', maxWidth: 420, borderRadius: 16 }}>
-        <div style={{ padding: 16 }}>
-        <Flex vertical align="center" style={{ marginBottom: 24 }}>
+    <Flex
+      justify="center"
+      align="center"
+      style={{
+        minHeight: '100vh',
+        padding: '48px 20px',
+        background: '#f4f7fb',
+      }}
+    >
+      <Card
+        variant="elevated"
+        style={{
+          width: '100%',
+          maxWidth: 428,
+          borderRadius: 20,
+          border: '1px solid #dbe3ef',
+          boxShadow: '0 20px 48px rgba(15, 23, 42, 0.08)',
+        }}
+      >
+        <div style={{ padding: 24 }}>
+        <Flex vertical align="center" style={{ marginBottom: 28 }}>
           <div style={{
-            width: 48,
-            height: 48,
-            borderRadius: 14,
-            background: 'linear-gradient(135deg, #6366f1, #8b5cf6)',
+            width: 52,
+            height: 52,
+            borderRadius: 16,
+            background: '#1e3a8a',
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',
             marginBottom: 16,
-            boxShadow: '0 4px 14px rgba(99, 102, 241, 0.35)',
+            boxShadow: '0 10px 24px rgba(30, 58, 138, 0.18)',
           }}>
             <IconLock style={{ fontSize: 22, color: '#fff' }} />
           </div>
           <Heading level={3} style={{ margin: 0 }}>Welcome back</Heading>
-          <Text style={{ color: 'var(--ty-color-text-secondary)', marginTop: 4 }}>
-            Sign in to continue to your workspace
+          <Text style={{ color: 'var(--ty-color-text-secondary)', marginTop: 6 }}>
+            Sign in to access your team workspace
           </Text>
         </Flex>
 
         <Flex gap="sm" style={{ marginBottom: 20 }}>
-          <Button block btnType="outline" style={{ height: 42, borderRadius: 10 }}>
+          <Button block btnType="outline" style={{ height: 42, borderRadius: 12, borderColor: '#d7e0ec', background: '#fff' }}>
             <Flex align="center" justify="center" gap="sm">
               <IconGoogle style={{ fontSize: 18 }} />
               <span>Google</span>
             </Flex>
           </Button>
-          <Button block btnType="outline" style={{ height: 42, borderRadius: 10 }}>
+          <Button block btnType="outline" style={{ height: 42, borderRadius: 12, borderColor: '#d7e0ec', background: '#fff' }}>
             <Flex align="center" justify="center" gap="sm">
               <IconGithub style={{ fontSize: 18 }} />
               <span>GitHub</span>
@@ -47,29 +64,30 @@ export default function SignInSimple() {
 
         <Form layout="vertical">
           <Form.Item label="Email address">
-            <Input placeholder="you@company.com" style={{ height: 42, borderRadius: 10 }} />
+            <Input placeholder="you@company.com" style={{ height: 44, borderRadius: 12, background: '#fbfcfe' }} />
           </Form.Item>
           <Form.Item label="Password">
-            <InputPassword placeholder="Enter your password" style={{ height: 42, borderRadius: 10 }} />
+            <InputPassword placeholder="Enter your password" style={{ height: 44, borderRadius: 12, background: '#fbfcfe' }} />
           </Form.Item>
           <Flex justify="space-between" align="center" style={{ marginBottom: 20 }}>
             <Checkbox>Remember me</Checkbox>
-            <a href="#" style={{ fontSize: 13, fontWeight: 500 }}>Forgot password?</a>
+            <a href="#" style={{ fontSize: 13, fontWeight: 600, color: '#1d4ed8', textDecoration: 'none' }}>Forgot password?</a>
           </Flex>
           <Button btnType="primary" block style={{
-            height: 44,
-            borderRadius: 10,
+            height: 46,
+            borderRadius: 12,
             fontWeight: 600,
             fontSize: 15,
-            background: 'linear-gradient(135deg, #6366f1, #8b5cf6)',
-            border: 'none',
+            background: '#1e3a8a',
+            border: '1px solid #1e3a8a',
+            boxShadow: '0 10px 20px rgba(30, 58, 138, 0.18)',
           }}>
             Sign in
           </Button>
         </Form>
 
         <Text style={{ display: 'block', textAlign: 'center', marginTop: 20, fontSize: 13, color: 'var(--ty-color-text-secondary)' }}>
-          Don't have an account? <a href="#" style={{ fontWeight: 600 }}>Create one free</a>
+          Don't have an account? <a href="#" style={{ fontWeight: 600, color: '#1d4ed8', textDecoration: 'none' }}>Create one free</a>
         </Text>
         </div>
       </Card>

apps/pro/src/blocks/authentication/sign-up-simple.tsx

@@ -5,70 +5,89 @@ const { Heading, Text } = Typography;
 
 export default function SignUpSimple() {
   return (
-    <Flex justify="center" align="center" style={{ minHeight: '100vh', padding: '40px 16px', background: 'linear-gradient(160deg, #0f172a 0%, #1e293b 50%, #334155 100%)' }}>
-      <Card variant="elevated" style={{ width: '100%', maxWidth: 440, borderRadius: 16, background: 'var(--ty-color-bg-container)' }}>
-        <div style={{ padding: 16 }}>
+    <Flex
+      justify="center"
+      align="center"
+      style={{
+        minHeight: '100vh',
+        padding: '48px 20px',
+        background: '#f3f6fa',
+      }}
+    >
+      <Card
+        variant="elevated"
+        style={{
+          width: '100%',
+          maxWidth: 448,
+          borderRadius: 20,
+          background: 'var(--ty-color-bg-container)',
+          border: '1px solid #dbe3ef',
+          boxShadow: '0 20px 48px rgba(15, 23, 42, 0.08)',
+        }}
+      >
+        <div style={{ padding: 24 }}>
         <Flex vertical align="center" style={{ marginBottom: 24 }}>
           <div style={{
-            width: 48,
-            height: 48,
-            borderRadius: 14,
-            background: 'linear-gradient(135deg, #06b6d4, #3b82f6)',
+            width: 52,
+            height: 52,
+            borderRadius: 16,
+            background: '#0f172a',
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',
             marginBottom: 16,
-            boxShadow: '0 4px 14px rgba(59, 130, 246, 0.35)',
+            boxShadow: '0 10px 24px rgba(15, 23, 42, 0.18)',
           }}>
             <IconAddUser style={{ fontSize: 22, color: '#fff' }} />
           </div>
           <Heading level={3} style={{ margin: 0 }}>Create your account</Heading>
-          <Text style={{ color: 'var(--ty-color-text-secondary)', marginTop: 4 }}>
-            Start your 14-day free trial, no credit card required
+          <Text style={{ color: 'var(--ty-color-text-secondary)', marginTop: 6 }}>
+            Start your 14-day trial with a clean setup flow
           </Text>
         </Flex>
 
         <Form layout="vertical">
           <Flex gap="sm">
             <Form.Item label="First name" style={{ flex: 1 }}>
-              <Input placeholder="John" style={{ height: 42, borderRadius: 10 }} />
+              <Input placeholder="John" style={{ height: 44, borderRadius: 12, background: '#fbfcfe' }} />
             </Form.Item>
             <Form.Item label="Last name" style={{ flex: 1 }}>
-              <Input placeholder="Doe" style={{ height: 42, borderRadius: 10 }} />
+              <Input placeholder="Doe" style={{ height: 44, borderRadius: 12, background: '#fbfcfe' }} />
             </Form.Item>
           </Flex>
           <Form.Item label="Work email">
-            <Input placeholder="you@company.com" style={{ height: 42, borderRadius: 10 }} />
+            <Input placeholder="you@company.com" style={{ height: 44, borderRadius: 12, background: '#fbfcfe' }} />
           </Form.Item>
           <Form.Item label="Password">
-            <InputPassword placeholder="Create a strong password" style={{ height: 42, borderRadius: 10 }} />
+            <InputPassword placeholder="Create a strong password" style={{ height: 44, borderRadius: 12, background: '#fbfcfe' }} />
           </Form.Item>
-          <div style={{ marginBottom: 16 }}>
+          <div style={{ marginBottom: 18, padding: 14, borderRadius: 14, background: '#f8fafc', border: '1px solid #e2e8f0' }}>
             <Flex justify="space-between" style={{ marginBottom: 4 }}>
               <Text style={{ fontSize: 12, color: 'var(--ty-color-text-tertiary)' }}>Password strength</Text>
-              <Text style={{ fontSize: 12, color: '#10b981', fontWeight: 500 }}>Strong</Text>
+              <Text style={{ fontSize: 12, color: '#15803d', fontWeight: 600 }}>Strong</Text>
             </Flex>
             <Progress.Bar percent={85} showInfo={false} style={{ height: 4 }} />
           </div>
           <Checkbox style={{ marginBottom: 20 }}>
             <Text style={{ fontSize: 13 }}>
-              I agree to the <a href="#" style={{ fontWeight: 500 }}>Terms of Service</a> and <a href="#" style={{ fontWeight: 500 }}>Privacy Policy</a>
+              I agree to the <a href="#" style={{ fontWeight: 600, color: '#1d4ed8', textDecoration: 'none' }}>Terms of Service</a> and <a href="#" style={{ fontWeight: 600, color: '#1d4ed8', textDecoration: 'none' }}>Privacy Policy</a>
             </Text>
           </Checkbox>
           <Button btnType="primary" block style={{
-            height: 44,
-            borderRadius: 10,
+            height: 46,
+            borderRadius: 12,
             fontWeight: 600,
             fontSize: 15,
-            background: 'linear-gradient(135deg, #06b6d4, #3b82f6)',
-            border: 'none',
+            background: '#0f172a',
+            border: '1px solid #0f172a',
+            boxShadow: '0 10px 20px rgba(15, 23, 42, 0.14)',
           }}>
             Get started free
           </Button>
         </Form>
 
         <Text style={{ display: 'block', textAlign: 'center', marginTop: 20, fontSize: 13, color: 'var(--ty-color-text-secondary)' }}>
-          Already have an account? <a href="#" style={{ fontWeight: 600 }}>Sign in</a>
+          Already have an account? <a href="#" style={{ fontWeight: 600, color: '#1d4ed8', textDecoration: 'none' }}>Sign in</a>
         </Text>
         </div>
       </Card>

apps/pro/src/blocks/banners/promo-banner.tsx

@@ -43,7 +43,7 @@ export default function PromoBanner() {
           background: 'rgba(255,255,255,0.2)',
           border: '1px solid rgba(255,255,255,0.3)',
           color: '#fff',
-          borderRadius: 8,
+          borderRadius: 12,
           fontWeight: 600,
           backdropFilter: 'blur(8px)',
           flexShrink: 0,

apps/pro/src/blocks/cards/profile-card.tsx

@@ -5,26 +5,35 @@ const { Heading, Text } = Typography;
 
 export default function ProfileCard() {
   return (
-    <Flex justify="center" style={{ padding: 24 }}>
-      <Card variant="elevated" style={{ width: 380, borderRadius: 16, overflow: 'hidden', padding: 0 }}>
-        {/* Gradient header */}
+    <Flex justify="center" style={{ padding: 32, background: '#f8fafc' }}>
+      <Card
+        variant="elevated"
+        style={{
+          width: 392,
+          borderRadius: 20,
+          overflow: 'hidden',
+          padding: 0,
+          border: '1px solid #dbe3ef',
+          boxShadow: '0 16px 36px rgba(15, 23, 42, 0.08)',
+        }}
+      >
         <div style={{
-          height: 100,
-          background: 'linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%)',
+          height: 108,
+          background: '#e8eef8',
           position: 'relative',
+          borderBottom: '1px solid #dbe3ef',
         }} />
 
-        {/* Avatar overlapping header */}
         <div style={{ padding: '0 24px 24px', marginTop: -44 }}>
           <Flex vertical align="center" gap="sm">
             <Avatar
               size={88}
               style={{
-                backgroundColor: '#1e1b4b',
+                backgroundColor: '#0f172a',
                 fontSize: 32,
                 fontWeight: 700,
                 border: '4px solid var(--ty-color-bg-container)',
-                boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
+                boxShadow: '0 8px 18px rgba(15, 23, 42, 0.14)',
               }}
             >
               JD
@@ -40,9 +49,9 @@ export default function ProfileCard() {
               Building beautiful UIs with Tiny Design. Open-source enthusiast and design systems advocate.
             </Text>
             <Flex gap="sm" wrap="wrap" justify="center">
-              <Tag variant="soft" color="purple" style={{ borderRadius: 20 }}>React</Tag>
-              <Tag variant="soft" color="blue" style={{ borderRadius: 20 }}>TypeScript</Tag>
-              <Tag variant="soft" color="cyan" style={{ borderRadius: 20 }}>Design Systems</Tag>
+              <Tag variant="soft" color="blue" style={{ borderRadius: 20 }}>React</Tag>
+              <Tag variant="soft" color="cyan" style={{ borderRadius: 20 }}>TypeScript</Tag>
+              <Tag variant="soft" color="default" style={{ borderRadius: 20 }}>Design Systems</Tag>
             </Flex>
           </Flex>
 
@@ -65,15 +74,15 @@ export default function ProfileCard() {
 
           <Flex gap="sm">
             <Button block btnType="primary" style={{
-              borderRadius: 10,
-              height: 40,
+              borderRadius: 12,
+              height: 42,
               fontWeight: 600,
-              background: 'linear-gradient(135deg, #6366f1, #8b5cf6)',
-              border: 'none',
+              background: '#0f172a',
+              border: '1px solid #0f172a',
             }}>
               Follow
             </Button>
-            <Button block btnType="outline" style={{ borderRadius: 10, height: 40, fontWeight: 600 }}>
+            <Button block btnType="outline" style={{ borderRadius: 12, height: 42, fontWeight: 600 }}>
               Message
             </Button>
           </Flex>