Merge pull request #11 from citydaoproject/responsive-view

Responsive view
citydaoproject · May 13, 2022 · 95acff8 · 95acff8
2 parents 492db52 + 1bee24f
commit 95acff8
Show file tree

Hide file tree

Showing 9 changed files with 133 additions and 31 deletions.
diff --git a/components/Button/Button.tsx b/components/Button/Button.tsx
@@ -1,5 +1,4 @@
 import { FC } from 'react';
-
 interface ButtonProps {
   isEnabled?: boolean;
   onClick: () => void;

diff --git a/components/MintedNftsView/MintedNftsView.tsx b/components/MintedNftsView/MintedNftsView.tsx
@@ -5,7 +5,7 @@ interface MintedNftsViewProps {
   numberOfNfts: number;
 }
 export const MintedNftsView: FC<MintedNftsViewProps> = ({ navigateToHome, numberOfNfts }) => (
-  <div>
+  <div className="view-nfts">
     <a href="#" onClick={navigateToHome}>
       Go Back
     </a>

diff --git a/components/ParcelProperty/ParcelProperty.tsx b/components/ParcelProperty/ParcelProperty.tsx
@@ -3,7 +3,7 @@ import { FC } from 'react';
 export type ParcelPropertyProps = {
   name: string;
   value: string;
-  tooltip: string;
+  tooltip?: string;
   iconPath: string;
 };
 export const ParcelProperty: FC<ParcelPropertyProps> = ({ name, value, tooltip, iconPath }) => (

diff --git a/containers/ParcelProperties/ParcelProperties.tsx b/containers/ParcelProperties/ParcelProperties.tsx
@@ -1,29 +1,17 @@
-import { FC } from "react";
-import {
-  ParcelProperty,
-  ParcelPropertyProps,
-} from "../../components/ParcelProperty";
-import { AGREEMENT_IPFS_URL } from "../../contants";
+import { FC } from 'react';
+import { ParcelProperty, ParcelPropertyProps } from '../../components/ParcelProperty';
+import { AGREEMENT_IPFS_URL } from '../../contants';
 export const ParcelProperties: FC<{
   parcelProperties: ParcelPropertyProps[];
 }> = ({ parcelProperties }) => (
   <div className="properties">
     {parcelProperties.map(({ name, value, tooltip, iconPath }, index) => (
-      <ParcelProperty
-        name={name}
-        key={index}
-        value={value}
-        tooltip={tooltip}
-        iconPath={iconPath}
-      />
+      <ParcelProperty name={name} key={index} value={value} tooltip={tooltip} iconPath={iconPath} />
     ))}
-    <a
-      href={AGREEMENT_IPFS_URL}
-      target="_blank"
-      className="link-external"
-      rel="noreferrer"
-    >
-      VIEW FULL LICENSE
-    </a>
+    <div className="link-external-wrapper">
+      <a href={AGREEMENT_IPFS_URL} target="_blank" className="link-external" rel="noreferrer">
+        VIEW FULL LICENSE
+      </a>
+    </div>
   </div>
 );
diff --git a/package.json b/package.json
@@ -42,6 +42,7 @@
     "husky": "^8.0.1",
     "prettier": "^2.6.2",
     "pretty-quick": "^3.1.3",
+    "sass": "^1.51.0",
     "styled-components": "^5.3.5",
     "typescript": "4.5.2"
   }

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -1,4 +1,4 @@
-import '../styles/globals.css';
+import '../styles/globals.scss';
 import { AppProps } from 'next/app';
 import Head from 'next/head';
 import { AppProvider } from '../context/StateProvider';

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -32,7 +32,7 @@ const Home: NextPage = () => {
     useModal();
   const [numberOfMintedNfts, setNumberOfMintedNfts] = useState<number>(0);
   const [eligibleNftCount, setEligibleNftCount] = useState<number>(0);
-  const [claimButtonText, setClaimButtonText] = useState<string>('sss');
+  const [claimButtonText, setClaimButtonText] = useState<string>('CLAIM NFTS');
   const [isIframeLoaded, setIsIframeLoaded] = useState<boolean>(false);
   const [isEligible, setIsEligible] = useState<boolean>(false);
   const [currentView, setCurrentView] = useState<VIEWS>(VIEWS.INITIAL_VIEW);
@@ -188,7 +188,9 @@ const Home: NextPage = () => {
               </div>
             </div>
             {currentView === VIEWS.INITIAL_VIEW ? (
-              <img src="/citydao-parcel-0-NFT-Art.png" alt="Parcel Zero NFT" style={{ width: '761px' }} />
+              <div className="nft-art-home-wrapper">
+                <img className="nft-art-home" src="/citydao-parcel-0-NFT-Art.png" alt="Parcel Zero NFT" />
+              </div>
             ) : (
               <MintedNftsView numberOfNfts={numberOfMintedNfts} navigateToHome={navigateToHome} />
             )}

diff --git a/styles/globals.css → styles/globals.scss b/styles/globals.css → styles/globals.scss
@@ -39,6 +39,9 @@ main {
 }
 .page-header .logo{
   height: 60px;
+  @media (max-width:1024px) {
+    padding-bottom: 1px;
+  }
 }
 
 .header-content {
@@ -62,6 +65,15 @@ main {
   padding-left: 56px;
   background-image: url("/../citydao-parcel-0-logo.png");
   background-repeat: no-repeat;
+
+  @media (max-width:1024px) {
+    padding-left: 0;
+    background-position-x: center;
+    padding-top: 61px;
+    padding-bottom: 17px;
+    margin-top:12px;
+    text-align: center;
+  }
 }
 .parcel-zero {
   font-size: 18px;
@@ -71,6 +83,11 @@ main {
   font-size:11px;
   color:var(--color-secondary)
 }
+.link-external-wrapper{
+  @media (max-width:1024px) {
+    text-align: center;
+  }
+}
 .link-external {
   background-image: url("/../icons/link_arrow.png");
   background-repeat: no-repeat;
@@ -84,16 +101,37 @@ main {
   display: flex;
   justify-content: space-between;
   margin-bottom: 18px;
+  @media (max-width:1024px) {
+    flex-direction: column;
+  }
 }
+
 .message-box {
   color: var(--color-secondary);
   height: 61px;
   text-align: right;
   padding-top: 7px;
+  @media (max-width:1024px) {
+    text-align: center;
+  }
 }
 .message-box .remaining-time {
   color: var(--color-text);
 }
+.nft-art-home-wrapper{
+  width: 100%;
+  max-width: 761px;
+  @media (max-width:1024px) {
+    width: 90%;
+    margin: 0 auto;
+    display: flex;
+    justify-content: center;
+    margin-bottom: 48px;
+  }
+}
+.nft-art-home {
+ width:inherit
+}
 .address-line-1 {
   font-size: 18px;
   font-weight: bold;
@@ -114,23 +152,41 @@ main {
   margin: 0 auto;
   display: flex;
   justify-content: space-between;
+  @media (max-width:1024px) {
+    flex-direction: column;
+    padding-top: 20px;
+    margin-bottom: 100px;
+  }
 }
+
 .content-left {
-  width: 761px;
+  max-width: 761px;
 }
 
 .content-right {
   width: 234px;
+  @media (max-width:1024px) {
+    width:100%
+  }
 }
 .properties {
   margin-top: 28px;
+  @media (max-width:1024px) {
+    margin-top: 48px;
+  }
 }
 .property{
   display: flex;
   justify-content: space-between;
   margin-bottom: 17px;
   border-bottom: 1px solid var(--color-dark-green);
   padding-bottom: 22px;
+  @media (max-width:1024px) {
+    padding-left: 40px;
+    padding-right: 40px;
+    margin-bottom: 23px;
+    padding-bottom: 16px;
+  }
 }
 .property img{
   align-self: center;
@@ -175,6 +231,12 @@ button {
   background: var(--color-primary);
   transition: background .1s ease-in;
   border: 2px solid transparent;
+  @media (max-width:1024px) {
+   width:81%;
+   margin: 0 auto;
+   display: block;
+  }
+
 }
 button:disabled {
   background: var(--color-disabled);
@@ -295,6 +357,11 @@ button.border-button {
 .step + .step {
   margin-top: 1rem;
 }
+.view-nfts {
+  @media (max-width:1024px) {
+    text-align: center;
+  }
+}
 .mintedNftImagesWrapper {
   margin-left: -16px;
   margin-top: 16px;
@@ -320,6 +387,10 @@ button.border-button {
   width: 338px;
   height: 338px;
   display: inline-block;
+  @media (max-width:1024px) {
+    width: 66%;
+    height: 100%;
+  }
 }
 .terms{
   margin-bottom: 24px;

diff --git a/yarn.lock b/yarn.lock
@@ -1353,7 +1353,7 @@ ansi-styles@^4.0.0, ansi-styles@^4.1.0:
   dependencies:
     color-convert "^2.0.1"
 
-anymatch@~3.1.1:
+anymatch@~3.1.1, anymatch@~3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.2.tgz#c0557c096af32f106198f4f4e2a383537e378716"
   integrity sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==
@@ -1925,6 +1925,21 @@ chokidar@3.5.1:
   optionalDependencies:
     fsevents "~2.3.1"
 
+"chokidar@>=3.0.0 <4.0.0":
+  version "3.5.3"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
+  integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
+  dependencies:
+    anymatch "~3.1.2"
+    braces "~3.0.2"
+    glob-parent "~5.1.2"
+    is-binary-path "~2.1.0"
+    is-glob "~4.0.1"
+    normalize-path "~3.0.0"
+    readdirp "~3.6.0"
+  optionalDependencies:
+    fsevents "~2.3.2"
+
 cipher-base@^1.0.0, cipher-base@^1.0.1, cipher-base@^1.0.3:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/cipher-base/-/cipher-base-1.0.4.tgz#8760e4ecc272f4c363532f926d874aae2c1397de"
@@ -3180,7 +3195,7 @@ fs.realpath@^1.0.0:
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
   integrity sha1-FQStJSMVjKpA20onh8sBQRmU6k8=
 
-fsevents@~2.3.1:
+fsevents@~2.3.1, fsevents@~2.3.2:
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
   integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
@@ -3253,7 +3268,7 @@ getpass@^0.1.1:
   dependencies:
     assert-plus "^1.0.0"
 
-glob-parent@^5.1.2, glob-parent@~5.1.0:
+glob-parent@^5.1.2, glob-parent@~5.1.0, glob-parent@~5.1.2:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
   integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
@@ -3494,6 +3509,11 @@ immediate@^3.2.3:
   resolved "https://registry.yarnpkg.com/immediate/-/immediate-3.3.0.tgz#1aef225517836bcdf7f2a2de2600c79ff0269266"
   integrity sha512-HR7EVodfFUdQCTIeySw+WDRFJlPcLOJbXfwwZ7Oom6tjsvZ3bOkCDJHehQC3nxJrv7+f9XecwazynjU8e4Vw3Q==
 
+immutable@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.0.0.tgz#b86f78de6adef3608395efb269a91462797e2c23"
+  integrity sha512-zIE9hX70qew5qTUjSS7wi1iwj/l7+m54KWU247nhM3v806UdGj1yDndXj+IOYxxtW9zyLI+xqFNZjTuDaLUqFw==
+
 import-fresh@^3.0.0, import-fresh@^3.2.1:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
@@ -4915,6 +4935,13 @@ readdirp@~3.5.0:
   dependencies:
     picomatch "^2.2.1"
 
+readdirp@~3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7"
+  integrity sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==
+  dependencies:
+    picomatch "^2.2.1"
+
 regenerator-runtime@0.13.4:
   version "0.13.4"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.4.tgz#e96bf612a3362d12bb69f7e8f74ffeab25c7ac91"
@@ -5063,6 +5090,15 @@ safe-event-emitter@^1.0.1:
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
 
+sass@^1.51.0:
+  version "1.51.0"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.51.0.tgz#25ea36cf819581fe1fe8329e8c3a4eaaf70d2845"
+  integrity sha512-haGdpTgywJTvHC2b91GSq+clTKGbtkkZmVAb82jZQN/wTy6qs8DdFm2lhEQbEwrY0QDRgSQ3xDurqM977C3noA==
+  dependencies:
+    chokidar ">=3.0.0 <4.0.0"
+    immutable "^4.0.0"
+    source-map-js ">=0.6.2 <2.0.0"
+
 scheduler@^0.19.1:
   version "0.19.1"
   resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.19.1.tgz#4f3e2ed2c1a7d65681f4c854fa8c5a1ccb40f196"
@@ -5207,6 +5243,11 @@ slice-ansi@^4.0.0:
     astral-regex "^2.0.0"
     is-fullwidth-code-point "^3.0.0"
 
+"source-map-js@>=0.6.2 <2.0.0":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
+  integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
+
 source-map@0.7.3:
   version "0.7.3"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"