rename button.styled to .button-action so it can also be used for links

This commit is contained in:
Bruno Windels 2020-10-14 10:33:48 +02:00
parent 5fe479e8a9
commit 7e477b3c8d
3 changed files with 18 additions and 11 deletions

View file

@ -71,7 +71,7 @@ limitations under the License.
margin-right: 0px; margin-right: 0px;
} }
.button-row button { .button-row .button-action {
margin: 10px 0; margin: 10px 0;
flex: 1 0 auto; flex: 1 0 auto;
} }
@ -92,32 +92,39 @@ limitations under the License.
display: block; display: block;
} }
button.styled.secondary { a.button-action {
text-decoration: none;
text-align: center;
display: block;
}
.button-action.secondary {
color: #03B381; color: #03B381;
} }
button.styled.primary { .button-action.primary {
background-color: #03B381; background-color: #03B381;
border-radius: 8px; border-radius: 8px;
color: white; color: white;
} }
button.styled.primary.destructive { .button-action.primary.destructive {
background-color: #FF4B55; background-color: #FF4B55;
} }
button.styled.secondary.destructive { .button-action.secondary.destructive {
color: #FF4B55; color: #FF4B55;
} }
button.styled { .button-action {
border: none; border: none;
padding: 10px; padding: 10px;
background: none; background: none;
font-weight: 500; font-weight: 500;
} }
button.utility { .button-utility {
cursor: pointer;
width: 32px; width: 32px;
height: 32px; height: 32px;
background-position: center; background-position: center;

View file

@ -52,11 +52,11 @@ export class LoginView extends TemplateView {
t.mapView(vm => vm.loadViewModel, loadViewModel => loadViewModel ? new SessionLoadStatusView(loadViewModel) : null), t.mapView(vm => vm.loadViewModel, loadViewModel => loadViewModel ? new SessionLoadStatusView(loadViewModel) : null),
t.div({className: "button-row"}, [ t.div({className: "button-row"}, [
t.a({ t.a({
className: "button styled secondary", className: "button-action secondary",
href: vm.cancelUrl href: vm.cancelUrl
}, [vm.i18n`Go Back`]), }, [vm.i18n`Go Back`]),
t.button({ t.button({
className: "styled primary", className: "button-action primary",
onClick: () => vm.login(username.value, password.value, homeserver.value), onClick: () => vm.login(username.value, password.value, homeserver.value),
disabled disabled
}, vm.i18n`Log In`), }, vm.i18n`Log In`),

View file

@ -110,11 +110,11 @@ export class SessionPickerView extends TemplateView {
t.view(sessionList), t.view(sessionList),
t.div({className: "button-row"}, [ t.div({className: "button-row"}, [
t.button({ t.button({
className: "styled secondary", className: "button-action secondary",
onClick: async () => vm.import(await selectFileAsText("application/json")) onClick: async () => vm.import(await selectFileAsText("application/json"))
}, vm.i18n`Import a session`), }, vm.i18n`Import a session`),
t.a({ t.a({
className: "button styled primary", className: "button-action primary",
href: vm.cancelUrl href: vm.cancelUrl
}, vm.i18n`Sign In`) }, vm.i18n`Sign In`)
]), ]),