-
UI
-
+
+
+
+
+ topbar
+ content
+ composer
+
)
}
diff --git a/apps/next/styles/app.css b/apps/next/styles/app.css
new file mode 100644
index 00000000..b104cd8c
--- /dev/null
+++ b/apps/next/styles/app.css
@@ -0,0 +1,20 @@
+html,
+body,
+#__next {
+ height: 100%;
+}
+
+div {
+ border: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+#app {
+ height: 100%;
+ display: grid;
+ grid-template-columns: 352px 1fr;
+}
+
+#main {
+ display: grid;
+ grid-template-rows: 56px 1fr 100px;
+}
diff --git a/apps/next/styles/reset.css b/apps/next/styles/reset.css
new file mode 100644
index 00000000..d31c89ed
--- /dev/null
+++ b/apps/next/styles/reset.css
@@ -0,0 +1,88 @@
+/*
+ 1. Use a more-intuitive box-sizing model.
+*/
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+}
+
+:root {
+ font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+ font-size: 16px;
+ line-height: 24px;
+ font-weight: 400;
+
+ color-scheme: light dark;
+ color: rgba(255, 255, 255, 0.87);
+ background-color: #fff;
+
+ font-synthesis: none;
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-text-size-adjust: 100%;
+}
+
+/*
+ 2. Remove default margin
+*/
+* {
+ margin: 0;
+}
+/*
+ 3. Allow percentage-based heights in the application
+*/
+html,
+body {
+ height: 100%;
+ overscroll-behavior: none;
+}
+/*
+ Typographic tweaks!
+ 4. Add accessible line-height
+ 5. Improve text rendering
+*/
+body {
+ line-height: 1.5;
+ -webkit-font-smoothing: antialiased;
+}
+/*
+ 6. Improve media defaults
+*/
+img,
+picture,
+video,
+canvas,
+svg {
+ display: block;
+ max-width: 100%;
+}
+/*
+ 7. Remove built-in form typography styles
+*/
+input,
+button,
+textarea,
+select {
+ font: inherit;
+}
+/*
+ 8. Avoid text overflows
+*/
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ overflow-wrap: break-word;
+}
+/*
+ 9. Create a root stacking context
+*/
+#root,
+#__next {
+ isolation: isolate;
+}
diff --git a/apps/vite/package.json b/apps/vite/package.json
index d1257736..80e65449 100644
--- a/apps/vite/package.json
+++ b/apps/vite/package.json
@@ -2,9 +2,8 @@
"name": "vite-app",
"private": true,
"version": "0.0.0",
- "type": "module",
"scripts": {
- "dev": "vite",
+ "dev": "TAMAGUI_TARGET='web' vite",
"build": "tsc && vite build",
"preview": "vite preview"
},
diff --git a/apps/vite/src/app.css b/apps/vite/src/app.css
deleted file mode 100644
index 2b0fa9a5..00000000
--- a/apps/vite/src/app.css
+++ /dev/null
@@ -1,41 +0,0 @@
-#root {
- margin: 0 auto;
- padding: 0;
- width: 100%;
- text-align: center;
-}
-
-.logo {
- height: 6em;
- padding: 1.5em;
- will-change: filter;
-}
-.logo:hover {
- filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
- filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
- from {
- transform: rotate(0deg);
- }
- to {
- transform: rotate(360deg);
- }
-}
-
-@media (prefers-reduced-motion: no-preference) {
- a:nth-of-type(2) .logo {
- animation: logo-spin infinite 20s linear;
- }
-}
-
-.card {
- padding: 2em;
-}
-
-.read-the-docs {
- color: #888;
-}
diff --git a/apps/vite/src/app.tsx b/apps/vite/src/app.tsx
index cad04d67..52cc3447 100644
--- a/apps/vite/src/app.tsx
+++ b/apps/vite/src/app.tsx
@@ -1,8 +1,14 @@
-import './app.css'
+import { useState } from 'react'
-import React, { useState } from 'react'
-
-import { Code, Heading, Label, Paragraph, Shape } from '@status-im/components'
+import {
+ Button,
+ Code,
+ Heading,
+ Label,
+ Paragraph,
+ Shape,
+ Sidebar,
+} from '@status-im/components'
import { Stack, TamaguiProvider } from '@tamagui/core'
import tamaguiConfig from '../tamagui.config'
@@ -13,32 +19,52 @@ function App() {
const [theme, setTheme] = useState
('light')
return (
-
-
-
- This is an Heading 1
-
- This is an Heading 2
-
-
- This is a paragraph
-
- This is a label
- This is a code
- 0x213abc190 ... 121ah4a9e
- Theme selected - {theme}
- setTheme(theme === 'dark' ? 'light' : 'dark')}>
- Toogle theme
-
-
-
+
+
+
+
+
+ topbar
+
+
+
+ This is an Heading 1
+
+ This is an Heading 2
+
+
+ This is a paragraph
+
+ This is a label
+ This is a code
+ 0x213abc190 ... 121ah4a9e
+
+ Theme selected - {theme}{' '}
+
+ setTheme(theme === 'dark' ? 'light' : 'dark')}
+ >
+ Toogle theme
+
+
+
+
composer
+
+
)
}
diff --git a/apps/vite/src/index.css b/apps/vite/src/index.css
deleted file mode 100644
index bc857f7b..00000000
--- a/apps/vite/src/index.css
+++ /dev/null
@@ -1,70 +0,0 @@
-:root {
- font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
- font-size: 16px;
- line-height: 24px;
- font-weight: 400;
-
- color-scheme: light dark;
- color: rgba(255, 255, 255, 0.87);
- width: 100%;
-
- font-synthesis: none;
- text-rendering: optimizeLegibility;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- -webkit-text-size-adjust: 100%;
-}
-
-a {
- font-weight: 500;
- color: #646cff;
- text-decoration: inherit;
-}
-a:hover {
- color: #535bf2;
-}
-
-body {
- margin: 0;
- display: flex;
- width: 100%;
- min-width: 320px;
- min-height: 100vh;
-}
-
-h1 {
- font-size: 3.2em;
- line-height: 1.1;
-}
-
-button {
- border-radius: 8px;
- border: 1px solid transparent;
- padding: 0.6em 1.2em;
- font-size: 1em;
- font-weight: 500;
- font-family: inherit;
- background-color: #1a1a1a;
- cursor: pointer;
- transition: border-color 0.25s;
-}
-button:hover {
- border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
- outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
- :root {
- color: #213547;
- background-color: #ffffff;
- }
- a:hover {
- color: #747bff;
- }
- button {
- background-color: #f9f9f9;
- }
-}
diff --git a/apps/vite/src/main.tsx b/apps/vite/src/main.tsx
index acbd87f8..71576026 100644
--- a/apps/vite/src/main.tsx
+++ b/apps/vite/src/main.tsx
@@ -1,12 +1,15 @@
-import './index.css'
+import '../styles/reset.css'
+import '../styles/app.css'
import React from 'react'
-import ReactDOM from 'react-dom/client'
+import { createRoot } from 'react-dom/client'
import App from './app'
-ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+const root = document.getElementById('root') as HTMLElement
+
+createRoot(root).render(
diff --git a/apps/vite/styles/app.css b/apps/vite/styles/app.css
new file mode 100644
index 00000000..49572f61
--- /dev/null
+++ b/apps/vite/styles/app.css
@@ -0,0 +1,23 @@
+html,
+body,
+#root {
+ height: 100%;
+ overscroll-behavior: none;
+}
+
+#app {
+ height: 100%;
+ display: grid;
+ grid-template-columns: 352px 1fr;
+}
+
+#main {
+ display: grid;
+ grid-template-rows: 56px 1fr 100px;
+}
+
+#sidebar,
+#main,
+#main > div {
+ border: 1px solid rgba(0, 0, 0, 0.1);
+}
diff --git a/apps/vite/styles/reset.css b/apps/vite/styles/reset.css
new file mode 100644
index 00000000..d31c89ed
--- /dev/null
+++ b/apps/vite/styles/reset.css
@@ -0,0 +1,88 @@
+/*
+ 1. Use a more-intuitive box-sizing model.
+*/
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+}
+
+:root {
+ font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+ font-size: 16px;
+ line-height: 24px;
+ font-weight: 400;
+
+ color-scheme: light dark;
+ color: rgba(255, 255, 255, 0.87);
+ background-color: #fff;
+
+ font-synthesis: none;
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-text-size-adjust: 100%;
+}
+
+/*
+ 2. Remove default margin
+*/
+* {
+ margin: 0;
+}
+/*
+ 3. Allow percentage-based heights in the application
+*/
+html,
+body {
+ height: 100%;
+ overscroll-behavior: none;
+}
+/*
+ Typographic tweaks!
+ 4. Add accessible line-height
+ 5. Improve text rendering
+*/
+body {
+ line-height: 1.5;
+ -webkit-font-smoothing: antialiased;
+}
+/*
+ 6. Improve media defaults
+*/
+img,
+picture,
+video,
+canvas,
+svg {
+ display: block;
+ max-width: 100%;
+}
+/*
+ 7. Remove built-in form typography styles
+*/
+input,
+button,
+textarea,
+select {
+ font: inherit;
+}
+/*
+ 8. Avoid text overflows
+*/
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ overflow-wrap: break-word;
+}
+/*
+ 9. Create a root stacking context
+*/
+#root,
+#__next {
+ isolation: isolate;
+}