tlsnotary/proof_viz
1
0
Fork 0
mirror of https://github.com/tlsnotary/proof_viz.git synced 2026-01-08 03:53:51 -05:00
Code Issues Packages Projects Releases Wiki Activity

Added tailwindcss + use yew-icons instead of (online) font-awesome

Browse Source
This commit is contained in:
Hendrik Eeckhaut
2023-10-12 14:10:42 +02:00
parent 7e315842c5
commit f70ffe5cb0
5 changed files with 30 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
Cargo.toml
View File

@@ -18,6 +18,12 @@ elliptic-curve = { version = "0.13.5", features = ["pkcs8"] }
webpki-roots = "0.25.2"
wasm-logger = "0.2.0"
web-time = "0.2"
yew_icons = { version = "0.7.3", features = [
# https://finnbear.github.io/yew_icons/
"FontAwesomeSolidUpload",
"BootstrapCloudUploadFill",
] }
# tlsn-core = { git = "https://github.com/tlsnotary/tlsn", branch = "dev" }
[dependencies.tlsn-core]

5
index.html
View File

@@ -3,11 +3,10 @@
<head>
<meta charset="utf-8" />
<title>Yew • File Upload</title>
<title>TLSNotary • Proof visualizer</title>
<link data-trunk rel="rust" />
<link data-trunk rel="css" href="./styles.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
<link data-trunk rel="tailwind-css" href="./styles.css" />
</head>
<body></body>

8
src/main.rs
View File

@@ -9,6 +9,7 @@ use web_time::Duration;
use web_sys::{DragEvent, Event, FileList, HtmlInputElement};
use yew::html::TargetCast;
use yew::{html, Callback, Component, Context, Html};
use yew_icons::{Icon, IconId};
use tlsn_core::proof::{SessionProof, TlsProof};
use tlsn_core::NotarizedSession;
@@ -80,7 +81,7 @@ impl Component for App {
fn view(&self, ctx: &Context<Self>) -> Html {
html! {
<div id="wrapper">
<p id="title">{ "Upload Your TLSNotary Proof" }</p>
<p id="title" class="text-3xl font-bold">{ "Upload Your TLSNotary Proof" }</p>
<label for="file-upload">
<div
id="drop-container"
@@ -96,8 +97,9 @@ impl Component for App {
event.prevent_default();
})}
>
<i class="fa fa-cloud-upload"></i>
<p>{"Drop your proof.json file here or click to select"}</p>
<Icon icon_id={IconId::FontAwesomeSolidUpload} width={"3em".to_owned()} height={"3em".to_owned()} />
// <Icon icon_id={IconId::BootstrapCloudUploadFill} width={"3em".to_owned()} height={"3em".to_owned()} />
<p>{"Drop your proof.json file here or click to select"}</p>
</div>
</label>
<input

6
styles.css
View File

@@ -1,3 +1,7 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
* {
box-sizing: border-box;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
@@ -75,4 +79,4 @@ input#file-upload {
display: flex;
flex-direction: column;
justify-content: center;
}
}

12
tailwind.config.js Normal file
View File

@@ -0,0 +1,12 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{html,rs}",
"./index.html"
],
theme: {
extend: {},
},
plugins: [],
}