Skip to content

Commit

Permalink
feat(web): subgraph-status-banner
Browse files Browse the repository at this point in the history
  • Loading branch information
Harman-singh-waraich committed Jun 26, 2024
1 parent bcaf43a commit 237e67c
Show file tree
Hide file tree
Showing 3 changed files with 53 additions and 11 deletions.
13 changes: 10 additions & 3 deletions web/.parcelrc
Original file line number Diff line number Diff line change
@@ -1,8 +1,15 @@
{
"extends": "@parcel/config-default",
"transformers": {
"*.svg": ["...", "@parcel/transformer-svg-react"],
"tsx:*.svg": ["@parcel/transformer-svg-react"],
"tsx:*": ["..."]
"web/src/**/*.svg": [
"...",
"@parcel/transformer-svg-react"
],
"tsx:*.svg": [
"@parcel/transformer-svg-react"
],
"tsx:*": [
"..."
]
}
}
1 change: 1 addition & 0 deletions web/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -109,6 +109,7 @@
"react-use": "^17.4.3",
"siwe": "^2.3.2",
"styled-components": "^5.3.11",
"subgraph-status": "^1.2.3",
"viem": "^1.21.4",
"wagmi": "^1.4.13"
}
Expand Down
50 changes: 42 additions & 8 deletions web/src/layout/Header/index.tsx
Original file line number Diff line number Diff line change
@@ -1,18 +1,25 @@
import React from "react";
import styled from "styled-components";
import MobileHeader from "./MobileHeader";
import styled, { useTheme } from "styled-components";

import DesktopHeader from "./DesktopHeader";
import MobileHeader from "./MobileHeader";
import { StatusBanner } from "subgraph-status";
import { getGraphqlUrl } from "utils/getGraphqlUrl";

const Container = styled.div`
position: sticky;
z-index: 1;
z-index: 30;
top: 0;
width: 100%;
height: 64px;
background-color: ${({ theme }) => theme.primaryPurple};
padding: 0 24px;
display: flex;
flex-wrap: wrap;
`;

const HeaderContainer = styled.div`
width: 100%;
padding: 4px 24px 8px;
`;

export const PopupContainer = styled.div`
Expand All @@ -24,13 +31,40 @@ export const PopupContainer = styled.div`
z-index: 30;
`;

const StyledBanner = styled(StatusBanner)`
position: sticky !important;
.status-text {
h2 {
margin: 0;
line-height: 24px;
}
}
`;

const Header: React.FC = () => {
const theme = useTheme();

return (
<Container>
<DesktopHeader />
<MobileHeader />
<StyledBanner
theme={{
colors: {
main: theme.whiteBackground,
primary: theme.primaryText,
secondary: theme.secondaryText,
},
}}
subgraphs={[
{ name: "Curate", url: getGraphqlUrl(false) },
{ name: "Kleros Core", url: getGraphqlUrl(true) },
]}
/>
<HeaderContainer>
<DesktopHeader />
<MobileHeader />
</HeaderContainer>
</Container>
);
};

export default Header;
export default Header;

0 comments on commit 237e67c

Please sign in to comment.