From 7118882f586877d1e8ff8a3c6284978e7a2d00ee Mon Sep 17 00:00:00 2001 From: Pelumi Honey Date: Tue, 18 Jan 2022 01:24:19 +0100 Subject: [PATCH 01/10] added floating labels --- src/app/public/login/login.component.html | 4 ++- src/scss/_form.scss | 43 ++++++++++++++++++++--- 2 files changed, 42 insertions(+), 5 deletions(-) diff --git a/src/app/public/login/login.component.html b/src/app/public/login/login.component.html index 248c17334e..41aa3d1a83 100644 --- a/src/app/public/login/login.component.html +++ b/src/app/public/login/login.component.html @@ -6,7 +6,8 @@

Welcome back to Convoy

- + +
Email Address
input error icon Email is required @@ -16,6 +17,7 @@

Welcome back to Convoy

+
Passsword
- +
diff --git a/src/app/private/private.component.html b/src/app/private/private.component.html index 1b339c0be5..99c661412b 100644 --- a/src/app/private/private.component.html +++ b/src/app/private/private.component.html @@ -35,7 +35,7 @@ arrow down icon -
+

Your organisations ({{ organisations?.length }})

@@ -62,9 +62,9 @@

Your organisations ({{ organisations?.length }})

more icon -
+
@@ -47,7 +46,7 @@

You have no one with the name '{{searchText}}' on your team

Role goes here
-
{{ team.groups }} Group{{team.groups == 1 ? '' : 's' }}
+
{{ team.groups }} Group{{ team.groups == 1 ? '' : 's' }}
@@ -120,40 +119,40 @@

Add Team Member

Basic info

Invite other members of your team to your organization.

- -
input error icon Firstname is required
+ +
- -
input error icon Lastname is required
+ +
- -
input error icon Please enter a valid email
+ +
- -
input error icon Please select at least 1 group
+ +
@@ -165,22 +164,22 @@

Basic info

  • - +
