diff --git a/idea/frontend/src/features/voucher/ui/voucher-table/voucher-table.module.scss b/idea/frontend/src/features/voucher/ui/voucher-table/voucher-table.module.scss index 5920b0495d..876409e555 100644 --- a/idea/frontend/src/features/voucher/ui/voucher-table/voucher-table.module.scss +++ b/idea/frontend/src/features/voucher/ui/voucher-table/voucher-table.module.scss @@ -2,3 +2,41 @@ margin-right: 8px; font-weight: 600; } + +.table { + display: flex; + + > *:first-child { + flex: 1; + } +} + +.openButton { + margin-left: 4px; + padding: 44px 0; + + display: flex; + align-items: flex-start; + + background-color: transparent; + + transition: opacity 0.25s; + + &:hover { + opacity: 0.75; + } + + svg { + transform: rotate(90deg); + + path { + fill: #fff; + } + } + + &.open { + svg { + transform: rotate(-90deg); + } + } +} diff --git a/idea/frontend/src/features/voucher/ui/voucher-table/voucher-table.tsx b/idea/frontend/src/features/voucher/ui/voucher-table/voucher-table.tsx index 95f8bd4658..ea5d6b9e2f 100644 --- a/idea/frontend/src/features/voucher/ui/voucher-table/voucher-table.tsx +++ b/idea/frontend/src/features/voucher/ui/voucher-table/voucher-table.tsx @@ -1,5 +1,8 @@ import { HexString } from '@gear-js/api'; import { useBalance, useBalanceFormat, useVoucherStatus } from '@gear-js/react-hooks'; +import { Button } from '@gear-js/ui'; +import { useState } from 'react'; +import clsx from 'clsx'; import VoucherPlaceholderSVG from '@/features/voucher/assets/voucher-placeholder.svg?react'; import { ContentLoader } from '@/shared/ui/contentLoader'; @@ -7,6 +10,7 @@ import { BulbBlock, BulbStatus } from '@/shared/ui/bulbBlock'; import { withAccount } from '@/shared/ui'; import { Table, TableRow } from '@/shared/ui/table'; import { IdBlock } from '@/shared/ui/idBlock'; +import ArrowSVG from '@/shared/assets/images/actions/arrowRight.svg?react'; import styles from './voucher-table.module.scss'; @@ -31,38 +35,51 @@ const VoucherTable = withAccount(({ id, expireBlock, owner, isCodeUploadEnabled const isV110Runtime = expirationTimestamp && owner && expireBlock && isCodeUploadEnabled !== undefined; + const [isOpen, setIsOpen] = useState(false); + const toggle = () => setIsOpen((prevValue) => !prevValue); + return isBalanceReady && isVoucherStatusReady ? ( -