mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-07-17 03:51:13 +02:00
Code Issues Releases Wiki Activity

turn some links into btns

Browse Source
This commit is contained in:
Kushagra Gour
2018-07-03 09:44:51 +05:30
parent 31a6f299e7
commit ed670db395
3 changed files with 18 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/MainHeader.jsx
View File

@@ -18,7 +18,7 @@ export function MainHeader(props) {
<div class="main-header__btn-wrap flex flex-v-center">
<button
id="runBtn"
class="hide flex flex-v-center hint--rounded hint--bottom-left"
class="hide btn--dark flex flex-v-center hint--rounded hint--bottom-left"
aria-label="Run preview (Ctrl/⌘ + Shift + 5)"
onClick={props.runBtnClickHandler}
>
@@ -31,7 +31,7 @@ export function MainHeader(props) {
onClick={props.addLibraryBtnHandler}
data-event-category="ui"
data-event-action="addLibraryButtonClick"
class="flex-v-center hint--rounded hint--bottom-left"
class="btn--dark flex-v-center hint--rounded hint--bottom-left"
aria-label="Add a JS/CSS library"
>
Add library{' '}
@@ -45,7 +45,7 @@ export function MainHeader(props) {
</Button>
<button
class="flex flex-v-center hint--rounded hint--bottom-left"
class="btn--dark flex flex-v-center hint--rounded hint--bottom-left"
aria-label="Start a new creation"
onClick={props.newBtnHandler}
>
@@ -58,7 +58,7 @@ export function MainHeader(props) {
</button>
<button
id="saveBtn"
class={`flex flex-v-center hint--rounded hint--bottom-left ${
class={`btn--dark flex flex-v-center hint--rounded hint--bottom-left ${
props.isSaving ? 'is-loading' : ''
} ${props.unsavedEditCount ? 'is-marked' : 0}`}
aria-label="Save current creation (Ctrl/⌘ + S)"
@@ -77,7 +77,7 @@ export function MainHeader(props) {
</button>
<button
id="openItemsBtn"
class={`flex flex-v-center hint--rounded hint--bottom-left ${
class={`btn--dark flex flex-v-center hint--rounded hint--bottom-left ${
props.isFetchingItems ? 'is-loading' : ''
}`}
aria-label="Open a saved creation (Ctrl/⌘ + O)"
@@ -98,7 +98,7 @@ export function MainHeader(props) {
onClick={props.loginBtnHandler}
data-event-category="ui"
data-event-action="loginButtonClick"
class="hide-on-login flex flex-v-center hint--rounded hint--bottom-left"
class="hide-on-login btn--dark flex flex-v-center hint--rounded hint--bottom-left"
aria-label="Login/Signup"
>
Login/Signup
@@ -108,7 +108,7 @@ export function MainHeader(props) {
data-event-category="ui"
data-event-action="headerAvatarClick"
aria-label="See profile or Logout"
class="hide-on-logout hint--rounded hint--bottom-left"
class="hide-on-logout btn--dark hint--rounded hint--bottom-left"
>
<img
id="headerAvatarImg"

16
src/components/SavedItemPane.jsx
View File

@@ -201,23 +201,21 @@ export default class SavedItemPane extends Component {
<div class="flex flex-v-center" style="justify-content: space-between;">
<h3>My Library ({this.items.length})</h3>
<div class="main-header__btn-wrap">
<a
<div>
<button
onClick={this.props.exportBtnClickHandler}
href=""
class="btn btn-icon hint--bottom-left hint--rounded hint--medium"
class="btn--dark hint--bottom-left hint--rounded hint--medium"
aria-label="Export all your creations into a single importable file."
>
Export
</a>
<a
</button>
<button
onClick={this.importBtnClickHandler.bind(this)}
href=""
class="btn btn-icon hint--bottom-left hint--rounded hint--medium"
class="btn--dark hint--bottom-left hint--rounded hint--medium"
aria-label="Only the file that you export through the 'Export' button can be imported."
>
Import
</a>
</button>
</div>
</div>
<input

8
src/style.css
View File

@@ -244,7 +244,7 @@ textarea {
box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.25);
}
.btn:focus {
[class*='btn']:focus {
outline-width: 4px;
outline-color: #b76b29;
outline-style: solid;
@@ -584,6 +584,7 @@ body > #demo-frame {
border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.btn--dark,
.main-header__btn-wrap > button {
box-sizing: content-box;
font-size: 0.8em;
@@ -607,7 +608,7 @@ body > #demo-frame {
text-transform: uppercase;
}
.main-header__btn-wrap > button > svg {
.btn--dark > svg {
fill: #9297b3;
margin-right: 4px;
}
@@ -616,7 +617,7 @@ body > #demo-frame {
fill: crimson;
}
.main-header__btn-wrap > button:hover {
.btn--dark:hover {
border-color: rgba(146, 151, 179, 0.5);
}
@@ -1358,7 +1359,6 @@ body > #demo-frame {
background: rgba(0, 0, 0, 0.3);
color: white;
border: 0;
outline: 0;
}
.console:not(.is-minimized) .code-wrap__header {