Rebrand toast messages (#519)

* Update Button component

* Preparatory changes

* Update Toasts style

* Update Clear Storage toast

* Self review

* Temporary testing toasts

* Use customAction and prevent clear storage toast from closing

* Fix Storage btn

* Keep bg colour when autoClose is false

* Remove testing code

src/app.tsx

@@ -15,10 +15,10 @@ import NotFoundPage from './pages/not-found';
 import ProposalDetailsPage from './pages/proposal-commons/proposal-details';
 import Proposals from './pages/proposals';
 import Vesting from './pages/vesting';
-import StorageFullNotification from './components/notifications/storage-full-notification';
 import { registerWeb3Modal, wagmiConfig } from './wallet-connect';
 import './styles/variables.module.scss';
 import { notifications } from './components/notifications';
+import { ClearStorageButton } from './components/notifications/clear-storage-button';
 
 const ErrorBoundary: FallbackRender = (props) => {
   const { error } = props;
@@ -45,7 +45,7 @@ const AppContent = () => {
     // Sentry.ErrorBoundary requires 'fallback' to be React component so we can't pass a string there
     <Router>
       <Sentry.ErrorBoundary fallback={(props) => <ErrorBoundary {...props} />}>
-        <ToastContainer />
+        <ToastContainer limit={3} pauseOnFocusLoss={false} autoClose={5000} closeOnClick />
 
         <Switch>
           <Route path="/governance/:typeAndVoteId" exact>
@@ -113,15 +113,17 @@ window.localStorage.setItem = (key, value) => {
   try {
     setStorageItem(key, value);
   } catch (e) {
-    notifications.warning(
-      { message: <StorageFullNotification /> },
+    notifications.error(
       {
-        toastId: 'storage-warning',
+        message: 'We have detected that your local storage is full. Would you like to clear it and refresh the page?',
+        customAction: <ClearStorageButton />,
+      },
+      {
+        toastId: 'storage-error',
         bodyClassName: 'cursor-auto',
-        closeButton: false,
         closeOnClick: false,
-        autoClose: false,
         draggable: false,
+        autoClose: false,
       }
     );
 

src/chain-data/helpers.ts

@@ -54,7 +54,7 @@ export const displayPendingTransaction = async (
     // The user "cancelled" the transaction. i.e. it was resent with the same
     // nonce, but higher gas price, value as 0 and data as 0x
     if (ethersError.cancelled) {
-      return notifications.success({ message: 'Transaction cancelled successfully' });
+      return notifications.success({ message: 'Success! Transaction cancelled' });
     }
 
     // The user "sped up" their transaction by resending it with a higher gas price

src/components/button/button.module.scss

@@ -8,6 +8,7 @@
 @import './variants/link-gray.module.scss';
 @import './variants/menu-link-secondary.module.scss';
 @import './variants/text-blue.module.scss';
+@import './variants/text-gray.module.scss';
 
 .button {
   background-color: transparent;
@@ -56,6 +57,10 @@
     @include text-blue;
   }
 
+  &.text-gray {
+    @include text-gray;
+  }
+
   &.normal {
     font-size: $text-small;
     line-height: $lh-small;

src/components/button/button.tsx

@@ -18,6 +18,7 @@ export interface Props extends BreakpointsProps {
     | 'link'
     | 'text'
     | 'text-blue'
+    | 'text-gray'
     | 'menu-link-secondary'
     | 'link-blue'
     | 'link-gray';

src/components/button/variants/text-gray.module.scss

@@ -0,0 +1,63 @@
+@import '../../../styles/fonts.module.scss';
+
+@mixin text-gray {
+  color: $color-gray-300;
+  height: 20px;
+  border: none;
+
+  &.xs {
+    padding: 0 16px;
+    border-radius: 24px;
+    height: 32px;
+    @include font-body-14;
+  }
+
+  &.sm {
+    padding: 0 20px;
+    border-radius: 24px;
+    height: 40px;
+    @include font-button-3;
+  }
+
+  &.md {
+    padding: 0 24px;
+    border-radius: 28px;
+    height: 48px;
+    @include font-button-2;
+  }
+
+  &.lg {
+    padding: 0 32px;
+    border-radius: 32px;
+    height: 56px;
+    @include font-button-1;
+  }
+
+  &:hover {
+    color: $color-base-light;
+  }
+
+  &:active {
+    color: $color-gray-25;
+  }
+
+  &:disabled {
+    color: $color-gray-600;
+  }
+
+  &.dark {
+    color: $color-gray-600;
+
+    &:hover {
+      color: $color-gray-700;
+    }
+
+    &:active {
+      color: $color-gray-800;
+    }
+
+    &:disabled {
+      color: $color-gray-400;
+    }
+  }
+}

src/components/icons/exclamation-triangle-fill.tsx

@@ -1,12 +1,12 @@
-import { ComponentProps } from 'react';
+import { ComponentPropsWithoutRef } from 'react';
 
-export const ExclamationTriangleFillIcon = (props: ComponentProps<'svg'>) => {
+export const ExclamationTriangleFillIcon = (props: ComponentPropsWithoutRef<'svg'>) => {
   return (
-    <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M27.4854 27.1399H4.51642C3.07244 27.1399 2.18959 25.5544 2.95006 24.3269L14.4692 5.73352C15.1908 4.56875 16.886 4.57104 17.6045 5.73775L29.0544 24.3311C29.8104 25.5588 28.9271 27.1399 27.4854 27.1399ZM17.0005 14.0006C17.0005 13.4484 16.5528 13.0006 16.0005 13.0006C15.4482 13.0006 15.0005 13.4484 15.0005 14.0006V19.3341C15.0005 19.8864 15.4482 20.3341 16.0005 20.3341C16.5528 20.3341 17.0005 19.8864 17.0005 19.3341V14.0006ZM16.0005 22.0009C15.4482 22.0009 15.0005 22.4486 15.0005 23.0009C15.0005 23.5532 15.4482 24.0009 16.0005 24.0009H16.0138C16.5661 24.0009 17.0138 23.5532 17.0138 23.0009C17.0138 22.4486 16.5661 22.0009 16.0138 22.0009H16.0005Z"
+        d="M20.6148 20.3544H3.38805C2.30506 20.3544 1.64293 19.1653 2.21328 18.2447L10.8526 4.29965C11.3938 3.42608 12.6653 3.42779 13.2041 4.30282L21.7915 18.2479C22.3585 19.1686 21.6961 20.3544 20.6148 20.3544ZM13.0011 10.5C13.0011 9.94771 12.5534 9.49999 12.0011 9.49999C11.4488 9.49999 11.0011 9.94771 11.0011 10.5V14.5001C11.0011 15.0524 11.4488 15.5001 12.0011 15.5001C12.5534 15.5001 13.0011 15.0524 13.0011 14.5001V10.5ZM12.0011 16.2502C11.4488 16.2502 11.0011 16.6979 11.0011 17.2502C11.0011 17.8025 11.4488 18.2502 12.0011 18.2502H12.0111C12.5634 18.2502 13.0111 17.8025 13.0111 17.2502C13.0111 16.6979 12.5634 16.2502 12.0111 16.2502H12.0011Z"
         fill="currentColor"
       />
     </svg>

src/components/icons/external-link.tsx

@@ -0,0 +1,11 @@
+import { ComponentProps } from 'react';
+
+export const ExternalLinkIcon = (props: ComponentProps<'svg'>) => {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path d="M12 12H4V4" stroke="currentColor" />
+      <path d="M6.27734 9.72515L11.6202 4.38086" stroke="currentColor" />
+      <path d="M8.08984 4.38086H11.6182V7.91076" stroke="currentColor" />
+    </svg>
+  );
+};

src/components/icons/index.ts

@@ -7,10 +7,13 @@ import { CrossIcon } from './cross';
 import { ErrorCircleIcon } from './error-circle';
 import { ErrorCircleFillIcon } from './error-circle-fill';
 import { ExclamationTriangleFillIcon } from './exclamation-triangle-fill';
+import { ExternalLinkIcon } from './external-link';
 import { HelpOutlineIcon } from './help-outline';
 import { InfoCircleIcon } from './info-circle';
+import { InfoCircleFillIcon } from './info-circle-fill';
 import { RadioButtonIcon } from './radio-button';
 import { RadioButtonFillIcon } from './radio-button-fill';
+import { WarningCircleFillIcon } from './warning-circle-fill';
 
 export {
   CheckCircleIcon,
@@ -22,8 +25,11 @@ export {
   ErrorCircleIcon,
   ErrorCircleFillIcon,
   ExclamationTriangleFillIcon,
+  ExternalLinkIcon,
   HelpOutlineIcon,
   InfoCircleIcon,
+  InfoCircleFillIcon,
   RadioButtonIcon,
   RadioButtonFillIcon,
+  WarningCircleFillIcon,
 };

src/components/icons/info-circle-fill.tsx

@@ -0,0 +1,14 @@
+import { ComponentProps } from 'react';
+
+export const InfoCircleFillIcon = (props: ComponentProps<'svg'>) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none" {...props}>
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20ZM9.68634 4.80005C9.13406 4.80005 8.68634 5.24776 8.68634 5.80005C8.68634 6.35233 9.13406 6.80005 9.68634 6.80005H9.74908C10.3014 6.80005 10.7491 6.35233 10.7491 5.80005C10.7491 5.24776 10.3014 4.80005 9.74908 4.80005H9.68634ZM8.50003 7.50005C7.94775 7.50005 7.50003 7.94776 7.50003 8.50005C7.50003 9.05233 7.94775 9.50005 8.50003 9.50005H9.00574L9.00574 14.5C9.00574 14.7653 9.1111 15.0196 9.29863 15.2072C9.48617 15.3947 9.74052 15.5 10.0057 15.5H11.5C12.0523 15.5 12.5 15.0523 12.5 14.5C12.5 13.9478 12.0523 13.5 11.5 13.5H11.0057L11.0057 8.50005C11.0057 8.23483 10.9004 7.98048 10.7128 7.79294C10.5253 7.60541 10.271 7.50005 10.0057 7.50005H8.50003Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};

src/components/icons/warning-circle-fill.tsx

@@ -0,0 +1,14 @@
+import { ComponentProps } from 'react';
+
+export const WarningCircleFillIcon = (props: ComponentProps<'svg'>) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none" {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20ZM10.9925 6.62503C10.9925 6.07275 10.5448 5.62503 9.99252 5.62503C9.44024 5.62503 8.99252 6.07275 8.99252 6.62503V11.125C8.99252 11.6773 9.44024 12.125 9.99252 12.125C10.5448 12.125 10.9925 11.6773 10.9925 11.125V6.62503ZM9.99252 12.375C9.44024 12.375 8.99252 12.8227 8.99252 13.375C8.99252 13.9273 9.44024 14.375 9.99252 14.375H10.0038C10.5561 14.375 11.0038 13.9273 11.0038 13.375C11.0038 12.8227 10.5561 12.375 10.0038 12.375H9.99252Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};

src/components/notifications/clear-storage-button.tsx

@@ -0,0 +1,36 @@
+import { useState } from 'react';
+import { ALLOW_ANALYTICS, ALLOW_ERROR_REPORTING } from '../../utils/analytics';
+import styles from './notifications.module.scss';
+import Button from '../button';
+
+export const ClearStorageButton = () => {
+  const [isClearing, setIsClearing] = useState(false);
+
+  const clearStorage = () => {
+    setIsClearing(true);
+
+    // Store the current values of the analytics and error reporting settings
+    const errorReportingValue = window.localStorage.getItem(ALLOW_ERROR_REPORTING);
+    const analyticsValue = window.localStorage.getItem(ALLOW_ANALYTICS);
+
+    window.localStorage.clear();
+
+    // Restore the previous values of the analytics and error reporting settings
+    if (errorReportingValue) {
+      window.localStorage.setItem(ALLOW_ERROR_REPORTING, errorReportingValue);
+    }
+    if (analyticsValue) {
+      window.localStorage.setItem(ALLOW_ANALYTICS, analyticsValue);
+    }
+
+    window.location.reload();
+  };
+
+  return (
+    <div className={styles.transactionButtonContainer}>
+      <Button type="primary" size="xs" disabled={isClearing} onClick={clearStorage}>
+        <span>{isClearing ? 'Clearing...' : 'Clear Storage'}</span>
+      </Button>
+    </div>
+  );
+};