diff --git a/packages/docs/src/css/from-website/grid/gridlex-mixins.scss b/packages/docs/src/css/from-website/grid/gridlex-mixins.scss index 0dc1a500d7..58be72b65d 100755 --- a/packages/docs/src/css/from-website/grid/gridlex-mixins.scss +++ b/packages/docs/src/css/from-website/grid/gridlex-mixins.scss @@ -13,7 +13,7 @@ // Function to generate the grid by number @mixin makeGridByNumber($grid) { - @for $i from 1 through $gl-colCount { + @for $i from 2 through $gl-colCount { [#{$gl-attributeName}*="#{$grid}-#{$i}"] > [#{$gl-attributeName}~="#{$gl-colName}"], [#{$gl-attributeName}*="#{$grid}-#{$i}"] > [#{$gl-attributeName}*="#{$gl-colName}-"], [#{$gl-attributeName}*="#{$grid}-#{$i}"] > [#{$gl-attributeName}*="#{$gl-colName}_"] { @@ -32,7 +32,7 @@ [#{$gl-attributeName}*="#{$gl-gridName}-"], [#{$gl-attributeName}*="#{$gl-gridName}_"] { - @for $i from 1 through $gl-colCount { + @for $i from 2 through $gl-colCount { > [#{$gl-attributeName}*="#{$col}-#{$i}"]{ flex-basis: map-get($gl-colPortions, $i); max-width: map-get($gl-colPortions, $i); } } } diff --git a/packages/website/components/account/filesManager/fileRowItem.scss b/packages/website/components/account/filesManager/fileRowItem.scss index 1abd835765..b99973afa6 100644 --- a/packages/website/components/account/filesManager/fileRowItem.scss +++ b/packages/website/components/account/filesManager/fileRowItem.scss @@ -44,6 +44,7 @@ $file-size: auto; display: flex; align-items: flex-start; justify-content: space-between; + word-break: break-word; @include fontWeight_Regular; @include medium { padding: 0.85rem 1rem 0.85rem 1.975rem; diff --git a/packages/website/components/account/filesManager/filesManager.tsx b/packages/website/components/account/filesManager/filesManager.tsx index 40bd66c53c..ef369cbc5f 100644 --- a/packages/website/components/account/filesManager/filesManager.tsx +++ b/packages/website/components/account/filesManager/filesManager.tsx @@ -252,19 +252,21 @@ const FilesManager = ({ className, content, onFileUpload }: FilesManagerProps) = Object.values(PinStatus).find(status => item.pins.some(pin => status === pin.status)) || PinStatus.QUEUING } - storageProviders={item.deals.map((deal, indx, deals) => ( - - - {`${deal.storageProvider}`} - - {indx !== deals.length - 1 && ', '} - - ))} + storageProviders={item.deals + .filter(deal => !!deal.storageProvider) + .map((deal, indx, deals) => ( + + + {`${deal.storageProvider}`} + + {indx !== deals.length - 1 && ', '} + + ))} size={filesize(item.dagSize)} highlight={{ target: 'name', text: keyword?.toString() || '' }} numberOfPins={item.pins.length} diff --git a/packages/website/components/tokens/tokensManager/tokenRowItem.js b/packages/website/components/tokens/tokensManager/tokenRowItem.js index deb9d66093..4077089eba 100644 --- a/packages/website/components/tokens/tokensManager/tokenRowItem.js +++ b/packages/website/components/tokens/tokensManager/tokenRowItem.js @@ -42,22 +42,16 @@ const TokenRowItem = ({ className = '', name, secret, id = '', isHeader, onToken {!isHeader && ( <> - {deletingTokenId !== id ? ( - <> -
- -
-
- -
- - ) : ( - 'Deleting...' - )} +
+ +
+
+ +
)} diff --git a/packages/website/components/tokens/tokensManager/tokenRowItem.scss b/packages/website/components/tokens/tokensManager/tokenRowItem.scss index bbbe1d20a7..2c636af06f 100644 --- a/packages/website/components/tokens/tokensManager/tokenRowItem.scss +++ b/packages/website/components/tokens/tokensManager/tokenRowItem.scss @@ -28,6 +28,7 @@ $date-delete: auto; border-bottom: 0.0625rem solid rgba(white, 0.05); .file-row-label { @include fontWeight_Semibold; + padding-bottom: 0.25rem; width: 4.5rem; flex-shrink: 0; display: inline-block; diff --git a/packages/website/components/tokens/tokensManager/tokensManager.js b/packages/website/components/tokens/tokensManager/tokensManager.js index ba0572fcec..640fe6e608 100644 --- a/packages/website/components/tokens/tokensManager/tokensManager.js +++ b/packages/website/components/tokens/tokensManager/tokensManager.js @@ -7,7 +7,7 @@ import { useRouter } from 'next/router'; import TokenRowItem from './tokenRowItem'; import countly from 'lib/countly'; import Loading from 'components/loading/loading'; -import Button from 'components/button/button'; +import Button, { ButtonVariant } from 'components/button/button'; import { useTokens } from 'components/contexts/tokensContext'; import Dropdown from 'ZeroComponents/dropdown/dropdown'; import Filterable from 'ZeroComponents/filterable/filterable'; @@ -15,6 +15,9 @@ import Sortable from 'ZeroComponents/sortable/sortable'; import Pagination from 'ZeroComponents/pagination/pagination'; import SearchIcon from 'assets/icons/search'; import CheckIcon from 'assets/icons/check'; +import Modal from 'modules/zero/components/modal/modal'; +import GradientBackgroundB from 'assets/illustrations/gradient-background-b'; +import CloseIcon from 'assets/icons/close'; const defaultQueryOrder = 'a-z'; /** @@ -32,6 +35,7 @@ const TokensManager = ({ content }) => { const { query, replace } = useRouter(); const queryClient = useQueryClient(); const queryOrderRef = useRef(query.order); + const deleteModalState = useState(false); const [filteredTokens, setFilteredTokens] = useState([]); const [sortedTokens, setSortedTokens] = useState([]); @@ -63,29 +67,34 @@ const TokensManager = ({ content }) => { } }, [query.order, query, replace]); - const deleteTokenCallback = useCallback( - async id => { - if (!window.confirm('Are you sure? Deleted tokens cannot be recovered!')) { - return; - } - setDeletingTokenId(id); + const deleteTokenCallback = useCallback(async () => { + try { + await deleteToken(deletingTokenId); + } finally { + await queryClient.invalidateQueries('get-tokens'); - try { - await deleteToken(id); - } finally { - await queryClient.invalidateQueries('get-tokens'); + countly.trackEvent(countly.events.TOKEN_DELETE, { + ui: countly.ui.TOKENS, + }); - countly.trackEvent(countly.events.TOKEN_DELETE, { - ui: countly.ui.TOKENS, - }); + await getTokens(); + setDeletingTokenId(''); + } + deleteModalState[1](false); + }, [deleteModalState, deleteToken, deletingTokenId, queryClient, getTokens]); - await getTokens(); - setDeletingTokenId(''); - } + const onDeleteSingle = useCallback( + async id => { + deleteModalState[1](true); + setDeletingTokenId(id); }, - [queryClient, deleteToken, setDeletingTokenId, getTokens] + [deleteModalState] ); + const closeDeleteModal = useCallback(() => { + deleteModalState[1](false); + }, [deleteModalState]); + const showCheckOverlayHandler = useCallback(() => { setShowCheckOverlay(true); setTimeout(() => { @@ -94,81 +103,104 @@ const TokensManager = ({ content }) => { }, [setShowCheckOverlay]); return ( -
-
-

{content.heading}

- } - filterKeys={['name', 'secret']} - placeholder={content.ui.filter.placeholder} - queryParam="filter" - onChange={setFilteredTokens} - /> - -
- -
- {isFetchingTokens || !fetchDate ? ( - - ) : !tokens.length ? ( - - {content.table.message} - {'\u00A0'} - - - ) : ( - paginatedTokens.map(({ name, secret, _id }) => ( - deleteTokenCallback(_id)} - /> - )) - )} -
-
- - setItemsPerPage(value)} - onSelectChange={showCheckOverlayHandler} - /> -
-
-
- + <> +
+
+

{content.heading}

+ } + filterKeys={['name', 'secret']} + placeholder={content.ui.filter.placeholder} + queryParam="filter" + onChange={setFilteredTokens} + /> + +
+ +
+ {isFetchingTokens || !fetchDate ? ( + + ) : !tokens.length ? ( + + {content.table.message} + {'\u00A0'} + + + ) : ( + paginatedTokens.map(({ name, secret, _id }) => ( + onDeleteSingle(_id)} + /> + )) + )} +
+
+ + setItemsPerPage(value)} + onSelectChange={showCheckOverlayHandler} + /> +
+
+
+ +
-
+ } + showCloseButton + > + +
+
{content?.ui.delete.heading}
+

{content?.ui.delete.alert}

+
+
+ + +
+ + ); }; diff --git a/packages/website/components/tokens/tokensManager/tokensManager.scss b/packages/website/components/tokens/tokensManager/tokensManager.scss index 5b0b5c6da5..ada43183c7 100644 --- a/packages/website/components/tokens/tokensManager/tokensManager.scss +++ b/packages/website/components/tokens/tokensManager/tokensManager.scss @@ -20,7 +20,7 @@ @include medium { padding-left: 0; } - + &:not(.delete-modal), &:not(.tokens-manager-footer) { max-width: 52.8125rem; @include medium { @@ -90,6 +90,15 @@ @include monospace_Text; } + .token-name { + line-height: 1.5; + padding: 0.5rem 1rem 0.5rem 0; + word-break: break-word; + @include medium { + padding: 0.85rem 3.975rem 0.85rem 1.375rem; + } + } + @include medium { .token-name { padding-top: 1.375rem; diff --git a/packages/website/content/pages/app/tokens.json b/packages/website/content/pages/app/tokens.json index 4a7725f456..68b89dfabd 100644 --- a/packages/website/content/pages/app/tokens.json +++ b/packages/website/content/pages/app/tokens.json @@ -79,6 +79,12 @@ { "label": "View 50 Results", "value": "50" }, { "label": "View 100 Results", "value": "100" } ] + }, + "delete": { + "alert": "Are you sure? Deleted tokens cannot be recovered!", + "ok": "Delete Token", + "cancel": "Cancel", + "heading": "Web3.Storage says" } } } diff --git a/packages/website/pages/404.js b/packages/website/pages/404.js index aff11fe852..72797fef50 100644 --- a/packages/website/pages/404.js +++ b/packages/website/pages/404.js @@ -9,7 +9,8 @@ export default function Home() { useEffect(() => { countly.trackEvent(countly.events.NOT_FOUND, { - path: '/404', + path: window.location?.pathname ?? 'unknown', + referrer: typeof window !== 'undefined' ? document.referrer : null, }); }, []);