From 40bd1c2c2e08e088aa0f52ba168c8bd4c9d52198 Mon Sep 17 00:00:00 2001 From: Alex Date: Wed, 29 Jan 2025 16:04:48 +0000 Subject: [PATCH 1/4] library sidepane + other feedback --- src/components/LibrarySidepane.tsx | 153 +++++----- src/components/SlidingSidepane.css | 308 ++++++++++----------- src/modals/GenerateProposalModal.tsx | 2 +- src/routes/SidebarSmall.tsx | 108 ++++---- src/views/Library.css | 398 ++++++++++++++------------- src/views/Library.tsx | 20 +- 6 files changed, 498 insertions(+), 491 deletions(-) diff --git a/src/components/LibrarySidepane.tsx b/src/components/LibrarySidepane.tsx index 577dd26..f122c17 100644 --- a/src/components/LibrarySidepane.tsx +++ b/src/components/LibrarySidepane.tsx @@ -1,25 +1,23 @@ -import React, { useState } from "react"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { - faChevronLeft, - faChevronRight -} from "@fortawesome/free-solid-svg-icons"; -import "./LibrarySidepane.css"; +import React, { useState } from 'react'; +import { ChevronLeft, ChevronRight } from 'lucide-react'; -interface LibrarySidepaneProps { - isOpen: boolean; - onToggle: () => void; - children?: React.ReactNode; // Add this to accept children props -} - -// Main Layout Component -const LibraryLayout: React.FC<{ children: React.ReactNode }> = ({ children }) => { +const LibraryLayout = ({ children }) => { const [isOpen, setIsOpen] = useState(false); + + // Wrap children with padding container that responds to sidepane state + const childrenWithProps = React.Children.map(children, child => { + if (React.isValidElement(child)) { + return React.cloneElement(child, { + className: `${child.props.className || ''} ${isOpen ? 'sidepane-open' : ''}` + }); + } + return child; + }); return ( -
-
- {children} +
+
+ {childrenWithProps}
= ({ children }) => ); }; -const LibrarySidepane: React.FC = ({ - isOpen, - onToggle -}) => { +const LibrarySidepane = ({ isOpen, onToggle }) => { return ( -
- -
-

Company Data

-
+ +
+

Company Data

+ +
-

- We recommend you upload everything that a new intern that just - started at your company would need to create a bid response. +

+ We recommend you upload everything that a new intern that just started at your company would need to create a bid response.

-

- This includes all the relevant company details asked in PQQs and a - (recent) winning bid you have written for every service you bid - on. +

+ This includes all the relevant company details asked in PQQs and a (recent) winning bid you have written for every service you bid on.

-

+

The sweet spot is around 3 bids, but 1 will get you off the mark!

-

- When you put a question through our system, it firstly considers - the question, inputs and information from the tender. +

+ When you put a question through our system, it firstly considers the question, inputs and information from the tender.

-

- It looks through the company library to search for the most - relevant and contextually accurate piece of information to help - evidence your bid - all without you having to spend hours - searching through outdated bid libraries. +

+ It looks through the company library to search for the most relevant and contextually accurate piece of information to help evidence your bid - all without you having to spend hours searching through outdated bid libraries.

-

+

Security is key and a pillar of our philosophy at mytender.io.

-

- The key point is that your data is in a completely separate area - and database from any other users of our platform and none of your - data is used to train any of our own or the models we use. +

+ The key point is that your data is in a completely separate area and database from any other users of our platform and none of your data is used to train any of our own or the models we use. +

+

+ We are also currently going through an ISO 27001 audit.

-

We are also currently going through an ISO 27001 audit.

 -

- A great question! Here's a formula we created to help understand - its impact: +

+ A great question! Here's a formula we created to help understand its impact:

-

- Bid Context Quality = Data Quality + Relevance to Tender Context + - Integration into the narrative +

+ Bid Context Quality = Data Quality + Relevance to Tender Context + Integration into the narrative

-

- So whilst we often hear people think it is solely reliant on the - quality of the content uploaded, we believe it is only one aspect - of the overall equation that supports the contextual support of - the overall bid. +

+ So whilst we often hear people think it is solely reliant on the quality of the content uploaded, we believe it is only one aspect of the overall equation that supports the contextual support of the overall bid.

@@ -106,32 +98,29 @@ const LibrarySidepane: React.FC = ({ ); }; -interface AccordionItemProps { - title: string; - children: React.ReactNode; -} -const AccordionItem: React.FC = ({ title, children }) => { - const [isExpanded, setIsExpanded] = useState(true); // Changed initial state to true +const AccordionItem = ({ title, children }) => { + const [isExpanded, setIsExpanded] = useState(true); + return ( -
+
-
-
{children}
+
+
+ {children} +
); }; -export { LibraryLayout, LibrarySidepane }; +export { LibraryLayout, LibrarySidepane }; \ No newline at end of file diff --git a/src/components/SlidingSidepane.css b/src/components/SlidingSidepane.css index 7017b5f..7b62b9e 100644 --- a/src/components/SlidingSidepane.css +++ b/src/components/SlidingSidepane.css @@ -1,258 +1,256 @@ .nav-button { - background: none; - border: none; - color: #666; - cursor: pointer; - transition: color 0.2s; + background: none; + border: none; + color: #666; + cursor: pointer; + transition: color 0.2s; } .nav-button:hover:not(:disabled) { - color: #333; + color: #333; } .nav-button:disabled { - color: #ccc; - cursor: not-allowed; + color: #ccc; + cursor: not-allowed; } .content-wrapper { - position: relative; - display: flex; - height: 100%; + position: relative; + display: flex; + height: 100%; } .sidepane { - position: fixed; - top: 0; - right: 0; - width: 40.625rem; - z-index: 800; - height: 100vh; - background: white; - box-shadow: -0.125rem 0 0.3125rem rgba(0, 0, 0, 0.1); - overflow-y: auto; - transform: translateX(31.25rem); - background-color: #faf7f7; - font-size: 1.143rem; + position: fixed; + top: 0; + right: 0; + width: 40vw; + z-index: 800; + height: 100vh; + background: white; + box-shadow: -0.125rem 0 0.3125rem rgba(0, 0, 0, 0.1); + overflow-y: auto; + transform: translateX(31.25rem); + background-color: #faf7f7; + font-size: 1.143rem; } .sidepane.open { - animation: slideInPane 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards; + animation: slideInPane 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards; } .sidepane:not(.open) { - animation: slideOutPane 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards; + animation: slideOutPane 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards; } @keyframes slideInPane { - from { - transform: translateX(31.25rem); - } - to { - transform: translateX(0); - } + from { + transform: translateX(31.25rem); + } + to { + transform: translateX(0); + } } @keyframes slideOutPane { - from { - transform: translateX(0); - } - to { - transform: translateX(31.25rem); - } + from { + transform: translateX(0); + } + to { + transform: translateX(31.25rem); + } } @keyframes slideInContent { - 0% { - opacity: 0; - transform: translateX(1.25rem); - } - 100% { - opacity: 1; - transform: translateX(0); - } + 0% { + opacity: 0; + transform: translateX(1.25rem); + } + 100% { + opacity: 1; + transform: translateX(0); + } } .sidepane-content-wrapper { - transform: translate3d(0, 0, 0); - -webkit-transform: translate3d(0, 0, 0); - backface-visibility: hidden; - -webkit-backface-visibility: hidden; - z-index: inherit; + transform: translate3d(0, 0, 0); + -webkit-transform: translate3d(0, 0, 0); + backface-visibility: hidden; + -webkit-backface-visibility: hidden; + z-index: inherit; } .sidepane-backdrop { - position: fixed; - top: 0; - left: 0; - width: 100vw; - height: 100vh; - background: rgba(0, 0, 0, 0.3); - opacity: 0; - visibility: hidden; - transition: - opacity 0.4s ease-out, - visibility 0.4s ease-out; - z-index: 500; - overflow: hidden !important; - margin: 0; - transform: translateZ(0); - -webkit-transform: translateZ(0); + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + background: rgba(0, 0, 0, 0.3); + opacity: 0; + visibility: hidden; + transition: opacity 0.4s ease-out, visibility 0.4s ease-out; + z-index: 500; + overflow: hidden !important; + margin: 0; + transform: translateZ(0); + -webkit-transform: translateZ(0); } .sidepane-backdrop.visible { - opacity: 1; - visibility: visible; + opacity: 1; + visibility: visible; } .sidepane-header { - padding: 1.25rem; - border-bottom: 0.0625rem solid #eee; - display: flex; - justify-content: space-between; - align-items: center; - top: 0; - background: white; - z-index: 2; + padding: 1.25rem; + border-bottom: 0.0625rem solid #eee; + display: flex; + justify-content: space-between; + align-items: center; + top: 0; + background: white; + z-index: 2; } .section-heading-input { - flex: 1; - border: none; - padding: 0.25rem 0; - font-size: 1.5rem; - font-weight: 550; - font-weight: bold; - background: transparent; - color: black; - resize: none; - height: 1.75rem; - min-height: 1.75rem; - overflow: hidden; - white-space: nowrap; - line-height: 1.25rem; - margin: 0; + flex: 1; + border: none; + padding: 0.25rem 0; + font-size: 1.5rem; + font-weight: 550; + font-weight: bold; + background: transparent; + color: black; + resize: none; + height: 1.75rem; + min-height: 1.75rem; + overflow: hidden; + white-space: nowrap; + line-height: 1.25rem; + margin: 0; } .sidepane-header h3 { - margin: 0; - font-size: 1.5rem; - font-weight: 550; + margin: 0; + font-size: 1.5rem; + font-weight: 550; } .close-button { - background: none; - border: none; - font-size: 1.5rem; - cursor: pointer; - padding: 0 0.5rem; - color: black; - transition: transform 0.2s ease; + background: none; + border: none; + font-size: 1.5rem; + cursor: pointer; + padding: 0 0.5rem; + color: black; + transition: transform 0.2s ease; } .close-button:hover { - transform: scale(1.1); + transform: scale(1.1); } .sidepane-content { - padding: 1.25rem; - z-index: 999; + padding: 1.25rem; + z-index: 999; } .sidepane-section { - margin-bottom: 1.5rem; + margin-bottom: 1.5rem; } .section-header { - display: flex; - align-items: center; - margin-bottom: 0.5rem; + display: flex; + align-items: center; + margin-bottom: 0.5rem; } .selected-row { - background-color: #f8f9fa; + background-color: #f8f9fa; } .sidepane-actions { - margin-top: 1.25rem; - margin-bottom: 1.25rem; + margin-top: 1.25rem; + margin-bottom: 1.25rem; } .sidepane-section:last-child { - margin-bottom: 0; + margin-bottom: 0; } .lib-container { - transition: margin-right 0.4s ease-out; + transition: margin-right 0.4s ease-out; } .lib-container.shifted { - margin-right: 31.25rem; + margin-right: 31.25rem; } .subheadings-list { - border-radius: 0.25rem; + border-radius: 0.25rem; } .subheading-item { - margin-bottom: 0.5rem; + margin-bottom: 0.5rem; } .subheading-item:last-child { - margin-bottom: 0; + margin-bottom: 0; } .subheading-content { - display: flex; - align-items: center; - background-color: white; - border-radius: 0.25rem; - padding: 0.5rem 0.75rem; - border: 0.0625rem solid #dee2e6; + display: flex; + align-items: center; + background-color: white; + border-radius: 0.25rem; + padding: 0.5rem 0.75rem; + border: 0.0625rem solid #dee2e6; } .subheading-input { - flex: 1; - border: none; - margin: 0 0.5rem; - font-size: 0.875rem; - background: transparent; - color: black; - resize: none; - height: 1.5rem; - min-height: 1.5rem; - overflow: hidden; - white-space: nowrap; - line-height: 1rem; + flex: 1; + border: none; + margin: 0 0.5rem; + font-size: 0.875rem; + background: transparent; + color: black; + resize: none; + height: 1.5rem; + min-height: 1.5rem; + overflow: hidden; + white-space: nowrap; + line-height: 1rem; } .subheading-input:focus { - outline: none; - background: #f8f9fa; + outline: none; + background: #f8f9fa; } .delete-subheading-button { - background: none; - border: none; - color: black; - cursor: pointer; - padding: 0.25rem 0.5rem; - opacity: 0.7; - transition: opacity 0.2s ease; + background: none; + border: none; + color: black; + cursor: pointer; + padding: 0.25rem 0.5rem; + opacity: 0.7; + transition: opacity 0.2s ease; } .delete-subheading-button:hover { - opacity: 1; + opacity: 1; } .compliance-text-area { - width: 100%; - background-color: white; - padding: 0.75rem; - border-radius: 0.25rem; - border: 0.0625rem solid #dee2e6; - height: 25rem; - resize: none; - color: black; - border-radius: 0.5rem; -} + width: 100%; + background-color: white; + padding: 0.75rem; + border-radius: 0.25rem; + border: 0.0625rem solid #dee2e6; + height: 25rem; + resize: none; + color: black; + border-radius: 0.5rem; +} \ No newline at end of file diff --git a/src/modals/GenerateProposalModal.tsx b/src/modals/GenerateProposalModal.tsx index 219881d..8804859 100644 --- a/src/modals/GenerateProposalModal.tsx +++ b/src/modals/GenerateProposalModal.tsx @@ -305,7 +305,7 @@ const GenerateProposalModal = ({ bid_id, outline }) => {

- Fantastic! Your proposal is ready! 🚀 + Fantastic. Your proposal is ready! 🚀

Your proposal has been generated & is ready for editing. Time to diff --git a/src/routes/SidebarSmall.tsx b/src/routes/SidebarSmall.tsx index 3bc21ab..44ebe03 100644 --- a/src/routes/SidebarSmall.tsx +++ b/src/routes/SidebarSmall.tsx @@ -18,7 +18,8 @@ import { User2, Files, Bot, - BookMarked + BookMarked, + Sparkles } from "lucide-react"; import { Tooltip } from "@mui/material"; @@ -135,20 +136,19 @@ const SideBarSmall = ({ onCollapseChange }: SideBarSmallProps) => { componentsProps={{ tooltip: { sx: { - backgroundColor: 'rgba(51, 51, 51, 0.7)', - color: 'white', - fontSize: '14px', - padding: '8px 12px', - maxWidth: '300px', - backdropFilter: 'blur(4px)' + backgroundColor: "rgba(51, 51, 51, 0.7)", + color: "white", + fontSize: "14px", + padding: "8px 12px", + maxWidth: "300px", + backdropFilter: "blur(4px)" } } }} > {!isCollapsed && Tender Dashboard} @@ -164,12 +164,12 @@ const SideBarSmall = ({ onCollapseChange }: SideBarSmallProps) => { componentsProps={{ tooltip: { sx: { - backgroundColor: 'rgba(51, 51, 51, 0.7)', - color: 'white', - fontSize: '14px', - padding: '8px 12px', - maxWidth: '300px', - backdropFilter: 'blur(4px)' + backgroundColor: "rgba(51, 51, 51, 0.7)", + color: "white", + fontSize: "14px", + padding: "8px 12px", + maxWidth: "300px", + backdropFilter: "blur(4px)" } } }} @@ -196,12 +196,12 @@ const SideBarSmall = ({ onCollapseChange }: SideBarSmallProps) => { componentsProps={{ tooltip: { sx: { - backgroundColor: 'rgba(51, 51, 51, 0.7)', - color: 'white', - fontSize: '14px', - padding: '8px 12px', - maxWidth: '300px', - backdropFilter: 'blur(4px)' + backgroundColor: "rgba(51, 51, 51, 0.7)", + color: "white", + fontSize: "14px", + padding: "8px 12px", + maxWidth: "300px", + backdropFilter: "blur(4px)" } } }} @@ -210,7 +210,7 @@ const SideBarSmall = ({ onCollapseChange }: SideBarSmallProps) => { to="/chatResponse" className={`sidebarsmalllink ${isActive("/chatResponse") ? "sidebarsmalllink-active" : ""}`} > - + {!isCollapsed && Library Chat} @@ -224,12 +224,12 @@ const SideBarSmall = ({ onCollapseChange }: SideBarSmallProps) => { componentsProps={{ tooltip: { sx: { - backgroundColor: 'rgba(51, 51, 51, 0.7)', - color: 'white', - fontSize: '14px', - padding: '8px 12px', - maxWidth: '300px', - backdropFilter: 'blur(4px)' + backgroundColor: "rgba(51, 51, 51, 0.7)", + color: "white", + fontSize: "14px", + padding: "8px 12px", + maxWidth: "300px", + backdropFilter: "blur(4px)" } } }} @@ -252,12 +252,12 @@ const SideBarSmall = ({ onCollapseChange }: SideBarSmallProps) => { componentsProps={{ tooltip: { sx: { - backgroundColor: 'rgba(51, 51, 51, 0.7)', - color: 'white', - fontSize: '14px', - padding: '8px 12px', - maxWidth: '300px', - backdropFilter: 'blur(4px)' + backgroundColor: "rgba(51, 51, 51, 0.7)", + color: "white", + fontSize: "14px", + padding: "8px 12px", + maxWidth: "300px", + backdropFilter: "blur(4px)" } } }} @@ -281,12 +281,12 @@ const SideBarSmall = ({ onCollapseChange }: SideBarSmallProps) => { componentsProps={{ tooltip: { sx: { - backgroundColor: 'rgba(51, 51, 51, 0.7)', - color: 'white', - fontSize: '14px', - padding: '8px 12px', - maxWidth: '300px', - backdropFilter: 'blur(4px)' + backgroundColor: "rgba(51, 51, 51, 0.7)", + color: "white", + fontSize: "14px", + padding: "8px 12px", + maxWidth: "300px", + backdropFilter: "blur(4px)" } } }} @@ -314,12 +314,12 @@ const SideBarSmall = ({ onCollapseChange }: SideBarSmallProps) => { componentsProps={{ tooltip: { sx: { - backgroundColor: 'rgba(51, 51, 51, 0.7)', - color: 'white', - fontSize: '14px', - padding: '8px 12px', - maxWidth: '300px', - backdropFilter: 'blur(4px)' + backgroundColor: "rgba(51, 51, 51, 0.7)", + color: "white", + fontSize: "14px", + padding: "8px 12px", + maxWidth: "300px", + backdropFilter: "blur(4px)" } } }} @@ -332,7 +332,7 @@ const SideBarSmall = ({ onCollapseChange }: SideBarSmallProps) => { {!isCollapsed && Profile} - + { componentsProps={{ tooltip: { sx: { - backgroundColor: 'rgba(51, 51, 51, 0.7)', - color: 'white', - fontSize: '14px', - padding: '8px 12px', - maxWidth: '300px', - backdropFilter: 'blur(4px)' + backgroundColor: "rgba(51, 51, 51, 0.7)", + color: "white", + fontSize: "14px", + padding: "8px 12px", + maxWidth: "300px", + backdropFilter: "blur(4px)" } } }} diff --git a/src/views/Library.css b/src/views/Library.css index cf86dd9..671ec4e 100644 --- a/src/views/Library.css +++ b/src/views/Library.css @@ -1,307 +1,325 @@ .lib-container { - width: 100vw; - background-color: white; - justify-content: center; - padding-top: 0rem; - padding-bottom: 2.5rem; - padding-left: 22.857rem; - padding-right: 2.143rem; - overflow-x: hidden !important; - overflow-y: hidden; - transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); - transition-delay: 0.05s; + width: 100vw; + background-color: white; + justify-content: center; + padding-top: 0rem; + padding-bottom: 2.5rem; + padding-left: 22.857rem; + padding-right: 2.143rem; + overflow-x: hidden !important; + overflow-y: hidden; + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); + transition-delay: 0.05s; } .inner-card-container { - background-color: white; - border-radius: 1rem; - padding: 1.143rem; - width: 100%; - height: 100%; + background-color: white; + border-radius: 1rem; + padding: 1.143rem; + width: 100%; + height: 100%; } +.lib-container.sidebar-collapsed { + padding-left: 8.3rem; +} + +/* Add this new class for sidepane open state */ + +.lib-container.sidepane-open { + padding-right: calc(2.143rem + 320px); +} + +/* Header container styles */ + .header-container { - padding-left: 22.857rem; - padding-right: 2.143rem; + 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; + padding-left: 8.3rem; } -.lib-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 {} +.scroll-container { +} .library-container { - box-shadow: 0 0.429rem 0.857rem rgba(0, 0, 0, 0.15); - border: 0.071rem solid #ced4da; - margin-bottom: 1.429rem; + box-shadow: 0 0.429rem 0.857rem rgba(0, 0, 0, 0.15); + border: 0.071rem solid #ced4da; + margin-bottom: 1.429rem; } .upload-component { - display: flex; - min-height: 50vh; - max-height: 50vh; + display: flex; + min-height: 50vh; + max-height: 50vh; } .library-table { - width: 100%; - table-layout: fixed; - margin: 0; - padding: 0; - border-collapse: collapse; - border-spacing: 0; - overflow: hidden; - margin-bottom: 0; - font-size: 1.143rem; + width: 100%; + table-layout: fixed; + margin: 0; + padding: 0; + border-collapse: collapse; + border-spacing: 0; + overflow: hidden; + margin-bottom: 0; + font-size: 1.143rem; } .library-table th, .library-table td { - text-align: left; - white-space: nowrap; - overflow: hidden; - padding: 1rem 1.571rem; - padding-left: 0; - text-overflow: ellipsis; - border-bottom: 0.071rem solid #ddd; - width: 100%; + text-align: left; + white-space: nowrap; + overflow: hidden; + padding: 1rem 1.571rem; + padding-left: 0; + text-overflow: ellipsis; + border-bottom: 0.071rem solid #ddd; + width: 100%; } .library-table th { - background-color: white; - font-weight: 500; - color: black; - width: 100%; + background-color: white; + font-weight: 500; + color: black; + width: 100%; } .library-table td:last-child, .library-table th:last-child { - text-align: right; + text-align: right; } .library-table tr:last-child td { - border-bottom: none; + border-bottom: none; } .lib-custom-card { - background-color: white; - border: none; - width: 100%; - box-shadow: 0 0.286rem 0.571rem rgba(0, 0, 0, 0.1); + background-color: white; + border: none; + width: 100%; + box-shadow: 0 0.286rem 0.571rem rgba(0, 0, 0, 0.1); } .lib-custom-card-title { - font-size: 1.571rem; - font-weight: 600; - margin-top: 1.429rem; + font-size: 1.571rem; + font-weight: 600; + margin-top: 1.429rem; } .header-row { - display: flex; - justify-content: space-between; - align-items: center; - width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; } .lib-title { - font-size: 1.571rem; - font-weight: 800; + font-size: 1.571rem; + font-weight: 800; } .lib-custom-card .card-body { - padding: 0; + padding: 0; } .fa-icon { - margin-right: 0.571rem; + margin-right: 0.571rem; } .ellipsis-icon { - color: black; + color: black; } .ellipsis-button { - background: none; - border: none; - cursor: pointer; - width: 2.286rem; - height: 2.286rem; - padding: 0; - align-items: center; - justify-content: center; - border-radius: 50%; - transition: background-color 0.3s; - outline: none; + background: none; + border: none; + cursor: pointer; + width: 2.286rem; + height: 2.286rem; + padding: 0; + align-items: center; + justify-content: center; + border-radius: 50%; + transition: background-color 0.3s; + outline: none; } .search-bar-container { - display: flex; - align-items: center; - position: relative; - width: 100%; - max-width: 42.857rem; - min-width: 35.714rem; - background-color: none; - border-radius: 1.786rem; - z-index: 1; - height: 3.214rem; - font-size: 1.143rem; - margin-left: 0; + display: flex; + align-items: center; + position: relative; + width: 100%; + max-width: 42.857rem; + min-width: 35.714rem; + background-color: none; + border-radius: 1.786rem; + z-index: 1; + height: 3.214rem; + font-size: 1.143rem; + margin-left: 0; } .search-bar-library { - background-color: #f2f2f2; - color: #333; - padding: 0.714rem; - padding-left: 3.571rem; - border-radius: 1.786rem !important; - width: 100%; - outline: none; - box-shadow: none; - border: none !important; - border-right: 0.071rem #f2f2f2 solid !important; - box-sizing: border-box; - height: 3.214rem; - padding-right: 2.143rem; - font-size: 1.143rem; - font-weight: 600; + background-color: #f2f2f2; + color: #333; + padding: 0.714rem; + padding-left: 3.571rem; + border-radius: 1.786rem !important; + width: 100%; + outline: none; + box-shadow: none; + border: none !important; + border-right: 0.071rem #f2f2f2 solid !important; + box-sizing: border-box; + height: 3.214rem; + padding-right: 2.143rem; + font-size: 1.143rem; + font-weight: 600; } .search-icon { - position: absolute; - left: 1.071rem; - color: #333 !important; - pointer-events: none; - font-size: 1.2rem !important; - z-index: 100; - margin: 0; + position: absolute; + left: 1.071rem; + color: #333 !important; + pointer-events: none; + font-size: 1.2rem !important; + z-index: 100; + margin: 0; } .clear-search-icon { - position: absolute; - right: 1.286rem; - top: 50%; - transform: translateY(-50%); - cursor: pointer; - color: #333; - z-index: 100; + position: absolute; + right: 1.286rem; + top: 50%; + transform: translateY(-50%); + cursor: pointer; + color: #333; + z-index: 100; } .search-results-dropdown { - position: absolute; - font-size: 1.143rem; - top: 100%; - left: 0; - background-color: white; - max-height: 14.286rem; - overflow-y: auto; - width: 100%; - z-index: 0; - border-radius: 0 0 1.786rem 1.786rem !important; - border: none !important; - border-top: 0.071rem #bdbdbd solid !important; - box-shadow: 0 0.429rem 0.571rem rgba(0, 0, 0, 0.15), 0 0.071rem 0.214rem rgba(0, 0, 0, 0.1); + position: absolute; + font-size: 1.143rem; + top: 100%; + left: 0; + background-color: white; + max-height: 14.286rem; + overflow-y: auto; + width: 100%; + z-index: 0; + border-radius: 0 0 1.786rem 1.786rem !important; + border: none !important; + border-top: 0.071rem #bdbdbd solid !important; + box-shadow: + 0 0.429rem 0.571rem rgba(0, 0, 0, 0.15), + 0 0.071rem 0.214rem rgba(0, 0, 0, 0.1); } .search-result-item { - padding: 0.714rem; - padding-left: 1.286rem; - cursor: pointer; - color: #333; - background-color: white; - margin: 0; + padding: 0.714rem; + padding-left: 1.286rem; + cursor: pointer; + color: #333; + background-color: white; + margin: 0; } .result-icon { - margin-right: 1.429rem; + margin-right: 1.429rem; } .library-card-custom { - height: 58.571rem; - margin-top: 0.357rem; + height: 58.571rem; + margin-top: 0.357rem; } .pagination-controls { - flex-shrink: 0; - margin-top: auto; - display: flex; - padding: 1rem 0; - margin-left: 0.714rem; + flex-shrink: 0; + margin-top: auto; + display: flex; + padding: 1rem 0; + margin-left: 0.714rem; } .pagination-controls button { - padding: 0.357rem 0.714rem; - margin-right: 0.357rem; - background-color: black; - color: white; - border: none; - border-radius: 0.357rem; + padding: 0.357rem 0.714rem; + margin-right: 0.357rem; + background-color: black; + color: white; + border: none; + border-radius: 0.357rem; } .pdf-viewer-modal { - position: fixed; - top: 0; - left: 0; - width: 100vw; - height: 100vh; - background-color: rgba(0, 0, 0, 0.7); - display: flex; - justify-content: center; - align-items: center; - z-index: 999; + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + background-color: rgba(0, 0, 0, 0.7); + display: flex; + justify-content: center; + align-items: center; + z-index: 999; } .pdf-viewer-modal-content { - position: relative; - width: 100%; - max-width: 92.857rem; - background: white; - border-radius: 0.571rem; - min-height: 80vh; - overflow: hidden; + position: relative; + width: 100%; + max-width: 92.857rem; + background: white; + border-radius: 0.571rem; + min-height: 80vh; + overflow: hidden; } .breadcrumb-header { - display: flex; - align-items: center; - justify-content: space-between; - padding: 0.714rem 1.143rem; - width: 100%; - border-bottom: 0.071rem solid #dee2e6; - box-sizing: border-box; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0.714rem 1.143rem; + width: 100%; + border-bottom: 0.071rem solid #dee2e6; + box-sizing: border-box; } .breadcrumb-item { - font-weight: 500; - font-size: 1.286rem; + font-weight: 500; + font-size: 1.286rem; } .breadcrumb-item.clickable { - color: #ff6600; - cursor: pointer; + color: #ff6600; + cursor: pointer; } .breadcrumb-separator { - margin: 0 0.357rem; - color: #6c757d; + margin: 0 0.357rem; + color: #6c757d; } .back-button { - font-weight: 500; - font-size: 1.286rem; + font-weight: 500; + font-size: 1.286rem; } .styled-menu-item { - font-family: "Manrope", sans-serif !important; - font-size: 1rem !important; - padding: 0.429rem 0.857rem !important; + font-family: "Manrope", sans-serif !important; + font-size: 1rem !important; + padding: 0.429rem 0.857rem !important; } .styled-menu-item-icon { - margin-right: 0.571rem; - font-size: 1rem; -} \ No newline at end of file + margin-right: 0.571rem; + font-size: 1rem; +} diff --git a/src/views/Library.tsx b/src/views/Library.tsx index 7cccb4a..ff2c80f 100644 --- a/src/views/Library.tsx +++ b/src/views/Library.tsx @@ -1069,11 +1069,12 @@ const Library = () => { ]; return ( - +

-
+
{ />
-
+

Content Library

@@ -1348,13 +1350,13 @@ const Library = () => {
)} - - setIsSidepaneOpen(!isSidepaneOpen)} - /> + setIsSidepaneOpen(!isSidepaneOpen)} + /> +
- / + ); }; From fd62f2a293222c698bf3e7fc6f43bec9e519e8dc Mon Sep 17 00:00:00 2001 From: Alex Date: Wed, 29 Jan 2025 16:26:41 +0000 Subject: [PATCH 2/4] fixed tender library popup --- src/components/TenderLibrary.css | 2 +- src/components/TenderLibrary.tsx | 306 ++++++++----------------------- 2 files changed, 75 insertions(+), 233 deletions(-) diff --git a/src/components/TenderLibrary.css b/src/components/TenderLibrary.css index 7bbb585..4859c2d 100644 --- a/src/components/TenderLibrary.css +++ b/src/components/TenderLibrary.css @@ -66,7 +66,7 @@ .tender-library-table th.actions-column, .tender-library-table td.actions-column { - width: 5%; + width: 8%; text-align: center; } diff --git a/src/components/TenderLibrary.tsx b/src/components/TenderLibrary.tsx index 7204093..7812aa0 100644 --- a/src/components/TenderLibrary.tsx +++ b/src/components/TenderLibrary.tsx @@ -11,7 +11,9 @@ import { faPlus, faSort, faSortUp, - faSortDown + faSortDown, + faCheck, + faXmark } from "@fortawesome/free-solid-svg-icons"; import { Menu, MenuItem } from "@mui/material"; import { displayAlert } from "../helper/Alert.tsx"; @@ -19,23 +21,50 @@ import InterrogateTenderModal from "../modals/InterrogateTenderModal.tsx"; import posthog from "posthog-js"; import UploadPDF from "../views/UploadPDF.tsx"; import "./TenderLibrary.css"; +import { Check, X } from "lucide-react"; +const DeleteConfirmation = ({ onConfirm, onCancel, isDeleting }) => { + if (isDeleting) { + return ; + } + + return ( +
+ + +
+ ); +}; const TenderLibrary = ({ object_id }) => { const getAuth = useAuthUser(); const auth = getAuth(); const tokenRef = useRef(auth?.token || "default"); - // Updated state to include timestamps const [documents, setDocuments] = useState([]); const [currentFileName, setCurrentFileName] = useState(null); const [currentPage, setCurrentPage] = useState(1); const rowsPerPage = 6; const [totalPages, setTotalPages] = useState(0); const [showPDFModal, setShowPDFModal] = useState(false); - const [showDeleteFileModal, setShowDeleteFileModal] = useState(false); - const [fileToDelete, setFileToDelete] = useState(null); - const [anchorEl, setAnchorEl] = useState(null); - const open = Boolean(anchorEl); const [showPdfViewerModal, setShowPdfViewerModal] = useState(false); const [pdfUrl, setPdfUrl] = useState(""); const [isPdfLoading, setIsPdfLoading] = useState(false); @@ -44,11 +73,14 @@ const TenderLibrary = ({ object_id }) => { const [wordFileContent, setWordFileContent] = useState(null); const [showExcelModal, setShowExcelModal] = useState(false); const [excelData, setExcelData] = useState(null); - const [sortOrder, setSortOrder] = useState("asc"); const [isSorted, setIsSorted] = useState(false); + const [isDeletingFile, setIsDeletingFile] = useState(false); + const [deleteConfirmationState, setDeleteConfirmationState] = useState({ + showFor: null, + filename: null + }); - // Add this new function to handle sorting const handleSort = () => { const newSortOrder = sortOrder === "asc" ? "desc" : "asc"; setSortOrder(newSortOrder); @@ -68,34 +100,30 @@ const TenderLibrary = ({ object_id }) => { setDocuments(sortedDocs); }; - // Get the correct sort icon based on current state const getSortIcon = () => { if (!isSorted) return faSort; return sortOrder === "asc" ? faSortUp : faSortDown; }; - const handleMenuClick = (event) => { - setAnchorEl(event.currentTarget); - }; - - const handleMenuClose = () => { - setAnchorEl(null); - }; - - const paginate = (pageNumber) => { - setCurrentPage(pageNumber); + const handleDeleteInitiate = (event, filename) => { + event.stopPropagation(); + posthog.capture("tender_library_delete_file_clicked", { filename }); + setDeleteConfirmationState({ + showFor: filename, + filename: filename + }); }; - const handleMenuItemClick = (action) => { - handleMenuClose(); - if (action === "pdf") setShowPDFModal(true); + const handleDeleteConfirm = async (event, filename) => { + event.stopPropagation(); + setIsDeletingFile(true); + await deleteDocument(filename, object_id); + setIsDeletingFile(false); + setDeleteConfirmationState({ showFor: null, filename: null }); }; - - const handleDeleteFileClick = (event, filename) => { + const handleDeleteCancel = (event) => { event.stopPropagation(); - posthog.capture("tender_library_delete_file_clicked", { filename }); - setFileToDelete({ filename }); - setShowDeleteFileModal(true); + setDeleteConfirmationState({ showFor: null, filename: null }); }; const fetchDocuments = async () => { @@ -103,15 +131,14 @@ const TenderLibrary = ({ object_id }) => { if (object_id) { const response = await axios.post( `http${HTTP_PREFIX}://${API_URL}/get_tender_library_doc_filenames`, - { bid_id: object_id }, // Send as JSON body + { bid_id: object_id }, { headers: { Authorization: `Bearer ${tokenRef.current}`, - "Content-Type": "application/json" // Changed to JSON + "Content-Type": "application/json" } } ); - console.log("tender library docs", response); setDocuments(response.data.filenames); const pages = Math.ceil(response.data.filenames.length / rowsPerPage); setTotalPages(pages); @@ -126,7 +153,6 @@ const TenderLibrary = ({ object_id }) => { const formData = new FormData(); formData.append("bid_id", bidId); formData.append("filename", filename); - console.log(formData); try { await axios.post( `http${HTTP_PREFIX}://${API_URL}/delete_file_tenderlibrary`, @@ -138,8 +164,6 @@ const TenderLibrary = ({ object_id }) => { } } ); - - // Refresh the document list or update the state as needed fetchDocuments(); setDocumentListVersion((prev) => prev + 1); displayAlert("Document deleted successfully", "success"); @@ -161,122 +185,37 @@ const TenderLibrary = ({ object_id }) => { } }; - const viewFile = async (fileName) => { - try { - posthog.capture("tender_library_view_file", { - fileName, - fileType: fileName.split(".").pop().toLowerCase() - }); - const formData = new FormData(); - formData.append("bid_id", object_id); - formData.append("file_name", fileName); - - const fileExtension = fileName.split(".").pop().toLowerCase(); - - if (fileExtension === "pdf") { - setIsPdfLoading(true); - setShowPdfViewerModal(true); - - const response = await axios.post( - `http${HTTP_PREFIX}://${API_URL}/show_tenderLibrary_file_content_pdf_format`, - formData, - { - headers: { - Authorization: `Bearer ${tokenRef.current}`, - "Content-Type": "multipart/form-data" - }, - responseType: "blob" - } - ); - const fileURL = URL.createObjectURL( - new Blob([response.data], { type: "application/pdf" }) - ); - setPdfUrl(fileURL); - setIsPdfLoading(false); - } else if (["doc", "docx"].includes(fileExtension)) { - const response = await axios.post( - `http${HTTP_PREFIX}://${API_URL}/show_tenderLibrary_file_content_word_format`, - formData, - { - headers: { - Authorization: `Bearer ${tokenRef.current}`, - "Content-Type": "multipart/form-data" - } - } - ); - setWordFileContent(response.data.content); - setCurrentFileName(fileName); - setShowWordModal(true); - } else if (["xls", "xlsx"].includes(fileExtension)) { - console.log("viewing excel files not supported yet"); - } else { - throw new Error("Unsupported file type"); - } - } catch (error) { - console.error("Error viewing file:", error); - displayAlert("Error viewing file", "danger"); - setIsPdfLoading(false); - setShowPdfViewerModal(false); - } - }; - useEffect(() => { fetchDocuments(); }, [object_id, documentListVersion]); const renderDocuments = () => { - if (documents.length === 0) { - return ( - - -
-
-

- Upload documents related to this specific tender here. This is - different from your previous bids and company information - which belong in your Content Library. They will also be used - as context in the Q&A Generator to answer questions about this - tender. -

-
-
- - - ); - } - return documents.map((doc, index) => ( - viewFile(doc.filename || doc)} - > + {" "} {doc.filename || doc} - {doc.upload_date ? new Date(doc.upload_date).toLocaleDateString("en-GB") : "N/A"} - - handleDeleteFileClick(event, doc.filename || doc) - } - style={{ cursor: "pointer" }} - /> + {deleteConfirmationState.showFor === (doc.filename || doc) ? ( + handleDeleteConfirm(e, doc.filename || doc)} + onCancel={handleDeleteCancel} + isDeleting={isDeletingFile} + /> + ) : ( + handleDeleteInitiate(e, doc.filename || doc)} + style={{ cursor: "pointer" }} + /> + )} )); @@ -287,90 +226,17 @@ const TenderLibrary = ({ object_id }) => { fetchDocuments(); }; - const UploadPDFModal = ({ show, onHide, get_collections, onClose }) => ( - - - Upload Files - - - - - ); - - const DeleteFileModal = ({ show, onHide, onDelete, fileName }) => ( - - - Delete File - - - Are you sure you want to delete the file "{fileName}"? - - - - - - ); - - // Add Excel Modal Component - const ExcelViewerModal = ({ show, onHide, data, fileName }) => ( - - - {fileName} - - - {data && data.sheets ? ( - Object.entries(data.sheets).map(([sheetName, sheetData]) => ( -
-

{sheetName}

- - - - {sheetData[0] && - sheetData[0].map((header, index) => ( - - ))} - - - - {sheetData.slice(1).map((row, rowIndex) => ( - - {row.map((cell, cellIndex) => ( - - ))} - - ))} - -
{header}
{cell}
-
- )) - ) : ( -

No data available

- )} - - - ); - return ( <>
-
- -
+
@@ -422,30 +288,6 @@ const TenderLibrary = ({ object_id }) => { - setShowDeleteFileModal(false)} - onDelete={() => { - deleteDocument(fileToDelete.filename, object_id); - setShowDeleteFileModal(false); - }} - fileName={fileToDelete ? fileToDelete.filename : ""} - /> - - setShowPDFModal(false)} - get_collections={fetchDocuments} - onClose={handleOnClose} - /> - - setShowExcelModal(false)} - data={excelData} - fileName={currentFileName} - /> - {showPdfViewerModal && (
Date: Wed, 29 Jan 2025 17:21:53 +0000 Subject: [PATCH 3/4] fixed outline table sidepane opening and font sizes --- src/buttons/BidStatusMenu.tsx | 117 +++++++++++------- .../dropdowns/QuestionTypeDropdown.tsx | 2 +- src/components/dropdowns/ReviewerDropdown.tsx | 2 +- src/views/ProposalPlan.tsx | 25 +--- 4 files changed, 78 insertions(+), 68 deletions(-) diff --git a/src/buttons/BidStatusMenu.tsx b/src/buttons/BidStatusMenu.tsx index d569779..43b303c 100644 --- a/src/buttons/BidStatusMenu.tsx +++ b/src/buttons/BidStatusMenu.tsx @@ -1,8 +1,19 @@ import { Menu, MenuItem, Button } from "@mui/material"; import { useState } from "react"; -import { Search, ClipboardList, FileWarning, FileCheck, FileSignature } from "lucide-react"; +import { + Search, + ClipboardList, + FileWarning, + FileCheck, + FileSignature +} from "lucide-react"; -type BidStatus = "Planning" | "Research" | "First Draft" | "Reviewing" | "Complete"; +type BidStatus = + | "Planning" + | "Research" + | "First Draft" + | "Reviewing" + | "Complete"; const BidStatusMenu = ({ value, @@ -22,8 +33,18 @@ const BidStatusMenu = ({ }; const normalizeStatus = (status: any): BidStatus => { - const validStatuses: BidStatus[] = ["Planning", "Research", "First Draft", "Reviewing", "Complete"]; - return status in statusMapping ? statusMapping[status] : (validStatuses.includes(status) ? status : "Planning"); + const validStatuses: BidStatus[] = [ + "Planning", + "Research", + "First Draft", + "Reviewing", + "Complete" + ]; + return status in statusMapping + ? statusMapping[status] + : validStatuses.includes(status) + ? status + : "Planning"; }; const currentStatus = normalizeStatus(value); @@ -44,36 +65,37 @@ const BidStatusMenu = ({ const getStatusStyles = (status: BidStatus): { sx: any } => { const baseStyles = { fontWeight: 700, - fontSize: '1.143rem', - whiteSpace: 'nowrap', - textTransform: 'none', - border: 'none', - '&:hover': { + fontSize: "1.143rem", + fontFamily: '"Manrope", sans-serif', + whiteSpace: "nowrap", + textTransform: "none", + border: "none", + "&:hover": { opacity: 0.9, - border: 'none' + border: "none" } }; const colors = { Planning: { - backgroundColor: '#FFE4DC', - color: '#D14D1F', + backgroundColor: "#FFE4DC", + color: "#D14D1F" }, Research: { - backgroundColor: '#E1F3FB', - color: '#2B87AF', + backgroundColor: "#E1F3FB", + color: "#2B87AF" }, "First Draft": { - backgroundColor: '#E6FFE6', - color: '#2E8B2E', + backgroundColor: "#E6FFE6", + color: "#2E8B2E" }, Reviewing: { - backgroundColor: '#F8E6F8', - color: '#8B488B', + backgroundColor: "#F8E6F8", + color: "#8B488B" }, Complete: { - backgroundColor: '#E0F5E9', - color: '#2A7F4F', + backgroundColor: "#E0F5E9", + color: "#2A7F4F" } }; @@ -82,9 +104,9 @@ const BidStatusMenu = ({ ...baseStyles, backgroundColor: colors[status].backgroundColor, color: colors[status].color, - '&:hover': { - ...baseStyles['&:hover'], - backgroundColor: colors[status].backgroundColor, + "&:hover": { + ...baseStyles["&:hover"], + backgroundColor: colors[status].backgroundColor } } }; @@ -117,7 +139,7 @@ const BidStatusMenu = ({ {currentStatus} - + - {["Planning", "Research", "First Draft", "Reviewing", "Complete"].map((status) => { - const Icon = getStatusIcon(status as BidStatus); - return ( - handleSelect(status as BidStatus)} - sx={{ - fontSize: '1rem', - padding: '0.571rem 1.143rem', - fontWeight: 600, - '&:hover': { - backgroundColor: '#f5f5f5' - } - }} - > - {status} - - - ); - })} + {["Planning", "Research", "First Draft", "Reviewing", "Complete"].map( + (status) => { + const Icon = getStatusIcon(status as BidStatus); + return ( + handleSelect(status as BidStatus)} + sx={{ + fontSize: "1.1rem", + padding: "0.571rem 1.143rem", + fontWeight: 600, + "&:hover": { + backgroundColor: "#f5f5f5" + } + }} + > + {status} + + ); + } + )}
); }; -export default BidStatusMenu; \ No newline at end of file +export default BidStatusMenu; diff --git a/src/components/dropdowns/QuestionTypeDropdown.tsx b/src/components/dropdowns/QuestionTypeDropdown.tsx index e15d33c..6d089c0 100644 --- a/src/components/dropdowns/QuestionTypeDropdown.tsx +++ b/src/components/dropdowns/QuestionTypeDropdown.tsx @@ -18,7 +18,7 @@ const selectStyle = { }; const menuStyle = { - fontSize: "0.75rem", + fontSize: "1.1rem", fontFamily: '"Manrope", sans-serif' }; diff --git a/src/components/dropdowns/ReviewerDropdown.tsx b/src/components/dropdowns/ReviewerDropdown.tsx index e596b80..ae9c6bb 100644 --- a/src/components/dropdowns/ReviewerDropdown.tsx +++ b/src/components/dropdowns/ReviewerDropdown.tsx @@ -27,7 +27,7 @@ const selectStyle = { }; const menuStyle = { - fontSize: "0.75rem", + fontSize: "1.1rem", fontFamily: '"Manrope", sans-serif' }; diff --git a/src/views/ProposalPlan.tsx b/src/views/ProposalPlan.tsx index 3599ffc..ac532e1 100644 --- a/src/views/ProposalPlan.tsx +++ b/src/views/ProposalPlan.tsx @@ -60,10 +60,11 @@ const ProposalPlan = () => { const [isSidepaneOpen, setIsSidepaneOpen] = useState(false); const handleRowClick = (e: React.MouseEvent, index: number) => { + // Expand the list of elements to ignore to include MUI Select components const isInteractiveElement = (e.target as HTMLElement).closest( - 'input, select, button, a, .MuiSelect-select, [role="button"], .editable-cell' + 'input, select, button, a, [role="button"], .editable-cell, .dropdown, .dropdown-toggle, .MuiSelect-root, .MuiSelect-select, .MuiMenuItem-root, .MuiPaper-root, .MuiList-root, .css-1dimb5e-singleValue, .css-1s2u09g-control, .css-b62m3t-container' ); - + if (!isInteractiveElement) { e.preventDefault(); setSelectedSection(index); @@ -88,19 +89,6 @@ const ProposalPlan = () => { }); }; - // Add this function to handle toggling sections - const toggleSection = (index: number) => { - setExpandedSections((prev) => { - const newSet = new Set(prev); - if (newSet.has(index)) { - newSet.delete(index); - } else { - newSet.add(index); - } - return newSet; - }); - }; - const handleContextMenu = (e, index) => { e.preventDefault(); setContextMenu({ x: e.clientX, y: e.clientY }); @@ -738,13 +726,12 @@ const ProposalPlan = () => { >
- toggleSection(index)} +
{section.heading} - +
From 9ac04e49d4a78acf43a86f655df01272f0069bab Mon Sep 17 00:00:00 2001 From: Alex Date: Wed, 29 Jan 2025 17:34:11 +0000 Subject: [PATCH 4/4] dropdown options styling changes --- src/buttons/BidStatusMenu.css | 11 ----------- src/views/Library.css | 7 ++++--- 2 files changed, 4 insertions(+), 14 deletions(-) diff --git a/src/buttons/BidStatusMenu.css b/src/buttons/BidStatusMenu.css index c95d784..a548a6b 100644 --- a/src/buttons/BidStatusMenu.css +++ b/src/buttons/BidStatusMenu.css @@ -28,17 +28,6 @@ border: none; } -.styled-menu-item { - font-size: 1rem; - padding: 0.571rem 1.143rem; - font-weight: 600 !important; - border: none; -} - -.styled-menu-item:hover { - background-color: #f5f5f5; -} - .bid-status-menu { font-weight: 700; font-size: 1.143rem; diff --git a/src/views/Library.css b/src/views/Library.css index 671ec4e..f1637d8 100644 --- a/src/views/Library.css +++ b/src/views/Library.css @@ -315,11 +315,12 @@ .styled-menu-item { font-family: "Manrope", sans-serif !important; - font-size: 1rem !important; + font-size: 1.1rem !important; padding: 0.429rem 0.857rem !important; + font-weight: 600 !important; } .styled-menu-item-icon { - margin-right: 0.571rem; - font-size: 1rem; + margin-right: 0.8rem; + font-size: 1.1rem; }