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';

package.json

@@ -63,7 +63,7 @@
     "pug-loader": "^2.4.0",
     "sass-loader": "^12.2.0",
     "serve-static": "^1.14.1",
-    "sn-stylekit": "5.2.21",
+    "@standardnotes/stylekit": "5.4.0",
     "svg-jest": "^1.0.1",
     "ts-jest": "^27.0.7",
     "ts-loader": "^9.2.6",

yarn.lock

@@ -2662,6 +2662,15 @@
     "@standardnotes/settings" "^1.11.3"
     "@standardnotes/sncrypto-common" "^1.6.0"
 
+"@standardnotes/stylekit@5.4.0":
+  version "5.4.0"
+  resolved "https://registry.yarnpkg.com/@standardnotes/stylekit/-/stylekit-5.4.0.tgz#205697a3f5265a5214e192b89b1a9847e766dba4"
+  integrity sha512-Q7uAoaCYjLD3pcY0QGfh8vyLZT6JQYZYWpyuXOC+lSU4TvS+/fKbZ3aEGMjLn1d/SD7tlj0k3MwuqwCGkEcogw==
+  dependencies:
+    "@reach/listbox" "^0.15.0"
+    "@reach/menu-button" "^0.15.1"
+    prop-types "^15.7.2"
+
 "@svgr/babel-plugin-add-jsx-attribute@^5.4.0":
   version "5.4.0"
   resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-5.4.0.tgz#81ef61947bb268eb9d50523446f9c638fb355906"
@@ -9315,15 +9324,6 @@ slice-ansi@^5.0.0:
     ansi-styles "^6.0.0"
     is-fullwidth-code-point "^4.0.0"
 
-sn-stylekit@5.2.21:
-  version "5.2.21"
-  resolved "https://registry.yarnpkg.com/sn-stylekit/-/sn-stylekit-5.2.21.tgz#5aec6c329949bda64a1e3c563ee594b141295d27"
-  integrity sha512-rjlgo42A/kx+M4iY7HYRpnQyp4dLb2HQpEMHz+CYumOzTf/lsRy0Up5HI1haNK4/JMmpq36Eb/7BMDmvLpdXnQ==
-  dependencies:
-    "@reach/listbox" "^0.15.0"
-    "@reach/menu-button" "^0.15.1"
-    prop-types "^15.7.2"
-
 sockjs@^0.3.21:
   version "0.3.21"
   resolved "https://registry.yarnpkg.com/sockjs/-/sockjs-0.3.21.tgz#b34ffb98e796930b60a0cfa11904d6a339a7d417"