Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Style fixes #210

Merged
merged 10 commits into from
Jan 15, 2025
+120 −101
Merged

Style fixes #210

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
13f6c07
Style fixes
rubycop Jan 10, 2025
7462d49
change line chart color
rubycop Jan 13, 2025
16d02be
fix table styles
rubycop Jan 13, 2025
06d3a59
Merge branch 'main' into style-fixes
rubycop Jan 13, 2025
ae99d39
style fixes
rubycop Jan 13, 2025
bc25d2a
style fixes
rubycop Jan 13, 2025
2c1320a
Merge branch 'main' into style-fixes
frol Jan 13, 2025
96af655
Merge branch 'main' into style-fixes
rubycop Jan 14, 2025
5693dc7
Add period hover state
rubycop Jan 14, 2025
eded7f9
styling left navbar. fix card container paddings
rubycop Jan 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 14 additions & 9 deletions instances/treasury-devdao.near/widget/components/Navbar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ const Navbar = styled.div`
.account-container {
color: var(--theme-color) !important;
font-size: 14px;
font-weight: 700;
font-weight: 500;
}

.text-sm {
Expand All @@ -58,7 +58,7 @@ const Navbar = styled.div`
`;

const LinksContainer = styled.div`
font-size: 17px;
font-size: 15px;
display: flex;
flex-direction: row;
align-items: center;
Expand Down Expand Up @@ -134,7 +134,7 @@ const treasuryLogo = metadata?.flagLogo ? metadata?.flagLogo : logo;
return (
<Navbar className="position-relative d-flex justify-content-between gap-2">
<div className="d-flex flex-column gap-2">
<div className="d-flex gap-2 align-items-center">
<div className="d-flex gap-3 align-items-center">
{/* logo can be svg or src */}
{treasuryLogo && typeof treasuryLogo === "string" ? (
<img
Expand All @@ -146,12 +146,17 @@ return (
) : (
treasuryLogo
)}
<div className="h3 mb-0">{getTitle(page ?? "dashboard")}</div>
{isTesting && <div className="text-secondary">(Testing)</div>}
</div>
<div>
<span className="text-sm">Treasury Wallet: </span>
<span className="account-container">{treasuryDaoID}</span>
<div className="d-flex flex-column">
<div className="h4 mb-0 d-flex flex-row gap-2 align-items-center">
<div>{getTitle(page ?? "dashboard")}</div>
{isTesting && <small className="badge">Testing</small>}
</div>

<div>
<span className="text-sm">Treasury Wallet: </span>
<span className="account-container">{treasuryDaoID}</span>
</div>
</div>
</div>
</div>
<div className="d-flex gap-3 align-items-center">
Expand Down
5 changes: 1 addition & 4 deletions instances/treasury-devdao.near/widget/components/Pagination.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,7 @@ const currenPageLimit =
: currentPage * rowsPerPage;

return (
<div
className="d-flex justify-content-between align-items-center gap-2 flex-wrap"
style={{ color: "#555555" }}
>
<div className="d-flex justify-content-between align-items-center gap-2 flex-wrap px-3">
<div className="d-flex gap-2 align-items-center">
Rows per Page:
<select
Expand Down
4 changes: 2 additions & 2 deletions instances/treasury-devdao.near/widget/components/SettingsDropdown.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,12 +130,12 @@ return (
tabIndex="0"
onBlur={() => setIsOpen(false)}
>
<div
<button
className={"dropdown-toggle btn-outline-plain "}
onClick={toggleDropdown}
>
<i class="bi bi-gear"></i>
</div>
</button>

{isOpen && (
<div className="dropdown-menu rounded-2 dropdown-menu-end dropdown-menu-lg-start px-2 shadow show w-100">
Expand Down
15 changes: 4 additions & 11 deletions instances/treasury-devdao.near/widget/components/SidebarAndMainLayout.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,11 @@ const Container = styled.div`
}

.link.active {
font-weight: bolder;
color: var(--theme-color) !important;
background-color:var(--grey-04);
background-color: var(--grey-035);
}

.link:hover {
color: var(--theme-color)) !important;
color: var(--theme-color) !important;
background-color:var(--grey-04);
background-color: var(--grey-035);
}

.flex-1 {
Expand All @@ -41,18 +37,15 @@ const [currentTab, setCurrentTab] = useState(

return (
<Container className="d-flex gap-4 flex-wrap">
<div
className="card rounded-3 py-3 flex-1"
style={{ height: "max-content" }}
>
<div className="flex-1" style={{ height: "max-content" }}>
<div className="d-flex gap-2 flex-column">
{leftNavbarOptions.map((item) => {
const { title } = item;
return (
<div
onClick={() => setCurrentTab(item)}
className={[
"link d-inline-flex gap-2 p-2 px-3 rounded-2 pointer",
"link d-inline-flex gap-2 p-2 px-3 rounded-3 pointer",
currentTab.title === title ? "active" : "",
].join(" ")}
key={title}
Expand Down
10 changes: 5 additions & 5 deletions instances/treasury-devdao.near/widget/components/Tabs.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,18 +25,18 @@ const Container = styled.div`
const NavUnderline = styled.ul`
cursor: pointer;
font-size: 16px;
font-weight: 500;

.nav-link {
color: var(--text-secondary-color) !important;
padding-bottom: 19px;
padding-bottom: 24px;
}
.active {
font-weight: bolder;
color: var(--text-color) !important;
border-bottom: 3px solid var(--theme-color);
}
.nav-link:hover {
color: var(--text-color) !important;
font-weight: bolder;
}
`;

Expand All @@ -60,7 +60,7 @@ useEffect(() => {
}, [props]);

return (
<Container className="card rounded-3 py-3 d-flex flex-column gap-3">
<Container className="card py-3 d-flex flex-column">
<div
className="d-flex justify-content-between gap-2 align-items-center border-bottom flex-wrap"
style={{ paddingRight: "10px" }}
Expand Down Expand Up @@ -93,7 +93,7 @@ return (
</div>
</div>
{currentTab && (
<div className="w-100 h-100 px-3" key={currentTab.title}>
<div className="w-100 h-100" key={currentTab.title}>
<Widget src={currentTab.href} props={currentTabProps} />
</div>
)}
Expand Down
2 changes: 1 addition & 1 deletion instances/treasury-devdao.near/widget/components/TokenAmount.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ if (amountWithoutDecimals !== undefined) {
return (
<div className="text-center">
<div className="d-flex gap-1 align-items-center justify-content-end">
<span className="amount h6 bolder mb-0">
<span className="amount bolder mb-0">
{amount.toLocaleString("en-US", {
minimumFractionDigits: 2,
maximumFractionDigits: 2,
Expand Down
43 changes: 37 additions & 6 deletions instances/treasury-devdao.near/widget/components/templates/AppLayout.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ function AppLayout({ page, instance, children, treasuryDaoID, accountId }) {
--grey-01: ${isDarkTheme ? "#F4F4F4" : "#1B1B18"};
--grey-02: ${isDarkTheme ? "#B3B3B3" : "#555555"};
--grey-03: ${isDarkTheme ? "#555555" : "#B3B3B3"};
--grey-035: ${isDarkTheme ? "#3E3E3E" : "#E6E6E6"};
--grey-04: ${isDarkTheme ? "#323232" : "#F4F4F4"};
--grey-05: ${isDarkTheme ? "#1B1B18" : "#F7F7F7"};
--icon-color: ${isDarkTheme ? "#CACACA" : "#060606"};
Expand Down Expand Up @@ -110,27 +111,33 @@ function AppLayout({ page, instance, children, treasuryDaoID, accountId }) {
}

color: var(--text-color);
font-weight: 500;

a {
text-decoration: none;
color: var(--text-color) !important;
font-weight: 500;
&.active {
color: var(--text-color) !important;
font-weight: 700 !important;
}

&:hover {
text-decoration: none;
color: var(--text-color) !important;
font-weight: 700 !important;
}
}

button {
height: 40px;
font-weight: 500;
}

button.primary {
background: var(--theme-color) !important;
background: var(--theme-color);
color: var(--text-alt-color) !important;
border: none !important;
padding-block: 0.7rem !important;

i {
color: var(--text-alt-color) !important;
}
Expand All @@ -140,6 +147,11 @@ function AppLayout({ page, instance, children, treasuryDaoID, accountId }) {
background: var(--theme-color) !important;
color: var(--text-alt-color) !important;
border: none !important;

&:hover {
background: var(--theme-color-dark);
}

i {
color: var(--text-alt-color) !important;
}
Expand Down Expand Up @@ -255,8 +267,18 @@ function AppLayout({ page, instance, children, treasuryDaoID, accountId }) {
color: inherit !important;
}

.badge {
padding: 6px 8px;
background: #f7dbff;
color: var(--theme-color);
rounded: 8px;
font-weight: 500;
font-size: 12px;
}

.btn-outline-plain {
padding-block: 8px !important;
height: 40px;
padding-block: 7px !important;
padding-inline: 10px !important;
border-radius: 0.375rem !important;
border: 1.5px solid var(--border-color) !important;
Expand Down Expand Up @@ -292,6 +314,15 @@ function AppLayout({ page, instance, children, treasuryDaoID, accountId }) {
.table {
border-color: var(--border-color) !important;
color: var(--text-color) !important;
margin-bottom: 20px;
}

.table td:first-child {
padding-left: 20px;
}

.table td:last-child {
padding-right: 20px;
}

.bg-white {
Expand Down Expand Up @@ -394,10 +425,10 @@ function AppLayout({ page, instance, children, treasuryDaoID, accountId }) {
<></>
) : (
<ParentContainer data-bs-theme={isDarkTheme ? "dark" : "light"}>
<Theme className="h-100 w-100">
<Theme className="min-h-100 w-100">
<AppHeader page={page} instance={instance} />
<BalanceBanner accountId={accountId} treasuryDaoID={treasuryDaoID} />
<div className="px-3 py-2 w-100 h-100">{children}</div>
<div className="px-3 pb-3 w-100 h-100">{children}</div>
</Theme>
</ParentContainer>
);
Expand Down
10 changes: 8 additions & 2 deletions instances/treasury-devdao.near/widget/pages/dashboard/Chart.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ const [height, setHeight] = useState(350);
const [history, setHistory] = useState([]);
const [tokenAddresses, setTokenAddresses] = useState([]);
const [selectedPeriod, setSelectedPeriod] = useState({
value: 1,
value: 24 * 30,
interval: 12,
});
const [selectedToken, setSelectedToken] = useState("near");
Expand Down Expand Up @@ -54,7 +54,7 @@ const metadata = JSON.parse(atob(config.metadata ?? ""));

const isDarkTheme = metadata.theme === "dark";
const bgPageColor = isDarkTheme ? "#222222" : "#FFFFFF";
const borderColor = isDarkTheme ? "#3B3B3B" : "rgba(226, 230, 236, 1)";
const borderColor = isDarkTheme ? "#3B3B3B" : "#000";
const iconColor = isDarkTheme ? "#CACACA" : "#060606";
const textColor = isDarkTheme ? "#CACACA" : "#1B1B18";
const fillStyle = isDarkTheme
Expand Down Expand Up @@ -274,6 +274,12 @@ const Period = styled.div`
color: #999999;
font-weight: 500;

&:hover {
background-color: var(--grey-04);
color: var(--text-color);
border-radius: 8px;
}

&.selected {
background-color: var(--grey-04);
color: var(--text-color);
Expand Down
6 changes: 3 additions & 3 deletions instances/treasury-devdao.near/widget/pages/dashboard/Portfolio.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,7 @@ const BalanceDisplay = ({
/>
)}
</div>
<div className="d-flex gap-3 align-items-center justify-content-end">
<div className="d-flex gap-2 align-items-center justify-content-end">
<div className="d-flex flex-column align-items-end">
<div className="h6 mb-0 d-flex align-items-center gap-1">
<NearToken height={20} width={20} />
Expand Down Expand Up @@ -184,7 +184,7 @@ const PortfolioCard = ({
</div>
</div>
</div>
<div className="d-flex gap-3 align-items-center justify-content-end">
<div className="d-flex gap-2 align-items-center justify-content-end">
<div className="d-flex flex-column align-items-end">
<div className="h6 mb-0">{formatToReadableDecimals(balance)}</div>
<div className="text-sm text-secondary">
Expand Down Expand Up @@ -300,7 +300,7 @@ const isLoading =
return (
<div className="card flex-1 overflow-hidden border-bottom">
{heading}
<div className="my-2">
<div className="mb-2">
{isLoading ? (
<div className="d-flex justify-content-center align-items-center w-100 h-100">
<Loading />
Expand Down
6 changes: 3 additions & 3 deletions instances/treasury-devdao.near/widget/pages/dashboard/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ const Wrapper = styled.div`
}

.flex-container {
min-width: 325px;
min-width: 400px;
height: fit-content;
}

Expand Down Expand Up @@ -252,7 +252,7 @@ return (
<div className="h5 mb-0">Sputnik DAO</div>
<div>
<span className="text-sm text-secondary">Wallet: </span>
<span className="text-theme text-sm fw-bold">
<span className="text-theme text-sm fw-medium">
{treasuryDaoID}
</span>
</div>
Expand Down Expand Up @@ -280,7 +280,7 @@ return (
<div className="h5 mb-0">Lockup</div>
<div>
<span className="text-sm text-secondary">Wallet: </span>
<span className="text-theme text-sm fw-bold">
<span className="text-theme text-sm fw-medium">
{lockupContract}
</span>
</div>
Expand Down
9 changes: 5 additions & 4 deletions instances/treasury-devdao.near/widget/pages/payments/Table.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@ const hasDeletePermission = (deleteGroup?.approverAccounts ?? []).includes(
const Container = styled.div`
font-size: 13px;
min-height: 60vh;
display: flex;

td {
padding: 0.5rem;
Expand Down Expand Up @@ -245,7 +246,7 @@ const ProposalsComponent = () => {
: ""
}
>
<td className="fw-semi-bold">{item.id}</td>
<td className="fw-semi-bold px-3">{item.id}</td>
<td className={isVisible("Created Date")}>
<Widget
src={`${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/components.Date`}
Expand Down Expand Up @@ -489,13 +490,13 @@ return (
transferApproversGroup === null ||
!nearStakedTokens ||
policy === null ? (
<div className="d-flex justify-content-center align-items-center w-100 h-100">
<div className="d-flex justify-content-center align-items-center w-100">
<Widget
src={"${REPL_DEVHUB}/widget/devhub.components.molecule.Spinner"}
/>
</div>
) : (
<div>
<div className="w-100">
{proposals.length === 0 ? (
<div
style={{ height: "50vh" }}
Expand All @@ -517,7 +518,7 @@ return (
<table className="table">
<thead>
<tr className="text-secondary">
<td>#</td>
<td className="px-3">#</td>
<td className={isVisible("Created Date")}>Created Date</td>
{!isPendingRequests && <td className="text-center">Status</td>}
{showReferenceProposal && (
Expand Down
Loading
Loading