Skip to content

Commit

Permalink
fix: add spinner to App.tsx for FullpageScanner and hide otherConnect…
Browse files Browse the repository at this point in the history 
…ions
  • Loading branch information
@sdisalvo-crd
sdisalvo-crd committed May 8, 2024
1 parent 5015e3a commit 740d93e
Show file tree
Hide file tree
Showing 5 changed files with 106 additions and 80 deletions.
21 changes: 20 additions & 1 deletion src/ui/App.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,28 @@ body {
&.full-page-scanner {
#root
ion-app
> *:not(.qr-code-scanner-full-page):not(.scanner-input-modal) {
> *:not(.qr-code-scanner-full-page):not(.scanner-input-modal):not(
.scanner-spinner-container
) {
display: none;
}

.scanner-spinner-container {
z-index: 1000;
position: absolute;
top: 0;
left: 0;
display: flex;
height: 100%;
width: 100%;
align-items: center;
justify-content: center;
background: rgba(3, 3, 33, 0.2);
}
}

&:not(.full-page-scanner) .scanner-spinner-container {
display: none;
}

&.scanner-active {
Expand Down
9 changes: 8 additions & 1 deletion src/ui/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,11 +102,18 @@ const App = () => {
return (
<>
{isPreviewMode ? <MobileHeaderPreview /> : null}
{showScan && (
{showScan ? (
<FullPageScanner
showScan={showScan}
setShowScan={setShowScan}
/>
) : (
<div
className="scanner-spinner-container"
data-testid="scanner-spinner-container"
>
<IonSpinner name="circular" />
</div>
)}
<Routes />
</>
Expand Down
74 changes: 35 additions & 39 deletions src/ui/components/CreateIdentifier/components/IdentifierStage4.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -123,46 +123,42 @@ const IdentifierStage4 = ({
</IonItem>
</IonCard>
</div>
{otherIdentifierContacts.length && (
<div>
<div className="identifier-list-title">
{i18n.t("createidentifier.confirm.selectedmembers")}
</div>
<IonCard>
{otherIdentifierContacts.map((connection, index) => {
return (
<IonItem
key={index}
className="identifier-list-item"
>
<IonLabel>
<img
src={connection?.logo || KeriLogo}
className="connection-logo"
alt="connection-logo"
data-testid={`identifier-stage-3-connection-logo-${index}`}
/>
<span className="connection-name">
{connection.label}
</span>
<IonIcon
aria-hidden="true"
icon={pencilOutline}
slot="end"
onClick={() =>
setState((prevState: IdentifierStageProps) => ({
...prevState,
identifierCreationStage: 2,
}))
}
/>
</IonLabel>
</IonItem>
);
})}
</IonCard>
<div>
<div className="identifier-list-title">
{i18n.t("createidentifier.confirm.selectedmembers")}
</div>
)}
<IonCard>
{otherIdentifierContacts.map((connection, index) => {
return (
<IonItem
key={index}
className="identifier-list-item"
>
<IonLabel>
<img
src={connection?.logo || KeriLogo}
className="connection-logo"
alt="connection-logo"
data-testid={`identifier-stage-3-connection-logo-${index}`}
/>
<span className="connection-name">{connection.label}</span>
<IonIcon
aria-hidden="true"
icon={pencilOutline}
slot="end"
onClick={() =>
setState((prevState: IdentifierStageProps) => ({
...prevState,
identifierCreationStage: 2,
}))
}
/>
</IonLabel>
</IonItem>
);
})}
</IonCard>
</div>
<div>
<div className="identifier-list-title">
{i18n.t("createidentifier.confirm.treshold")}
Expand Down
2 changes: 2 additions & 0 deletions src/ui/pages/FullPageScanner/FullPageScanner.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,8 @@
position: absolute;
top: 0;
left: 0;
width: 100%;
margin: 0;
}

.qr-code-scanner-icon {
Expand Down
80 changes: 41 additions & 39 deletions src/ui/pages/IncomingRequest/components/MultiSigRequestStageOne.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,45 +108,47 @@ const MultiSigRequestStageOne = ({
</IonList>
</IonCard>
</div>
<div className="multisig-request-section">
<h4>{i18n.t("request.multisig.stageone.othermembers")}</h4>
<IonCard className="multisig-request-details">
<IonList lines="none">
{requestData.multisigIcpDetails?.otherConnections.map(
(connection, index) => {
return (
<IonItem
key={index}
className="multisig-request-item"
data-testid={`multisig-connection-${index}`}
>
<IonGrid>
<IonRow>
<IonCol
size="1.25"
className="multisig-connection-logo"
>
<img
data-testid={`other-multisig-connection-logo-${index}`}
src={connection.logo || KeriLogo}
alt="multisig-connection-logo"
/>
</IonCol>
<IonCol
size="10.35"
className="multisig-connection-info"
>
<IonLabel>{connection.label}</IonLabel>
</IonCol>
</IonRow>
</IonGrid>
</IonItem>
);
}
)}
</IonList>
</IonCard>
</div>
{!!requestData.multisigIcpDetails?.otherConnections.length && (
<div className="multisig-request-section">
<h4>{i18n.t("request.multisig.stageone.othermembers")}</h4>
<IonCard className="multisig-request-details">
<IonList lines="none">
{requestData.multisigIcpDetails?.otherConnections.map(
(connection, index) => {
return (
<IonItem
key={index}
className="multisig-request-item"
data-testid={`multisig-connection-${index}`}
>
<IonGrid>
<IonRow>
<IonCol
size="1.25"
className="multisig-connection-logo"
>
<img
data-testid={`other-multisig-connection-logo-${index}`}
src={connection.logo || KeriLogo}
alt="multisig-connection-logo"
/>
</IonCol>
<IonCol
size="10.35"
className="multisig-connection-info"
>
<IonLabel>{connection.label}</IonLabel>
</IonCol>
</IonRow>
</IonGrid>
</IonItem>
);
}
)}
</IonList>
</IonCard>
</div>
)}
<div className="multisig-request-section">
<h4>{i18n.t("request.multisig.stageone.threshold")}</h4>
<IonCard className="multisig-request-details">
Expand Down

0 comments on commit 740d93e

Please sign in to comment.