Skip to content

Commit

Permalink
Raj (#23)
Browse files Browse the repository at this point in the history
* adds styling changes for brand consistency

* reverts some prettier snafus

Co-authored-by: Raj Gokal <raj@solana.com>
  • Loading branch information
2 people authored and mvines committed Jun 12, 2020
1 parent 478f025 commit 82fa2ca
Show file tree
Hide file tree
Showing 137 changed files with 1,769 additions and 39 deletions.
8 changes: 6 additions & 2 deletions explorer/public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Solana cluster explorer"
content="Look up transactions and accounts on the various Solana clusters"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
Expand All @@ -24,7 +24,11 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>Solana Explorer</title>
<title>Explorer | Solana</title>
<link
href="https://fonts.googleapis.com/css?family=Oswald|Rubik|Exo+2:300,400,700|Saira|Saira+Condensed|Saira+Extra+Condensed|Saira+Semi+Condensed&display=swap"
rel="stylesheet"
/>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
Expand Down
4 changes: 2 additions & 2 deletions explorer/src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { TransactionsProvider } from "./providers/transactions";
import NetworkStatusButton from "./components/NetworkStatusButton";
import TransactionsCard from "./components/TransactionsCard";
import NetworkModal from "./components/NetworkModal";
import Logo from "./img/logos-solana/light-explorer-logo.svg";

function App() {
const [showModal, setShowModal] = React.useState(false);
Expand All @@ -17,8 +18,7 @@ function App() {
<div className="header-body">
<div className="row align-items-end">
<div className="col">
<h6 className="header-pretitle">Beta</h6>
<h1 className="header-title">Solana Explorer</h1>
<img src={Logo} width="250" alt="Solana Explorer" />
</div>
<div className="col-auto">
<NetworkStatusButton onClick={() => setShowModal(true)} />
Expand Down
20 changes: 4 additions & 16 deletions explorer/src/components/NetworkModal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -29,19 +29,7 @@ function NetworkModal({ show, onClose }: Props) {
&times;
</span>

<h2 className="text-center mb-2 mt-4">Explorer Settings</h2>

<p className="text-center mb-4">
Preferences will not be saved (yet).
</p>

<hr className="mb-4" />

<h4 className="mb-1">Cluster</h4>

<p className="small text-muted mb-3">
Connect to your preferred cluster.
</p>
<h2 className="text-center mb-4 mt-4">Choose a Cluster</h2>

<NetworkToggle />
</div>
Expand Down Expand Up @@ -82,7 +70,7 @@ function CustomNetworkInput({ activeSuffix, active }: InputProps) {
/>
<div className="input-group-prepend">
<div className={`input-group-text pr-0 ${customClass("border")}`}>
<span className={customClass("text") || "text-dark"}>Custom:</span>
<span className={customClass("text") || "text-dark"}>Custom</span>
</div>
</div>
</div>
Expand Down Expand Up @@ -135,8 +123,8 @@ function NetworkToggle() {
checked={active}
onChange={() => updateNetwork(dispatch, net, customUrl)}
/>
{`${networkName(net)}: `}
<span className="text-muted">{networkUrl(net, customUrl)}</span>
{`${networkName(net)}`}
<h6 className="text-muted">{networkUrl(net, customUrl)}</h6>
</label>
);
})}
Expand Down
3 changes: 1 addition & 2 deletions explorer/src/components/NetworkStatusButton.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,7 @@ function NetworkStatusButton({ onClick }: { onClick: () => void }) {

function Button() {
const { status, network, name, customUrl } = useNetwork();
const statusName =
network !== Network.Custom ? `${name} Cluster` : `${customUrl}`;
const statusName = network !== Network.Custom ? `${name}` : `${customUrl}`;

switch (status) {
case NetworkStatus.Connected:
Expand Down
15 changes: 3 additions & 12 deletions explorer/src/components/TransactionsCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -51,9 +51,6 @@ function TransactionsCard() {
<table className="table table-sm table-nowrap card-table">
<thead>
<tr>
<th className="text-muted">
<span className="fe fe-hash"></span>
</th>
<th className="text-muted">Status</th>
<th className="text-muted">Signature</th>
<th className="text-muted">Confirmations</th>
Expand All @@ -63,13 +60,7 @@ function TransactionsCard() {
<tbody className="list">
<tr>
<td>
<span className="badge badge-soft-dark badge-pill">
{idCounter + 1}
</span>
</td>

<td>
<span className={`badge badge-soft-primary`}>New</span>
<span className={`badge badge-primary`}>New</span>
</td>
<td>
<input
Expand All @@ -83,7 +74,7 @@ function TransactionsCard() {
className={`form-control text-signature text-monospace ${
error ? "is-invalid" : ""
}`}
placeholder="abcd..."
placeholder="input transaction signature"
/>
{error ? <div className="invalid-feedback">{error}</div> : null}
</td>
Expand All @@ -103,7 +94,7 @@ const renderHeader = () => {
<div className="card-header">
<div className="row align-items-center">
<div className="col">
<h4 className="card-header-title">Transactions</h4>
<h4 className="card-header-title">Look Up Transaction(s)</h4>
</div>
</div>
</div>
Expand Down
213 changes: 213 additions & 0 deletions explorer/src/components/header.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,213 @@
import React, { useState } from "react";
import { Link } from "gatsby-plugin-intl";
import { Transition } from "react-transition-group";
import { Navbar, Dropdown } from "react-bootstrap";

import SolanaDropdownMenu from "./dropdown-menu";
import SolanaDropdownToggle from "./dropdown-toggle";
import SolanaLogo from "../img/logos-solana/dark-horizontal-combined-green.png";
import Fire from "../img/icons/Fire.inline.svg";
import Bulb from "../img/icons/Bulb.inline.svg";
import Chat from "../img/icons/Chat.inline.svg";
import Clipboard from "../img/icons/Clipboard.inline.svg";

const Header = () => {
const [showDocumentation, updateShowDocumentation] = useState(false);

return (
<Navbar expand="lg" fixed="top" className="navbar-dark bg-black">
<div className="container-fluid">
<Link to="/">
<img src={SolanaLogo} className="navbar-brand-img bg-black p-1 btn" />
</Link>

<Navbar.Toggle aria-controls="navbarCollapse" />
<Navbar.Collapse id="navbarCollapse">
<Navbar.Toggle aria-controls="navbarCollapse">
<i className="fe fe-x"></i>
</Navbar.Toggle>

<ul className="navbar-nav ml-auto">
<Transition in={showDocumentation} timeout={1}>
{state => {
const show = state == "entered" || state == "exiting";
const update = updateShowDocumentation;
return (
<Dropdown
as="li"
className={`nav-item hovered bg-black`}
onMouseEnter={() => update(true)}
onMouseLeave={() => update(false)}
onToggle={() => update(!show)}
show={show}
>
<Dropdown.Toggle
as={SolanaDropdownToggle}
to="/developers"
id="navbarDocumentation"
expanded={show}
>
Developers
</Dropdown.Toggle>

<Dropdown.Menu
as={SolanaDropdownMenu}
labeledBy="navbarDocumentation"
>
<a
className="list-group-item bg-black"
href="https://docs.solana.com"
target="_blank"
rel="noopener noreferrer"
>
{/* <!-- Icon --> */}
<div className="icon icon-sm text-success">
<Clipboard />
</div>

{/* <!-- Content --> */}
<div className="ml-4">
{/* <!-- Heading --> */}
<h6 className="font-weight-bold text-uppercase text-success mb-0">
Documentation
</h6>

{/* <!-- Text --> */}
<p className="font-size-sm text-gray-700 mb-0">
Jump right in
</p>
</div>

{/* <!-- Badge --> */}
<span className="badge badge-pill badge-success-soft ml-auto">
1.0.0
</span>
</a>

<Link
className="list-group-item bg-black"
to="/developers"
>
{/* <!-- Icon --> */}
<div className="icon icon-sm text-success">
<Bulb />
</div>

{/* <!-- Content --> */}
<div className="ml-4">
{/* <!-- Heading --> */}
<h6 className="font-weight-bold text-uppercase text-success mb-0">
Learn More
</h6>

{/* <!-- Text --> */}
<p className="font-size-sm text-gray-700 mb-0">
&ldquo;Why Solana?&rdquo; Come find out.
</p>
</div>
</Link>

<Link
className="list-group-item bg-black"
to="/accelerator"
>
{/* <!-- Icon --> */}
<div className="icon icon-sm text-success">
<Fire />
</div>

{/* <!-- Content --> */}
<div className="ml-4">
{/* <!-- Heading --> */}
<h6 className="font-weight-bold text-uppercase text-success mb-0">
Accelerator
</h6>

{/* <!-- Text --> */}
<p className="font-size-sm text-gray-700 mb-0">
Apply for funding
</p>
</div>
</Link>

<a
className="list-group-item bg-black"
href="https://discordapp.com/invite/pquxPsq"
target="_blank"
rel="noopener noreferrer"
>
{/* <!-- Icon --> */}
<div className="icon icon-sm text-success">
<Chat />
</div>

{/* <!-- Content --> */}
<div className="ml-4">
{/* <!-- Heading --> */}
<h6 className="font-weight-bold text-uppercase text-success mb-0">
Chat
</h6>

{/* <!-- Text --> */}
<p className="font-size-sm text-gray-700 mb-0">
Live support from Solana team
</p>
</div>
</a>
</Dropdown.Menu>
</Dropdown>
);
}}
</Transition>

<li className="nav-item">
<Link className="nav-link" activeClassName="active" to="/tokens">
Tokens
</Link>
</li>

<li className="nav-item">
<Link
className="nav-link"
activeClassName="active"
to="/validators"
>
Validators
</Link>
</li>

<li className="nav-item">
<Link
className="nav-link"
activeClassName="active"
to="/community"
>
Community
</Link>
</li>

<li className="nav-item">
<Link className="nav-link" activeClassName="active" to="/about">
About
</Link>
</li>
</ul>

{/* <!-- Button --> */}
<div id="header-right-button" className="ml-auto">
<a
className="navbar-btn btn btn-sm btn-outline-warning lift"
href="https://discordapp.com/invite/pquxPsq"
target="_blank"
rel="noopener noreferrer"
>
Chat<i className="fe fe-arrow-right ml-3"></i>
</a>
</div>
</Navbar.Collapse>
</div>
</Navbar>
);
};

export default Header;
Binary file added explorer/src/img/logos-solana/Slice 1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 82fa2ca

Please sign in to comment.