Skip to content

Commit

Permalink
Merge pull request #148 from Itheum/stg
Browse files Browse the repository at this point in the history 
Stg
  • Loading branch information
@Enciusan
Enciusan authored Sep 8, 2023
2 parents afbb024 + 5644b52 commit d517413
Show file tree
Hide file tree
Showing 8 changed files with 180 additions and 156 deletions.
54 changes: 27 additions & 27 deletions src/assets/sass/theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,7 @@ body {
// $dropdown-link-hover-bg: transparent;
//
// --light: #0f0f0f;
// --light-20: #0f0f0f88;
//--light-20: #0f0f0f88;
//
// // --#{$variable-prefix}body-color: #{$body-color};
// // --#{$variable-prefix}body-bg: #{$body-bg};
Expand Down Expand Up @@ -198,32 +198,32 @@ body {
// .btn-outline-primary {
// color: #fff;
// }
//
// // Dapp Core
// .dapp-core-component__dappModalStyles__dappModalContent {
// background-color: $mxDefiWalBG;
// }
//
// .dapp-core-component__dappModalStyles__dappModalCloseButton {
// background-color: $mxDefiWalBG;
// color: #fff;
// }
//
// .dapp-core-component__dappModalStyles__dappModalBody {
// padding: 30px !important;
// }
//
// .dapp-core-component__addressTableStyles__ledger-address-table-header {
// background-color: #343a40 !important;
// }
//
// .dapp-core-component__addressTableStyles__ledger-address-table-navigation button {
// color: #fff !important;
// }
//
// .custom-box-border {
// border: 1px solid #939da7;
// }

// Dapp Core
//.dapp-core-component__dappModalStyles__dappModalContent {
// background-color: $mxDefiWalBG;
//}
//
//.dapp-core-component__dappModalStyles__dappModalCloseButton {
// background-color: $mxDefiWalBG;
// color: #fff;
//}
//
//.dapp-core-component__dappModalStyles__dappModalBody {
// padding: 30px !important;
//}
//
//.dapp-core-component__addressTableStyles__ledger-address-table-header {
// background-color: #343a40 !important;
//}
//
//.dapp-core-component__addressTableStyles__ledger-address-table-navigation button {
// color: #fff !important;
//}

//.custom-box-border {
// border: 1px solid #939da7;
//}
//}

.custom-classname.btn-primary {
Expand Down
4 changes: 2 additions & 2 deletions src/components/Layout/Layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,9 @@ export const Layout = ({ children }: { children: React.ReactNode }) => {
const { search } = useLocation();

return (
<div className="flex flex-column flex-auto min-h-[100dvh]">
<div className="flex flex-col flex-auto min-h-[100dvh]">
<Navbar />
<main className="flex flex-column flex-grow-1 2xl:mx-[20rem] xl:mx-[8rem] md:mx-[4rem] base:mx-[1.5rem]">
<main className="flex flex-col flex-grow-1 2xl:mx-[20rem] xl:mx-[8rem] md:mx-[4rem] base:mx-[1.5rem]">
<AuthenticatedRoutesWrapper routes={routes} unlockRoute={`${routeNames.unlock}${search}`}>
{children}
</AuthenticatedRoutesWrapper>
Expand Down
57 changes: 34 additions & 23 deletions src/components/TrailBlazerModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,18 +14,21 @@ const customStyles = {
backgroundColor: "var(--light-20) !important",
backdropFilter: "blur(10px)",
},
content: {
width: "80%",
top: "50%",
left: "50%",
right: "auto",
bottom: "auto",
marginRight: "-50%",
transform: "translate(-50%, -50%)",
maxHeight: "80vh",
backgroundColor: "var(--light)",
color: "var(--dark)",
},
// dark: {
// backgroundColor: "var(--background)",
// },
// content: {
// width: "80%",
// top: "50%",
// left: "50%",
// right: "auto",
// bottom: "auto",
// marginRight: "-50%",
// transform: "translate(-50%, -50%)",
// maxHeight: "80vh",
// backgroundColor: "var(--light)",
// color: "var(--dark)",
// },
};

export const TrailBlazerModal = ({
Expand Down Expand Up @@ -93,7 +96,7 @@ export const TrailBlazerModal = ({
<FaShoppingCart />
</div>
<div className="item">{dataItem.title}</div>
<a className="action" href={dataItem.link} target="_blank">
<a className="bg-yellow-300 px-1.5 py-2 rounded-lg" href={dataItem.link} target="_blank">
<div>Grab your offer now!</div>
</a>
</div>
Expand Down Expand Up @@ -229,24 +232,32 @@ export const TrailBlazerModal = ({
}

return (
<Modal isOpen={isModalOpened} onRequestClose={closeModal} style={customStyles} ariaHideApp={false} shouldCloseOnOverlayClick={false}>
<div className="h-[3rem]">
<div className="flex justify-end cursor-pointer text-[2rem]" onClick={closeModal}>
<IoClose />
<Modal
isOpen={isModalOpened}
onRequestClose={closeModal}
className="absolute overflow-y-scroll scrollbar !w-[80%] !top-[50%] !left-[50%] !right-auto !bottom-auto !-mr-[50%] !-translate-x-[50%] !-translate-y-[50%] !max-h-[79vh] !bg-background !shadow-md !shadow-foreground rounded-2xl"
style={customStyles}
ariaHideApp={false}
shouldCloseOnOverlayClick={false}>
<div className="sticky-top flex flex-row justify-between backdrop-blur bg-background/60">
<ModalHeader className="border-0">
<h2 className="text-center p-3 text-card-foreground">Trailblazer</h2>
</ModalHeader>
<div className="flex items-center h-[6rem]">
<div className="flex justify-center cursor-pointer text-[2rem] text-card-foreground" onClick={closeModal}>
<IoClose />
</div>
</div>
</div>
<ModalHeader>
<h4 className="text-center font-title font-weight-bold">Trailblazer</h4>
</ModalHeader>
<ModalBody>
{!owned ? (
<div className="d-flex flex-column align-items-center justify-content-center">
<div className="flex flex-col items-center justify-center">
<h4 className="mt-3 font-title">You do not own this Data NFT</h4>
<h6>(Buy the Data NFT from the marketplace to unlock the data)</h6>
</div>
) : isFetchingDataMarshal || !data ? (
<div
className="d-flex flex-column align-items-center justify-content-center"
className="flex flex-col items-center justify-center"
style={{
minWidth: "24rem",
maxWidth: "100%",
Expand All @@ -261,7 +272,7 @@ export const TrailBlazerModal = ({
</div>
</div>
) : (
<div className="trailblazer-view">
<div className="trailblazer-view text-black">
<VerticalTimeline>
{data?.map((_dataItem: any, _index: any) => {
return (
Expand Down
28 changes: 27 additions & 1 deletion src/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ h5, h6 {
}

.dark {
--background: 224 71% 4%;
--background: 0 0% 9%;
--foreground: 213 31% 91%;

--muted: 223 47% 11%;
Expand Down Expand Up @@ -93,6 +93,32 @@ h5, h6 {
}
}

@layer utilities {
.scrollbar::-webkit-scrollbar {
@apply w-5;
}

.scrollbar::-webkit-scrollbar-track {
@apply rounded-md bg-[#f7f4ed];
}

.scrollbar::-webkit-scrollbar-thumb {
@apply bg-orange-400/90 rounded-lg;
}

.scrollbar::-webkit-scrollbar-thumb:hover {
@apply bg-orange-400/70;
}
}

.vertical-timeline-element-icon {
@apply bg-orange-400;
}

.vertical-timeline::before {
@apply bg-black dark:bg-white !important;
}

@layer base {
* {
@apply border-border;
Expand Down
2 changes: 1 addition & 1 deletion src/libComponents/Button.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { cva, VariantProps } from "class-variance-authority";
import { cn } from "../libs/utils";

const buttonVariants = cva(
"inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
"inline-flex items-center justify-center rounded-md font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
{
variants: {
variant: {
Expand Down
78 changes: 38 additions & 40 deletions src/pages/AppMarketplace/MultiversxInfographics/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ import "react-pdf/dist/Page/AnnotationLayer.css";
import "react-pdf/dist/Page/TextLayer.css";
import "./MultiversxInfographics.scss";
import { HeaderComponent } from "../../../components/Layout/HeaderComponent";
import { Button } from "../../../libComponents/Button";

pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.js`;

Expand Down Expand Up @@ -272,41 +273,38 @@ export const MultiversxInfographics = () => {
) : (
<h3 className="text-center text-white">No DataNFT</h3>
)}
<Modal isOpen={isModalOpened} onRequestClose={closeModal} style={modalStylesFull} ariaHideApp={false} shouldCloseOnOverlayClick={false}>
<div style={{ height: "3rem" }}>
<div
style={{
float: "right",
cursor: "pointer",
fontSize: "2rem",
}}
onClick={closeModal}>
<IoClose />

<Modal
isOpen={isModalOpened}
onRequestClose={closeModal}
className="absolute overflow-y-scroll scrollbar !w-[80%] !top-[50%] !left-[50%] !right-auto !bottom-auto !-mr-[50%] !-translate-x-[50%] !-translate-y-[50%] !max-h-[79vh] !bg-background !shadow-md !shadow-foreground rounded-2xl"
style={modalStylesFull}
ariaHideApp={false}
shouldCloseOnOverlayClick={false}>
<div className="sticky-top flex flex-row justify-between backdrop-blur bg-background/60">
<ModalHeader className="border-0">
<h2 className="text-foreground p-3 text-center">MultiversX Infographics</h2>
</ModalHeader>
<div className="flex flex-col items-end gap-6 h-[6rem]">
<div className="flex justify-center cursor-pointer text-[2rem] text-foreground mr-3 mt-1" onClick={closeModal}>
<IoClose />
</div>
<div className="mr-3 mb-2">
{file && (
<Button
className="text-xs md:text-base text-black bg-gradient-to-r from-yellow-300 to-orange-500 py-6 sm:py-0"
onClick={() => {
if (file) {
window.open(file as string, "_blank");
}
}}>
Open in full screen
</Button>
)}
</div>
</div>
</div>
<ModalHeader>
<div className="c-model-header-with-action">
<h4 className="text-center font-title font-weight-bold c-model-title">MultiversX Infographics</h4>
{file && (
<button
className="btn btn-outline-primary"
onClick={() => {
if (file) {
window.open(file as string, "_blank");
}
}}>
Open this PDF in full screen mode
</button>
)}
</div>
</ModalHeader>
<ModalBody
style={{
minWidth: "26rem",
minHeight: "36rem",
maxHeight: "80vh",
overflowY: "scroll",
}}>
<ModalBody className="max-h-[80vh] min-h-[36rem] min-w-[26rem] p-0.5">
{!owned ? (
<div
className="d-flex flex-column align-items-center justify-content-center"
Expand All @@ -327,7 +325,7 @@ export const MultiversxInfographics = () => {
}}>
<div>
<Loader noText />
<p className="text-center font-weight-bold">
<p className="text-center text-foreground">
{["ledger", "walletconnectv2", "extra"].includes(loginMethod) ? "Please sign the message using xPortal or Ledger" : "Loading..."}
</p>
</div>
Expand All @@ -336,16 +334,16 @@ export const MultiversxInfographics = () => {
<>
{viewDataRes && !viewDataRes.error && (
<div>
<div className="d-flex justify-content-center c-container-paging">
<button className="btn btn-outline-primary mr-3" type="button" disabled={pageNumber <= 1} onClick={previousPage}>
<div className="flex justify-center items-center">
<Button className="text-foreground mr-3" variant="outline" disabled={pageNumber <= 1} onClick={previousPage}>
Previous
</button>
<p className="c-pagecount">
</Button>
<p className="text-foreground">
Page {pageNumber || (numPages ? 1 : "--")} of {numPages || "--"}
</p>
<button className="btn btn-outline-primary ml-3" type="button" disabled={pageNumber >= numPages} onClick={nextPage}>
<Button className="text-foreground ml-3" variant="outline" disabled={pageNumber >= numPages} onClick={nextPage}>
Next
</button>
</Button>
</div>

<div className="c-container-document">
Expand Down
Loading

0 comments on commit d517413

Please sign in to comment.