fix: post-ship website fixes and enhancements (#1150)

* fix: wrapping of long non-breaking file names * fix: long token name text wrapping * style: long token names mobile cases * fix: post launch fixes (#1152) * fix: add countly to 404 page * feat: delete modal for token page * feat: delete modal for token page * fix: grid conflicts on docs footer * fix: null on storage provider * fix: add eol Co-authored-by: Joanna Ong <ongjfu@gmail.com>
web3-storage · Apr 4, 2022 · 80be326 · 80be326
1 parent 3a17bff
commit 80be326
Show file tree

Hide file tree

Showing 9 changed files with 170 additions and 124 deletions.
diff --git 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
@@ -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
@@ -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) => (
-                <span key={deal.dealId}>
-                  <a
-                    className="underline"
-                    href={`https://filfox.info/en/deal/${deal.dealId}`}
-                    target="_blank"
-                    rel="noreferrer"
-                  >
-                    {`${deal.storageProvider}`}
-                  </a>
-                  {indx !== deals.length - 1 && ', '}
-                </span>
-              ))}
+              storageProviders={item.deals
+                .filter(deal => !!deal.storageProvider)
+                .map((deal, indx, deals) => (
+                  <span key={deal.dealId}>
+                    <a
+                      className="underline"
+                      href={`https://filfox.info/en/deal/${deal.dealId}`}
+                      target="_blank"
+                      rel="noreferrer"
+                    >
+                      {`${deal.storageProvider}`}
+                    </a>
+                    {indx !== deals.length - 1 && ', '}
+                  </span>
+                ))}
               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
