Merge pull request #30 from 2060-io/specs-qr-section-design

feat: QR secton design /progress)
2060-io · Oct 5, 2024 · 7c87df1 · 7c87df1
2 parents d1ec7b7 + e991266
commit 7c87df1
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 20 deletions.
diff --git a/app/app/components/utils/QRCodeWithLogo.tsx b/app/app/components/utils/QRCodeWithLogo.tsx
@@ -0,0 +1,47 @@
+import Image from 'next/image'
+import { QRCodeSVG } from 'qrcode.react'
+import React from 'react'
+
+interface QRCodeWithLogoProps {
+  value: string
+  size?: number
+  logoUrl: string
+  logoWidth?: number
+  logoHeight?: number
+}
+
+const QRCodeWithLogo: React.FC<QRCodeWithLogoProps> = ({
+  value,
+  size = 256,
+  logoUrl,
+  logoWidth = 64,
+  logoHeight = 64,
+}) => {
+  return (
+    <div style={{ position: 'relative', width: size, height: size }}>
+      <QRCodeSVG
+        value={value}
+        size={size}
+        bgColor={'#ffffff'}
+        fgColor={'#000000'}
+        level={'H'}
+        includeMargin={false}
+      />
+      <div
+        style={{
+          position: 'absolute',
+          left: '50%',
+          top: '50%',
+          transform: 'translate(-50%, -50%)',
+          backgroundColor: 'white',
+          padding: 5,
+          borderRadius: 5,
+        }}
+      >
+        <Image src={logoUrl} width={logoWidth} height={logoHeight} alt="Logo" />
+      </div>
+    </div>
+  )
+}
+
+export default QRCodeWithLogo
diff --git a/app/app/page.tsx b/app/app/page.tsx
@@ -3,7 +3,6 @@
 import Image from 'next/image'
 import { usePathname } from 'next/navigation'
 import React, { useEffect, useState } from 'react'
-import QRCode from 'react-qr-code'
 
 import loadTranslations from '../utils/loadTranslations'
 
@@ -15,6 +14,7 @@ import SectionProofOfTrust from './components/sections/sectionProofOfTrust'
 import SectionStandardsBuilt from './components/sections/sectionStandardsBuilt'
 import SectionWhatIs from './components/sections/sectionWhatIs'
 import { Translations } from './components/utils'
+import QRCodeWithLogo from './components/utils/QRCodeWithLogo'
 
 interface OobData {
   imageUrl: string
@@ -97,12 +97,10 @@ export default function HomePage() {
 
         {deviceType !== 'mobile' && (
           <section className="container mx-auto my-8 md:my-12 lg:my-16 flex flex-col items-center justify-center text-center">
-            <div className="flex justify-center mb-6">
-              <QRCode value={url} />
+            <div className="w-[315px] h-[315px] flex justify-center items-center mb-6 bg-white border-solid border-2 rounded-2xl border-gray-300">
+              <QRCodeWithLogo value={url} logoUrl="images/ico-hologram.png" logoHeight={18} logoWidth={18} />
             </div>
-            <p className="text-base md:text-lg lg:text-xl leading-relaxed text-justify max-w-lg mb-6">
-              {translations?.continue_qr}
-            </p>
+            <p className="font-bold text-xl">{translations?.continue_qr}</p>
           </section>
         )}
 

diff --git a/app/package.json b/app/package.json
@@ -21,9 +21,9 @@
     "eslint-plugin-prettier": "^5.0.0",
     "next": "14.2.10",
     "prettier": "^3.2.5",
+    "qrcode.react": "^4.0.1",
     "react": "^18",
-    "react-dom": "^18",
-    "react-qr-code": "^2.0.15"
+    "react-dom": "^18"
   },
   "devDependencies": {
     "@types/node": "^20",

diff --git a/app/yarn.lock b/app/yarn.lock
@@ -2334,10 +2334,10 @@ punycode@^2.1.0:
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.3.1.tgz#027422e2faec0b25e1549c3e1bd8309b9133b6e5"
   integrity sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==
 
-qr.js@0.0.0:
-  version "0.0.0"
-  resolved "https://registry.yarnpkg.com/qr.js/-/qr.js-0.0.0.tgz#cace86386f59a0db8050fa90d9b6b0e88a1e364f"
-  integrity sha512-c4iYnWb+k2E+vYpRimHqSu575b1/wKl4XFeJGpFmrJQz5I88v9aY2czh7s0w36srfCM1sXgC/xpoJz5dJfq+OQ==
+qrcode.react@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/qrcode.react/-/qrcode.react-4.0.1.tgz#1caf1d3f45bf1b6d9cf800cb0f0d671f6a89e68f"
+  integrity sha512-Lpj0tPBn561WiQ3QQWXbkx8xTtB8BZkJeMZWLJIL8iaPBCoWzW1IpCeU3gY5MDqsb0+efCvEGkl9O0naP64crA==
 
 queue-microtask@^1.2.2:
   version "1.2.3"
@@ -2357,14 +2357,6 @@ react-is@^16.13.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
-react-qr-code@^2.0.15:
-  version "2.0.15"
-  resolved "https://registry.yarnpkg.com/react-qr-code/-/react-qr-code-2.0.15.tgz#fbfc12952c504bcd64275647e9d1ea63251742ce"
-  integrity sha512-MkZcjEXqVKqXEIMVE0mbcGgDpkfSdd8zhuzXEl9QzYeNcw8Hq2oVIzDLWuZN2PQBwM5PWjc2S31K8Q1UbcFMfw==
-  dependencies:
-    prop-types "^15.8.1"
-    qr.js "0.0.0"
-
 react@^18:
   version "18.3.1"
   resolved "https://registry.yarnpkg.com/react/-/react-18.3.1.tgz#49ab892009c53933625bd16b2533fc754cab2891"