diff --git a/api/public/brief-dashboard.css b/api/public/brief-dashboard.css new file mode 100644 index 00000000..d16ffa54 --- /dev/null +++ b/api/public/brief-dashboard.css @@ -0,0 +1,239 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +.text-primary { + color: var(--theme-primary); +} + +.text-secondary { + color: var(--theme-secondary); +} + +.container { + background: var(--theme-grey-dark); + border: 1px solid var(--theme-white); + border-radius: 20px; + padding: 50px; +} + +.brief-info-wrapper { + display: flex; + flex-direction: column; + gap: 20px; +} + +.brief-info { + display: flex; + flex-direction: row; +} + +.brief-info .description { + display: flex; + flex-direction: column; + gap: 20px; + flex: 1 0 75%; + margin-right: 5%; +} + +.brief-title { + display: flex; + flex-direction: row; + gap: 15px; + align-items: center; +} + +h1, +h2, +h3 { + font-family: Aeoniktrial, sans-serif; + font-weight: 700; +} + +h3{ + font-size: 20px; +} + +.clickable-text { + color: var(--theme-primary); + cursor: pointer; +} + +.text-inactive { + color: rgba(255, 255, 255, 0.5); +} + +.brief-info .insights { + display: flex; + flex-direction: column; + gap: 28px; + flex: 1 0 20%; +} + +.insight-item { + display: flex; + flex-direction: row; + gap: 28px; + align-items: start; +} + +.insight-value { + display: flex; + flex-direction: column; + gap: 8px; +} + +.insight-value h3 { + margin: 0; + line-height: 1; +} + +.insight-value.milestone { + flex-direction: row; + align-items: center; + gap: 10px; +} + +.milestones-complete { + color: var(--theme-primary); + font-weight: 700; +} + +.milestone-progress-indicator { + position: relative; + width: 100%; + height: 4px; + background: #1c2608; + border-radius: 8px; +} + +.milestone-complete { + position: absolute; + top: 0; + left: 0; + bottom: 0; + background: var(--theme-primary); + border-radius: 8px; +} + +.milestone-complete-percentage { + position: absolute; + left: 0; + right: 0; + top: -12px; + font-size: 10px; + line-height: 1; + color: var(--theme-white); + text-align: center; +} + +.milestone-circle { + width: 16px; + height: 16px; + background: var(--theme-primary); + border-radius: 16px; + position: absolute; + top: -6px; + bottom: -6px; +} + +.freelancer-info { + display: flex; + flex-direction: column; + gap: 20px; +} + +.freelancer-profile { + display: flex; + flex-direction: row; + align-items: center; + gap: 32px; +} + +.freelancer-profile-pic { + width: 45px; + height: 45px; +} + +.primary-btn { + margin: 0; +} + +.milestones-container { + display: flex; + flex-direction: column; + gap: 36px; + /* background: var(--theme-white); */ + margin-top: 50px; +} + +.milestone-item { + display: flex; + flex-direction: column; +} + +.milestone-header { + display: flex; + flex-direction: row; + align-items: center; + gap: 16px; + color: var(--theme-white); + line-height: 1; +} + +.milestone-no { + font-size: 40px; + margin-right: 10px; +} + +.milestone-name { + font-size: 24px; + flex-grow: 1; +} + +.milestone-date { + font-size: 14px; +} + +.milestone-status { + font-size: 20px; + font-weight: 700; +} + +.milestone-details { + display: flex; + flex-direction: column; + margin-top: 10px; +} + +.milestone-release-info { + display: flex; + flex-direction: row; + gap: 10px; + font-size: 14px; + line-height: 16px; + font-weight: 700; + color: var(--theme-white); + margin-top: 10px; +} + +.milestone-description { + font-size: 14px; + line-height: 16px; + color: var(--theme-white); + margin-top: 16px; +} + +.toggle { + width: 32px; + height: 32px; + padding: 0; +} +.primary-btn.in-dark.toggle { + text-align: center; +} + +.vote { + margin-top: 20px; + align-self: flex-start; +} diff --git a/api/public/brief-details.css b/api/public/brief-details.css index ec401018..fa8d0b43 100644 --- a/api/public/brief-details.css +++ b/api/public/brief-details.css @@ -220,6 +220,11 @@ p { height: 18%; } +.brief-insights .insight-item { + margin-left: 20px; + margin-bottom: 25px; +} + .brief-insights-stat { display: flex; } @@ -236,6 +241,7 @@ p { .subsection { margin-left: 20px; margin-bottom: 25px; + margin-right: 20px; } .subsection > ul > li { list-style: disc; @@ -309,10 +315,11 @@ p { font-size: 14px; } -.h3, h3 { +.h3, +h3 { font-size: 1.17em !important; } .meet-hiring-team > h3 { - margin-top: 10px -} \ No newline at end of file + margin-top: 10px; +} diff --git a/api/public/common.css b/api/public/common.css index 6a5d6acf..70c04cd9 100644 --- a/api/public/common.css +++ b/api/public/common.css @@ -206,12 +206,16 @@ body { } .str-chat__message .str-chat__message-bubble, -.str-chat__message-input .str-chat__quoted-message-preview .str-chat__quoted-message-bubble { +.str-chat__message-input + .str-chat__quoted-message-preview + .str-chat__quoted-message-bubble { background: dimgray !important; } .str-chat__message-input, .str-chat__message-attachment-card--title, -.str-chat__message-input .str-chat__message-textarea-container .str-chat__message-textarea { +.str-chat__message-input + .str-chat__message-textarea-container + .str-chat__message-textarea { color: var(--theme-ink-color) !important; -} \ No newline at end of file +} diff --git a/api/src/backend/routes/web/index.ts b/api/src/backend/routes/web/index.ts index 055d1b3c..158c6fc4 100644 --- a/api/src/backend/routes/web/index.ts +++ b/api/src/backend/routes/web/index.ts @@ -56,19 +56,27 @@ router.get("/briefs/:id", (req, res) => { res.render("brief-details"); }); -router.get("/briefs/:id/apply", function (req, res, next) { - passport.authenticate("jwt", { - session: false, - failureRedirect: `/dapp/login?redirect=/dapp/briefs/${req.params.id}/apply`, - })(req, res, next) -}, (req, res) => { - res.render("submit-proposal"); -}); +router.get( + "/briefs/:id/apply", + function (req, res, next) { + passport.authenticate("jwt", { + session: false, + failureRedirect: `/dapp/login?redirect=/dapp/briefs/${req.params.id}/apply`, + })(req, res, next); + }, + (req, res) => { + res.render("submit-proposal"); + } +); router.get("/briefs/:id/applications", (req, res) => { res.render("brief-applications"); }); +router.get("/briefs/:id/dashboard", (req, res) => { + res.render("brief-dashboard"); +}); + router.get("/briefs/:id/applications/:application_id", (req, res) => { res.render("application-preview"); }); @@ -112,4 +120,4 @@ router.use((_req, res, next) => { res.render("legacy"); }); -export default router; \ No newline at end of file +export default router; diff --git a/api/src/backend/views/brief-dashboard.pug b/api/src/backend/views/brief-dashboard.pug new file mode 100644 index 00000000..c4c6224e --- /dev/null +++ b/api/src/backend/views/brief-dashboard.pug @@ -0,0 +1,4 @@ +extends layout.pug +block content + div(id="brief-dashboard" name="brief-dashboard") + script(src="/public/lib/brief-dashboard.js" type="text/javascript") \ No newline at end of file diff --git a/api/src/frontend/components/briefInsights.tsx b/api/src/frontend/components/briefInsights.tsx index ef719c71..04a5096e 100644 --- a/api/src/frontend/components/briefInsights.tsx +++ b/api/src/frontend/components/briefInsights.tsx @@ -24,7 +24,7 @@ export const BriefInsights = ({ brief }: BriefInsightsProps) => {
-

{brief.headline }

+

{brief.headline}

View full brief

diff --git a/api/src/frontend/pages/briefs/brief-dashboard.tsx b/api/src/frontend/pages/briefs/brief-dashboard.tsx new file mode 100644 index 00000000..bdf88d37 --- /dev/null +++ b/api/src/frontend/pages/briefs/brief-dashboard.tsx @@ -0,0 +1,234 @@ +import TimeAgo from "javascript-time-ago"; +import en from "javascript-time-ago/locale/en"; +import React, { useState } from "react"; +import ReactDOMClient from "react-dom/client"; +import { Brief } from "../../models"; +import { getBrief } from "../../services/briefsService"; +import { getCurrentUser, redirect } from "../../utils"; +import "../../../../public/brief-dashboard.css"; +import { RiShieldUserLine } from "react-icons/ri"; +import { FaDollarSign, FaRegCalendarAlt } from "react-icons/fa"; +import { ProjectState } from "../../models"; + +interface BriefDashboardProps { + brief: Brief; +} + +TimeAgo.addDefaultLocale(en); + +export const BriefDashboard = ({ brief }: BriefDashboardProps) => { + const timeAgo = new TimeAgo("en-US"); + const timePosted = timeAgo.format(new Date(brief.created)); + const milestonecompleted = 2; + + const viewFullBrief = () => { + redirect(`briefs/${brief.id}/`); + }; + + const milestones = [ + { + name: "C++ Network Experts for banking app", + date: "25 February 2023", + percentToRelease: "45%", + fundToRelease: "$45,000", + description: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis, lectus magna fringilla urna, porttitor rhoncus dolor purus non enim praesent elementum facilisis leo, vel fringilla est ullamcorper eget nulla facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum dui faucibus in ornare quam viverra orci sagittis eu volutpat odio facilisis mauris sit amet massa vitae tortor condimentum lacinia quis vel eros donec ac odio tempor orci dapibus ultrices in iaculis nunc sed augue lacus, viverra vitae congue eu, consequat ac felis donec et odio pellentesque diam volutpat commodo sed egestas egestas fringilla phasellus faucibus", + status: "Completed", + }, + { + name: "C++ Network Experts for banking app", + date: "25 February 2023", + percentToRelease: "45%", + fundToRelease: "$45,000", + description: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis, lectus magna fringilla urna, porttitor rhoncus dolor purus non enim praesent elementum facilisis leo, vel fringilla est ullamcorper eget nulla facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum dui faucibus in ornare quam viverra orci sagittis eu volutpat odio facilisis mauris sit amet massa vitae tortor condimentum lacinia quis vel eros donec ac odio tempor orci dapibus ultrices in iaculis nunc sed augue lacus, viverra vitae congue eu, consequat ac felis donec et odio pellentesque diam volutpat commodo sed egestas egestas fringilla phasellus faucibus", + status: "Open for Voting", + }, + { + name: "C++ Network Experts for banking app", + date: "25 February 2023", + percentToRelease: "45%", + fundToRelease: "$45,000", + description: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis, lectus magna fringilla urna, porttitor rhoncus dolor purus non enim praesent elementum facilisis leo, vel fringilla est ullamcorper eget nulla facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum dui faucibus in ornare quam viverra orci sagittis eu volutpat odio facilisis mauris sit amet massa vitae tortor condimentum lacinia quis vel eros donec ac odio tempor orci dapibus ultrices in iaculis nunc sed augue lacus, viverra vitae congue eu, consequat ac felis donec et odio pellentesque diam volutpat commodo sed egestas egestas fringilla phasellus faucibus", + status: "In Progress", + }, + { + name: "C++ Network Experts for banking app", + date: "25 February 2023", + percentToRelease: "45%", + fundToRelease: "$45,000", + description: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis, lectus magna fringilla urna, porttitor rhoncus dolor purus non enim praesent elementum facilisis leo, vel fringilla est ullamcorper eget nulla facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum dui faucibus in ornare quam viverra orci sagittis eu volutpat odio facilisis mauris sit amet massa vitae tortor condimentum lacinia quis vel eros donec ac odio tempor orci dapibus ultrices in iaculis nunc sed augue lacus, viverra vitae congue eu, consequat ac felis donec et odio pellentesque diam volutpat commodo sed egestas egestas fringilla phasellus faucibus", + status: "Not Started", + }, + ]; + + const [milestoneVisible, showMilestone] = useState({}); + + const toggleMilestone = (index: number) => { + const current = milestoneVisible[index] || false; + showMilestone({ ...milestoneVisible, [index]: !current }); + }; + + return ( + <> +
+
+
+
+

{brief.headline}

+

+ View full brief +

+
+
+

{brief.description}

+
+
+ Posted {timePosted}{" "} +
+
+
+
+ +
+

Milestone

+ + 2/4 + +
+
+
+
+
+
+ {milestones.map((milestone, index) => ( +
=(index+1)?"bg-[#b2ff0b]" :"bg-[#1c2608]"} `}>
+ ))} +
+ {/*
+ 50% +
*/} +
+
+ +
+

+ ${Number(brief.budget).toLocaleString()} +

+
+ Budget - fixed +
+
+
+
+ +
+

{brief.duration}

+
Timeline
+
+
+
+
+
+

Freelancer Hired

+
+ +

Idris Muhammad

+ +
+
+
+
+ {milestones.map((m, index) => ( +
+
+
+ {`Milestone ${index + 1}`} +
+

{m.name}

+
{m.date}
+
+ {m.status} +
+ +
+ {milestoneVisible[index] && ( +
+
+ + Percentage of funds to be released + {" "} + + {m.percentToRelease} + +
+
+ Funding to be released{" "} + + {m.fundToRelease} + +
+
+ {m.description} +
+
+ +
+
+ )} +
+ ))} +
+ + ); +}; + +document.addEventListener("DOMContentLoaded", async (event) => { + let paths = window.location.pathname.split("/"); + let briefId = paths.length >= 2 && parseInt(paths[paths.length - 2]); + const user = await getCurrentUser(); + + if (briefId) { + const brief: Brief = await getBrief(briefId); + if (brief) { + ReactDOMClient.createRoot( + document.getElementById("brief-dashboard")! + ).render(); + } + } +}); diff --git a/api/src/frontend/pages/briefs/details.tsx b/api/src/frontend/pages/briefs/details.tsx index 4307551b..01cd83a5 100644 --- a/api/src/frontend/pages/briefs/details.tsx +++ b/api/src/frontend/pages/briefs/details.tsx @@ -4,26 +4,31 @@ import { Brief, User } from "../../models"; import "../../../../public/brief-details.css"; import { getBrief } from "../../services/briefsService"; // import "../../../../public/freelancer-profile.css"; -import TimeAgo from 'javascript-time-ago'; -import en from 'javascript-time-ago/locale/en'; +import TimeAgo from "javascript-time-ago"; +import en from "javascript-time-ago/locale/en"; import { IoMdWallet } from "react-icons/io"; import { FaHandshake } from "react-icons/fa"; import { HiUserGroup } from "react-icons/hi"; -import { fetchUser, fetchUserOrEmail, getCurrentUser, redirect } from "../../utils"; +import { + fetchUser, + fetchUserOrEmail, + getCurrentUser, + redirect, +} from "../../utils"; import { ChatBox } from "../../components"; -import Modal from 'react-bootstrap/Modal'; -import 'bootstrap/dist/css/bootstrap.min.css'; +import Modal from "react-bootstrap/Modal"; +import "bootstrap/dist/css/bootstrap.min.css"; export type BriefProps = { brief: Brief; }; -export const BriefDetails = ({ brief: brief }: BriefProps): JSX.Element => { - const [browsingUser, setBrowsingUser] = useState(); - const [targetUser, setTargetUser] = useState(null); +export const BriefDetails = ({ brief: brief }: BriefProps): JSX.Element => { + const [browsingUser, setBrowsingUser] = useState(); + const [targetUser, setTargetUser] = useState(null); const [showMessageBox, setShowMessageBox] = useState(false); - const isOwnerOfBrief = (browsingUser && browsingUser.id == brief.user_id); + const isOwnerOfBrief = browsingUser && browsingUser.id == brief.user_id; useEffect(() => { async function setup() { @@ -38,23 +43,35 @@ export const BriefDetails = ({ brief: brief }: BriefProps): JSX.Element => { const redirectToApply = () => { redirect(`briefs/${brief.id}/apply`); - } + }; const handleMessageBoxClick = async () => { if (browsingUser) { setShowMessageBox(true); } else { - redirect("login", `/dapp/briefs/${brief.id}/`) + redirect("login", `/dapp/briefs/${brief.id}/`); } - } + }; const renderChat = ( setShowMessageBox(false)}> - {(browsingUser && targetUser) ? :

REACT_APP_GETSTREAM_API_KEY not found

} + {browsingUser && targetUser ? ( + + ) : ( +

REACT_APP_GETSTREAM_API_KEY not found

+ )} - + ); @@ -73,7 +90,10 @@ export const BriefDetails = ({ brief: brief }: BriefProps): JSX.Element => { {/* TODO: Do we use same styles for both buttons? */}
- {/* TODO: Implement */} @@ -162,13 +182,13 @@ export const BriefDetails = ({ brief: brief }: BriefProps): JSX.Element => { const BioInsights = (
-
+

Brief Insights

-
+

@@ -179,7 +199,7 @@ export const BriefDetails = ({ brief: brief }: BriefProps): JSX.Element => {

-
+

@@ -188,7 +208,7 @@ export const BriefDetails = ({ brief: brief }: BriefProps): JSX.Element => {

-
+

@@ -199,19 +219,22 @@ export const BriefDetails = ({ brief: brief }: BriefProps): JSX.Element => {
- { !isOwnerOfBrief && + {!isOwnerOfBrief && ( <> -
-
-

- Meet the hiring team: -

- +
+
+

Meet the hiring team:

+ +
-
- { browsingUser && showMessageBox && renderChat} + {browsingUser && showMessageBox && renderChat} - } + )}
); diff --git a/api/src/frontend/pages/briefs/hirer-dashboard.tsx b/api/src/frontend/pages/briefs/hirer-dashboard.tsx index c2ae0a39..9cf46159 100644 --- a/api/src/frontend/pages/briefs/hirer-dashboard.tsx +++ b/api/src/frontend/pages/briefs/hirer-dashboard.tsx @@ -31,13 +31,12 @@ export const HirerDashboard = ({ user }: HirerDashboardProps): JSX.Element => { const userBriefs = await getUserBriefs(user.id); setBriefsUnderReview(userBriefs.briefsUnderReview); setAcceptedBriefs(userBriefs.acceptedBriefs); - } + }; setup(); }, []); return (
-
@@ -45,33 +44,48 @@ export const HirerDashboard = ({ user }: HirerDashboardProps): JSX.Element => {

Open Briefs

-

Proposals

+

Proposals

-
{briefsUnderReview.map((brief) => { - const timePosted = timeAgo.format(new Date(brief.created)); + const timePosted = timeAgo.format( + new Date(brief.created) + ); return ( <>

{brief.headline}

- ${Number(brief.budget).toLocaleString()} + + $ + {Number( + brief.budget + ).toLocaleString()} + Created {timePosted}
-

{brief.number_of_applications}

+

+ {brief.number_of_applications} +

- +
- ) + ); })}
@@ -85,22 +99,42 @@ export const HirerDashboard = ({ user }: HirerDashboardProps): JSX.Element => {

{acceptedBriefs.map((brief) => { - const numberOfApprovedMilestones = brief.milestones.filter(milestone => milestone.is_approved).length; + const numberOfApprovedMilestones = + brief.milestones.filter( + (milestone) => milestone.is_approved + ).length; const totalMilestoneCount = brief.milestones.length; - const percent = ((numberOfApprovedMilestones / totalMilestoneCount) ?? 0) * 100; - const timePosted = timeAgo.format(new Date(brief.created)); + const percent = + (numberOfApprovedMilestones / totalMilestoneCount ?? + 0) * 100; + const timePosted = timeAgo.format( + new Date(brief.created) + ); return ( <>

{brief.headline}

- {Number(brief.project.required_funds).toLocaleString()} ${Currency[brief.project.currency_id]} + + {Number( + brief.project.required_funds + ).toLocaleString()}{" "} + $ + { + Currency[ + brief.project.currency_id + ] + } + Created {timePosted}

Milestones

-

{numberOfApprovedMilestones}/{totalMilestoneCount}

+

+ {numberOfApprovedMilestones}/ + {totalMilestoneCount} +

@@ -113,15 +147,24 @@ export const HirerDashboard = ({ user }: HirerDashboardProps): JSX.Element => {
- +
- ) + ); })}
-
+
); }; @@ -132,4 +175,4 @@ document.addEventListener("DOMContentLoaded", async (event) => { document.getElementById("hirer-dashboard")! ).render(); } -}); \ No newline at end of file +}); diff --git a/api/src/frontend/tests/freelancers.test.tsx b/api/src/frontend/tests/freelancers.test.tsx index 07ab8625..b6392cc0 100644 --- a/api/src/frontend/tests/freelancers.test.tsx +++ b/api/src/frontend/tests/freelancers.test.tsx @@ -8,6 +8,7 @@ function setUp() { "username": "test", "display_name": "test", "password": "test", + "web3_address": "test", "web3Accounts": [], "getstream_token": "test", }; @@ -20,6 +21,7 @@ test("test Freelancer rendering", () => { "username": "test", "display_name": "test", "password": "test", + "web3_address": "test", "web3Accounts": [], "getstream_token": "test", }} />)).toBeTruthy(); @@ -61,7 +63,7 @@ test("test freelancer capturing the input textbox value", () => { fireEvent.click(screen.getByTestId('freelance-goal-2')); fireEvent.click(screen.getByTestId('next-button')); fireEvent.change(screen.getByTestId('title'), {target: {value: 'imbueLegends'}}) - expect(screen.getByTestId('title').value).toEqual('imbueLegends'); + expect((screen.getByTestId('title') as HTMLInputElement).value).toEqual('imbueLegends'); }); test("test freelancer capturing the multiselect languages", () => { diff --git a/api/src/frontend/webpack.config.js b/api/src/frontend/webpack.config.js index 3dd0cd8b..b2bd3448 100644 --- a/api/src/frontend/webpack.config.js +++ b/api/src/frontend/webpack.config.js @@ -20,6 +20,7 @@ module.exports = { "submit-proposal": path.resolve(__dirname, "pages", "briefs", "submit.tsx"), "application-preview": path.resolve(__dirname, "pages", "briefs", "application-preview.tsx"), "hirer-dashboard": path.resolve(__dirname, "pages", "briefs", "hirer-dashboard.tsx"), + "brief-dashboard": path.resolve(__dirname, "pages", "briefs", "brief-dashboard.tsx") }, devtool: process.env.NODE_ENV === "development" ? "inline-source-map" diff --git a/api/src/legacy/styles/common.css b/api/src/legacy/styles/common.css index cc2ff560..d71faffa 100644 --- a/api/src/legacy/styles/common.css +++ b/api/src/legacy/styles/common.css @@ -19,14 +19,12 @@ --dialog-scrim-background: rgba(0, 0, 0, 0.75); --dialog-anchor-color: var(--theme-primary); --dialog-strong-color: var(--dialog-title-color); - --dialog-box-shadow: - 0px 0px 5px #444, + --dialog-box-shadow: 0px 0px 5px #444, 0px 11px 15px -7px rgba(50, 50, 50, 0.2), 0px 24px 38px 3px rgba(50, 50, 50, 0.14), 0px 9px 46px 8px rgba(50, 50, 50, 0.12); --dialog-z-index: 1001; - /** material design variable */ --mdc-shape-small: 8px; --mdc-theme-primary: var(--theme-primary); @@ -37,7 +35,7 @@ --mdc-theme-surface: #0f0f0f; --mdc-typography-font-family: var(--theme-font-family); - + --mdc-text-field-fill-color: rgba(235, 234, 226, 0.11); --mdc-text-field-disabled-fill-color: rgba(235, 234, 226, 0.23); --mdc-text-field-label-ink-color: #aaa; @@ -49,7 +47,7 @@ --mdc-select-disabled-ink-color: var(--mdc-text-field-disabled-ink-color); --mdc-select-label-ink-color: var(--mdc-text-field-label-ink-color); --mdc-select-ink-color: var(--mdc-text-field-ink-color); - + --mdc-theme-text-primary-on-background: var(--mdc-text-field-ink-color); --mdc-theme-text-secondary-on-background: var(--mdc-theme-secondary); --mdc-theme-text-icon-on-background: var(--mdc-text-field-label-ink-color); @@ -71,7 +69,6 @@ --disabled-button-color: #b5b5b5; --base-transition: all 200ms ease-in-out; - --hq-dialog-content-color: var(--dialog-content-color); --hq-dialog-strong-color: var(--dialog-strong-color); --hq-dialog-title-color: var(--dialog-title-color); @@ -83,13 +80,23 @@ --hq-button-font-size: var(--button-font-size); --hq-button-padding: var(--button-padding); --hq-button-border-radius: var(--button-border-radius); - --hq-primary-button-background-color: var(--primary-button-background-color); - --hq-primary-button-background-hover-color: var(--primary-button-background-hover-color); - --hq-secondary-button-background-color: var(--secondary-button-background-color); - --hq-secondary-button-background-hover-color: var(--secondary-button-background-hover-color); + --hq-primary-button-background-color: var( + --primary-button-background-color + ); + --hq-primary-button-background-hover-color: var( + --primary-button-background-hover-color + ); + --hq-secondary-button-background-color: var( + --secondary-button-background-color + ); + --hq-secondary-button-background-hover-color: var( + --secondary-button-background-hover-color + ); --hq-secondary-button-color: var(--secondary-button-color); --hq-secondary-button-border: var(--secondary-button-border); - --hq-disabled-button-background-color: var(--disabled-button-background-color); + --hq-disabled-button-background-color: var( + --disabled-button-background-color + ); --hq-disabled-button-color: var(--disabled-button-color); --hq-base-transition: var(--base-transition); }