use UI Button
This commit is contained in:
1 parent
c556829bc5
commit
6f7e5b9258
2 files changed
+9
-5
No files matched your search
@@ -26,15 +26,15 @@ export default function VolunteerCard({ id }) {
|
|||||||
return (
|
return (
|
||||||
<div className={`${styles.profileboard} glassCard`}>
|
<div className={`${styles.profileboard} glassCard`}>
|
||||||
|
|
||||||
{/* Header : titre + bouton expand */}
|
|
||||||
<div className={styles.header}>
|
<div className={styles.header}>
|
||||||
<h2>{user?.name}</h2>
|
<h2>{user?.name}</h2>
|
||||||
<button
|
<Button
|
||||||
className={`${styles.expandButton} glassCard`}
|
variant={"transparent"}
|
||||||
onClick={toggleExpand}
|
onClick={toggleExpand}
|
||||||
|
className={`${isExpanded ? styles.moreButtonClicked : ""}`}
|
||||||
>
|
>
|
||||||
{isExpanded ? "▼" : "▲"}
|
{">"}
|
||||||
</button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className={styles.mainContent}>
|
<div className={styles.mainContent}>
|
||||||
|
|||||||
@@ -88,6 +88,10 @@
|
|||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.moreButtonClicked {
|
||||||
|
rotate: 90deg;
|
||||||
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 768px) {
|
@media screen and (min-width: 768px) {
|
||||||
.profilePictureContainer {
|
.profilePictureContainer {
|
||||||
width: 150px;
|
width: 150px;
|
||||||
|
|||||||
Reference in new issue
Block a user