Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Combine new styling with new architecture #3

Open
wants to merge 4 commits into
base: new-architecture
Choose a base branch
from
Open

Combine new styling with new architecture #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a2a13d2
feature: demo page styling
AydinTuna Aug 7, 2023
7424970
fix: warning message border fixed
AydinTuna Aug 7, 2023
2183be9
fix: meta tags fixed
AydinTuna Aug 17, 2023
0344d28
feature: added poi backlink
AydinTuna Aug 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 25 additions & 26 deletions app/public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,11 @@
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="color-scheme" content="dark light">
<meta name="color-scheme" content="dark light" />
<meta name="description" content="Proof of Innocence Demo App" />
<meta
name="description"
content="Web site created using create-react-app"
name="keywords"
content="Proof of Innocence, PoI, Proof, Innocence, Proof of Innocence Demo"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
Expand All @@ -28,37 +29,35 @@
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {

theme: {
extend: {
colors: {
gray75: 'rgba(55, 65, 81, 0.75)',
}
gray75: "rgba(55, 65, 81, 0.75)",
},
},
}
}
},
};
</script>
<style>
@-webkit-keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}

@keyframes spinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@-webkit-keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}

@keyframes spinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>

<title>Proof of Innocence</title>
</head>
<body class="p-0 m-0">
Expand Down
6 changes: 4 additions & 2 deletions app/src/components/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
const Header = () => {
return (
<header>
<h1 className="text-3xl font-bold mb-4 mt-6">Proof of Innocence</h1>
<h1 className="text-3xl font-bold mb-8 text-slate-950">
Proof of Innocence
</h1>
</header>
);
};

export default Header;
export default Header;
14 changes: 8 additions & 6 deletions app/src/components/Layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,15 @@
import Header from './Header';
import Footer from './Footer';
import Header from "./Header";
import Footer from "./Footer";

const Layout = ({ children }: {children:any}) => {
const Layout = ({ children }: { children: any }) => {
return (
// Make classname such that content is centered and not full width
// Also make sure that the footer is always at the bottom of the page
<div className='text-center'>
<Header />
<main className='max-w-lg center mx-auto'>{children}</main>
<div className="text-center p-4">
<div className="flex flex-col justify-self align-items rounded-2xl px-4 pb-8 pt-6 mt-[40px] md:mt-[160px] bg-white shadow-xl border border-slate-300 max-w-[700px] mx-auto">
<Header />
<main className="max-w-lg center mx-auto">{children}</main>
</div>
<Footer />
</div>
);
Expand Down
23 changes: 19 additions & 4 deletions app/src/components/Loading.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,24 @@
export default function Loading({progress, loadingMsg}: {progress:any, loadingMsg:string}) {
export default function Loading({
progress,
loadingMsg,
}: {
progress: any;
loadingMsg: string;
}) {
return (
<div className="fixed top-0 left-0 right-0 bottom-0 w-full h-screen z-50 overflow-hidden bg-gray-700 opacity-75 flex flex-col items-center justify-center m-0">
<div className="loader ease-linear rounded-full border-4 border-t-4 border-gray-200 h-12 w-12 mb-4" style={{borderTopColor: "#3498db",WebkitAnimation:"spinner 1.5s linear infinite", animation: "spinner 1.5s linear infinite"}}></div>
<h2 className="text-center text-white text-xl font-semibold">Loading... {progress != 0 && Math.floor(progress) + "%"}</h2>
<div
className="loader ease-linear rounded-full border-4 border-t-4 border-gray-200 h-12 w-12 mb-4"
style={{
borderTopColor: "#3498db",
WebkitAnimation: "spinner 1.5s linear infinite",
animation: "spinner 1.5s linear infinite",
}}
></div>
<h2 className="text-center text-white text-xl font-semibold">
Loading... {progress != 0 && Math.floor(progress) + "%"}
</h2>
<p className="w-1/3 text-center text-white">{loadingMsg}</p>
</div>
);
};
}
41 changes: 26 additions & 15 deletions app/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,34 @@
@import url("https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Red+Hat+Display:wght@300;400;500;600;700&display=swap");

.loader {
border-top-color: #3498db;
-webkit-animation: spinner 1.5s linear infinite;
animation: spinner 1.5s linear infinite;
border-top-color: #3498db;
-webkit-animation: spinner 1.5s linear infinite;
animation: spinner 1.5s linear infinite;
}

body,
html {
font-family: "Red Hat Display", sans-serif;
}

body {
background: #f6fef7;
}

@-webkit-keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}

@keyframes spinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
40 changes: 36 additions & 4 deletions app/src/pages/Home.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,41 @@
const Home = () => {
return (
<div className="text-left ">
<p>Tornado Cash is a popular protocol on Ethereum that allows users to make private transactions by breaking the on-chain link between the recipient and destination addresses. However, there may be instances where a user wants to demonstrate that their use of Tornado Cash is above board and not related to any illicit activity. That’s where Proof of Innocence comes in. Proof of Innocence is a tool that allows users to prove that their withdrawals from Tornado Cash are not from a list of specified deposits, selected by the user themselves. This allows users to clear their name and demonstrate their innocence without revealing their identity.</p>
<p>You can read more about it in <a href="https://medium.com/@chainway_xyz/introducing-proof-of-innocence-built-on-tornado-cash-7336d185cda6" target="_blank">this Medium article</a></p>
<a className="inline-block font-bold px-4 py-2 border rounded my-8" href="/prove">Open Demo</a>
<div className="container px-4 text-slate-950 text-center md:text-left">
<p className="tracking-wider font-light">
Tornado Cash is a popular protocol on Ethereum that allows users to make
private transactions by breaking the on-chain link between the recipient
and destination addresses. However, there may be instances where a user
wants to demonstrate that their use of Tornado Cash is above board and
not related to any illicit activity. That’s where Proof of Innocence
comes in. Proof of Innocence is a tool that allows users to prove that
their withdrawals from Tornado Cash are not from a list of specified
deposits, selected by the user themselves. This allows users to clear
their name and demonstrate their innocence without revealing their
identity.
</p>
<p className="mt-4 font-bold">
You can read more about it in{" "}
<a
href="https://medium.com/@chainway_xyz/introducing-proof-of-innocence-built-on-tornado-cash-7336d185cda6"
target="_blank"
className="underline"
>
this Medium article
</a>
</p>
<a
className="inline-block font-normal border rounded-full shadow-md mb-8 mt-6 px-4 py-2 hover:bg-[#3F7474] hover:text-white hover:shadow-[#3F7474] hover:border-[#3F7474] ease-in-out duration-300"
href="/prove"
>
Open Demo
</a>
<a
className="inline-block font-normal border rounded-full shadow-md mb-8 mt-6 ms-4 px-4 py-2 hover:bg-[#3F7474] hover:text-white hover:shadow-[#3F7474] hover:border-[#3F7474] ease-in-out duration-300"
href="https://proofofinnocence.com/"
target="_blank"
>
Go to Website
</a>
</div>
);
};
Expand Down
Loading