Update local user table to new design
This commit will introduce a reusable data table component.
By creating a reusable component, we can ensure tables in the
GUI will look consistent and common table actions (sort, select row)
are shared.
- Created new components directory to store shared components
- Add password-confirmation directive
- Remove some error handling from API utils so it can be
handled in the UI
TODO:
- Add show/hide toggle to password fields
- Enhance table component with icons
- Manual user unlock
- Batch table actions
- Role table
Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I03c95874d2942a2450a5da2f1d2a8bb895aa1746
diff --git a/app/common/styles/base/buttons.scss b/app/common/styles/base/buttons.scss
index 1d90036..25e5a91 100644
--- a/app/common/styles/base/buttons.scss
+++ b/app/common/styles/base/buttons.scss
@@ -53,6 +53,7 @@
display: inline-block;
margin-right: 0.3em;
vertical-align: bottom;
+ margin-left: -0.5em;
}
img {
width: 1.5em;
diff --git a/app/common/styles/base/forms.scss b/app/common/styles/base/forms.scss
index f04e827..c775c48 100644
--- a/app/common/styles/base/forms.scss
+++ b/app/common/styles/base/forms.scss
@@ -1,8 +1,12 @@
label,
legend {
- font-size: 1em;
- font-weight: 300;
margin: 0;
+ color: $text-02;
+ text-transform: uppercase;
+ font-weight: 700;
+ font-size: 0.75em;
+ margin-bottom: 0;
+ line-height: 2.2;
.error {
font-size: 0.9em;
}
@@ -141,7 +145,21 @@
}
.form__validation-message {
color: $status-error;
+ font-size: 0.8em;
+ line-height: 1.1;
+ padding-top: 2px;
+}
+
+.radio-label {
+ text-transform: none;
+ font-weight: normal;
font-size: 0.9em;
+ line-height: 1.2;
+ margin: 0.8em 0;
+ color: $text-01;
+ input[type=radio] {
+ margin-bottom: 0;
+ }
}
/**
@@ -210,3 +228,19 @@
margin-left: 1rem;
}
}
+
+.radio-option__input-field-group {
+ margin-left: 1.5em;
+}
+
+.field-group-container {
+ margin-bottom: 30px;
+ position: relative;
+ &:last-child {
+ margin-bottom: 12px;
+ }
+
+ input + .form__validation-message {
+ position: absolute;
+ }
+}
diff --git a/app/common/styles/base/typography.scss b/app/common/styles/base/typography.scss
index baa6a60..bcf26d1 100644
--- a/app/common/styles/base/typography.scss
+++ b/app/common/styles/base/typography.scss
@@ -62,3 +62,8 @@
font-weight: 700;
margin-bottom: 0;
}
+
+.page-title {
+ margin-bottom: 50px;
+ font-size: 2rem;
+}
diff --git a/app/common/styles/base/utility.scss b/app/common/styles/base/utility.scss
index 26f138a..a271d33 100644
--- a/app/common/styles/base/utility.scss
+++ b/app/common/styles/base/utility.scss
@@ -130,4 +130,8 @@
@keyframes flash {
0% { background: $primary-accent; }
100% { background: none; }
+}
+
+.nowrap {
+ white-space: nowrap!important;
}
\ No newline at end of file