Improvements to Web UI, Mobile Nav, and Browser Extension UI

toolworks-dev · Dec 24, 2024 · 1aaad66 · 1aaad66
1 parent 1e421fe
commit 1aaad66
Show file tree

Hide file tree

Showing 4 changed files with 173 additions and 66 deletions.
diff --git a/browser-extension/popup/popup.css b/browser-extension/popup/popup.css
@@ -2,35 +2,41 @@ body {
     width: 350px;
     margin: 0;
     padding: 0;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+    font-family: Inter, system-ui, -apple-system, sans-serif;
+    background: var(--background);
+    color: var(--text);
   }
 
   .container {
-    padding: 16px;
+    padding: 1rem;
   }
 
   .header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 16px;
+    margin-bottom: 1rem;
+    padding-bottom: 1rem;
+    border-bottom: 1px solid var(--border);
   }
 
   .header h1 {
     margin: 0;
-    font-size: 18px;
+    font-size: 1.25rem;
+    font-weight: 600;
   }
 
   .search {
-    margin-bottom: 16px;
+    margin-bottom: 1rem;
   }
 
   #searchInput {
     width: 100%;
-    padding: 8px;
-    border: 1px solid #ddd;
-    border-radius: 4px;
-    box-sizing: border-box;
+    padding: 0.75rem;
+    border-radius: 0.5rem;
+    border: 1px solid var(--border);
+    background: var(--surface);
+    transition: var(--transition);
   }
 
   .notes-list {
@@ -39,26 +45,28 @@ body {
   }
 
   .note-item {
-    padding: 8px;
-    border-bottom: 1px solid #eee;
-    cursor: pointer;
+    padding: 0.75rem;
+    border-radius: 0.5rem;
+    margin-bottom: 0.5rem;
+    background: var(--surface);
+    border: 1px solid var(--border);
+    transition: var(--transition);
   }
 
   .note-item:hover {
-    background-color: #f5f5f5;
+    transform: translateY(-1px);
+    box-shadow: var(--shadow-md);
   }
 
   .note-title {
     font-weight: 500;
-    margin-bottom: 4px;
+    margin-bottom: 0.25rem;
+    color: var(--text);
   }
 
   .note-preview {
-    font-size: 12px;
-    color: #666;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    font-size: 0.875rem;
+    color: var(--text-secondary);
   }
 
   .footer {

diff --git a/src/App.css b/src/App.css
@@ -6,19 +6,75 @@
   filter: drop-shadow(0 0 2em #61dafb);
 }
 :root {
-  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  font-family: Inter, system-ui, -apple-system, sans-serif;
   font-size: 16px;
-  line-height: 24px;
+  line-height: 1.5;
   font-weight: 400;
 
-  color: #0f0f0f;
-  background-color: #f6f6f6;
+  /* Light theme */
+  --primary-color: #3b82f6;
+  --primary-hover: #2563eb;
+  --background: #ffffff;
+  --surface: #f8fafc;
+  --border: #e2e8f0;
+  --text: #1e293b;
+  --text-secondary: #64748b;
+
+  /* Shadows */
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+
+  /* Transitions */
+  --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Dark theme */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --primary-color: #60a5fa;
+    --primary-hover: #3b82f6;
+    --background: #0f172a;
+    --surface: #1e293b;
+    --border: #334155;
+    --text: #f8fafc;
+    --text-secondary: #94a3b8;
+  }
+}
+
+/* Modern button styles */
+button {
+  padding: 0.5rem 1rem;
+  border-radius: 0.5rem;
+  font-weight: 500;
+  transition: var(--transition);
+  background: var(--primary-color);
+  color: white;
+  border: none;
+  cursor: pointer;
+  box-shadow: var(--shadow-sm);
+}
+
+button:hover {
+  background: var(--primary-hover);
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-md);
+}
+
+/* Input styles */
+input {
+  padding: 0.5rem 1rem;
+  border-radius: 0.5rem;
+  border: 1px solid var(--border);
+  background: var(--surface);
+  color: var(--text);
+  transition: var(--transition);
+}
 
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
+input:focus {
+  outline: none;
+  border-color: var(--primary-color);
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
 }
 
 .container {
@@ -94,23 +150,3 @@ button {
 #greet-input {
   margin-right: 5px;
 }
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    color: #f6f6f6;
-    background-color: #2f2f2f;
-  }
-
-  a:hover {
-    color: #24c8db;
-  }
-
-  input,
-  button {
-    color: #ffffff;
-    background-color: #0f0f0f98;
-  }
-  button:active {
-    background-color: #0f0f0f69;
-  }
-}
diff --git a/src/styles/mobile.css b/src/styles/mobile.css
@@ -70,3 +70,48 @@
       font-size: 16px !important;
     }
   }
