Removed scss and converted to tailwind
This commit is contained in:
sam-keen
parent
7e3e098ae4
commit
6b5fc8ebeb
@ -1,76 +0,0 @@
|
||||
@import './styles/colors';
|
||||
@import './styles/fonts';
|
||||
|
||||
html,
|
||||
body,
|
||||
#root {
|
||||
background-color: $black;
|
||||
color: $white;
|
||||
font-family: $font-main;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.app {
|
||||
max-width: 1300px;
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
grid-template-rows: 1fr min-content;
|
||||
min-height: 100%;
|
||||
|
||||
@media (min-width: 960px) {
|
||||
border-left: 1px solid $white;
|
||||
border-right: 1px solid $white;
|
||||
}
|
||||
}
|
||||
|
||||
.template-sidebar {
|
||||
border-bottom: 1px solid $white;
|
||||
display: grid;
|
||||
grid-template-rows: auto minmax(700px, 1fr);
|
||||
grid-template-columns: 300px minmax(auto, 1fr);
|
||||
|
||||
nav {
|
||||
border-right: 1px solid $white;
|
||||
padding: 20px;
|
||||
grid-column-start: 1;
|
||||
grid-column-end: 1;
|
||||
grid-row-start: 2;
|
||||
grid-row-end: 3;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
header {
|
||||
border-bottom: 1px solid $white;
|
||||
grid-column-start: 1;
|
||||
grid-column-end: 3;
|
||||
grid-row-start: 1;
|
||||
grid-row-end: 2;
|
||||
|
||||
h1 {
|
||||
font-family: $font-alpa-lyrae;
|
||||
font-feature-settings: 'calt';
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 20px;
|
||||
grid-column-start: 2;
|
||||
grid-column-end: 2;
|
||||
grid-row-start: 2;
|
||||
grid-row-end: 3;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
footer {
|
||||
border-top: 1px solid $white;
|
||||
padding: 20px;
|
||||
grid-column-start: 1;
|
||||
grid-column-end: 3;
|
||||
grid-row-start: 3;
|
||||
grid-row-end: 4;
|
||||
}
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
/* Your styles goes here. */
|
||||
@ -1,7 +1,4 @@
|
||||
import './App.scss';
|
||||
|
||||
import { ApolloProvider } from '@apollo/client';
|
||||
|
||||
import { createClient } from './lib/apollo-client';
|
||||
import { Nav } from './components/nav';
|
||||
import { Header } from './components/header';
|
||||
@ -18,8 +15,8 @@ function App() {
|
||||
return (
|
||||
<TendermintWebsocketProvider>
|
||||
<ApolloProvider client={client}>
|
||||
<div className="app">
|
||||
<div className="template-sidebar">
|
||||
<div className="antialiased m-0 min-h-[100vh] max-w-[1300px] grid grid-rows-[1fr_min-content] bg-black text-white border-white lg:border-l-1 lg:border-r-1">
|
||||
<div className="grid grid-rows-[auto_minmax(700px,_1fr)] grid-cols-[300px_minmax(auto,_1fr)] border-b-1">
|
||||
<Nav />
|
||||
<Header />
|
||||
<Main />
|
||||
|
||||
@ -2,8 +2,11 @@ import { Search } from '../search';
|
||||
|
||||
export const Header = () => {
|
||||
return (
|
||||
<header className="flex px-16 pt-16 pb-8">
|
||||
<h1 className="text-h3" data-testid="explorer-header">
|
||||
<header className="flex px-16 pt-16 pb-8 border-b-1 col-start-1 col-end-3 row-start-1 row-end-2">
|
||||
<h1
|
||||
className="text-h3 font-alpha uppercase contextual-alternates"
|
||||
data-testid="explorer-header"
|
||||
>
|
||||
Vega Explorer
|
||||
</h1>
|
||||
<Search />
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import { AppRouter } from "../../routes";
|
||||
import { AppRouter } from '../../routes';
|
||||
|
||||
export const Main = () => {
|
||||
return (
|
||||
<main>
|
||||
<main className="p-20 col-start-2 col-end-2 row-start-2 row-end-3 overflow-hidden">
|
||||
<AppRouter />
|
||||
</main>
|
||||
);
|
||||
|
||||
@ -3,7 +3,7 @@ import routerConfig from '../../routes/router-config';
|
||||
|
||||
export const Nav = () => {
|
||||
return (
|
||||
<nav>
|
||||
<nav className="border-r-1 p-20 col-start-1 col-end-1 row-start-2 row-end-3 overflow-hidden">
|
||||
{routerConfig.map((r) => (
|
||||
<NavLink
|
||||
key={r.name}
|
||||
|
||||
@ -1,99 +0,0 @@
|
||||
/* === BLUEPRINT COLOR OVERRIDES === */
|
||||
$black: #000;
|
||||
$white: #fff;
|
||||
|
||||
$dark-gray1: #1f1f1f;
|
||||
$dark-gray2: #2a2a2a;
|
||||
$dark-gray3: #363636;
|
||||
$dark-gray4: #3f3f3f;
|
||||
$dark-gray5: #494949;
|
||||
|
||||
$gray1: #6e6e6e;
|
||||
$gray2: #848484;
|
||||
$gray3: #999;
|
||||
$gray4: #b5b5b5;
|
||||
$gray5: #cbcbcb;
|
||||
|
||||
$light-gray1: #d7d7d7;
|
||||
$light-gray2: #e0e0e0;
|
||||
$light-gray3: #e7e7e7;
|
||||
$light-gray4: #f0f0f0;
|
||||
$light-gray5: #f8f8f8;
|
||||
|
||||
/* === VEGA COLORS === */
|
||||
|
||||
/*
|
||||
Note: We follow blueprints color naming scheme. https://blueprintjs.com/docs/#core/colors EG:
|
||||
$color1 = Darkest
|
||||
$color2
|
||||
$color3 = Base color
|
||||
$color4
|
||||
$color5 = Lightest
|
||||
*/
|
||||
$vega-pink: #ff2d5e;
|
||||
$vega-green: #00f780;
|
||||
|
||||
$vega-green3: #26ff8a;
|
||||
$vega-red3: #ff261a;
|
||||
$vega-blue3: #48aff0;
|
||||
$vega-yellow3: #daff0d;
|
||||
$vega-orange3: #ff7a1a;
|
||||
$vega-yellow4: #edff22;
|
||||
|
||||
$vega-red1: darken($vega-red3, 38%);
|
||||
$vega-green1: darken($vega-green3, 38%);
|
||||
$vega-yellow1: darken($vega-yellow3, 38%);
|
||||
$vega-orange1: darken($vega-orange3, 38%);
|
||||
|
||||
/* === TEXT COLORS === */
|
||||
$text-color: #c7c7c7;
|
||||
$text-color-inverse: #1a1821;
|
||||
$text-color-deemphasise: #8a9ba8;
|
||||
$text-color-emphasise: #f5f8fa;
|
||||
$text-color-error: $vega-red3;
|
||||
|
||||
/* === BUY/SELL BUTTONS === */
|
||||
$button-sell-hover: #893939;
|
||||
$button-sell-active: #ff5e5e;
|
||||
$button-buy-hover: #0a4023;
|
||||
$button-buy-active: #00ffb2;
|
||||
|
||||
/* === MISC BLUEPRINT COLOR OVERRIDES === */
|
||||
$pt-intent-danger: $vega-red3;
|
||||
|
||||
$input-background: #3f3f3f;
|
||||
|
||||
// App background
|
||||
$pt-dark-app-background-color: $dark-gray2;
|
||||
|
||||
// Card
|
||||
$dark-card-background-color: $dark-gray2;
|
||||
|
||||
// Menu
|
||||
$dark-menu-background-color: $dark-gray2;
|
||||
|
||||
// Navbar
|
||||
$dark-navbar-background-color: $black;
|
||||
|
||||
// Popover
|
||||
$dark-popover-background-color: $dark-gray2;
|
||||
|
||||
//overlay-backdrop
|
||||
.bp3-overlay-backdrop {
|
||||
background-color: rgba(73, 73, 73, 0.7);
|
||||
}
|
||||
|
||||
// Text helpers
|
||||
.text-deemphasise {
|
||||
color: $text-color-deemphasise;
|
||||
}
|
||||
|
||||
.text-error {
|
||||
color: $text-color-error;
|
||||
}
|
||||
|
||||
// hover row
|
||||
$row-hover-background-color: $dark-gray5;
|
||||
|
||||
// backdrop
|
||||
$backdrop-black: rgba(0, 0, 0, 0.6);
|
||||
@ -1,16 +0,0 @@
|
||||
$font-main: 'Helvetica neue', 'Helvetica', arial, sans-serif;
|
||||
$font-mono: 'Roboto Mono', monospace;
|
||||
$font-alpa-lyrae: AlphaLyrae, 'Helvetica neue', 'Helvetica', arial, sans-serif;
|
||||
|
||||
.font-main {
|
||||
font-family: $font-main;
|
||||
}
|
||||
|
||||
.font-mono {
|
||||
font-family: $font-mono;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: AlphaLyrae;
|
||||
src: url(./styles/AlphaLyrae-Medium.woff);
|
||||
}
|
||||
@ -1,4 +1,15 @@
|
||||
/* You can add global styles to this file, and also import other style files */
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
|
||||
@font-face {
|
||||
font-family: 'AlphaLyrae-Medium';
|
||||
src: url('./AlphaLyrae-Medium.woff');
|
||||
}
|
||||
|
||||
/*No Tailwind class for this*/
|
||||
.contextual-alternates {
|
||||
font-feature-settings: 'calt';
|
||||
}
|
||||
|
||||
@tailwind utilities;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user