Merge pull request #22 from uwcirg/24-06-18-changes

24 06 18 changes
uwcirg · Jun 28, 2024 · 2a47f35 · 2a47f35
2 parents c5515d1 + 0d094d4
commit 2a47f35
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 24 deletions.
diff --git a/src/lib/CopyButton.svelte b/src/lib/CopyButton.svelte
@@ -16,11 +16,11 @@
         copyNotice = 'Copied!';
         setTimeout(() => {
             copyNotice = copyNoticePrev;
-        }, 1500);
+        }, 8000);
     }
 </script>
 {#if copyNotice}
-    <Button size="lg" color="success" class="p-3" disabled>
+    <Button size="lg" color="secondary" class="p-3" disabled>
         <Icon name="clipboard" />
         {copyNotice}
     </Button>

diff --git a/src/lib/HealthLinkLTT.svelte b/src/lib/HealthLinkLTT.svelte
@@ -138,21 +138,6 @@
     </Alert>
     {/if}
     <h3>Share Report</h3>
-    {#await href then href}
-    <p>Here is the link to your Report that you can copy and share with others:</p>
-    <Row class="justify-content-center mt-2">
-      <Col xs="auto" class="mb-2">
-        <CopyButton href={href} />
-      </Col>
-    </Row>
-    <Row class="px-3 my-2">
-      <Card style="max-width: 100%">
-        <CardBody class="p-2">
-          <span><em>{href}</em></span>
-        </CardBody>
-      </Card>
-    </Row>
-    {/await}
     <p>Select the way you want to share your Report to see how:</p>
     <Row class="d-flex justify-content-center">
       <Button
@@ -183,7 +168,8 @@
         <strong id="qr-label">QR Code</strong>
       </Button>
     </Row>
-    <Row class="pt-2 pb-3" style="border-bottom: 2px solid rgb(190, 190, 190);">
+    {#if instructions === 'email' || instructions === 'text' || instructions === 'qr'}
+    <Row class="pt-2 pb-3">
     {#if instructions === 'email'}
       <Card style="max-width: 100%">
         <CardBody class="p-3">
@@ -283,6 +269,18 @@
       </Card>
     {/if}
     </Row>
+    {/if}
+    {#await href then href}
+    <Row class="mt-1">
+      <p>Here is the link to your Report that you can copy and share with others:</p>
+    </Row>
+    <Row class="justify-content-center">
+      <Col xs="auto" class="mb-2">
+        <CopyButton href={href} />
+      </Col>
+    </Row>
+    {/await}
+
     <Row style="margin-bottom: 10px">
       <h3 class="mt-4">Frequently Asked Questions</h3>
     </Row>

diff --git a/static/global.css b/static/global.css
@@ -299,7 +299,7 @@ table.responses {
 }
 .btn-primary {
     background-image: none !important;
-    background-color: var(--secondary-color) !important;
+    background-color: var(--primary-color) !important;
     color: var(--btn-bg-color) !important;
     border: 0 !important;
     transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms !important;
@@ -310,8 +310,8 @@ table.responses {
     &:hover, &:active {
         background-image: none !important;
         color: var(--btn-bg-color) !important;
-        background-color: var(--highlight-dark-color) !important;
-        border-color: var(--highlight-dark-color) !important;
+        background-color: var(--primary-color-light) !important;
+        border-color: var(--primary-color-light) !important;
         outline: none !important;
         i {
             color:  var(--btn-bg-color) !important;
@@ -320,7 +320,7 @@ table.responses {
 }
 .btn-secondary {
     background-image: none !important;
-    background-color: var(--primary-color) !important;
+    background-color: var(--secondary-color) !important;
     color: var(--btn-bg-color) !important;
     border: 0 !important;
     transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms !important;
@@ -331,8 +331,8 @@ table.responses {
     &:hover, &:active {
         background-image: none !important;
         color: var(--btn-bg-color) !important;
-        background-color: var(--primary-color-light) !important;
-        border-color: var(--primary-color-light) !important;
+        background-color: var(--secondary-color-dark) !important;
+        border-color: var(--secondary-color-dark) !important;
         outline: none !important;
         i {
             color:  var(--btn-bg-color) !important;