Revert "promote bar"

This reverts commit f969597853.
This commit is contained in:
mertJF
2020-12-29 22:15:54 +03:00
parent f969597853
commit 1fd7a75368
2 changed files with 3 additions and 14 deletions

View File

@@ -94,7 +94,6 @@ class App extends Component {
copied: false, copied: false,
sidebar: true, sidebar: true,
codeView: false, codeView: false,
showNotification: false,
currentKeyCode: null, currentKeyCode: null,
view: 'desktop', view: 'desktop',
theme: 'indigo', theme: 'indigo',
@@ -120,9 +119,6 @@ class App extends Component {
componentDidMount() { componentDidMount() {
document.addEventListener('keydown', this.keyboardNavigation); document.addEventListener('keydown', this.keyboardNavigation);
setTimeout(() => {
this.setState({ showNotification: true })
}, 1000);
} }
hideSidebar() { hideSidebar() {
@@ -319,20 +315,13 @@ class App extends Component {
} }
render() { render() {
const { darkMode, theme, blockName, blockType, sidebar, view, copied, currentKeyCode, showNotification } = this.state; const { darkMode, theme, blockName, blockType, sidebar, view, copied, currentKeyCode } = this.state;
return ( return (
<div className={`app${darkMode ? ' dark-mode' : ''}${sidebar ? ' has-sidebar' : ''} ${theme} ${view}`}> <div className={`app${darkMode ? ' dark-mode' : ''}${sidebar ? ' has-sidebar' : ''} ${theme} ${view}`}>
<textarea className="copy-textarea" ref={this.textareaRef} /> <textarea className="copy-textarea" ref={this.textareaRef} />
<aside className="sidebar" ref={this.sidebarRef}> <aside className="sidebar" ref={this.sidebarRef}>
{this.listRenderer()} {this.listRenderer()}
</aside> </aside>
<div className={`md:flex hidden lg:text-sm text-xs bg-${theme}-600 text-white text-center ${showNotification ? 'h-14' : 'h-0'} overflow-hidden items-center justify-center relative`} style={{ paddingLeft: 160, transition: 'height .45s' }}>
<p>Would you like to work with the <span className="font-medium">Tailblocks Team</span> on your new Tailwind project?</p>
<a href="mailto:tailblocksteam@gmail.com" className="text-white border-b border-white font-medium ml-2 px-0.5">Email us</a>
<button className={`w-8 h-8 inline-flex items-center justify-center bg-${theme}-700 rounded-full absolute right-4 top-3 z-index-20`} onClick={() => this.setState({ showNotification: false })}>
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" /></svg>
</button>
</div>
<div className="toolbar"> <div className="toolbar">
<button className="opener" onClick={this.toggleSidebar} ref={this.openerRef}>TAILBLOCKS</button> <button className="opener" onClick={this.toggleSidebar} ref={this.openerRef}>TAILBLOCKS</button>
{this.state.codeView && {this.state.codeView &&

View File

@@ -5,7 +5,7 @@
--base-200: #E2E8F0; --base-200: #E2E8F0;
--base-300: #E2E8F0; --base-300: #E2E8F0;
--base-400: #CBD5E0; --base-400: #CBD5E0;
--main-500: #6366f1; --main-500: #667EEA;
--main-400: #7F9CF5; --main-400: #7F9CF5;
--main-200: #c3dafe; --main-200: #c3dafe;
--main-100: #EBF4FF; --main-100: #EBF4FF;
@@ -24,7 +24,7 @@
--base-200: #2d3748; --base-200: #2d3748;
--base-300: #4a5568; --base-300: #4a5568;
--base-400: #4a5568; --base-400: #4a5568;
--main-500: #6366f1; --main-500: #667eea;
--main-200: #4a5568; --main-200: #4a5568;
--main-100: #2d3648; --main-100: #2d3648;
--solid: #111827; --solid: #111827;