feat: new main popup buttons (#2939)

* feat: new buttons for homescreen * fix: remove obsolete surface colors * fix: migrate to children instead of title * fix: font color
getAlby · Dec 18, 2023 · 46f0a32 · 46f0a32
1 parent a889455
commit 46f0a32
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 33 deletions.
diff --git a/src/app/screens/Home/DefaultView/index.tsx b/src/app/screens/Home/DefaultView/index.tsx
@@ -1,8 +1,4 @@
-import {
-  ArrowRightIcon,
-  ReceiveIcon,
-  SendIcon,
-} from "@bitcoin-design/bitcoin-icons-react/filled";
+import { ArrowRightIcon } from "@bitcoin-design/bitcoin-icons-react/filled";
 import Button from "@components/Button";
 import Loading from "@components/Loading";
 import TransactionsTable from "@components/TransactionsTable";
@@ -108,40 +104,40 @@ const DefaultView: FC<Props> = (props) => {
                 toast.success(tCommon("actions.copied_to_clipboard"));
               }}
             >
-              {accountLoading && (
-                <>
-                  ⚡️&nbsp;
-                  <SkeletonLoader className="w-32" />
-                </>
-              )}
-              {!accountLoading && (
-                <>
-                  <span>⚡️ {lightningAddress}</span>
-                </>
+              <img src="assets/icons/popicons/bolt.svg" className="mr-1" />
+              {!accountLoading ? (
+                lightningAddress
+              ) : (
+                <SkeletonLoader className="w-32" />
               )}
             </a>
           </div>
         )}
-        <div className="flex mb-4 space-x-4">
-          <Button
-            fullWidth
-            icon={<ReceiveIcon className="w-6 h-6" />}
-            label={tCommon("actions.receive")}
-            direction="column"
+        <div className="flex mb-4 space-x-3 justify-between">
+          <HomeButton
+            icon={<img src="assets/icons/popicons/receive.svg" />}
             onClick={() => {
               navigate("/receive");
             }}
-          />
-
-          <Button
-            fullWidth
-            icon={<SendIcon className="w-6 h-6" />}
-            label={tCommon("actions.send")}
-            direction="column"
+          >
+            {tCommon("actions.receive")}
+          </HomeButton>
+          <HomeButton
+            icon={<img src="assets/icons/popicons/send.svg" />}
             onClick={() => {
               navigate("/send");
             }}
-          />
+          >
+            {tCommon("actions.send")}
+          </HomeButton>
+          <HomeButton
+            icon={<img src="assets/icons/popicons/apps.svg" />}
+            onClick={() => {
+              window.open(`https://getalby.com/discover`, "_blank");
+            }}
+          >
+            {tCommon("apps")}
+          </HomeButton>
         </div>
 
         {isBlockedUrl && (
@@ -192,4 +188,22 @@ const DefaultView: FC<Props> = (props) => {
   );
 };
 
+const HomeButton = ({
+  icon,
+  onClick,
+  children,
+}: {
+  icon: React.ReactNode;
+  children: React.ReactNode;
+  onClick: () => void;
+}) => (
+  <button
+    className="bg-white dark:bg-surface-01dp hover:bg-amber-50 dark:hover:bg-surface-02dp text-gray-800 dark:text-neutral-200 rounded-xl border border-gray-300 dark:border-neutral-800 hover:border-primary dark:hover:border-primary flex flex-col flex-1 justify-center items-center pt-[18px] pb-3 px-[14px] text-xs font-medium gap-2"
+    onClick={onClick}
+  >
+    {icon}
+    {children}
+  </button>
+);
+
 export default DefaultView;
diff --git a/src/i18n/locales/en/translation.json b/src/i18n/locales/en/translation.json
@@ -970,6 +970,7 @@
     "balance": "Balance",
     "or": "or",
     "website": "Website",
+    "apps": "Apps",
     "actions": {
       "back": "Back",
       "delete": "Delete",

diff --git a/static/assets/icons/popicons/apps.svg b/static/assets/icons/popicons/apps.svg
diff --git a/static/assets/icons/popicons/bolt.svg b/static/assets/icons/popicons/bolt.svg
diff --git a/static/assets/icons/popicons/receive.svg b/static/assets/icons/popicons/receive.svg
diff --git a/static/assets/icons/popicons/send.svg b/static/assets/icons/popicons/send.svg
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -53,13 +53,9 @@ module.exports = {
         "surface-00dp": surfaceColor,
         "surface-01dp": lighten(surfaceColor, 5),
         "surface-02dp": lighten(surfaceColor, 7),
-        "surface-03dp": lighten(surfaceColor, 8),
-        "surface-04dp": lighten(surfaceColor, 9),
-        "surface-06dp": lighten(surfaceColor, 11),
         "surface-08dp": lighten(surfaceColor, 12),
         "surface-12dp": lighten(surfaceColor, 14),
         "surface-16dp": lighten(surfaceColor, 15),
-        "surface-24dp": lighten(surfaceColor, 16),
       },
     },
     backgroundImage: (theme) => ({