updated website screen

getAlby · Dec 20, 2021 · 2cc10da · 2cc10da
1 parent 53fe379
commit 2cc10da
Show file tree

Hide file tree

Showing 27 changed files with 512 additions and 23 deletions.
diff --git a/src/app/components/FlashList/index.tsx b/src/app/components/FlashList/index.tsx
@@ -0,0 +1,38 @@
+import { classNames } from "../../utils/index";
+import flash from "/static/assets/icons/flash.svg";
+type Props = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+  prefix: string;
+  suffix?: string;
+  subtitle?: string;
+  used?: boolean;
+  image?: string;
+};
+
+export default function FlashList({
+  prefix,
+  suffix,
+  subtitle,
+  used = false,
+  image = flash,
+}: Props) {
+  return (
+    <div>
+      <div
+        className={classNames(
+          used
+            ? "flex space-x-2  font-serif font-medium text-xl"
+            : `flex space-x-2 font-serif font-medium text-lg text-[#3F3F3F] my-5`
+        )}
+      >
+        <span>{prefix}</span>
+        <img src={image} className="w-6 h" />
+        <span>{suffix}</span>
+      </div>
+      <div className="my-1">
+        <span className="font-serif text-base font-normal text-light-gray-bitcoin2">
+          {subtitle}
+        </span>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/components/LinkButton/index.tsx b/src/app/components/LinkButton/index.tsx
@@ -1,3 +1,4 @@
+import { useNavigate } from "react-router-dom";
 import { Link } from "react-router-dom";
 
 type Props = {
@@ -8,25 +9,27 @@ type Props = {
 };
 
 export default function LinkButton({ to, title, description, logo }: Props) {
+  const history = useNavigate();
   return (
-    <Link to={to} className="block">
-      <div className="p-4 bg-white h-96 text-center shadow-lg overflow-hidden border-b border-gray-200 rounded-lg hover:bg-gray-50 transition duration-200">
-        <div className="my-12">
-          <img
-            src={logo}
-            alt="logo"
-            width="135px"
-            height="110px"
-            className="inline rounded-3xl "
-          />
-        </div>
-        <div className="">
-          <span className="block text-lg">{title}</span>
-          {description && (
-            <span className="text-sm text-gray-500">{description}</span>
-          )}
-        </div>
+    <div
+      className="p-4 bg-white h-96 text-center shadow-lg overflow-hidden border-b border-gray-200 rounded-lg hover:bg-gray-50 transition duration-200"
+      onClick={() => history(to)}
+    >
+      <div className="my-12">
+        <img
+          src={logo}
+          alt="logo"
+          width="135px"
+          height="110px"
+          className="inline rounded-3xl "
+        />
       </div>
-    </Link>
+      <div className="">
+        <span className="block text-lg">{title}</span>
+        {description && (
+          <span className="text-sm text-gray-500">{description}</span>
+        )}
+      </div>
+    </div>
   );
 }
diff --git a/src/app/components/OtherCard/index.tsx b/src/app/components/OtherCard/index.tsx
@@ -0,0 +1,39 @@
+import { Link } from "react-router-dom";
+import { classNames } from "../../utils/index";
+
+type Props = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+  title: string;
+  logo: string;
+  subtitle: string;
+  to: string;
+  shadow?: boolean;
+};
+export default function OtherCard({
+  title,
+  subtitle,
+  logo,
+  to,
+  shadow = false,
+}: Props) {
+  return (
+    <a href={to} target="_blank" rel="noreferrer">
+      <div className="bg-white shadow-md flex space-x-3 h-44 px-4 rounded-lg pt-7 hover:bg-gray-50 cursor-pointer w-full ">
+        <img
+          src={logo}
+          alt="image"
+          className={classNames(
+            shadow
+              ? "h-14 w-14 rounded-xl shadow-md py-3 px-3"
+              : `h-14 w-14 rounded-xl`
+          )}
+        />
+        <div>
+          <h2 className="font-medium  font-serif text-base">{title}</h2>
+          <p className="font-serif text-sm font-normal text-light-gray-bitcoin2">
+            {subtitle}
+          </p>
+        </div>
+      </div>
+    </a>
+  );
+}
diff --git a/src/app/components/UserMenu/index.tsx b/src/app/components/UserMenu/index.tsx
@@ -45,7 +45,7 @@ export default function UserMenu() {
       <Menu.List position="right">
         <Menu.ItemButton
           onClick={() => {
-            openOptions("publishers");
+            openOptions("websites");
           }}
         >
           <TransactionsIcon className="h-5 w-5 mr-2 text-gray-500" />

diff --git a/src/app/components/WebsitesUsedCard/WebsitesUsedCard.stories.tsx b/src/app/components/WebsitesUsedCard/WebsitesUsedCard.stories.tsx
diff --git a/src/app/components/WebsitesUsedCard/index.tsx b/src/app/components/WebsitesUsedCard/index.tsx
@@ -0,0 +1,28 @@
+type Props = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+  logo: string;
+  title: string;
+  url: string;
+  payment: string;
+};
+
+export default function UsedCard({ logo, title, url, payment }: Props) {
+  return (
+    <div className="bg-white shadow-lg w-full rounded-lg h-28 hover:bg-gray-50 my-3  cursor-pointer">
+      <div className="flex px-5 justify-between py-6">
+        <div className="flex items-center space-x-2">
+          <img src={logo} alt="image" className="w-16 rounded-full" />
+          <div>
+            <h4 className="text-lg text-black font-serif">{title}</h4>
+            <p className="text-base font-serif text-light-gray-bitcoin2 m-0 p-0">
+              {" "}
+              {url} <span>{payment} payment</span>
+            </p>
+          </div>
+        </div>
+        <div className=" flex items-center">
+          <img src="assets/icons/arrow-right.svg" alt="image" className="w-2" />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/router/Options/Options.jsx b/src/app/router/Options/Options.jsx
@@ -14,6 +14,7 @@ import Send from "../../screens/Send";
 import Receive from "../../screens/Receive";
 import Settings from "../../screens/Settings";
 import Unlock from "../../screens/Unlock";
+import Websites from "../../screens/websites";
 
 function Options() {
   return (
@@ -28,10 +29,10 @@ function Options() {
               </RequireAuth>
             }
           >
-            <Route index element={<Navigate to="/publishers" replace />} />
-            <Route path="publishers">
+            <Route index element={<Navigate to="/websites" replace />} />
+            <Route path="websites">
               <Route path=":id" element={<Publisher />} />
-              <Route index element={<Publishers />} />
+              <Route index element={<Websites />} />
             </Route>
             <Route path="send" element={<Send />} />
             <Route path="receive" element={<Receive />} />
@@ -87,7 +88,7 @@ const Layout = () => {
         }
         onAccountSwitch={getAccountInfo}
       >
-        <Navbar.Link href="/publishers">Websites</Navbar.Link>
+        <Navbar.Link href="/websites">Websites</Navbar.Link>
         <Navbar.Link href="/send">Send</Navbar.Link>
         <Navbar.Link href="/receive">Receive</Navbar.Link>
         <Navbar.Link href="/settings">Settings</Navbar.Link>