+
+  .mobile-editor {
+    border-radius: 0.75rem;
+    overflow: hidden;
+    box-shadow: var(--shadow-lg);
+    background: var(--surface);
+  }
+
+  .mobile-toolbar {
+    padding: 0.75rem;
+    background: var(--surface);
+    border-bottom: 1px solid var(--border);
+    display: flex;
+    gap: 0.5rem;
+    overflow-x: auto;
+    scrollbar-width: none;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .mobile-toolbar::-webkit-scrollbar {
+    display: none;
+  }
+
+  .mobile-toolbar .mantine-ActionIcon-root {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 0.5rem;
+    transition: var(--transition);
+  }
+
+  .mobile-toolbar .mantine-ActionIcon-root:active {
+    transform: scale(0.95);
+  }
+
+  /* Improved mobile spacing */
+  @media (max-width: 768px) {
+    .mantine-AppShell-main {
+      padding: 0.75rem !important;
+    }
+
+    .mobile-editor {
+      margin: 0 -0.75rem;
+      border-radius: 0;
+    }
+  }
diff --git a/src/styles/richtext.css b/src/styles/richtext.css
@@ -1,35 +1,53 @@
 .ProseMirror {
-    flex: 1 1 auto;
-    min-height: 0;
-    outline: none;
-    overflow-y: auto;
-    height: 100%;
+    padding: 1.5rem;
+    border-radius: 0.75rem;
+    background: var(--surface);
+    border: 1px solid var(--border);
+    box-shadow: var(--shadow-sm);
+    transition: var(--transition);
+    min-height: 300px;
 }
 
-.ProseMirror p {
-  margin: 1em 0;
+.ProseMirror:focus {
+    border-color: var(--primary-color);
+    box-shadow: var(--shadow-md);
 }
 
+/* Typography improvements */
 .ProseMirror h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
+    font-size: 2.25rem;
+    font-weight: 700;
+    color: var(--text);
+    margin: 2rem 0 1rem;
 }
 
 .ProseMirror h2 {
-  font-size: 1.5em;
-  margin: 0.75em 0;
+    font-size: 1.875rem;
+    font-weight: 600;
+    color: var(--text);
+    margin: 1.75rem 0 0.875rem;
 }
 
-.ProseMirror h3 {
-  font-size: 1.17em;
-  margin: 0.83em 0;
+.ProseMirror p {
+    color: var(--text);
+    line-height: 1.75;
+    margin: 1rem 0;
 }
 
 .ProseMirror blockquote {
-  border-left: 3px solid var(--mantine-color-gray-4);
-  margin: 1em 0;
-  padding-left: 1em;
-  color: var(--mantine-color-gray-6);
+    border-left: 4px solid var(--primary-color);
+    margin: 1.5rem 0;
+    padding: 0.5rem 0 0.5rem 1.5rem;
+    font-style: italic;
+    color: var(--text-secondary);
+}
+
+.ProseMirror code {
+    background: var(--surface);
+    border-radius: 0.375rem;
+    padding: 0.2rem 0.4rem;
+    font-size: 0.875em;
+    border: 1px solid var(--border);
 }
 
 .ProseMirror pre {