diff --git a/src/js/components/SpotifyAuthenticationFrame.js b/src/js/components/SpotifyAuthenticationFrame.js index d7c07a50..85f692c8 100755 --- a/src/js/components/SpotifyAuthenticationFrame.js +++ b/src/js/components/SpotifyAuthenticationFrame.js @@ -66,20 +66,18 @@ class SpotifyAuthenticationFrame extends React.Component{ renderAuthorizeButton(){ if( this.state.authorizing ){ return ( - - ); + ) }else if( this.props.authorized ){ return ( - ); + ) }else{ return ( - ); + ) } } @@ -88,9 +86,7 @@ class SpotifyAuthenticationFrame extends React.Component{ if (this.props.refreshing_token){ return ( - ); diff --git a/src/scss/global/_forms.scss b/src/scss/global/_forms.scss index 4010cfdf..028771a3 100755 --- a/src/scss/global/_forms.scss +++ b/src/scss/global/_forms.scss @@ -1,4 +1,12 @@ +:focus { + outline: none; +} + +::-moz-focus-inner { + border: 0; +} + button, textarea, input[type="text"], @@ -159,6 +167,36 @@ input[type="submit"] { } } + &.working { + position: relative; + + &:after { + position: absolute; + display: block; + content: ''; + background: $mid_grey; + opacity: 1; + animation: slideloader 1s infinite; + bottom: 0; + left: 0; + right: 0; + height: 4px; + z-index: 1; + } + + &.destructive:after { + background: $red; + } + + &.primary:after { + background: $turquoise; + } + + &.alternative:after { + background: $blue; + } + } + &.context-menu-trigger { border-color: transparent; padding: 6px;