diff --git a/components/MyPages/Blocks/Stays/Previous/index.tsx b/components/MyPages/Blocks/Stays/Previous/index.tsx
index 49c4316a5..9a2959d23 100644
--- a/components/MyPages/Blocks/Stays/Previous/index.tsx
+++ b/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
}
diff --git a/components/MyPages/Blocks/Stays/ShowMoreButton/button.module.css b/components/MyPages/Blocks/Stays/ShowMoreButton/button.module.css
index f55557f33..81c35a9ed 100644
--- a/components/MyPages/Blocks/Stays/ShowMoreButton/button.module.css
+++ b/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);
+}
diff --git a/components/MyPages/Blocks/Stays/ShowMoreButton/index.tsx b/components/MyPages/Blocks/Stays/ShowMoreButton/index.tsx
index d3e57e27b..87c80cc50 100644
--- a/components/MyPages/Blocks/Stays/ShowMoreButton/index.tsx
+++ b/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({
diff --git a/components/MyPages/Blocks/Stays/Upcoming/index.tsx b/components/MyPages/Blocks/Stays/Upcoming/index.tsx
index 736251cfa..b9085cb4f 100644
--- a/components/MyPages/Blocks/Stays/Upcoming/index.tsx
+++ b/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
}
diff --git a/components/TempDesignSystem/Button/button.module.css b/components/TempDesignSystem/Button/button.module.css
index c4a6699a5..d3ba7b8a3 100644
--- a/components/TempDesignSystem/Button/button.module.css
+++ b/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);
diff --git a/components/TempDesignSystem/Button/variants.ts b/components/TempDesignSystem/Button/variants.ts
index 71757fcfe..217d14b51 100644
--- a/components/TempDesignSystem/Button/variants.ts
+++ b/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",
+ },
],
})