feat: add baseText style

components/MyPages/Blocks/Stays/Previous/index.tsx

@@ -13,7 +13,9 @@ export default async function PreviousStays({
   subtitle,
   link,
 }: AccountPageComponentProps) {
-  const initialPreviousStays = await serverClient().user.stays.previous()
+  const initialPreviousStays = await serverClient().user.stays.previous({
+    limit: 6,
+  })
   if (!initialPreviousStays?.data) {
     return null
   }

components/MyPages/Blocks/Stays/ShowMoreButton/button.module.css

@@ -2,3 +2,9 @@
   display: flex;
   justify-content: center;
 }
+
+.button {
+  display: flex;
+  align-items: center;
+  gap: var(--Spacing-x-half);
+}

components/MyPages/Blocks/Stays/ShowMoreButton/index.tsx

@@ -2,6 +2,7 @@
 
 import { useIntl } from "react-intl"
 
+import { ChevronDownIcon } from "@/components/Icons"
 import Button from "@/components/TempDesignSystem/Button"
 
 import styles from "./button.module.css"
@@ -17,11 +18,14 @@ export default function ShowMoreButton({
     <div className={styles.container}>
       <Button
         disabled={disabled}
-        intent="primary"
         onClick={loadMoreData}
-        theme="secondaryDark"
+        variant="icon"
         type="button"
+        className={styles.button}
+        theme="base"
+        intent="text"
       >
+        <ChevronDownIcon className={styles.icon} />
         {formatMessage({ id: "Show more" })}
       </Button>
     </div>

components/MyPages/Blocks/Stays/Upcoming/index.tsx

@@ -14,7 +14,9 @@ export default async function UpcomingStays({
   subtitle,
   link,
 }: AccountPageComponentProps) {
-  const initialUpcomingStays = await serverClient().user.stays.upcoming()
+  const initialUpcomingStays = await serverClient().user.stays.upcoming({
+    limit: 3,
+  })
   if (!initialUpcomingStays?.data) {
     return null
   }

components/TempDesignSystem/Button/button.module.css

@@ -41,6 +41,12 @@ a.inverted {
   border: none;
 }
 
+.text,
+a.text {
+  background: none;
+  border: none;
+}
+
 /* VARIANTS */
 .default,
 a.default {
@@ -227,6 +233,41 @@ a.default {
   fill: var(--Base-Button-Inverted-On-Fill-Disabled);
 }
 
+.baseText {
+  color: var(--Base-Button-Text-On-Fill-Normal, #4d001b);
+}
+
+.baseText:active,
+.baseText:focus,
+.baseText:hover {
+  color: var(--Base-Button-Text-On-Fill-Hover, #8f4350);
+  text-decoration: underline;
+}
+
+.baseText:disabled {
+  color: var(--Base-Button-Text-On-Fill-Disabled, #a8a4a2);
+}
+
+.icon.baseText svg,
+.icon.baseText svg * {
+  fill: var(--Base-Button-Text-On-Fill-Normal, #4d001b);
+}
+
+.icon.baseText:active svg,
+.icon.baseText:focus svg,
+.icon.baseText:hover svg,
+.icon.baseText:active svg *,
+.icon.baseText:focus svg *,
+.icon.baseText:hover svg * {
+  fill: var(--Base-Button-Text-On-Fill-Hover, #8f4350);
+  text-decoration: underline;
+}
+
+.icon.baseText:disabled svg,
+.icon.baseText:disabled svg * {
+  fill: var(--Base-Button-Text-On-Fill-Disabled, #a8a4a2);
+}
+
 .primaryStrongPrimary {
   background-color: var(--Theme-Primary-Strong-Button-Primary-Fill-Normal);
   color: var(--Theme-Primary-Strong-Button-Primary-On-Fill-Normal);

components/TempDesignSystem/Button/variants.ts

@@ -9,6 +9,7 @@ export const buttonVariants = cva(styles.btn, {
       primary: styles.primary,
       secondary: styles.secondary,
       tertiary: styles.tertiary,
+      text: styles.text,
     },
     size: {
       small: styles.small,
@@ -128,5 +129,10 @@ export const buttonVariants = cva(styles.btn, {
       intent: "secondary",
       theme: "tertiaryLight",
     },
+    {
+      className: styles.baseText,
+      intent: "text",
+      theme: "base",
+    },
   ],
 })