feat: add toast notifications using stylekit (#905)

app/assets/javascripts/components/ApplicationView.tsx

@@ -27,6 +27,7 @@ import { RevisionHistoryModalWrapper } from './RevisionHistoryModal/RevisionHist
 import { PremiumModalProvider } from './Premium';
 import { ConfirmSignoutContainer } from './ConfirmSignoutModal';
 import { TagsContextMenu } from './Tags/TagContextMenu';
+import { ToastContainer } from '@standardnotes/stylekit';
 
 type Props = {
   application: WebApplication;
@@ -283,6 +284,8 @@ export class ApplicationView extends PureComponent<Props, State> {
                 appState={this.appState}
                 application={this.application}
               />
+
+              <ToastContainer />
             </>
           )}
         </div>

app/assets/javascripts/typings/stylekit.d.ts

@@ -1 +0,0 @@
-declare module '@standardnotes/stylekit';

app/assets/stylesheets/_sn.scss

@@ -32,22 +32,6 @@
   text-decoration: underline;
 }
 
-.sn-icon {
-  @extend .h-5;
-  @extend .w-5;
-  @extend .fill-current;
-
-  &.sn-icon--small {
-    @extend .h-3\.5;
-    @extend .w-3\.5;
-  }
-
-  &.sn-icon--mid {
-    @extend .w-4;
-    @extend .h-4;
-  }
-}
-
 .sn-dropdown {
   @extend .bg-default;
   @extend .rounded;
@@ -257,9 +241,6 @@
 .ml-3 {
   margin-left: 0.75rem;
 }
-.ml-4 {
-  margin-left: 1rem;
-}
 
 .mr-2\.5 {
   margin-right: 0.625rem;
@@ -583,10 +564,6 @@
   padding-bottom: 2.25rem;
 }
 
-.select-none {
-  user-select: none;
-}
-
 .placeholder-dark-red::placeholder {
   @extend .color-dark-red;
 }
@@ -719,11 +696,6 @@
   background: var(--sn-stylekit-grey-4);
 }
 
-.sn-component .spinner-info {
-  border-color: var(--sn-stylekit-info-color);
-  border-right-color: transparent;
-}
-
 @keyframes slide-up {
   0% {
     opacity: 1;
@@ -907,10 +879,6 @@
   }
 }
 
-.flex-shrink-0 {
-  flex-shrink: 0;
-}
-
 .leading-140\% {
   line-height: 140%;
 }
@@ -921,10 +889,6 @@
   pointer-events: none;
 }
 
-.flex-shrink-0 {
-  flex-shrink: 0;
-}
-
 .last\:hidden:last-child {
   display: none;
 }

app/assets/stylesheets/_ui.scss

@@ -210,10 +210,6 @@ $screen-md-max:              ($screen-lg-min - 1) !default;
   pointer-events: none;
 }
 
-.fill-current {
-  fill: currentColor;
-}
-
 .font-editor {
   font-family: var(--sn-stylekit-editor-font-family);
 }