feat: mobile app package (#1075)

packages/mobile/src/Screens/Root.styled.ts

@@ -0,0 +1,42 @@
+import styled, { css } from 'styled-components/native'
+
+export const Container = styled.View`
+  flex: 1;
+  flex-direction: row;
+`
+export const NotesContainer = styled.View<{
+  isInTabletMode?: boolean
+  notesListCollapsed?: boolean
+}>`
+  ${({ isInTabletMode, notesListCollapsed, theme }) => {
+    return isInTabletMode
+      ? css`
+          border-right-color: ${theme.stylekitBorderColor};
+          border-right-width: ${notesListCollapsed ? 0 : 1}px;
+          width: ${notesListCollapsed ? 0 : '40%'};
+        `
+      : css`
+          flex: 1;
+        `
+  }}
+`
+export const ComposeContainer = styled.View`
+  flex: 1;
+`
+
+export const ExpandTouchable = styled.TouchableHighlight.attrs(({ theme }) => ({
+  underlayColor: theme.stylekitBackgroundColor,
+}))`
+  justify-content: center;
+  position: absolute;
+  left: 0px;
+  padding: 7px;
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+  margin-top: -12px;
+`
+
+export const iconNames = {
+  md: ['arrow-dropright', 'arrow-dropleft'],
+  ios: ['arrow-forward', 'arrow-back'],
+}