@@ -42,22 +42,16 @@ const TokenRowItem = ({ className = '', name, secret, id = '', isHeader, onToken
     </span>
     {!isHeader && (
       <>
-        {deletingTokenId !== id ? (
-          <>
-            <div className="token-copy">
-              <button onClick={() => addTextToClipboard(secret)}>
-                <CopyIcon />
-              </button>
-            </div>
-            <div className="token-delete">
-              <button onClick={() => onTokenDelete?.(id)}>
-                <TrashIcon />
-              </button>
-            </div>
-          </>
-        ) : (
-          'Deleting...'
-        )}
+        <div className="token-copy">
+          <button onClick={() => addTextToClipboard(secret)}>
+            <CopyIcon />
+          </button>
+        </div>
+        <div className="token-delete">
+          <button onClick={() => onTokenDelete?.(id)}>
+            <TrashIcon />
+          </button>
+        </div>
       </>
     )}
   </div>

diff --git 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
@@ -7,14 +7,17 @@ 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';
 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 (
-    <div className="section tokens-manager-container">
-      <div className="tokens-manager-header">
-        <h4>{content.heading}</h4>
-        <Filterable
-          items={tokens}
-          icon={<SearchIcon />}
-          filterKeys={['name', 'secret']}
-          placeholder={content.ui.filter.placeholder}
-          queryParam="filter"
-          onChange={setFilteredTokens}
-        />
-        <Sortable
-          items={filteredTokens}
-          staticLabel={content.ui.sortby.label}
-          options={content.ui.sortby.options}
-          value={defaultQueryOrder}
-          queryParam="order"
-          onChange={setSortedTokens}
-          onSelectChange={showCheckOverlayHandler}
-        />
-      </div>
-      <TokenRowItem name={tokenRowLabels.name.label} secret={tokenRowLabels.secret.label} isHeader />
-      <div className="tokens-manager-table-content">
-        {isFetchingTokens || !fetchDate ? (
-          <Loading className={'tokens-manager-loading-spinner'} />
-        ) : !tokens.length ? (
-          <span className="tokens-manager-upload-cta">
-            {content.table.message}
-            {'\u00A0'}
-            <Button
-              className={clsx(isCreating && 'isDisabled')}
-              href={content.table.cta.link}
-              variant={content.table.cta.theme}
-              tracking={{ ui: countly.ui[content.table.cta.ui], action: content.table.cta.action }}
-            >
-              <Link href={content.table.cta.link}>{content.table.cta.text}</Link>
-            </Button>
-          </span>
-        ) : (
-          paginatedTokens.map(({ name, secret, _id }) => (
-            <TokenRowItem
-              key={secret}
-              id={_id}
-              name={name}
-              secret={secret}
-              deletingTokenId={deletingTokenId}
-              onTokenDelete={() => deleteTokenCallback(_id)}
-            />
-          ))
-        )}
-      </div>
-      <div className="tokens-manager-footer">
-        <Pagination
-          items={sortedTokens}
-          itemsPerPage={itemsPerPage || 10}
-          visiblePages={2}
-          queryParam="page"
-          onChange={setPaginatedTokens}
-          scrollTarget={'.tokens-manager-container'}
-        />
-        <Dropdown
-          className="tokens-manager-result-dropdown"
-          value={content.ui.results.options[0].value}
-          options={content.ui.results.options}
-          queryParam="items"
-          onChange={value => setItemsPerPage(value)}
-          onSelectChange={showCheckOverlayHandler}
-        />
-      </div>
-      <div className={clsx('files-manager-overlay', showCheckOverlay ? 'show' : '')}>
-        <div className="files-manager-overlay-check">
-          <CheckIcon></CheckIcon>
+    <>
+      <div className="section tokens-manager-container">
+        <div className="tokens-manager-header">
+          <h4>{content.heading}</h4>
+          <Filterable
+            items={tokens}
+            icon={<SearchIcon />}
+            filterKeys={['name', 'secret']}
+            placeholder={content.ui.filter.placeholder}
+            queryParam="filter"
+            onChange={setFilteredTokens}
+          />
+          <Sortable
+            items={filteredTokens}
+            staticLabel={content.ui.sortby.label}
+            options={content.ui.sortby.options}
+            value={defaultQueryOrder}
+            queryParam="order"
+            onChange={setSortedTokens}
+            onSelectChange={showCheckOverlayHandler}
+          />
+        </div>
+        <TokenRowItem name={tokenRowLabels.name.label} secret={tokenRowLabels.secret.label} isHeader />
+        <div className="tokens-manager-table-content">
+          {isFetchingTokens || !fetchDate ? (
+            <Loading className={'tokens-manager-loading-spinner'} />
+          ) : !tokens.length ? (
+            <span className="tokens-manager-upload-cta">
+              {content.table.message}
+              {'\u00A0'}
+              <Button
+                className={clsx(isCreating && 'isDisabled')}
+                href={content.table.cta.link}
+                variant={content.table.cta.theme}
+                tracking={{ ui: countly.ui[content.table.cta.ui], action: content.table.cta.action }}
+              >
+                <Link href={content.table.cta.link}>{content.table.cta.text}</Link>
+              </Button>
+            </span>
+          ) : (
+            paginatedTokens.map(({ name, secret, _id }) => (
+              <TokenRowItem
+                key={secret}
+                id={_id}
+                name={name}
+                secret={secret}
+                deletingTokenId={deletingTokenId}
+                onTokenDelete={() => onDeleteSingle(_id)}
+              />
+            ))
+          )}
+        </div>
+        <div className="tokens-manager-footer">
+          <Pagination
+            items={sortedTokens}
+            itemsPerPage={itemsPerPage || 10}
+            visiblePages={2}
+            queryParam="page"
+            onChange={setPaginatedTokens}
+            scrollTarget={'.tokens-manager-container'}
+          />
+          <Dropdown
+            className="tokens-manager-result-dropdown"
+            value={content.ui.results.options[0].value}
+            options={content.ui.results.options}
+            queryParam="items"
+            onChange={value => setItemsPerPage(value)}
+            onSelectChange={showCheckOverlayHandler}
+          />
+        </div>
+        <div className={clsx('files-manager-overlay', showCheckOverlay ? 'show' : '')}>
+          <div className="files-manager-overlay-check">
+            <CheckIcon></CheckIcon>
+          </div>
         </div>
       </div>
-    </div>
+      <Modal
+        className="delete-modal"
+        animation="ken"
+        modalState={deleteModalState}
+        closeIcon={<CloseIcon className="file-uploader-close" />}
+        showCloseButton
+      >
+        <GradientBackgroundB className="account-gradient-background" />
+        <div className="delete-modal-content">
+          <h5>{content?.ui.delete.heading}</h5>
+          <p>{content?.ui.delete.alert}</p>
+        </div>
+        <div className="delete-modal-buttons">
+          <Button variant={ButtonVariant.OUTLINE_DARK} onClick={deleteTokenCallback}>
+            {content?.ui.delete.ok}
+          </Button>
+          <Button variant={ButtonVariant.OUTLINE_DARK} onClick={closeDeleteModal}>
+            {content?.ui.delete.cancel}
+          </Button>
+        </div>
+      </Modal>
+    </>
   );
 };
 

diff --git 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
@@ -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"
         }
       }
     }