bidnavbar ui stlying changes

mytender-io · Jan 31, 2025 · e95ef72 · e95ef72
1 parent 2c98c7a
commit e95ef72
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 40 deletions.
diff --git a/src/components/TenderAnalysis.tsx b/src/components/TenderAnalysis.tsx
@@ -515,6 +515,7 @@ const TenderAnalysis = ({ canUserEdit }) => {
               backgroundColor: `${theme.palette.primary.main} !important`
             },
             // More specific selector for tab root
+            // Change this part in the Tabs sx prop
             "& .MuiTab-root": {
               textTransform: "none",
               minHeight: "48px",
@@ -524,8 +525,8 @@ const TenderAnalysis = ({ canUserEdit }) => {
                 color: "#000000"
               },
               "&:hover": {
-                color: `${theme.palette.primary.main} !important`,
-                backgroundColor: `${theme.palette.custom.lighter} !important`,
+                color: `${theme.palette.primary.main} !important`, // Changed to main orange
+                backgroundColor: `${theme.palette.custom.lighter} !important`, // Keep light orange background
                 ".lucide": {
                   color: `${theme.palette.primary.main} !important`
                 }

diff --git a/src/routes/BidNavbar.css b/src/routes/BidNavbar.css
@@ -8,6 +8,7 @@
 .bidnav-section {
     display: flex;
     align-items: center;
+    /* Remove width: 100% */
 }
 
 .bidnav-container {
@@ -28,7 +29,7 @@
     font-weight: 600;
     text-decoration: none;
     color: #999;
-    padding: 0.357rem 0.714rem;
+    padding: 0.6rem 0.714rem;
     cursor: pointer;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     position: relative;
@@ -37,24 +38,27 @@
 .bidnav-item::after {
     content: "";
     position: absolute;
-    bottom: 0;
+    bottom: -0.3rem;
+    /* Align with the grey border */
     left: 0;
     width: 0;
     height: 0.143rem;
-    background-color: black;
+    background-color: #FF8019;
     transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .bidnav-item:hover {
-    color: black;
+    color: #FF8019;
+    /* Changed from black to orange */
 }
 
 .bidnav-item:hover::after {
     width: 100%;
 }
 
 .bidnav-item.active {
-    color: black;
+    color: #FF8019;
+    /* Changed from black to orange */
 }
 
 .bidnav-item.active::after {
@@ -74,7 +78,8 @@
 
 .back-arrow-button:hover {
     transform: translateX(-0.214rem);
-    color: #666;
+    color: #FF8019;
+    /* Changed from #666 to orange */
 }
 
 .back-arrow-button:focus {
@@ -83,4 +88,13 @@
 
 .back-arrow-button:active {
     transform: translateX(-0.143rem);
+}
+
+.buttons-container {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    /* Prevent shrinking */
+    margin-bottom: 1rem;
+    /* Match the nav items spacing */
 }
diff --git a/src/routes/BidNavbar.tsx b/src/routes/BidNavbar.tsx
@@ -20,7 +20,7 @@ const BidNavbar = ({
   showViewOnlyMessage = () => {},
   initialBidName = "",
   outline = [], // default value
-  sidebarCollapse= false,
+  sidebarCollapse = false,
   object_id = null,
   handleRegenerateClick = () => {}
 }) => {
@@ -112,8 +112,7 @@ const BidNavbar = ({
   console.log(initialBidName);
   return (
     <div>
-      <div
-      >
+      <div>
         <BidTitle
           canUserEdit={true}
           displayAlert={displayAlert}
@@ -124,8 +123,15 @@ const BidNavbar = ({
         />
       </div>
 
-      <div >
-        <div style={{ display: "flex", justifyContent: "space-between" }}>
+      <div>
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            borderBottom: "0.143rem solid #ebecef"
+          }}
+        >
           <div className="bidnav-section mt-3 mb-1">
             <NavLink
               to="/bid-extractor"
@@ -159,16 +165,13 @@ const BidNavbar = ({
           {outline.length === 0 ? (
             <div></div>
           ) : (
-            <div>
+            <div className="buttons-container">
               <button
                 onClick={handleRegenerateClick}
                 className="upload-button me-2"
                 style={{ minWidth: "fit-content" }}
               >
-                <FontAwesomeIcon
-                  icon={faPlus}
-                  className="pr-2"
-                ></FontAwesomeIcon>
+                <FontAwesomeIcon icon={faPlus} className="pr-2" />
                 New Outline
               </button>
               <GenerateProposalModal bid_id={object_id} outline={outline} />

diff --git a/src/views/Library.css b/src/views/Library.css
@@ -31,28 +31,6 @@
     padding-right: calc(2.143rem + 320px);
 }
 
-
-/* Header container styles */
-
-.header-container {
-    padding-left: 22.857rem;
-    padding-right: 2.143rem;
-    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.header-container.sidebar-collapsed {
-    padding-left: 8.3rem;
-}
-
-
-/* Add this new class for sidepane open state */
-
-.header-container.sidepane-open {
-    padding-right: calc(2.143rem + 300px);
-}
-
-.scroll-container {}
-
 .library-container {
     box-shadow: 0 0.429rem 0.857rem rgba(0, 0, 0, 0.15);
     border: 0.071rem solid #ced4da;