- -
input error icon Please select a role
+ +
diff --git a/src/app/private/pages/team/team.component.ts b/src/app/private/pages/team/team.component.ts index 8a7285babe..df8fcf0bf7 100644 --- a/src/app/private/pages/team/team.component.ts +++ b/src/app/private/pages/team/team.component.ts @@ -26,8 +26,8 @@ export class TeamComponent implements OnInit { searchingMembers: boolean = false; searchText!: string; teams!: TEAMS[]; - groups!: GROUP[]; - filteredGroups!: GROUP[]; + groups: GROUP[] = []; + filteredGroups: GROUP[] = []; selectedGroups: GROUP[] = []; noOfSelectedGroups!: string; invitingUser: boolean = false; @@ -72,8 +72,15 @@ export class TeamComponent implements OnInit { }; try { const response = await this.groupService.getGroups(requestOptions); - this.groups = response.data; - this.filteredGroups = response.data; + const groupsAvailable = response.data; + groupsAvailable.forEach((element: GROUP) => { + this.groups.push({ + ...element, + selected: false + }); + }); + console.log(this.groups); + this.filteredGroups = this.groups; } catch {} } @@ -115,12 +122,22 @@ export class TeamComponent implements OnInit { const groupExists = this.selectedGroups.find(item => item.id == id); if (groupExists) { this.selectedGroups = this.selectedGroups.filter(group => group.id != id); + this.filteredGroups.forEach((item: GROUP) => { + if (item.id == id) item.selected = false; + }); } else { this.selectedGroups.push(group); + this.filteredGroups.forEach((item: GROUP) => { + if (item.id == id) item.selected = true; + }); } } else { this.selectedGroups.push(group); + this.filteredGroups.forEach((item: GROUP) => { + if (item.id == id) item.selected = true; + }); } + this.noOfSelectedGroups = `${this.selectedGroups?.length} group${this.selectedGroups?.length == 1 ? '' : 's'}`; } async inviteUser() { diff --git a/src/app/public/login/login.component.html b/src/app/public/login/login.component.html index 2060733944..fe9f9a7421 100644 --- a/src/app/public/login/login.component.html +++ b/src/app/public/login/login.component.html @@ -6,18 +6,21 @@

Welcome back to Convoy

Forgot password? diff --git a/src/scss/_form.scss b/src/scss/_form.scss index 8f52021a8a..b415838206 100644 --- a/src/scss/_form.scss +++ b/src/scss/_form.scss @@ -2,39 +2,53 @@ margin-bottom: 24px; display: flex; flex-wrap: wrap; + flex-flow: column-reverse; width: 100%; - - label { - font-weight: 600; - font-size: 12px; - line-height: 16px; - letter-spacing: 0.01em; - text-transform: uppercase; - color: rgba(30, 17, 71, 0.4); - width: 100%; - order: 1; - } + position: relative; - &-floating-label { - position: absolute; - pointer-events: none; - margin-top: +23px; - margin-left: +19px; - transition: 0.2s ease all; + label { font-weight: 500; font-size: 14px; line-height: 22px; color: #a5abc1; } + input:placeholder-shown + label { + display: block; + max-width: 30%; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + cursor: text; + transform-origin: left bottom; + transform: translate(0, 2.8rem) scale(1); + transition: 0.3s ease-in-out all; + margin-left: 19px; + } - &.login { - input { - &:focus { - padding: 20px 20px 6px 20px; - } - &:not(:placeholder-shown) { - padding: 20px 20px 6px 20px; - } + ::-webkit-input-placeholder { + opacity: 0; + transition: inherit; + } + input:focus::-webkit-input-placeholder { + opacity: 1; + } + input:not(:placeholder-shown) + label, + input:focus + label { + font-weight: 500; + font-size: 10px; + line-height: 150%; + color: #a5abc1; + margin-left: 19px; + transform: translate(0, 1.7rem) scale(1); + cursor: pointer; + } + + input { + &:focus { + padding: 20px 19px 6px 18px; + } + &:not(:placeholder-shown) { + padding: 20px 19px 6px 18px; } } input::-webkit-outer-spin-button, @@ -57,7 +71,6 @@ datalist { margin-top: 8px; width: 100%; - order: 2; &.invalid { border: 1px solid var(--color-red); @@ -67,12 +80,6 @@ &:disabled { color: rgba(30, 17, 71, 0.24); } - - &:focus { - + label { - color: var(--color-black); - } - } } .input--password { @@ -104,12 +111,11 @@ display: flex; align-items: center; margin-top: 7px; - order: 3; img { margin-right: 9.33px; } - span{ - color: #FF554A; + span { + color: #ff554a; } } &.checkbox { @@ -130,6 +136,28 @@ } } + &.radio { + flex-flow: row; + button { + padding: 0; + background: transparent; + display: flex; + align-items: center; + font-weight: 500; + font-size: 16px; + line-height: 24px; + color: #737a91; + transition: 0.3s ease-in-out; + margin-right: 48px; + img { + margin-right: 9px; + } + &.active { + color: #477db3; + } + } + } + &.has-icon { position: relative; @@ -158,6 +186,7 @@ align-items: center; flex-wrap: nowrap; margin-bottom: 10px; + flex-flow: row; &.no-margin { margin-bottom: unset; @@ -173,13 +202,8 @@ margin-top: 0; color: #737a91; } - button { - padding: 0; - border: none; - background: none; - order: 3; - margin-top: -9px; - height: 12px; + ::-webkit-input-placeholder { + opacity: 1; } } } @@ -312,43 +336,4 @@ form { margin-bottom: 22px; } } -.input { - &.radio { - button { - padding: 0; - background: transparent; - display: flex; - align-items: center; - font-weight: 500; - font-size: 16px; - line-height: 24px; - color: #737a91; - transition: 0.3s ease-in-out; - margin-right: 48px; - img { - margin-right: 9px; - } - &.active { - color: #477db3; - } - } - } -} -input:placeholder-shown + .input-floating-label { - transition: 0.2s ease-in-out all; -} -::-webkit-input-placeholder { - opacity: 0; - transition: inherit; -} -input:focus::-webkit-input-placeholder { - opacity: 1; -} -input:not(:placeholder-shown) + .input-floating-label, -input:focus + .input-floating-label { - margin-top: +14px; - margin-left: +21px; - font-weight: 500; - font-size: 10px; - line-height: 150%; -} + From bcc5a1d745993a7396fd6c3c4481ab137cabe979 Mon Sep 17 00:00:00 2001 From: Pelumi Honey Date: Thu, 20 Jan 2022 16:26:01 +0100 Subject: [PATCH 05/10] fixed dropdown font --- src/app/private/private.component.html | 6 ++---- src/app/private/private.component.scss | 6 ++++++ 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/src/app/private/private.component.html b/src/app/private/private.component.html index 8036375a84..57393f86f4 100644 --- a/src/app/private/private.component.html +++ b/src/app/private/private.component.html @@ -27,7 +27,7 @@

-
+

Forgot password? @@ -107,7 +108,7 @@

Change Password

[type]="passwordToggle.oldPassword ? 'text' : 'password'" id="password" name="password" - autocomplete="current-password" + autocomplete="password" placeholder="Enter your password" formControlName="password" /> @@ -118,6 +119,7 @@

Change Password

/>
+
@@ -136,12 +138,13 @@

Change Password

+
diff --git a/src/app/private/pages/account/account.component.scss b/src/app/private/pages/account/account.component.scss index e9f14beb71..e5bf6c6709 100644 --- a/src/app/private/pages/account/account.component.scss +++ b/src/app/private/pages/account/account.component.scss @@ -127,6 +127,7 @@ display: flex; flex-wrap: wrap; justify-content: space-between; + align-items: flex-start; margin-top: 22px; padding-bottom: 0; diff --git a/src/app/private/pages/groups/components/create-group/create-group.component.html b/src/app/private/pages/groups/components/create-group/create-group.component.html index a026747567..80c674aa60 100644 --- a/src/app/private/pages/groups/components/create-group/create-group.component.html +++ b/src/app/private/pages/groups/components/create-group/create-group.component.html @@ -13,7 +13,8 @@

{{ editMode ? 'Edit Project' : 'Create Project' }}

input error icon Name is required
- + +
@@ -33,13 +34,13 @@

Retry Strategy

Signature

- +
- +

Disable Endpoint

diff --git a/src/app/private/pages/team/team.component.scss b/src/app/private/pages/team/team.component.scss index bdb347fce7..035cb05d18 100644 --- a/src/app/private/pages/team/team.component.scss +++ b/src/app/private/pages/team/team.component.scss @@ -39,7 +39,7 @@ table { .modal form { display: flex; - align-items: center; + align-items: flex-start; flex-wrap: wrap; justify-content: space-between; diff --git a/src/scss/_form.scss b/src/scss/_form.scss index b415838206..9875d31801 100644 --- a/src/scss/_form.scss +++ b/src/scss/_form.scss @@ -5,57 +5,86 @@ flex-flow: column-reverse; width: 100%; position: relative; + input, + select, + textarea, + datalist { + background: #ffffff; + border: 1px solid #e4e9f2; + border-radius: 4px; + padding: 14px 20px 12px 20px; + appearance: none; + transition: all 0.3s; + font-weight: 500; + font-size: 14px; + line-height: 22px; + margin-top: 8px; + width: 100%; + + &.invalid { + border: 1px solid #ff554a; + } + &::placeholder, + &:disabled { + color: rgba(30, 17, 71, 0.24); + } + &:focus { + background: rgba(71, 125, 179, 0.04); + border: 1px solid #477db3; + outline: #477db3; + } + } label { font-weight: 500; font-size: 14px; line-height: 22px; color: #a5abc1; - } - input:placeholder-shown + label { - display: block; - max-width: 30%; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - cursor: text; - transform-origin: left bottom; - transform: translate(0, 2.8rem) scale(1); - transition: 0.3s ease-in-out all; + position: absolute; margin-left: 19px; - } - ::-webkit-input-placeholder { - opacity: 0; - transition: inherit; - } - input:focus::-webkit-input-placeholder { - opacity: 1; + transition: 0.3s ease-in-out all; } - input:not(:placeholder-shown) + label, - input:focus + label { + input:focus + label, + .input--password input:focus + label { font-weight: 500; font-size: 10px; line-height: 150%; - color: #a5abc1; margin-left: 19px; - transform: translate(0, 1.7rem) scale(1); - cursor: pointer; - } - - input { - &:focus { - padding: 20px 19px 6px 18px; - } - &:not(:placeholder-shown) { - padding: 20px 19px 6px 18px; - } - } - input::-webkit-outer-spin-button, - input::-webkit-inner-spin-button { - -webkit-appearance: none; - margin: 0; } + // input:not(:focus) + label, + // input:not([value=""]):valid + label { + // font-weight: 500; + // font-size: 10px; + // line-height: 150%; + // transform: translate(0.8rem, -1.9rem) scale(1); + // } + // input:placeholder-shown + label { + // display: block; + // max-width: 30%; + // white-space: nowrap; + // overflow: hidden; + // text-overflow: ellipsis; + // cursor: text; + // transform-origin: left bottom; + // transform: translate(0, 2.8rem) scale(1); + // transition: 0.3s ease-in-out all; + // margin-left: 19px; + // } + // ::-webkit-input-placeholder { + // opacity: 0; + // transition: inherit; + // } + // input:not(:placeholder-shown) + label, + // input:focus + label { + // font-weight: 500; + // font-size: 10px; + // line-height: 150%; + // color: #a5abc1; + // margin-left: 19px; + // transform: translate(0, 1.7rem) scale(1); + // cursor: pointer; + // } input[type='number'] { -moz-appearance: textfield; @@ -65,23 +94,6 @@ min-width: 95%; } - input, - select, - textarea, - datalist { - margin-top: 8px; - width: 100%; - - &.invalid { - border: 1px solid var(--color-red); - } - - &::placeholder, - &:disabled { - color: rgba(30, 17, 71, 0.24); - } - } - .input--password { display: flex; position: relative; @@ -103,39 +115,6 @@ } } } - - &--error-message { - color: var(--danger-color); - text-align: left; - font-size: 12px; - display: flex; - align-items: center; - margin-top: 7px; - img { - margin-right: 9.33px; - } - span { - color: #ff554a; - } - } - &.checkbox { - flex-wrap: nowrap; - align-items: center; - - label { - text-transform: initial; - line-height: 24px; - font-size: 14px; - } - - input[type='checkbox'], - input[type='radio'] { - width: initial; - order: 1; - margin-right: 16px; - } - } - &.radio { flex-flow: row; button { @@ -158,17 +137,6 @@ } } - &.has-icon { - position: relative; - - .input--valid-icon { - position: absolute; - top: calc(50% + 8px); - transform: translate(0, -50%); - right: 12px; - } - } - &.small { width: 300px; } @@ -206,93 +174,19 @@ opacity: 1; } } -} - -input, -select, -textarea, -datalist { - background: #ffffff; - border: 1px solid #e4e9f2; - border-radius: 4px; - padding: 14px 20px 12px 20px; - appearance: none; - transition: all 0.3s; - font-weight: 500; - font-size: 14px; - line-height: 22px; - - &:focus { - background: rgba(71, 125, 179, 0.04); - border: 1px solid #477db3; - outline: #477db3; - } -} - -input[type='checkbox'], -input[type='radio'] { - padding: 7px; - position: relative; - - &::after { - content: url('../assets/img/checkbox-icon.svg'); - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - } - - &:checked { - background: var(--primary-color); - } -} - -.filter { - display: flex; - align-items: center; - margin-bottom: 16px; - position: relative; - align-items: stretch; - max-height: 50px; - - & > div { - display: flex; - align-items: center; - } - - .filter--button { - min-width: 130px; - } - - .filter--button, - select { - background: #ffffff; - border: 1px solid #f3f5f9; - border-radius: 8px; - padding: 10px; + &--error-message { + text-align: left; + font-size: 12px; display: flex; align-items: center; - justify-content: space-between; - font-size: 14px; - line-height: 14px; - margin: 0 0 0 8px; - - div { - margin: 0 8px; - } - - img:last-of-type { - width: 20px; + margin-top: 7px; + img { + margin-right: 9.33px; } - - &.active { - border-color: rgba(71, 125, 179, 0.2); - box-shadow: 0px 10px 25px rgba(151, 143, 175, 0.08); - color: var(--primary-color); - font-weight: 500; + span { + color: #ff554a; } } - .select { width: fit-content; position: relative; @@ -313,6 +207,322 @@ input[type='radio'] { } } } +// .input { +// margin-bottom: 24px; +// display: flex; +// flex-wrap: wrap; +// flex-flow: column-reverse; +// width: 100%; +// position: relative; + +// label { +// font-weight: 500; +// font-size: 14px; +// line-height: 22px; +// color: #a5abc1; +// } +// input:placeholder-shown + label { +// display: block; +// max-width: 30%; +// white-space: nowrap; +// overflow: hidden; +// text-overflow: ellipsis; +// cursor: text; +// transform-origin: left bottom; +// transform: translate(0, 2.8rem) scale(1); +// transition: 0.3s ease-in-out all; +// margin-left: 19px; +// } + +// ::-webkit-input-placeholder { +// opacity: 0; +// transition: inherit; +// } + +// input:focus::-webkit-input-placeholder { +// opacity: 1; +// } +// input:not(:placeholder-shown) + label, +// input:focus + label { +// font-weight: 500; +// font-size: 10px; +// line-height: 150%; +// color: #a5abc1; +// margin-left: 19px; +// transform: translate(0, 1.7rem) scale(1); +// cursor: pointer; +// } + +// input { +// &:focus { +// padding: 20px 19px 6px 18px; +// } +// &:not(:placeholder-shown) { +// padding: 20px 19px 6px 18px; +// } +// } +// input::-webkit-outer-spin-button, +// input::-webkit-inner-spin-button { +// -webkit-appearance: none; +// margin: 0; +// } + +// input[type='number'] { +// -moz-appearance: textfield; +// } + +// input[type='date'] { +// min-width: 95%; +// } + +// input, +// select, +// textarea, +// datalist { +// margin-top: 8px; +// width: 100%; + +// &.invalid { +// border: 1px solid var(--color-red); +// } + +// &::placeholder, +// &:disabled { +// color: rgba(30, 17, 71, 0.24); +// } +// } + +// .input--password { +// display: flex; +// position: relative; +// width: 100%; + +// .input--password__view-toggle { +// position: absolute; +// top: 57%; +// transform: translate(0, -50%); +// padding: 0; +// display: flex; +// align-items: center; +// justify-content: flex-end; +// right: 20px; +// border: 0; + +// img { +// width: 18px; +// } +// } +// } + +// &--error-message { +// color: var(--danger-color); +// text-align: left; +// font-size: 12px; +// display: flex; +// align-items: center; +// margin-top: 7px; +// img { +// margin-right: 9.33px; +// } +// span { +// color: #ff554a; +// } +// } +// &.checkbox { +// flex-wrap: nowrap; +// align-items: center; + +// label { +// text-transform: initial; +// line-height: 24px; +// font-size: 14px; +// } + +// input[type='checkbox'], +// input[type='radio'] { +// width: initial; +// order: 1; +// margin-right: 16px; +// } +// } + +// &.radio { +// flex-flow: row; +// button { +// padding: 0; +// background: transparent; +// display: flex; +// align-items: center; +// font-weight: 500; +// font-size: 16px; +// line-height: 24px; +// color: #737a91; +// transition: 0.3s ease-in-out; +// margin-right: 48px; +// img { +// margin-right: 9px; +// } +// &.active { +// color: #477db3; +// } +// } +// } + +// &.has-icon { +// position: relative; + +// .input--valid-icon { +// position: absolute; +// top: calc(50% + 8px); +// transform: translate(0, -50%); +// right: 12px; +// } +// } + +// &.small { +// width: 300px; +// } + +// &.smaller { +// width: 45%; +// } + +// &.search { +// border: 1px solid #edeff5; +// border-radius: 10px; +// padding: 11px 16px; +// transition: all 0.3s; +// display: flex; +// align-items: center; +// flex-wrap: nowrap; +// margin-bottom: 10px; +// flex-flow: row; + +// &.no-margin { +// margin-bottom: unset; +// margin-right: 24px; +// background: #fff; +// } +// input { +// background: transparent; +// border: none; +// border-radius: 0; +// padding: 0; +// margin-left: 10px; +// margin-top: 0; +// color: #737a91; +// } +// ::-webkit-input-placeholder { +// opacity: 1; +// } +// } +// } + +// input, +// select, +// textarea, +// datalist { +// background: #ffffff; +// border: 1px solid #e4e9f2; +// border-radius: 4px; +// padding: 14px 20px 12px 20px; +// appearance: none; +// transition: all 0.3s; +// font-weight: 500; +// font-size: 14px; +// line-height: 22px; + +// &:focus { +// background: rgba(71, 125, 179, 0.04); +// border: 1px solid #477db3; +// outline: #477db3; +// } +// } + +// input[type='checkbox'], +// input[type='radio'] { +// padding: 7px; +// position: relative; + +// &::after { +// content: url('../assets/img/checkbox-icon.svg'); +// position: absolute; +// top: 50%; +// left: 50%; +// transform: translate(-50%, -50%); +// } + +// &:checked { +// background: var(--primary-color); +// } +// } + +// .filter { +// display: flex; +// align-items: center; +// margin-bottom: 16px; +// position: relative; +// align-items: stretch; +// max-height: 50px; + +// & > div { +// display: flex; +// align-items: center; +// } + +// .filter--button { +// min-width: 130px; +// } + +// .filter--button, +// select { +// background: #ffffff; +// border: 1px solid #f3f5f9; +// border-radius: 8px; +// padding: 10px; +// display: flex; +// align-items: center; +// justify-content: space-between; +// font-size: 14px; +// line-height: 14px; +// margin: 0 0 0 8px; + +// div { +// margin: 0 8px; +// } + +// img:last-of-type { +// width: 20px; +// } + +// &.active { +// border-color: rgba(71, 125, 179, 0.2); +// box-shadow: 0px 10px 25px rgba(151, 143, 175, 0.08); +// color: var(--primary-color); +// font-weight: 500; +// } +// } + +// .select { +// width: fit-content; +// position: relative; + +// &::after { +// content: ''; +// position: absolute; +// background: url('/assets/img/angle-arrow-down.svg'); +// width: 20px; +// height: 20px; +// background-size: contain; +// right: 5px; +// } + +// select { +// height: 46px; +// min-width: 145px; +// } +// } +// } form { h3 { @@ -336,4 +546,3 @@ form { margin-bottom: 22px; } } - From 62aaa46d45f5dbafa8ef5d2f173f0496f1c4541b Mon Sep 17 00:00:00 2001 From: Pelumi Honey Date: Fri, 21 Jan 2022 13:59:53 +0100 Subject: [PATCH 07/10] form input cleanup --- .../pages/account/account.component.html | 41 +- .../pages/account/account.component.scss | 11 + .../private/pages/team/team.component.html | 18 +- src/app/private/pages/team/team.component.ts | 2 +- src/app/public/login/login.component.html | 28 +- src/app/public/login/login.component.ts | 2 +- src/scss/_form.scss | 381 ++---------------- 7 files changed, 110 insertions(+), 373 deletions(-) diff --git a/src/app/private/pages/account/account.component.html b/src/app/private/pages/account/account.component.html index 3ea410fdfe..762973c569 100644 --- a/src/app/private/pages/account/account.component.html +++ b/src/app/private/pages/account/account.component.html @@ -38,7 +38,13 @@

Basic Info

input error icon Field cannot be empty
- +
@@ -46,7 +52,13 @@

Basic Info

input error icon Field cannot be empty
- + @@ -55,7 +67,13 @@

Basic Info

input error icon Field cannot be empty - + @@ -84,7 +102,9 @@

Change Password

autocomplete="current-password" placeholder="Enter your password" formControlName="current_password" + [ngClass]="{ invalid: changePasswordForm.controls.current_password.touched && changePasswordForm.controls.current_password.invalid }" /> + -

Forgot password? @@ -111,7 +130,9 @@

Change Password

autocomplete="password" placeholder="Enter your password" formControlName="password" + [ngClass]="{ invalid: changePasswordForm.controls.password.touched && changePasswordForm.controls.password.invalid }" /> + -
@@ -144,8 +164,16 @@

Change Password

placeholder="Enter your password" formControlName="password_confirmation" (input)="checkPassword()" - [ngClass]="{'invalid': changePasswordForm.controls.password_confirmation.touched && changePasswordForm.controls.password_confirmation.invalid}" + [ngClass]="{ + invalid: + (changePasswordForm.controls.password_confirmation.touched && changePasswordForm.controls.password_confirmation.invalid) || + (changePasswordForm.controls.password.valid && + changePasswordForm.controls.password_confirmation.valid && + changePasswordForm.controls.password_confirmation.touched && + !passwordsMatch) + }" /> +
-
diff --git a/src/app/private/pages/account/account.component.scss b/src/app/private/pages/account/account.component.scss index e5bf6c6709..a370309339 100644 --- a/src/app/private/pages/account/account.component.scss +++ b/src/app/private/pages/account/account.component.scss @@ -166,3 +166,14 @@ .logout { color: #ff554a; } +.input{ + label{ + top: 13px; + } + input.ng-valid + label{ + top: 7px; + } +} +input:focus + label { + top: 7px; +} \ No newline at end of file diff --git a/src/app/private/pages/team/team.component.html b/src/app/private/pages/team/team.component.html index 30a782bb8d..85bd6f917c 100644 --- a/src/app/private/pages/team/team.component.html +++ b/src/app/private/pages/team/team.component.html @@ -123,7 +123,7 @@

Basic info

input error icon Firstname is required - + @@ -132,7 +132,7 @@

Basic info

input error icon Lastname is required - + @@ -141,7 +141,7 @@

Basic info

input error icon Please enter a valid email - + @@ -151,7 +151,15 @@

Basic info

input error icon Please select at least 1 group - + @@ -175,7 +183,7 @@

Basic info

input error icon Please select a role - diff --git a/src/app/private/pages/team/team.component.ts b/src/app/private/pages/team/team.component.ts index df8fcf0bf7..3a3b046ac3 100644 --- a/src/app/private/pages/team/team.component.ts +++ b/src/app/private/pages/team/team.component.ts @@ -29,7 +29,7 @@ export class TeamComponent implements OnInit { groups: GROUP[] = []; filteredGroups: GROUP[] = []; selectedGroups: GROUP[] = []; - noOfSelectedGroups!: string; + noOfSelectedGroups: string = '0 Groups'; invitingUser: boolean = false; currentId!: string; inviteUserForm: FormGroup = this.formBuilder.group({ diff --git a/src/app/public/login/login.component.html b/src/app/public/login/login.component.html index fe9f9a7421..0485ec8766 100644 --- a/src/app/public/login/login.component.html +++ b/src/app/public/login/login.component.html @@ -5,22 +5,39 @@

Welcome back to Convoy

Log in to your workspace to continue

-
  • @@ -113,9 +115,10 @@

    {{ selectedGroup?.name }}

    {{ selectedGroup?.config?.Signature?.header }} -
  • @@ -126,9 +129,10 @@

    {{ selectedGroup?.name }}

    {{ selectedGroup?.config?.Signature?.hash }} -
  • diff --git a/src/app/private/pages/groups/groups.component.scss b/src/app/private/pages/groups/groups.component.scss index 476e5ecc66..f6ff1feb31 100644 --- a/src/app/private/pages/groups/groups.component.scss +++ b/src/app/private/pages/groups/groups.component.scss @@ -22,6 +22,9 @@ font-size: 14px; line-height: 22px; color: #000624; + :hover{ + cursor: pointer; + } } } @@ -64,7 +67,11 @@ } &--body { + height:109px; padding-top: 16px; + :hover{ + cursor: pointer; + } } } } diff --git a/src/app/private/pages/groups/groups.service.ts b/src/app/private/pages/groups/groups.service.ts index d81b72e58f..4ce6093b79 100644 --- a/src/app/private/pages/groups/groups.service.ts +++ b/src/app/private/pages/groups/groups.service.ts @@ -52,8 +52,10 @@ export class GroupsService { } } - async deleteGroup(requestOptions: {orgId: string;groupId: string}): Promise{ - try{ + + + async deleteGroup(requestOptions: { orgId: string; groupId: string }): Promise { + try { const response = await this.http.request({ url: `groups/${requestOptions.groupId}?${requestOptions.orgId || ''}`, method: 'delete' diff --git a/src/app/private/pages/team/team.component.ts b/src/app/private/pages/team/team.component.ts index 3a3b046ac3..02ef35fbca 100644 --- a/src/app/private/pages/team/team.component.ts +++ b/src/app/private/pages/team/team.component.ts @@ -79,7 +79,6 @@ export class TeamComponent implements OnInit { selected: false }); }); - console.log(this.groups); this.filteredGroups = this.groups; } catch {} } From 51ca2cd6b0e279b7257866cea88655fbd75b9b90 Mon Sep 17 00:00:00 2001 From: Pelumi Honey Date: Fri, 21 Jan 2022 15:11:30 +0100 Subject: [PATCH 10/10] group feedback --- src/app/private/pages/groups/groups.component.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/private/pages/groups/groups.component.scss b/src/app/private/pages/groups/groups.component.scss index f6ff1feb31..cc24971df3 100644 --- a/src/app/private/pages/groups/groups.component.scss +++ b/src/app/private/pages/groups/groups.component.scss @@ -22,7 +22,7 @@ font-size: 14px; line-height: 22px; color: #000624; - :hover{ + &:hover{ cursor: pointer; } }