ui: make a little responsive

apps/web/package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@rebass/forms": "^4.0.6",
     "emotion-theming": "^10.0.19",
     "quill-blot-formatter": "^1.0.5",
     "quill-emoji": "^0.1.7",
@@ -15,6 +16,9 @@
     "react-scripts": "3.2.0",
     "rebass": "^4.0.7"
   },
+  "devDependencies": {
+    "babel-loader": "8.0.6"
+  },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",

apps/web/src/Components/Editor/index.js

@@ -3,7 +3,8 @@ import "./editor.css";
 import ReactQuill, { Quill } from "react-quill";
 import "react-quill/dist/quill.bubble.css";
 import "react-quill/dist/quill.snow.css";
-import { Box } from "rebass";
+import { Flex, Box } from "rebass";
+import { Input } from "@rebass/forms";
 import MarkdownShortcuts from "./modules/markdown";
 import MagicUrl from "quill-magic-url";
 
@@ -34,23 +35,35 @@ const Editor = props => {
   useEffect(() => {
     // move the toolbar outside (easiest way)
     const toolbar = document.querySelector(".ql-toolbar.ql-snow");
-    const quill = document.querySelector(".quill");
-    const editor = document.querySelector(".editor");
-    if (toolbar && quill && editor) {
-      editor.appendChild(toolbar);
-      editor.appendChild(quill);
+    //const quill = document.querySelector(".quill");
+    // const editor = document.querySelector(".editor");
+    const toolbarContainer = document.querySelector("#toolbar");
+    if (toolbar && toolbarContainer) {
+      // const box = <Box>{toolbar}</Box>;
+      toolbarContainer.appendChild(toolbar);
+      //editor.appendChild(quill);
     }
   });
   return (
-    <Box
+    <Flex
       className="editor"
-      display="flex"
+      width={["0%", "60%", "70%"]}
       flex="1 1 auto"
       flexDirection="column"
     >
-      <input className="editor-title" placeholder="Untitled" />
+      <Input
+        placeholder="Untitled"
+        fontFamily="body"
+        fontWeight="heading"
+        fontSize="heading"
+        display={["none", "flex", "flex"]}
+        sx={{ borderWidth: 0, ":focus": { outline: "none" } }}
+        px={3}
+        py={3}
+      />
+      <Box id="toolbar" display={["none", "flex", "flex"]}></Box>
       <ReactQuill modules={modules} theme="snow" />
-    </Box>
+    </Flex>
   );
 };
 export default Editor;

apps/web/src/app.js

@@ -3,6 +3,7 @@ import "./app.css";
 import Editor from "./Components/Editor";
 import { ThemeProvider } from "emotion-theming";
 import { Flex, Box, Text, Button, Card, Heading } from "rebass";
+import { Input } from "@rebass/forms";
 import * as Icon from "react-feather";
 import theme from "./theme";
 
@@ -39,7 +40,7 @@ function App() {
   return (
     <ThemeProvider theme={theme}>
       <Flex height="100%" alignContent="stretch">
-        <Box minWidth={70} maxWidth={70} bg="navbg" px={0}>
+        <Box width={[0, 0, 70]} bg="navbg" px={0}>
           {navItems.map((item, index) => (
             <NavMenuItem
               onSelected={() => setSelectedIndex(index)}
@@ -51,47 +52,62 @@ function App() {
         </Box>
         <Flex flex="1 1 auto" flexDirection="row" alignContent="stretch" px={0}>
           <Flex
-            bg="#fbfbfb"
+            bg="primary"
             flexDirection="column"
             flex="1 1 auto"
             px={3}
             py={3}
-            width="15%"
+            width={["100%", "40%", "13%"]}
           >
             <Heading fontSize="heading">Notes</Heading>
-            <input
+            <Input
               placeholder="Search"
-              style={{
-                marginTop: 8,
-                marginBottom: 16,
-                borderRadius: 5,
+              fontFamily="body"
+              fontWeight="body"
+              fontSize="input"
+              bg="navbg"
+              my={2}
+              px={3}
+              py={3}
+              sx={{
+                boxShadow: "0 0 5px 2px #b0b0b099",
                 borderWidth: 0,
-                padding: 13,
-                fontFamily: "Quicksand, sans-serif",
-                fontWeight: 500,
-                fontSize: 16,
-                boxShadow: "0 0 3px 0px #f0f0f0"
+                borderRadius: "default"
               }}
             />
-            <Box bg="primary" px={3} py={3} sx={{ borderRadius: "default" }}>
+            <Box
+              bg="navbg"
+              my={2}
+              px={3}
+              py={3}
+              sx={{ borderRadius: "default" }}
+            >
               <Flex flexDirection="row" justifyContent="space-between">
-                <Text fontFamily="body" fontWeight="bold">
+                <Text fontFamily="body" fontSize="title" fontWeight="bold">
                   This is a note title
                 </Text>
                 <Flex flexDirection="row">
-                  <Icon.Share2 size={20} strokeWidth={1.3} />
+                  <Icon.Share2 size={20} strokeWidth={1.5} />
                   <Icon.Heart
                     size={20}
-                    strokeWidth={1.3}
-                    style={{ marginLeft: 5 }}
+                    strokeWidth={1.5}
+                    style={{ marginLeft: 15, marginRight: 10 }}
                   />
-                  <Icon.MoreVertical size={20} strokeWidth={1.3} />
+                  <Icon.MoreVertical size={20} strokeWidth={1.5} />
                 </Flex>
               </Flex>
-              <Text fontFamily="body" fontSize="body">
+              <Text fontFamily="body" fontSize="body" sx={{ marginTop: 1 }}>
                 You are born to be the greatest there ever was. Embrace your
                 true powers!
               </Text>
+              <Text
+                fontFamily="body"
+                fontWeight="body"
+                fontSize={12}
+                color="accent"
+              >
+                5 hours ago
+              </Text>
             </Box>
           </Flex>
           <Editor />

apps/web/src/theme.js

@@ -1,5 +1,5 @@
 export default {
-  breakpoints: ["40em", "52em", "64em"],
+  breakpoints: ["480px", "834px", "1200px"],
   colors: {
     primary: "white",
     accent: "#1790F3",
@@ -9,9 +9,11 @@ export default {
     fontPrimary: "black",
     fontSecondary: "white"
   },
-  //fontSizes: [12, 14, 16, 20, 24, 32, 48, 64],
+  space: [0, 5, 10, 12],
   fontSizes: {
     heading: 42,
+    input: 16,
+    title: 18,
     body: 14
   },
   fontWeights: {

apps/web/yarn.lock

@@ -1244,6 +1244,13 @@
   resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz#2b5a3ab3f918cca48a8c754c08168e3f03eba61b"
   integrity sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==
 
+"@rebass/forms@^4.0.6":
+  version "4.0.6"
+  resolved "https://registry.yarnpkg.com/@rebass/forms/-/forms-4.0.6.tgz#19a3af64f855baa65dec65aecadda5cd95a09dd7"
+  integrity sha512-20dHAlb5V0Na2HxCr73Jjoc4hD1ElimmlBpQtclXMoXUsjJ7ORdCNL1S9R54MX5f7iU2VrLGHU42eL7+nONNPQ==
+  dependencies:
+    reflexbox "^4.0.6"
+
 "@styled-system/background@^5.1.2":
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/@styled-system/background/-/background-5.1.2.tgz#75c63d06b497ab372b70186c0bf608d62847a2ba"