chore: misc changes in UI

GaloyMoney · Feb 24, 2024 · 80a7ed8 · 80a7ed8
1 parent 7563c17
commit 80a7ed8
Show file tree

Hide file tree

Showing 17 changed files with 30 additions and 113 deletions.
diff --git a/apps/pay/app/globals.css b/apps/pay/app/globals.css
@@ -168,13 +168,12 @@ body {
 .print-paycode-button {
   padding: 9px 32px;
   border-radius: 10em;
-  background: var(--primary);
+  background: var(--primaryColor);
   border: none;
   color: #fff;
   font-weight: 600;
 }
 
-
 :root {
   --transparent: rgba(0, 0, 0, 0);
   --white: #ffffff;
@@ -186,7 +185,7 @@ body {
   --blue: #3050c4;
   --orange: #ff7e1c;
   --sky: #c3ccff;
-  --primary: #fc5805;
+  --primaryColor: #fc5805;
   --primaryColorDisabled: #c54404;
   --primary3: #010101;
   --primary4: #fe990d;
@@ -205,4 +204,4 @@ body {
   --error: #dc2626;
   --error9: #fee2e2;
   --warning: #f59e0b;
-}
+}
diff --git a/apps/pay/app/layout.tsx b/apps/pay/app/layout.tsx
@@ -2,10 +2,10 @@ import type { Metadata } from "next"
 import { Inter_Tight } from "next/font/google"
 
 // eslint-disable-next-line import/no-unassigned-import
-import "bootstrap/dist/css/bootstrap.css"
+import "./globals.css"
 
 // eslint-disable-next-line import/no-unassigned-import
-import "./globals.css"
+import "bootstrap/dist/css/bootstrap.css"
 
 import Head from "next/head"
 import Script from "next/script"

diff --git a/apps/pay/app/ssr-client.ts b/apps/pay/app/ssr-client.ts
@@ -14,6 +14,7 @@ export const { getClient } = registerApolloClient(() => {
       uri: getClientSideGqlConfig().coreGqlUrl,
       fetchOptions: { cache: "no-store" },
 
+      // TODO uncomment this we start using otel
       //   fetch: (uri, options) => {
       //     const headersWithTrace = options?.headers || {}
       //     propagation.inject(context.active(), headersWithTrace)

diff --git a/apps/pay/components/input/index.tsx b/apps/pay/components/input/index.tsx
diff --git a/apps/pay/components/layouts/app-layout.module.css b/apps/pay/components/layouts/app-layout.module.css
@@ -12,11 +12,11 @@
   top: 0;
   left: 0;
   width: 100%;
-  border-bottom: 1.5px solid var(--primary);
+  border-bottom: 1.5px solid var(--lightGrey);
   display: flex;
   justify-content: space-between;
   align-items: center;
-   z-index: 1;
+  z-index: 1;
 }
 
 .nav_home_content {
@@ -41,7 +41,7 @@
   box-sizing: border-box;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 768px), (max-height: 720px) {
   .nav_bar {
     border-bottom: none;
   }

diff --git a/apps/pay/components/memo/index.tsx b/apps/pay/components/memo/index.tsx
@@ -3,6 +3,8 @@ import { Modal } from "react-bootstrap"
 
 import { useSearchParams } from "next/navigation"
 
+import Image from "next/image"
+
 import { ACTIONS, ACTION_TYPE } from "../../app/reducer"
 
 import styles from "./memo.module.css"
@@ -53,42 +55,7 @@ const Memo = ({ state, dispatch }: Props) => {
           disabled={state.createdInvoice}
         >
           {!state.createdInvoice && !state.memo ? "Add note" : null}
-          <svg
-            width="19"
-            height="19"
-            viewBox="0 0 19 19"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <g clipPath="url(#clip0_1220_19217)">
-              <path
-                d="M17.08 2.29526C16.8245 2.04087 16.5212 1.83961 16.1875 1.70313C15.8538 1.56664 15.4963 1.49762 15.1358 1.50006C14.7752 1.5025 14.4188 1.57635 14.0869 1.71735C13.7551 1.85834 13.4545 2.06368 13.2025 2.32151L2.3275 13.1965L1 18.3753L6.17875 17.047L17.0538 6.17201C17.3116 5.92011 17.5171 5.61959 17.6581 5.28782C17.7991 4.95605 17.873 4.59961 17.8755 4.23911C17.8779 3.87861 17.8089 3.52121 17.6723 3.18756C17.5358 2.85391 17.3345 2.55063 17.08 2.29526V2.29526Z"
-                stroke={"#232222"}
-                strokeWidth="1.5"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              />
-              <path
-                d="M13 2.5L17 6.5"
-                stroke={"#232222"}
-                strokeWidth="1.125"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              />
-              <path
-                d="M3 13.5L6 16.5"
-                stroke={"#232222"}
-                strokeWidth="1.125"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              />
-            </g>
-            <defs>
-              <clipPath id="clip0_1220_19217">
-                <rect width="19" height="19" fill="white" />
-              </clipPath>
-            </defs>
-          </svg>
+          <Image src="/icons/pencil.svg" alt="Add note" width={20} height={20}></Image>
         </button>
       </div>
       {openModal && (

diff --git a/apps/pay/components/memo/memo.module.css b/apps/pay/components/memo/memo.module.css
@@ -76,7 +76,7 @@
   width: 100%;
   padding: 0.5rem 1.5rem;
   font-weight: 500;
-  background: var(--primary);
+  background: var(--primaryColor);
   color: #fff;
 }
 

diff --git a/apps/pay/components/parse-pos-payment/index.tsx b/apps/pay/components/parse-pos-payment/index.tsx
@@ -75,14 +75,7 @@ function ParsePayment({
 
   // Update Params From Current Amount
   const handleAmountChange = (skipRouterPush?: boolean) => {
-    let amount = state.currentAmount
-    if (currencyMetadata.fractionDigits === 0) {
-      const safeAmt = safeAmount(amount)
-      amount =
-        currencyMetadata.fractionDigits === 0
-          ? safeAmt.toFixed()
-          : safeAmt.toFixed(currencyMetadata.fractionDigits)
-    }
+    const amount = state.currentAmount
     if (isNaN(Number(amount))) return
 
     const formattedValue = formatValue({

diff --git a/apps/pay/components/parse-pos-payment/parse-payment.module.css b/apps/pay/components/parse-pos-payment/parse-payment.module.css
@@ -103,7 +103,7 @@
 
 .pay_btn,
 .pay_new_btn {
-  background: var(--primary);
+  background: var(--primaryColor);
   color: #fff;
   font-weight: 600;
   width: 220px;

diff --git a/apps/pay/components/payment-outcome/payment-outcome.module.css b/apps/pay/components/payment-outcome/payment-outcome.module.css
@@ -32,7 +32,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  background: var(--primary);
+  background: var(--primaryColor);
   border-radius: 10em;
   border: none;
   outline: none;

diff --git a/apps/pay/components/share/share-pop-up.tsx b/apps/pay/components/share/share-pop-up.tsx
@@ -1,5 +1,6 @@
 import copy from "copy-to-clipboard"
 import React, { type FC, useState } from "react"
+import Image from "next/image"
 
 import styles from "./share.module.css"
 
@@ -88,22 +89,7 @@ const SharePopup: FC<Props> = ({
             ) : (
               <div className={styles.select_share_type}>
                 <button onClick={onClose} className={styles.close_btn}>
-                  <div aria-hidden="true">
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      width="24"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      fill="currentColor"
-                    >
-                      <g id="close">
-                        <path
-                          id="x"
-                          d="M18.717 6.697l-1.414-1.414-5.303 5.303-5.303-5.303-1.414 1.414 5.303 5.303-5.303 5.303 1.414 1.414 5.303-5.303 5.303 5.303 1.414-1.414-5.303-5.303z"
-                        />
-                      </g>
-                    </svg>
-                  </div>
+                  <Image src="/icons/close.svg" alt="close icon" width="24" height="24" />
                 </button>
                 <button onClick={copyUrlToClipboard}>Link</button>
                 <button onClick={copyImageToClipboard}>QR code</button>

diff --git a/apps/pay/components/sidebar/index.tsx b/apps/pay/components/sidebar/index.tsx
@@ -162,7 +162,7 @@ export function SideBar({ username }: { username: string }) {
             <div className="flex flex-col items-center justify-center gap-3 mt-2">
               <button
                 onClick={shareCurrentUrl}
-                className="bg-[var(--primary)] rounded-full p-2 text-white w-40 flex justify-center align-content-center gap-2"
+                className="bg-[var(--primaryColor)] rounded-full p-2 text-white w-40 flex justify-center align-content-center gap-2"
               >
                 <Image
                   src="/icons/share-icon-white.svg"

diff --git a/apps/pay/package.json b/apps/pay/package.json
@@ -16,7 +16,6 @@
     "@apollo/experimental-nextjs-app-support": "^0.8.0",
     "@galoymoney/client": "^0.2.2",
     "@radix-ui/react-dialog": "^1.0.5",
-    "@radix-ui/react-slot": "^1.0.2",
     "@t3-oss/env-nextjs": "^0.6.1",
     "bech32": "^2.0.0",
     "bitcoinjs-lib": "5.0.5",

diff --git a/apps/pay/public/icons/close.svg b/apps/pay/public/icons/close.svg
diff --git a/apps/pay/public/icons/pencil.svg b/apps/pay/public/icons/pencil.svg
diff --git a/apps/pay/utils/utils.ts b/apps/pay/utils/utils.ts
@@ -35,10 +35,10 @@ export function parseQueryAmount(query: ParsedUrlQuery) {
 export function parseDisplayCurrency(searchParams: ReadonlyURLSearchParams) {
   // to support display search Param using `display`
   const display =
-    searchParams?.get("display") ??
     searchParams?.get("displayCurrency") ??
-    localStorage.getItem("display") ??
+    searchParams?.get("display") ??
     localStorage.getItem("displayCurrency") ??
+    localStorage.getItem("display") ??
     "USD"
 
   return display

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml