const ProjectContainer = styled.div` width: 800px; display: flex; justify-content: space-between; align-items: center; padding-inline: 8px; color: #0095b6; border-style: solid; `; const Button = styled.div` height: 60px; width: 100%; display: flex; justify-content: end; align-items: center; gap: 12px; font-weight: 500; a{ color: #0095b6; font-size: 16px } `; // Login Check const loggedIn = !!context.accountId; const Main = ( <ProjectContainer className="m-2 p-4"> <div className="row"> <div ClassName="center"> <h4 style={{ fontWeight: 1000 }}>Calimocho</h4> <h5 style={{ fontWeight: 200 }}>contract sign</h5> </div> <div> <div className="flex flex-wrap flex-1 text-center justify-center border rounded m-4" hidden={!loggedIn} > <label className="font-bold mr-8"> duration time: <select className="p-2 m-2 border rounded"> <option value="1">1 day</option> <option value="1">2 day</option> <option value="1">3 day</option> <option value="1">4 day</option> <option value="2">5 days</option> <option value="3">1 week</option> <option value="4">2 weeks</option> <option value="4">3 weeks</option> <option value="4">4 weeks</option> </select> </label> <label className="" hidden={!loggedIn}> minimal person quorum: <select className="p-2 m-2 border rounded"> <option value="2">2 persons</option> <option value="3">3 persons</option> <option value="4">4 persons</option> <option value="4">5 persons</option> <option value="4">6 persons</option> <option value="4">7 persons</option> <option value="4">8 persons</option> <option value="4">9 persons</option> <option value="4">10 persons</option> </select> </label> </div> <div class="p-4"> <div className="input-group pb-4" hidden={!loggedIn}> <input placeholder="contract name" onChange={onInputChange} /> </div> <div className="input-group pb-4" hidden={!loggedIn}> <input placeholder="date" onChange={onInputChange} /> </div> <div className="input-group pb-4" hidden={!loggedIn}> <input placeholder="contract description" onChange={onInputChange} /> </div> <div className="flex justify-center p-2 button-group text-center" hidden={!loggedIn} ></div> </div> <p class="text-center py-2" hidden={loggedIn}> Login to Sign the contract </p> </div> <div className=""> <Button className="p-2"> <a href="#" style={{ backgroundColor: "#0095b6", color: "#FFF", height: 40, display: "flex", justifyContent: "center", alignItems: "center", paddingInline: 24, border: "2px solid black", }} > Publish </a> </Button> <Button className="p-2"> <a href="#" style={{ backgroundColor: "#f7a3b0", color: "#FFF", height: 40, display: "flex", justifyContent: "center", alignItems: "center", paddingInline: 24, border: "2px solid black", }} > Cancel </a> </Button> </div> </div> </ProjectContainer> ); return <div>{Main}</div>;