Merge pull request #237 from arconnectio/development

fix: ao announcement modal + back button spacing
arconnectio · Feb 27, 2024 · 69ece39 · 69ece39
2 parents b33c152 + f82b642
commit 69ece39
Show file tree

Hide file tree

Showing 7 changed files with 276 additions and 240 deletions.
diff --git a/.changeset/large-rats-share.md b/.changeset/large-rats-share.md
@@ -0,0 +1,5 @@
+---
+"arconnect": minor
+---
+
+feat: adds ao token support
diff --git a/assets/_locales/en/messages.json b/assets/_locales/en/messages.json
@@ -1649,5 +1649,25 @@
   "setting_ao_support_description": {
     "message": "Show ao tokens in your wallet (beta)",
     "description": "ao support settings description"
+  },
+  "got_it": {
+    "message": "Got it",
+    "description": "Got it button text"
+  },
+  "display_ao_tokens": {
+    "message": "Display AO tokens in ArConnect (Beta)",
+    "description": "Display AO tokens description"
+  },
+  "ao_computer": {
+    "message": "ao.computer",
+    "description": "ao computer url"
+  },
+  "ao_announcement_text": {
+    "message": "Look out for new updates around ao in the future. To learn more visit",
+    "description": "ao announcement description text"
+  },
+  "ao_announcement_title": {
+    "message": "AO testnet is now live!",
+    "description": "ao announcement title text"
   }
 }
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "arconnect",
   "displayName": "ArConnect",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "description": "__MSG_extensionDescription__",
   "author": "th8ta",
   "packageManager": "[email protected]",
@@ -47,7 +47,7 @@
     ]
   },
   "dependencies": {
-    "@arconnect/components": "^0.2.7",
+    "@arconnect/components": "^0.2.8",
     "@arconnect/keystone-sdk": "^0.0.5",
     "@arconnect/warp-dre": "^0.0.1",
     "@arconnect/webext-bridge": "^5.0.6",

diff --git a/src/components/popup/HeadV2.tsx b/src/components/popup/HeadV2.tsx
@@ -98,13 +98,13 @@ export default function HeadV2({
       collapse={scrollDirection === "down"}
       scrolled={scrolled}
     >
-      <BackWrapper>
-        <BackButton
-          onClick={async () => {
-            if (back) await back();
-            else goBack();
-          }}
-        />
+      <BackWrapper
+        onClick={async () => {
+          if (back) await back();
+          else goBack();
+        }}
+      >
+        <BackButton />
       </BackWrapper>
 
       <PageTitle>{title}</PageTitle>
@@ -170,17 +170,12 @@ const BackWrapper = styled.div`
   position: relative;
   display: flex;
   width: max-content;
-  height: max-content;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 0;
+  height: 100%;
   cursor: pointer;
 
-  ${hoverEffect}
-
-  &::after {
-    width: 158%;
-    height: 158%;
-    border-radius: 100%;
-  }
-
   &:active svg {
     transform: scale(0.92);
   }

diff --git a/src/routes/popup/announcement.tsx b/src/routes/popup/announcement.tsx
@@ -1,13 +1,22 @@
-import { ButtonV2, ModalV2, Spacer, Text } from "@arconnect/components";
+import {
+  ButtonV2,
+  ModalV2,
+  Spacer,
+  Text,
+  type DisplayTheme
+} from "@arconnect/components";
 import aoGraphic from "url:/assets/ecosystem/ao-arconnect.svg";
 import { ExtensionStorage } from "~utils/storage";
 import { useEffect, useState } from "react";
 import browser from "webextension-polyfill";
+import { useTheme } from "~utils/theme";
 import styled from "styled-components";
 
 export const AnnouncementPopup = ({ isOpen, setOpen }) => {
   const [checked, setChecked] = useState(true);
 
+  const theme = useTheme();
+
   const handleCheckbox = async () => {
     const newState = !checked;
     setChecked(newState);
@@ -35,18 +44,17 @@ export const AnnouncementPopup = ({ isOpen, setOpen }) => {
           <img src={aoGraphic} alt="ao graphic" />
           <div>
             <HeaderText noMargin heading>
-              AO testnet is now live!
+              {browser.i18n.getMessage("ao_announcement_title")}
             </HeaderText>
             <Spacer y={1} />
             <CenterText>
-              Look out for new updates around ao in the future. To learn more
-              visit{" "}
+              {browser.i18n.getMessage("ao_announcement_text")}{" "}
               <Link
                 onClick={() =>
                   browser.tabs.create({ url: "https://ao.computer" })
                 }
               >
-                ao.computer
+                {browser.i18n.getMessage("ao_computer")}
               </Link>
             </CenterText>
             <Spacer y={1} />
@@ -83,8 +91,8 @@ export const AnnouncementPopup = ({ isOpen, setOpen }) => {
                   />
                 </UncheckedSvg>
               )}
-              <CenterText style={{ marginLeft: "24px", fontWeight: "400" }}>
-                Display AO tokens in ArConnect (Beta)
+              <CenterText displayTheme={theme} style={{ marginLeft: "24px" }}>
+                {browser.i18n.getMessage("display_ao_tokens")}
               </CenterText>
             </CheckContainer>
           </div>
@@ -97,7 +105,7 @@ export const AnnouncementPopup = ({ isOpen, setOpen }) => {
           }}
           style={{ marginTop: "43px", fontWeight: "400" }}
         >
-          Dismiss
+          {browser.i18n.getMessage("got_it")}
         </ButtonV2>
       </ContentWrapper>
     </ModalV2>
@@ -125,11 +133,12 @@ const ContentWrapper = styled.div`
 
 const CenterText = styled(Text).attrs({
   noMargin: true
-})`
+})<{ displayTheme: DisplayTheme }>`
   width: 245px;
   text-align: center;
-  color: #ffffff;
-  font-weight: 400;
+  color: ${(props) =>
+    props.theme.displayTheme === "light" ? "#191919" : "#FFFFFF"};
+  font-weight: 500;
   font-size: 11px;
   line-height: 16px;
   align-self: stretch;
@@ -175,7 +184,9 @@ const UncheckedSvg = styled.svg`
   flex-grow: 0;
 `;
 
-const HeaderText = styled(Text)`
+const HeaderText = styled(Text)<{ displayTheme: DisplayTheme }>`
   font-size: 18px;
   font-weight: 500;
+  color: ${(props) =>
+    props.theme.displayTheme === "light" ? "#191919" : "#FFFFFF"};
 `;