Some updates to the readme

Fixes to app-compat

README.md

@@ -23,7 +23,7 @@ Home of the core NativeScript theme 2.0 beta. The documentation of the beta them
 
 * The theme is now **applied using Element selectors**, if you need the old classes approach - it has moved to .compat CSS/SCSS files, e.g. `core.compat.css` and `blue.compat.css`.
 * Theme 2.0 beta **requires some JavaScript to be loaded** which helps with the styling.
-* Theme 2.0 replaces node-sass with **dart-sass** which is more up to date feature-wise and doesn't have a native dependency. 
+* Theme 2.0 replaces node-sass with **sass** which is more up to date feature-wise and doesn't have a native dependency. 
 
 ## Usage
 
@@ -69,6 +69,12 @@ RadSideDrawer, just add a class to it, like this:
 </drawer:RadSideDrawer>
 ```
 
+If your root is a frame, you can do this
+
+```html
+<Frame class="ns-dark" defaultPage="root"></Frame>
+```
+
 You can also do it from JavaScript like this, for instance:
 
 ```javascript
@@ -77,7 +83,10 @@ import { getRootView } from "tns-core-modules/application";
 getRootView().className += " ns-dark";
 ```
 
-This of course won't remove your previously added classes.
+This of course won't remove your previously added classes. Also make sure the root view is already initialized by then.
+
+For **Angular**, if your root is a `page-router-outlet`, you can set the .ns-dark class on it - it will pass it down to the 
+Frame it renders. 
 
 ## More Root Classes
 

app-compat/app-root/app-root.xml

@@ -1,5 +1,5 @@
 <drawer:RadSideDrawer
-        class="ns-statusbar-transparent"
+        class="ns-statusbar-transparent side-drawer"
         xmlns:drawer="nativescript-ui-sidedrawer"
         xmlns:themes="pages/themes"
         loaded="onLoaded">
@@ -8,16 +8,16 @@
     </drawer:RadSideDrawer.drawerTransition>
 
     <drawer:RadSideDrawer.drawerContent>
-        <GridLayout rows="auto, *" class="nt-drawer__content page">
-            <StackLayout class="nt-drawer__header">
-                <Image src="~/assets/images/N.png" tap="{{ viewHome }}" class="nt-drawer__header-image"/>
-                <Label text="NativeScript Theme Project" textWrap="true" class="nt-drawer__header-brand" />
+        <GridLayout rows="auto, *" class="page">
+            <StackLayout class="sidedrawer-header">
+                <Image src="~/assets/images/N.png" tap="{{ viewHome }}" class="sidedrawer-header-image"/>
+                <Label text="NativeScript Theme Project" textWrap="true" class="sidedrawer-header-brand" />
             </StackLayout>
             <ListView class="list-view" row="1" items="{{ pages }}" itemTap="{{ onNavigationItemTap }}">
                 <ListView.itemTemplate>
-                    <StackLayout orientation="horizontal">
-                        <Label text="{{ 'fa-' + icon | fonticon }}" class="fa nt-icon" />
-                        <Label text="{{ text || value }}" />
+                    <StackLayout class="sidedrawer-list-item" orientation="horizontal">
+                        <Label text="{{ 'fa-' + icon | fonticon }}" class="fa sidedrawer-list-item-icon" />
+                        <Label text="{{ text || value }}" class="sidedrawer-list-item-text" />
                     </StackLayout>
                 </ListView.itemTemplate>
             </ListView>

nsconfig.json

@@ -1,4 +1,4 @@
 {
 	"useLegacyWorkflow": false,
-	"appPath": "app"
+	"appPath": "app-compat"
 }

src/scss/mixins/components/_side--drawer.scss

@@ -30,7 +30,7 @@
 
                 .sidedrawer-list-item-icon {
                     margin: 0 16 0 16;
-                    padding-top: 14;
+                    padding-top: 6;
                     width: 24;
                     text-align: center;
                     font-size: 20;