UI Improvement

mayankjaviya · Nov 18, 2023 · b3834d7 · b3834d7
1 parent 9da9485
commit b3834d7
Show file tree

Hide file tree

Showing 9 changed files with 34 additions and 26 deletions.
diff --git a/resources/css/app.css b/resources/css/app.css
@@ -0,0 +1,21 @@
+::-webkit-scrollbar {
+    width: 0px;
+}
+
+.navbar, .task-card{
+    background-color: #bcc0c3;
+}
+
+.text-success , .navbar-success ,body{
+    color: #237373 !important;
+    font-weight: 500;
+}
+
+.navbar-brand{
+    color: #237373 !important;
+    font-weight: bolder;
+}
+
+.main-container{
+    background-color: #b5c9d842;
+}
diff --git a/resources/images/Screenshot.png b/resources/images/Screenshot.png
diff --git a/resources/js/Layouts/Layout.jsx b/resources/js/Layouts/Layout.jsx
@@ -1,11 +1,12 @@
 import React from "react";
 import Navbar from "./Navbar";
+import "../../css/app.css";
 
 export default function Layout({children}) {
         return (
-            <div className="">
-                <Navbar/>
-            <div className="main-content mt-5">{children}</div>
+            <div className="main-container">
+                <Navbar />
+                <div className="main-content mt-5">{children}</div>
             </div>
-        )
+        );
 }
diff --git a/resources/js/Layouts/Navbar.jsx b/resources/js/Layouts/Navbar.jsx
@@ -4,7 +4,7 @@ import React from "react";
 export default function Navbar() {
 
     return (
-        <nav className="navbar navbar-expand-lg navbar-light bg-light sticky-top">
+        <nav className="navbar navbar-expand-lg navbar-light sticky-top">
             <div className="container-fluid">
                 <a className="navbar-brand fs-3" href="/todo">
                     Inertia Reactive PMS

diff --git a/resources/js/Pages/Todo/Theme1/Sections/Sections.jsx b/resources/js/Pages/Todo/Theme1/Sections/Sections.jsx
@@ -23,7 +23,7 @@ export default function Sections(props) {
 
     return (
         <div
-            className="my-2 shadow shadow-md py-3"
+            className="my-2 shadow shadow-md py-3 task-card"
             onDrop={(event) => onDrop(event, section)}
             onDragOver={(event) => onDragOver(event)}
         >

diff --git a/resources/js/Pages/Todo/Theme1/Task.jsx b/resources/js/Pages/Todo/Theme1/Task.jsx
@@ -92,6 +92,7 @@ export default function Task(props) {
                                 style={
                                     task.type && {
                                         backgroundColor: task.type.color,
+                                        color: "#fff",
                                     }
                                 }
                                 className="btn dropdown-toggle py-0"

diff --git a/resources/js/Pages/Todo/Theme2/Task.jsx b/resources/js/Pages/Todo/Theme2/Task.jsx
@@ -4,25 +4,12 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import React, { useState } from "react";
-import { AllSection } from "../../Keys";
 import { Link, router, usePage } from "@inertiajs/react";
 import { faCircleCheck } from "@fortawesome/free-regular-svg-icons";
 
 export default function Task(props) {
     const { types } = usePage().props;
     const { task, draggedTaskId } = props;
-    const changeStatus = (id, section) => {
-        router.put(
-            `/todo/${id}`,
-            {
-                section: section,
-            },
-            {
-                preserveScroll: true,
-                only: ["tasks"],
-            }
-        );
-    };
 
     const [showCheck, setShowCheck] = useState({ id: null, show: false });
 
@@ -93,6 +80,7 @@ export default function Task(props) {
                                     style={
                                         task.type && {
                                             backgroundColor: task.type.color,
+                                            color: "#fff",
                                         }
                                     }
                                     className="btn dropdown-toggle py-0"

diff --git a/resources/js/Pages/Todo/Theme2/Theme2.jsx b/resources/js/Pages/Todo/Theme2/Theme2.jsx
@@ -13,7 +13,7 @@ export default function Theme2(props) {
     } = props;
     return (
         <div className="row">
-            <div className="w-25 px-1 ">
+            <div className="col-sm-3 px-1 ">
                 <Sections
                     tasks={tasks}
                     setDraggedTaskId={setDraggedTaskId}
@@ -23,7 +23,7 @@ export default function Theme2(props) {
                     onDrop={onDrop}
                 />
             </div>
-            <div className="w-25 px-1">
+            <div className="col-sm-3 px-1">
                 <Sections
                     tasks={tasks}
                     setDraggedTaskId={setDraggedTaskId}
@@ -33,7 +33,7 @@ export default function Theme2(props) {
                     onDrop={onDrop}
                 />
             </div>
-            <div className="w-25 px-1">
+            <div className="col-sm-3 px-1">
                 <Sections
                     tasks={tasks}
                     setDraggedTaskId={setDraggedTaskId}
@@ -45,7 +45,7 @@ export default function Theme2(props) {
             </div>
 
             {/* Completed Task */}
-            <div className="w-25 px-1">
+            <div className="col-sm-3 px-1">
                 <Completed completedTasks={completedTasks} />
             </div>
         </div>

diff --git a/resources/views/app.blade.php b/resources/views/app.blade.php
@@ -15,9 +15,6 @@
         body{
             font-family: 'Dosis', sans-serif;
         }
-        h1,h2,h3,h4,h5,h6{
-            font-family: 'Young Serif', serif;
-        }
     </style>
   </head>
   <body>