More polish

Raathigesh · Aug 27, 2021 · 9b43d5d · 9b43d5d
1 parent f341bc2
commit 9b43d5d
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 13 deletions.
diff --git a/src/ui/App.tsx b/src/ui/App.tsx
@@ -50,8 +50,11 @@ function App() {
                 <Flex
                     justifyContent="space-between"
                     alignItems="center"
-                    backgroundColor="brand.100"
+                    backgroundColor="brand.500"
                     padding="3px"
+                    borderBottom="1px solid"
+                    borderBottomColor="brand.300"
+                    color="brand.400"
                 >
                     <Flex marginLeft="15px" fontSize="12px">
                         {activeDoc && activeDoc.name}

diff --git a/src/ui/docs-list/DocItem.tsx b/src/ui/docs-list/DocItem.tsx
@@ -43,6 +43,12 @@ export function DocItem({ isActive, onClick, doc, onRename, onDelete }: Props) {
                             _hover={{
                                 borderColor: 'brand.200',
                             }}
+                            onKeyDown={e => {
+                                if (e.key == 'Enter') {
+                                    setIsEditMode(false);
+                                    onRename(doc.id, docName);
+                                }
+                            }}
                             size="small"
                             value={docName}
                             onChange={e => setDocName(e.target.value)}

diff --git a/src/ui/editor-views/file-bookmark/Component.tsx b/src/ui/editor-views/file-bookmark/Component.tsx
@@ -44,7 +44,7 @@ export default (props: any) => {
             <Flex
                 display="inline-flex"
                 backgroundColor="brand.100"
-                color="brand.400"
+                color="brand.800"
                 borderRadius="4px"
                 fontSize="14px"
                 cursor="pointer"
@@ -58,7 +58,7 @@ export default (props: any) => {
                 </Flex>
                 <Flex
                     _hover={{
-                        backgroundColor: 'brand.400',
+                        backgroundColor: 'brand.900',
                         color: 'brand.100',
                     }}
                     padding="7px"

diff --git a/src/ui/editor-views/file-tree/Component.tsx b/src/ui/editor-views/file-tree/Component.tsx
@@ -90,21 +90,23 @@ export default (props: any) => {
         >
             <Flex
                 flexDir="column"
-                border="1px solid brand.300"
+                border="1px solid"
+                borderColor="brand.300"
                 borderRadius="3px"
                 padding="10px"
                 flexGrow={1}
-                backgroundColor="brand.300"
             >
                 <Flex alignItems="center">
                     <Input
                         onChange={e => setPath(e.target.value)}
                         value={props.node.attrs.path}
                         borderColor="brand.300"
-                        size="xs"
+                        color="brand.600"
+                        size="sm"
                         backgroundColor="brand.300"
                         _hover={{ border: '1px solid brand.500' }}
                         borderRadius="4px"
+                        placeholder="Paste a directory path here"
                     />
                     <Tooltip label="Refresh file tree">
                         <Button

diff --git a/src/ui/editor-views/file-tree/Node.tsx b/src/ui/editor-views/file-tree/Node.tsx
@@ -35,6 +35,8 @@ export function Node({
             )
         ) : null;
     const Icon = type === 'file' ? File : Folder;
+
+    const isActive = selectedEditor?.toLowerCase() === path.toLowerCase();
     return (
         <Flex flexDir="column" marginLeft="20px">
             <Flex
@@ -46,11 +48,8 @@ export function Node({
                 _hover={{
                     backgroundColor: 'brand.700',
                 }}
-                backgroundColor={
-                    selectedEditor?.toLowerCase() === path.toLowerCase()
-                        ? 'brand.700'
-                        : 'none'
-                }
+                backgroundColor={isActive ? 'brand.700' : 'none'}
+                color={isActive ? 'brand.800' : 'none'}
                 onClick={e => {
                     e.stopPropagation();
                     if (type === 'file') {

diff --git a/src/ui/editor-views/selection-bookmark/Component.tsx b/src/ui/editor-views/selection-bookmark/Component.tsx
@@ -75,7 +75,7 @@ export default (props: any) => {
             <Flex
                 display="inline-flex"
                 backgroundColor="brand.100"
-                color="brand.400"
+                color="brand.800"
                 borderRadius="5px"
                 fontSize="14px"
                 cursor="pointer"
@@ -89,7 +89,7 @@ export default (props: any) => {
                 </Flex>
                 <Flex
                     _hover={{
-                        backgroundColor: 'brand.400',
+                        backgroundColor: 'brand.900',
                         color: 'brand.100',
                     }}
                     padding="6px"

diff --git a/src/ui/theme.ts b/src/ui/theme.ts
@@ -49,6 +49,8 @@ export const theme = extendTheme({
             500: '#1C1C1E',
             600: '#f1f0ee',
             700: '#25252e',
+            800: '#ffc107',
+            900: '#e91e63',
         },
     },
 });