feat: update line height and width of note size warning text (#852)

app/assets/javascripts/components/NotesOptions/NotesOptions.tsx

@@ -197,7 +197,7 @@ const NoteSizeWarning: FunctionComponent<{
         type="warning"
         className="color-accessory-tint-3 flex-shrink-0 mr-3"
       />
-      <div className="color-grey-0 select-none">
+      <div className="color-grey-0 select-none leading-140% max-w-80%">
         This note may have trouble syncing to the mobile application due to its
         size.
       </div>

app/assets/javascripts/services/alertService.ts

@@ -4,7 +4,7 @@ import {
   ButtonType,
   sanitizeHtmlString,
 } from '@standardnotes/snjs';
-import { SKAlert } from 'sn-stylekit';
+import { SKAlert } from '@standardnotes/stylekit';
 
 /** @returns a promise resolving to true if the user confirmed, false if they canceled */
 export function confirmDialog({

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

@@ -1 +1 @@
-declare module "sn-stylekit";
+declare module '@standardnotes/stylekit';

app/assets/stylesheets/_sn.scss

@@ -303,6 +303,10 @@
   max-width: 75%;
 }
 
+.max-w-80\% {
+  max-width: 80%;
+}
+
 .max-w-72 {
   max-width: 18rem;
 }
@@ -844,6 +848,10 @@
   flex-shrink: 0;
 }
 
+.leading-140\% {
+  line-height: 140%;
+}
+
 .dimmed {
   opacity: .5;
   cursor: default;

app/assets/stylesheets/index.css.scss

@@ -1,4 +1,4 @@
-@import 'sn-stylekit/dist/stylekit';
+@import '@standardnotes/stylekit/dist/stylekit';
 @import 'main';
 @import 'ui';
 @import 'footer';