Improve CSS

4 files changed, 42 insertions, 14 deletions

diff --git a/extension/src/Bookmark.tsx b/extension/src/Bookmark.tsx
index 125344e..fcc6756 100644
--- a/extension/src/Bookmark.tsx
+++ b/extension/src/Bookmark.tsx
@@ -2,7 +2,7 @@ import BookmarkTreeNode = chrome.bookmarks.BookmarkTreeNode;
 
 function Bookmark(props: {data: BookmarkTreeNode}) {
     return(
-        <a className="bookmark" id = "draggable" href={props.data.url}>
+        <a className="bookmark draggable" href={props.data.url}>
             <img alt="Bookmark icon" src={faviconURL(props.data.url)}></img>
             <span>{props.data.title}</span>
         </a>
diff --git a/extension/src/Folder.tsx b/extension/src/Folder.tsx
index 1695b41..93cc286 100644
--- a/extension/src/Folder.tsx
+++ b/extension/src/Folder.tsx
@@ -13,11 +13,22 @@ function Folder (props: {data: BookmarkTreeNode}) {
                             ? <Folder data={child} />
                             : <Bookmark data={child} />
                     )
-                    
                 }
             </div>
         </div>
     )
 }
 
+// if (props.data.children) {
+//     let l = [];
+//     for (let child of props.data.children) {
+//         if (child.children) {
+//             l.push(<Folder data={child} />)
+//         } else {
+//             l.push(<Bookmark data={child} />)
+//         }
+//     }
+//     return l
+// }
+
 export default Folder;
\ No newline at end of file
diff --git a/extension/src/index.css b/extension/src/index.css
index ad9f954..301b98f 100644
--- a/extension/src/index.css
+++ b/extension/src/index.css
@@ -1,40 +1,57 @@
 body {
-  background-color: #1e1e1e;
+  background-color: #242424;
   color: white;
+  font-family: sans-serif;
 }
 
+/* Folder */
 .folder {
+  width: 100%;
   display: flex;
   flex-direction: column;
-  border-width: 2px;
   border-style: solid;
-  border-color: black;
+  border-width: 1px;
+  border-color: #393939;
   padding: 2px;
-  margin: 2px;
+  margin: 5px;
   padding: 10px;
 }
 
-
 .folder > div {
   display: flex;
   flex-direction: row;
-  
+  flex-wrap: wrap;
 }
 
-.bookmark > img{
-  padding: 10px;
-  
+.folder > span {
+  font-weight: bold;
+  font-size: 20px;
+  margin: 5px;
 }
 
+/* Bookmark */
 .bookmark {
   display: flex;
   flex-direction: column;
   width: 100px;
-  padding: 20px;
+  padding: 10px;
+  margin: 5px;
+}
+
+.bookmark > img {
+  padding: 15px;
+
+}
+
+.bookmark > span {
+  text-wrap: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  text-align: center;
 }
 
 .bookmark:hover {
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: rgba(0, 0, 0, 0.3);
 }
 
 a {
diff --git a/extension/tsconfig.app.tsbuildinfo b/extension/tsconfig.app.tsbuildinfo
index 65e1504..a21fd05 100644
--- a/extension/tsconfig.app.tsbuildinfo
+++ b/extension/tsconfig.app.tsbuildinfo
@@ -1 +1 @@
-{"root":["./src/bookmark.tsx","./src/folder.tsx","./src/main.tsx","./src/vite-env.d.ts"],"version":"5.6.2"}
\ No newline at end of file
+{"root":["./src/Bookmark.tsx","./src/Folder.tsx","./src/main.tsx","./src/vite-env.d.ts"],"version":"5.6.2"}
\ No newline at end of file