V1 testing 17:56

Mrigank118 · Jul 10, 2024 · 2ea2943 · 2ea2943
1 parent 4f85186
commit 2ea2943
Show file tree

Hide file tree

Showing 5 changed files with 516 additions and 374 deletions.
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
@@ -1,17 +1,20 @@
-import React from 'react'
+import React from 'react';
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 import Maincontent from './maincontent';
 import Loginpage from './loginpage';
 import Notes from './notes';
+
 function App() {
-  return ( 
+  const userId = '668d898621c28604796ba8eb'; // Replace with actual logic to get user ID
+
+  return (
     <Router>
       <Routes>
-      <Route path="/" element={<Maincontent />} />
-        <Route path="/notes" element={<Notes />} />
+        <Route path="/" element={<Maincontent />} />
+        <Route path="/notes" element={<Notes userId={userId} />} />
       </Routes>
     </Router>
-  )
+  );
 }
 
-export default App
+export default App;
diff --git a/frontend/src/maincontent.css b/frontend/src/maincontent.css
@@ -12,29 +12,20 @@
 
 }*/
 .app-container.theme-1 {
-  --textcolourmain:#2c3844;
-  --platformcontainer:#f0f7ff;
-  --background-color:#ffffff;
- --border:#b8cce0;
- --input:#f3fbfc ;
- --textnotmain:#6ca6db;
-}
-
-.app-container.theme-3 {
   --textcolourmain:#322d20;
   --platformcontainer:#e6d5bc;
   --background-color:whitesmoke;
  --border:#dbc4a2;
  --input:#ece3d4;
  --textnotmain:#7f6e53;
 }
-.app-container.theme-4 {
+.app-container.theme-2 {
   --textcolourmain:#455a64;
   --platformcontainer:#B9C8BC;
-  --background-color:#A7A88A;
- --border:#455a64;
+  --background-color:whitesmoke;
+ --border:#687f89b9;
  --input:#B9C8BC;
- --textnotmain:#708080;
+ --textnotmain:#505b5b;
 }
 
   /* Define other light theme variables */
@@ -51,11 +42,8 @@
     flex-wrap: wrap;
     justify-content:space-around;
     min-height: 100vh;
-  }
-  .app-container {
-    display: flex;
-    min-height: 100vh;
-    background-color:var(--background-color);
+  background-color: var(--background-color);
+  overflow: hidden;
   }
 
   .sidebar {
@@ -74,6 +62,7 @@
   .user-icon
   {
     margin-top: 5px;
+    fill:var(--textcolourmain);
   }
   .user-title 
   {
@@ -116,13 +105,15 @@
     flex: 1;
    flex-wrap: wrap;
     padding: 20px;
+    overflow: hidden;
   }
 
   .main-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    margin-bottom: 20px;
+    padding-bottom: 40px;
+
   }
   .main-title {
     font-size: 24px;
@@ -136,7 +127,10 @@
     width: 400px;
 
   }
