feat: updated toasts to support theming

stylesheets/_session.scss

@@ -224,32 +224,16 @@ label {
 }
 
 .Toastify__toast {
-  background: var(--color-cell-background);
-  color: var(--color-text);
+  background: var(--modal-background-color);
+  color: var(--modal-text-color);
+  border-left: 4px solid var(--primary-color);
 
   .Toastify__close-button {
-    color: subtle(var(--color-text));
-  }
-  @mixin set-toast-theme($color) {
-    border-left: 4px solid $color;
-  }
-  &--success {
-    /* TODO is this correct? */
-    @include set-toast-theme(var(--color-session-green-color));
-  }
-  &--info {
-    @include set-toast-theme(var(--color-darker-gray-color));
-  }
-  &--warning {
-    @include set-toast-theme(var(--color-warning));
-  }
-  &--error {
-    /* TODO is this correct?*/
-    @include set-toast-theme(var(--color-warning));
+    color: var(--modal-text-color);
   }
 
   .Toastify__progress-bar {
-    background-color: rgba(var(--color-text-rgb), 0.1);
+    background-color: var(--toast-progress-color);
   }
 }
 

ts/components/SessionToastContainer.tsx

@@ -3,6 +3,15 @@ import { Slide, ToastContainer, ToastContainerProps } from 'react-toastify';
 import styled from 'styled-components';
 
 const SessionToastContainerPrivate = () => {
+  const WrappedToastContainer = ({
+    className,
+    ...rest
+  }: ToastContainerProps & { className?: string }) => (
+    <div className={className}>
+      <ToastContainer {...rest} />
+    </div>
+  );
+
   return (
     <WrappedToastContainer
       position="bottom-right"
@@ -20,15 +29,6 @@ const SessionToastContainerPrivate = () => {
   );
 };
 
-const WrappedToastContainer = ({
-  className,
-  ...rest
-}: ToastContainerProps & { className?: string }) => (
-  <div className={className}>
-    <ToastContainer {...rest} />
-  </div>
-);
-
 // tslint:disable-next-line: no-default-export
 export const SessionToastContainer = styled(SessionToastContainerPrivate).attrs({
   // custom props

ts/components/basic/SessionToast.tsx

@@ -5,6 +5,7 @@ import styled from 'styled-components';
 import { noop } from 'lodash';
 import { SessionIcon, SessionIconType } from '../icon';
 
+// NOTE We don't change the color strip on the left based on the type. 16/09/2022
 export enum SessionToastType {
   Info = 'info',
   Success = 'success',
@@ -26,22 +27,22 @@ const TitleDiv = styled.div`
   font-size: var(--font-size-md);
   line-height: var(--font-size-md);
   font-family: var(--font-default);
-  color: var(--color-text);
+  color: var(--text-primary-color);
   text-overflow: ellipsis;
 `;
 
 const DescriptionDiv = styled.div`
   font-size: var(--font-size-sm);
-  color: var(--color-text-subtle);
+  color: var(--text-secondary-color);
   text-overflow: ellipsis;
   font-family: var(--font-default);
-  padding-bottom: var(--font-size-xs);
-  padding-top: var(--font-size-xs);
+  padding-top: var(--margins-xs);
 `;
 
 const IconDiv = styled.div`
   flex-shrink: 0;
   padding-inline-end: var(--margins-xs);
+  margin: 0 var(--margins-xs);
 `;
 
 export const SessionToast = (props: Props) => {
@@ -78,6 +79,7 @@ export const SessionToast = (props: Props) => {
       alignItems="center"
       onClick={props?.onToastClick || noop}
       data-testid="session-toast"
+      padding="var(--margins-sm) 0"
     >
       <IconDiv>
         <SessionIcon iconType={toastIcon} iconSize={toastIconSize} />

ts/themes/SessionTheme.tsx

@@ -613,10 +613,11 @@ export const SessionGlobalStyles = createGlobalStyle`
 
     /* TODO Theming - Should Pills have their own colors? */
 
-    /* Modals */
+    /* Modals / Toasts */
     --modal-background-color: ${THEMES.CLASSIC_LIGHT.COLOR6};
     --modal-text-color: var(--text-primary-color);
     --modal-text-danger-color: var(--danger-color);
+    --toast-progress-color: rgba(${hexColorToRGB(THEMES.CLASSIC_LIGHT.COLOR0)}, 0.1)
 
   };
 `;