feat: improved spacing on toast notification

converted scss toast styling to styled components

stylesheets/_session.scss

@@ -176,20 +176,6 @@ label {
   visibility: hidden;
 }
 
-.Toastify__toast {
-  background: var(--toast-background-color);
-  color: var(--toast-text-color);
-  border-left: 4px solid var(--toast-color-strip-color);
-
-  .Toastify__close-button {
-    color: var(--toast-text-color);
-  }
-
-  .Toastify__progress-bar {
-    background-color: var(--toast-progress-color);
-  }
-}
-
 .session-modal {
   animation: fadein var(--default-duration);
   z-index: 150;

ts/components/SessionToastContainer.tsx

@@ -2,16 +2,42 @@ import React from 'react';
 import { Slide, ToastContainer, ToastContainerProps } from 'react-toastify';
 import styled from 'styled-components';
 
+// NOTE: https://styled-components.com/docs/faqs#how-can-i-override-styles-with-higher-specificity
+const StyledToastContainer = styled(ToastContainer)`
+  &&&.Toastify__toast-container {
+  }
+  .Toastify__toast {
+    background: var(--toast-background-color);
+    color: var(--toast-text-color);
+    border-left: 4px solid var(--toast-color-strip-color);
+  }
+  .Toastify__toast--error {
+  }
+  .Toastify__toast--warning {
+  }
+  .Toastify__toast--success {
+  }
+  .Toastify__toast-body {
+    line-height: 1.4;
+  }
+  .Toastify__progress-bar {
+    background-color: var(--toast-progress-color);
+  }
+  .Toastify__close-button {
+    color: var(--toast-text-color);
+  }
+`;
+
 const WrappedToastContainer = ({
   className,
   ...rest
 }: ToastContainerProps & { className?: string }) => (
   <div className={className}>
-    <ToastContainer {...rest} />
+    <StyledToastContainer {...rest} />
   </div>
 );
 
-const SessionToastContainerPrivate = () => {
+export const SessionToastContainer = () => {
   return (
     <WrappedToastContainer
       position="bottom-right"
@@ -28,23 +54,3 @@ const SessionToastContainerPrivate = () => {
     />
   );
 };
-
-// tslint:disable-next-line: no-default-export
-export const SessionToastContainer = styled(SessionToastContainerPrivate).attrs({
-  // custom props
-})`
-  .Toastify__toast-container {
-  }
-  .Toastify__toast {
-  }
-  .Toastify__toast--error {
-  }
-  .Toastify__toast--warning {
-  }
-  .Toastify__toast--success {
-  }
-  .Toastify__toast-body {
-  }
-  .Toastify__progress-bar {
-  }
-`;

ts/components/basic/SessionToast.tsx

@@ -25,7 +25,7 @@ type Props = {
 
 const TitleDiv = styled.div`
   font-size: var(--font-size-md);
-  line-height: var(--font-size-md);
+  line-height: 1.5;
   font-family: var(--font-default);
   color: var(--text-primary-color);
   text-overflow: ellipsis;
@@ -42,7 +42,7 @@ const DescriptionDiv = styled.div`
 const IconDiv = styled.div`
   flex-shrink: 0;
   padding-inline-end: var(--margins-xs);
-  margin: 0 var(--margins-xs);
+  margin: 0 var(--margins-sm) 0 var(--margins-xs);
 `;
 
 // tslint:disable: use-simple-attributes