-
+  .header-actions .user-icon
+  {
+    margin: 0;
+  }
   .search-input {
     height: 40px;
     padding: 0 10px;
@@ -155,7 +149,6 @@
     height: 24px;
     margin-right: 10px;
     color:var(--textcolourmain);
-    height:30px;
   }
   .header-icon i
   {
@@ -165,26 +158,55 @@
   .notes-grid {
     display: flex;
     gap: 20px;
+    overflow:hidden;
   }
 
   .notes-column {
     flex: 1;
     display: flex;
     flex-direction: column;
     gap: 20px;
+    overflow-y: auto; /* Enable vertical scrolling */
+    max-height: 100vh; /* Limit height to viewport height */
+    scrollbar-width: none; /* Hide scrollbar in Firefox */
+    -ms-overflow-style: none;  /* Hide scrollbar in Internet Explorer and Edge */
+  }
+
+  /* Hide scrollbar for Chrome, Safari, and Opera */
+  .notes-column::-webkit-scrollbar {
+    display: none;
   }
 
+
   .card {
     border: 1px solid var(--border);
     border-radius: 5px;
-    padding-left:18px;
-    background-color:var(--input);
+    width: auto;
+    height: 130px; /* Initial height */
+    background-color: var(--input);
+    transition: height 0.3s ease; 
+    overflow-y: auto;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+
+
+  }
+  .card::-webkit-scrollbar {
+    display: none;
+  }
+
+  .card:hover {
+    height: auto; /* Adjust height on hover */
   }
 
   .card-header {
     padding: 20px;
-    border-bottom: 1px solid var(--border);
-
+    overflow: hidden; /* Ensures overflow content does not show outside */
+  }
+
+  .card-header:hover {
+    height: auto;
+     /* Allow header to expand on hover */
   }
 
   .card-title {
@@ -194,20 +216,20 @@
   }
 
   .card-description {
-    font-size: 14px;
-    font-weight: bolder;
     font-size: 16px;
-
-    color:var(--textnotmain);
+    font-weight: bolder;
+    color: var(--textnotmain);
   }
 
   .card-footer {
     padding: 20px;
+    height: 50px; /* Fixed height for the footer */
+    background-color: var(--input); /* Ensure background color matches card */
   }
 
   .card-footer-item {
     font-size: 16px;
-    color:var(--textnotmain);
+    color: var(--textnotmain);
   }
 
 
@@ -216,6 +238,8 @@
     border-radius: 5px;
     background-color: var(--background-color);
     height: 600px;
+    margin: 0;
+    overflow: hidden;
   }
 
   .content-header {
@@ -332,7 +356,7 @@
     margin-right: 30px;
     width: 250px;
   }
-
+  
   .music-buttons
   {
     display: flex;
@@ -406,4 +430,125 @@
   .login-overlay .close-login:hover {
     background: var(--textnotmain);
   }
-
+
+@media (max-width: 599px) {
+  .app-container {
+    flex-direction: column;
+    padding: 10px;
+  }
+
+  .sidebar {
+    width: 100%;
+    border-right: none;
+    border-bottom: 2px solid var(--border);
+    padding: 15px;
+  }
+
+  .main-content {
+    padding: 10px;
+  }
+
+  .notes-column {
+    max-height: 50vh;
+  }
+
+  .header-actions {
+    width: 100%;
+    justify-content: space-between;
+  }
+}
+
+
+@media (min-width: 600px) and (max-width: 767px) {
+  .sidebar {
+    width: 150px;
+    padding: 20px;
+  }
+
+  .header-actions {
+    width: 300px;
+  }
+
+  .notes-column {
+    max-height: 60vh;
+  }
+
+  #textarea {
+    width: 100%;
+    margin: 20px;
+  }
+
+  .prompt {
+    width: 100%;
+  }
+}
+
+
+@media (min-width: 768px) and (max-width: 991px) {
+  .sidebar {
+    width: 180px;
+    padding: 20px;
+  }
+
+  .header-actions {
+    width: 350px;
+  }
+
+  .notes-column {
+    max-height: 70vh;
+  }
+
+  #textarea {
+    width: 90%;
+  }
+
+  .prompt {
+    width: 90%;
+  }
+}
+
+@media (min-width: 992px) and (max-width: 1199px) {
+  .sidebar {
+    width: 200px;
+    padding: 25px;
+  }
+
+  .header-actions {
+    width: 400px;
+  }
+
+  .notes-column {
+    max-height: 80vh;
+  }
+
+  #textarea {
+    width: 90%;
+  }
+
+  .prompt {
+    width: 90%;
+  }
+}
+
+@media (min-width: 1200px) {
+  .sidebar {
+    width: 220px;
+    padding: 25px;
+  }
+
+  .header-actions {
+    width: 450px;
+  }
+
+  .notes-column {
+    max-height: 90vh;
+  }
+
+  #textarea {
+    width: 90%;
+  }
+
+  .prompt {
+    width: 90%;
+  }
+}