diff --git a/apps/Mintbase/widget/Mintbase/App/ContractProfilePage/Mint/Index.jsx b/apps/Mintbase/widget/Mintbase/App/ContractProfilePage/Mint/Index.jsx index c8ce98cc..f6f2920e 100644 --- a/apps/Mintbase/widget/Mintbase/App/ContractProfilePage/Mint/Index.jsx +++ b/apps/Mintbase/widget/Mintbase/App/ContractProfilePage/Mint/Index.jsx @@ -59,55 +59,55 @@ const MintRoot = styled.div` `; const MintAmount = styled.div` -.amount-input{ - width: 20%; - display: flex; - flex-direction: column; - margin: 20px auto; - padding: 5px 10px; - p{ + .amount-input { + width: 20%; display: flex; - margin-bottom: 8px; - color: #000; - white-space: nowrap; - .dark{ - color: #fff; + flex-direction: column; + margin: 20px auto; + padding: 5px 10px; + p { + display: flex; + margin-bottom: 8px; + color: #000; + white-space: nowrap; + .dark { + color: #fff; + } + .max { + opacity: 0.7; + } } - .max{ - opacity: 0.7; + span { + color: #ff0000; + } + @media (max-width: 500px) { + width: 70%; } } - span{ - color: #ff0000; - } - @media (max-width: 500px) { - width: 70%; - } -} -.burn-light { - color: #000; - background-color: #f2f5f8; - button { - background-color: #000; - color: #fff; - } - input { - color: #000; - } - -} -.burn-dark { - color: #fff; - background: #101223; - button { - background-color: #fff; + .burn-light { color: #000; + background-color: #f2f5f8; + button { + background-color: #000; + color: #fff; + } + input { + color: #000; + } } - input { + .burn-dark { color: #fff; + background: #101223; + button { + background-color: #fff; + color: #000; + } + input { + color: #fff; + } } -} - .burn-dark, .burn-light { + .burn-dark, + .burn-light { display: flex; justify-content: space-between; align-items: center; @@ -115,8 +115,8 @@ const MintAmount = styled.div` @media (max-width: 500px) { width: 70%; } - input[type=number]::-webkit-inner-spin-button, - input[type=number]::-webkit-outer-spin-button { + input[type="number"]::-webkit-inner-spin-button, + input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } @@ -129,7 +129,6 @@ const MintAmount = styled.div` width: 40%; background: transparent; border: transparent; - } p { margin: 0; @@ -138,7 +137,7 @@ const MintAmount = styled.div` button { padding: 3px 9px; border: none; - + border-radius: 4px; &:disabled { cursor: not-allowed; @@ -146,7 +145,7 @@ const MintAmount = styled.div` color: #fff; } } - } + } `; const Basic = styled.div` @@ -160,10 +159,10 @@ const Basic = styled.div` color: #fff; } .top { - border-bottom: 1px solid #1e2030; + border-bottom: 1px solid #1e2030; } .file-upload { - background: #101223; + background: #101223; } } .top { @@ -272,7 +271,8 @@ const Mint = ({ isDarkModeOn, contractId, connectedDao }) => { const [royalties, setRoyalties] = useState([]); const [splits, setSplits] = useState([]); const [img, setImg] = useState(null); - + const owner = context.accountId; + const uploadFile = (files) => { const file = files[0]; setLoadingUpload(true); @@ -309,11 +309,11 @@ const Mint = ({ isDarkModeOn, contractId, connectedDao }) => { }; const onMint = (isDAO) => { - // if (!title && !description && !img) { - // return setErrorMessage( - // "Please make sure that all required fields are filled" - // ); - // } + if (!title && !description && img === null) { + return setErrorMessage( + "Please make sure that all required fields are filled" + ); + } let splitsRevenue = []; let royaltiesAvailable = []; @@ -372,7 +372,6 @@ const Mint = ({ isDarkModeOn, contractId, connectedDao }) => { category: categories[activeCategory], tags: tags, }; - const owner = context.accountId; if (isDAO === "DAO") { mintNftAsADao( connectedDao?.address, @@ -568,11 +567,17 @@ const Mint = ({ isDarkModeOn, contractId, connectedDao }) => { />
- {connectedDao?.permission && ( - )} diff --git a/apps/Mintbase/widget/Mintbase/App/Home/HomeContracts.jsx b/apps/Mintbase/widget/Mintbase/App/Home/HomeContracts.jsx index c6fe9018..7dc96240 100644 --- a/apps/Mintbase/widget/Mintbase/App/Home/HomeContracts.jsx +++ b/apps/Mintbase/widget/Mintbase/App/Home/HomeContracts.jsx @@ -109,7 +109,7 @@ const Contracts = styled.div` align-items: center; justify-content: space-between; margin-top: 80px; - widthL 100%; + width: 100%; .top { display: flex; justify-content: space-between; diff --git a/apps/Mintbase/widget/Mintbase/App/Store/Card.jsx b/apps/Mintbase/widget/Mintbase/App/Store/Card.jsx index 9a49f20f..839da9ff 100644 --- a/apps/Mintbase/widget/Mintbase/App/Store/Card.jsx +++ b/apps/Mintbase/widget/Mintbase/App/Store/Card.jsx @@ -60,7 +60,14 @@ const StoreCard = styled.div` &.dark-icon_area { border-color: var(--gray-850, #1e2030); } - } + + /* on tablets and mobile */ + @media screen and (max-width: 768px) { + width: 67px; + height: 67px; + margin-top: -15px; + } + } .contract_owner { margin-top: 10px; @@ -94,6 +101,11 @@ const StoreCard = styled.div` gap: 20px; .contract_owner { margin-left: 128px; + + /* tablets and phones */ + @media screen and (max-width: 768px) { + margin-left: 78px; + } } } } @@ -107,12 +119,22 @@ const StoreCard = styled.div` height: 100%; object-fit: cover; } + + /* on tablets and mobile */ + @media screen and (max-width: 768px) { + height: 83px; + } } .bottom { padding: 34px 24px; display: flex; justify-content: space-between; align-items: center; + + /* tablets and phones */ + @media screen and (max-width: 768px) { + padding: 12px; + } } .manage-settings { display: flex; @@ -164,6 +186,10 @@ const StoreCard = styled.div` } } } + @media (max-width: 568px){ + max-width: 70%; + margin: 0; + } `; const role = contract.owner_id === accountId ? "Owner" : "Minter"; @@ -223,8 +249,8 @@ return (

- {(contract.nft_contract_id.length > 22 - ? `${contract?.nft_contract_id.substring(0, 20)}...` + {(contract.nft_contract_id.length > 19 + ? `${contract?.nft_contract_id.substring(0, 15)}...` : contract?.nft_contract_id) || "contract Name"}{" "}

Role: {role}

@@ -247,7 +273,7 @@ return ( > Manage NFTs - {isConnected && ( + {/* {isConnected && ( Settings - )} + )} */}
diff --git a/apps/Mintbase/widget/Mintbase/MbButton.jsx b/apps/Mintbase/widget/Mintbase/MbButton.jsx index d782d95b..c55cc107 100644 --- a/apps/Mintbase/widget/Mintbase/MbButton.jsx +++ b/apps/Mintbase/widget/Mintbase/MbButton.jsx @@ -86,6 +86,7 @@ const Container = styled.div` ${!customStyle && getFontType(size)} border:none; --tw-ring-opacity: 1; + white-space: nowrap; &.big { padding: 8px 16px; min-width: 100px; diff --git a/apps/Mintbase/widget/Mintbase/Mini/Index.jsx b/apps/Mintbase/widget/Mintbase/Mini/Index.jsx index 3d1f63f8..00744941 100644 --- a/apps/Mintbase/widget/Mintbase/Mini/Index.jsx +++ b/apps/Mintbase/widget/Mintbase/Mini/Index.jsx @@ -19,6 +19,7 @@ const [mode, setMode] = useState(currentMode || "light"); const [showOwnedFilters, setShowOwnedFilters] = useState(false); const [storeAddress, setStoreAddress] = useState("nft.genadrop.near"); const isDarkModeOn = mode === "dark"; +const connectedDao = localStorageData; const Root = gatewayURL.includes("near.social") ? styled.div` @@ -42,18 +43,28 @@ const { MbInputField } = VM.require( MbInputField: () => <>, }; -const tabProps = { +const actualTabs = { tabLabels: [ - "My Owned NFTs", - "My Minted NFTs", - "My Stores", - "Mint NFT", - "Store NFTs", - "Deploy Store", - "My Activity", + {title:"My Owned NFTs"}, + {title: "My Minted NFTs"}, + {title: "My Stores"}, + {title: "Mint NFT"}, + {title: "Store NFTs"}, + {title: "Deploy Store"}, + {title: "My Activity"}, ], }; + +if (connectedDao?.address) { + actualTabs.tabLabels.push({title: "DAO NFTs"}) +} + +const hiddenTabs = actualTabs.tabLabels + .filter((tab) => !tab.hidden) + .map((tab) => tab.title); +const tabProps = { tabLabels: hiddenTabs }; + const [selectedTab, setSelectedTab] = useState(props.tab ?? "my-owned-nfts"); const switchChangeHandler = () => { @@ -403,11 +414,27 @@ const PageContent = () => { }} /> ); + case "dao-nfts": + return ( + + ); case "store-nfts": return ( ); case "my-activity": @@ -643,7 +670,7 @@ const Index = ({}) => ( props={{ isDarkModeOn, accountId, - localStorageData, + localStorageData: connectedDao, setLocalStorageData, }} />