Skip to content

Commit

Permalink
feat(ui): standardise edit connection modal
Browse files Browse the repository at this point in the history
  • Loading branch information
Vu Van Duc authored and Vu Van Duc committed Apr 25, 2024
1 parent 540823f commit c7210fc
Show file tree
Hide file tree
Showing 2 changed files with 164 additions and 158 deletions.
210 changes: 107 additions & 103 deletions src/ui/pages/ConnectionDetails/components/EditConnectionsModal.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,135 +3,139 @@
margin-top: env(safe-area-inset-top);
--safe-area-inset-top: env(safe-area-inset-top);

.modal {
border-radius: 0;

.page-header {
ion-toolbar {
--background: transparent;
}
.page-header {
ion-toolbar {
--background: transparent;
}
}

.close-button-label,
.action-button-label {
margin: 0;
font-size: 1rem;
font-weight: 700;
--opacity: 1;
.close-button-label,
.action-button-label {
margin: 0;
font-size: 1rem;
font-weight: 700;
--opacity: 1;

&::part(native) {
padding: 0;
}
&::part(native) {
padding: 0;
}
}

.close-button-label {
color: var(--ion-color-secondary) !important;
}
.close-button-label {
color: var(--ion-color-secondary) !important;
}

.action-button-label {
& > p {
color: var(--ion-color-action-blue) !important;
}
.action-button-label {
& > p {
color: var(--ion-color-action-blue) !important;
}
}

.connection-details-info-block {
margin-top: 1.5rem;
padding-bottom: 10rem;
color: var(--ion-color-secondary);
.connection-details-info-block {
margin-top: 1.5rem;
padding-bottom: 10rem;
color: var(--ion-color-secondary);

h3 {
margin-bottom: 2.94rem;
margin-left: 1.25rem;
font-weight: 500;
color: var(--ion-color-secondary);
}
h3 {
margin-bottom: 2.94rem;
margin-left: 1.25rem;
font-weight: 500;
color: var(--ion-color-secondary);
}
}

.connection-details-info-block-inner {
position: relative;
margin-bottom: 2.94rem;
padding: 1.25rem;
border-radius: 1rem;
background-color: white;

.connection-details-delete-note {
position: absolute;
top: -1.75rem;
left: calc(50% - 1.5rem);

ion-button {
width: 3rem;
height: 3rem;
border-radius: 1.875rem;

&::part(native) {
padding: 0;
}

ion-icon {
width: 1.5rem;
height: 1.5rem;
}
.connection-details-info-block-inner {
position: relative;
margin-bottom: 2.94rem;
padding: 1.25rem;
border-radius: 1rem;
background-color: white;

.connection-details-delete-note {
position: absolute;
top: -1.75rem;
left: calc(50% - 1.5rem);

ion-button {
width: 3rem;
height: 3rem;
border-radius: 1.875rem;

&::part(native) {
padding: 0;
}

ion-icon {
width: 1.5rem;
height: 1.5rem;
}
}
}
}

.connection-details-info-block-title {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
.connection-details-info-block-title {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;

span:last-child {
font-size: 0.875rem;
font-weight: 400;
}
span:last-child {
font-size: 0.875rem;
font-weight: 400;
}
}

.connection-details-info-block-data {
ion-input,
ion-textarea {
border-radius: 0.5rem;
border: 1px solid var(--ion-color-dark-grey);
margin-top: 0.5rem;
min-height: 1.25rem;

input,
textarea,
.textarea-wrapper::after {
overflow: hidden;
padding: 0.875rem 1.25rem;
}

&.has-focus {
border-color: var(--ion-color-secondary);
}
.connection-details-info-block-data {
ion-input,
ion-textarea {
border-radius: 0.5rem;
border: 1px solid var(--ion-color-dark-grey);
margin-top: 0.5rem;
min-height: 1.25rem;

input,
textarea,
.textarea-wrapper::after {
overflow: hidden;
padding: 0.875rem 1.25rem !important;
}

ion-input {
margin-bottom: 1.5rem;
&.has-focus {
border-color: var(--ion-color-secondary);
}
}

.connection-details-add-note {
position: fixed;
bottom: 2.19rem;
right: 1.25rem;
z-index: 10;
ion-input {
margin-bottom: 1.5rem;
}

ion-button {
width: 3.375rem;
height: 3.375rem;
border-radius: 1.875rem;
.input-highlight.sc-ion-input-md {
display: none;
}

&::part(native) {
padding: 0.875rem 0.84375rem 1rem 1.03125rem;
}
.textarea-highlight.sc-ion-textarea-md {
display: none;
}
}

ion-icon {
width: 1.5rem;
height: 1.5rem;
}
.connection-details-add-note {
position: fixed;
bottom: 2.19rem;
right: 1.25rem;
z-index: 10;

ion-button {
width: 3.375rem;
height: 3.375rem;
border-radius: 1.875rem;

&::part(native) {
padding: 0.875rem 0.84375rem 1rem 1.03125rem;
}

ion-icon {
width: 1.5rem;
height: 1.5rem;
}
}
}
Expand Down
112 changes: 57 additions & 55 deletions src/ui/pages/ConnectionDetails/components/EditConnectionsModal.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { IonButton, IonIcon, IonModal } from "@ionic/react";
import { createOutline } from "ionicons/icons";
import { useEffect, useRef, useState } from "react";
import { PageLayout } from "../../../components/layout/PageLayout";
import { i18n } from "../../../../i18n";
import { ConnectionNote } from "./ConnectionNote";
import ConnectionDetailsHeader from "./ConnectionDetailsHeader";
Expand All @@ -14,6 +13,8 @@ import KeriLogo from "../../../../ui/assets/images/KeriGeneric.jpg";
import "./EditConnectionsModal.scss";
import { ConnectionNoteDetails } from "../../../../core/agent/agent.types";
import { Alert } from "../../../components/Alert";
import { PageHeader } from "../../../components/PageHeader";
import { ScrollablePageLayout } from "../../../components/layout/ScrollablePageLayout";

export const EditConnectionsContainer = ({
notes,
Expand Down Expand Up @@ -134,61 +135,62 @@ export const EditConnectionsContainer = ({

return (
<>
<div className="modal">
<PageLayout
header={true}
closeButton={true}
closeButtonLabel={`${i18n.t("connections.details.cancel")}`}
closeButtonAction={() => {
setModalIsOpen(false);
}}
actionButton={true}
actionButtonAction={confirm}
actionButtonLabel={`${i18n.t("connections.details.confirm")}`}
>
<div className="connection-details-content">
<ConnectionDetailsHeader
logo={connectionDetails?.logo || KeriLogo}
label={connectionDetails?.label}
date={connectionDetails?.connectionDate}
/>
<div className="connection-details-info-block">
{updatedNotes.length ? (
<>
<h3 className="note-title">
{i18n.t("connections.details.notes")}
</h3>
{updatedNotes.map((note) => (
<ConnectionNote
data={note}
onNoteDataChange={handleUpdateNotes}
onDeleteNote={openAlert}
key={note.id}
/>
))}
</>
) : (
<i className="connection-details-info-block-nonotes">
{i18n.t("connections.details.nocurrentnotes")}
</i>
)}
</div>
<div className="connection-details-add-note">
<IonButton
shape="round"
className="primary-button"
data-testid="add-note-button"
onClick={handleAddNewNote}
>
<IonIcon
slot="icon-only"
icon={createOutline}
/>
</IonButton>
</div>
<ScrollablePageLayout
header={
<PageHeader
closeButton={true}
closeButtonLabel={`${i18n.t("connections.details.cancel")}`}
closeButtonAction={() => {
setModalIsOpen(false);
}}
actionButton={true}
actionButtonAction={confirm}
actionButtonLabel={`${i18n.t("connections.details.confirm")}`}
/>
}
>
<div className="connection-details-content">
<ConnectionDetailsHeader
logo={connectionDetails?.logo || KeriLogo}
label={connectionDetails?.label}
date={connectionDetails?.connectionDate}
/>
<div className="connection-details-info-block">
{updatedNotes.length ? (
<>
<h3 className="note-title">
{i18n.t("connections.details.notes")}
</h3>
{updatedNotes.map((note) => (
<ConnectionNote
data={note}
onNoteDataChange={handleUpdateNotes}
onDeleteNote={openAlert}
key={note.id}
/>
))}
</>
) : (
<i className="connection-details-info-block-nonotes">
{i18n.t("connections.details.nocurrentnotes")}
</i>
)}
</div>
<div className="connection-details-add-note">
<IonButton
shape="round"
className="primary-button"
data-testid="add-note-button"
onClick={handleAddNewNote}
>
<IonIcon
slot="icon-only"
icon={createOutline}
/>
</IonButton>
</div>
</PageLayout>
</div>
</div>
</ScrollablePageLayout>
<Alert
isOpen={alertDeleteNoteIsOpen}
setIsOpen={setAlertDeleteNoteIsOpen}
Expand Down

0 comments on commit c7210fc

Please sign in to comment.