Skip to content
Snippets Groups Projects
Unverified Commit a64f398e authored by Samuel Couillard's avatar Samuel Couillard Committed by GitHub
Browse files

Improve Rooms, forms UI (#4540)

* Initial commit

* Fix Dropdown inputs

* Change rgb to hex for consistency
parent 93940c8f
Branches
Tags
No related merge requests found
...@@ -120,6 +120,10 @@ input.search-bar { ...@@ -120,6 +120,10 @@ input.search-bar {
@include media-breakpoint-down(sm) { @include media-breakpoint-down(sm) {
min-width: $button-min-width; min-width: $button-min-width;
} }
&:focus {
border-color: #DEE2E6 !important;
}
} }
.icon-circle { .icon-circle {
...@@ -348,8 +352,22 @@ input.search-bar { ...@@ -348,8 +352,22 @@ input.search-bar {
} }
} }
.btn-dropdown {
border: 2px solid gainsboro;
box-shadow: var(--brand-color-light);
&:hover {
border-color: gainsboro !important;
}
&:focus {
box-shadow: 0 0 0 0.25rem var(--brand-color-light);
}
}
input[type='text']:focus { input[type='text']:focus {
border-color: var(--brand-color) !important; border-color: whitesmoke !important;
box-shadow: 0 0 0 2px var(--brand-color-light) !important;
} }
input[type='checkbox'] { input[type='checkbox'] {
...@@ -385,11 +403,8 @@ input[type='checkbox'] { ...@@ -385,11 +403,8 @@ input[type='checkbox'] {
} }
.form-control:focus { .form-control:focus {
box-shadow: none; border-color: whitesmoke !important;
} box-shadow: 0 0 0 2px var(--brand-color-light) !important;
.form-control:focus, .form-control:hover {
border-color: var(--brand-color) !important;
} }
//Logo //Logo
......
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
} }
&:hover { &:hover {
border: 2px solid var(--brand-color-light) !important; box-shadow: 0 0 10px rgba(33,33,33,.2) !important;
} }
.room-icon { .room-icon {
......
...@@ -40,13 +40,13 @@ export default function UpdateUserForm({ user }) { ...@@ -40,13 +40,13 @@ export default function UpdateUserForm({ user }) {
<Form methods={methods} onSubmit={updateUserAPI.mutate}> <Form methods={methods} onSubmit={updateUserAPI.mutate}>
<FormControl field={fields.name} type="text" /> <FormControl field={fields.name} type="text" />
<FormControl field={fields.email} type="email" /> <FormControl field={fields.email} type="email" />
<FormSelect field={fields.language}> <FormSelect field={fields.language} variant="dropdown">
{ {
Object.keys(localesAPI.data || {}).map((code) => <Option key={code} value={code}>{localesAPI.data[code]}</Option>) Object.keys(localesAPI.data || {}).map((code) => <Option key={code} value={code}>{localesAPI.data[code]}</Option>)
} }
</FormSelect> </FormSelect>
{(canUpdateRole && rolesAPI.data) && ( {(canUpdateRole && rolesAPI.data) && (
<FormSelect field={fields.role_id}> <FormSelect field={fields.role_id} variant="dropdown">
{ {
rolesAPI.data.map((role) => <Option key={role.id} value={role.id}>{role.name}</Option>) rolesAPI.data.map((role) => <Option key={role.id} value={role.id}>{role.name}</Option>)
} }
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment