Minor UI changes

pratikkabade · Mar 27, 2024 · 5faeee8 · 5faeee8
1 parent 756e3f8
commit 5faeee8
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 4 deletions.
diff --git a/src/components/core/TransactionItem.tsx b/src/components/core/TransactionItem.tsx
@@ -16,18 +16,18 @@ export const TransactionItem = (props: AccountProps) => {
             <div className="p-5 lg:w-96 md:w-72 m-5 bg-slate-100 dark:bg-slate-800 rounded-2xl hover:shadow-lg cursor-default">
                 <p
                     key={item.id + 'date'}
-                    className="text-xl font-bold">
+                    className="text-start text-xl font-bold">
                     {getDate(item.dateTime)}
                 </p>
                 <p
                     key={item.id + 'day'}
-                    className="text-slate-500 dark:text-slate-300 text-sm font-medium">
+                    className="text-start text-slate-500 dark:text-slate-300 text-sm font-medium">
                     {getDay(item.dateTime)}
                 </p>
 
                 <div className="flex flex-row flex-wrap justify-around text-lg font-bold my-5">
                     <div
-                        onClick={() =>{
+                        onClick={() => {
                             props.setCategoryC(item.categoryName)
                             props.setAccountC('')
                         }}>
@@ -53,7 +53,7 @@ export const TransactionItem = (props: AccountProps) => {
                 <p key={item.id + 'id'} className="text-2xl font-bold my-3">
                     {item.title}
                 </p>
-                <p key={item.id + 'description'} className="text-slate-500 dark:text-slate-200 my-3">
+                <p key={item.id + 'description'} className="text-lg text-slate-500 dark:text-slate-200 my-3">
                     {item.description}
                 </p>
                 <p key={item.id + 'amount'}

diff --git a/src/styles/App.css b/src/styles/App.css
@@ -56,4 +56,25 @@ html {
     position: fixed;
     right: -2rem;
     bottom: 3rem;
+}
+
+.scrl {
+    height: 100vh;
+    overflow-y: auto;
+}
+
+.scrl2 {
+    height: 50vh;
+    overflow-y: auto;
+}
+
+@media screen and (max-width: 1024px) {
+    .scrl {
+        height: auto;
+        overflow-y: hidden;
+    }
+}
+
+.bg-opacity-50{
+    backdrop-filter: blur(3px) !important;
 }