footer css

lerna.json

@@ -1,6 +1,6 @@
 {
   "lerna": "2.10.1",
   "packages": ["packages/*"],
-  "version": "2.4.1",
+  "version": "2.4.2",
   "npmClient": "npm"
 }

packages/iotex-react-block-producers/package.json

@@ -1,7 +1,7 @@
 {
   "name": "iotex-react-block-producers",
   "license": "MIT",
-  "version": "2.4.1",
+  "version": "2.4.2",
   "description": "block producer table",
   "main": "./lib/index.js",
   "files": [

packages/iotex-react-footer/package.json

@@ -1,7 +1,7 @@
 {
   "name": "iotex-react-footer",
   "license": "MIT",
-  "version": "2.4.1",
+  "version": "2.4.2",
   "description": "field_description",
   "main": "./lib/index.js",
   "files": [

packages/iotex-react-footer/src/footer.tsx

@@ -129,8 +129,10 @@ export function Footer(): JSX.Element {
             </LinkWrapper>
           ))}
           <FooterRight>
-            <FooterInput placeholder={t("footer.enter_email")} />
-            <FooterButton>{t("footer.subscribe")}</FooterButton>
+            <FooterButtonWrap>
+              <FooterInput placeholder={t("footer.enter_email")} />
+              <FooterButton>{t("footer.subscribe")}</FooterButton>
+            </FooterButtonWrap>
             <FooterImages>
               {images.map((image, index) => (
                 <a key={index} href={image.href}>
@@ -170,20 +172,33 @@ const LinkWrapper = styled("div", {
   [media.media1024]: { marginRight: 0 }
 });
 
+const FooterButtonWrap = styled("div", {
+  display: "flex",
+  alignItems: "center"
+});
+
 const FooterInput = styled(Input, {
   backgroundColor: colors.nav02,
-  width: "220px",
+  width: "250px",
   height: "48px",
   color: "#dbdbdb",
   borderColor: "#fff",
-  borderRadius: 0
+  borderRadius: 0,
+  boxSizing: "border-box",
+  ":hover": {
+    borderColor: colors.white
+  },
+  ":focus": {
+    borderColor: colors.white
+  }
 });
 
 const FooterAvatar = styled(Avatar, {
   backgroundColor: colors.nav02,
   width: "40px",
   height: "40px",
-  marginLeft: "10px",
+  marginLeft: 0,
+  marginRight: "10px",
   [media.media1024]: {
     marginLeft: 0,
     marginRight: "10px",
@@ -216,16 +231,23 @@ const FooterButton = styled(Button, {
   color: "#dbdbdb",
   borderColor: "#fff",
   borderRadius: 0,
-  marginLeft: "8px",
+  marginLeft: "0",
+  borderLeft: "none",
   ":hover": {
-    color: colors.nav02
+    borderColor: colors.white,
+    color: colors.black
+  },
+  ":focus": {
+    color: colors.black,
+    borderColor: colors.white
   }
 });
 
 const Title = styled("div", {
   fontSize: "16px",
   lineHeight: 2,
   color: "#dbdbdb",
+  marginBottom: "40px",
   [media.media1024]: { lineHeight: 1.5 }
 });
 
@@ -238,6 +260,7 @@ const Link = styled("a", {
 
 const FooterImages = styled("div", {
   marginTop: "32px",
+  textAlign: "left",
   [media.media1024]: { marginTop: "10px" }
 });
 

packages/iotex-react-i18n-detector/package.json

@@ -1,6 +1,6 @@
 {
   "name": "iotex-react-i18n-detector",
-  "version": "2.4.0",
+  "version": "2.4.2",
   "description": "",
   "main": "./lib/index.js",
   "scripts": {

packages/iotex-react-language-dropdown/package.json

@@ -1,7 +1,7 @@
 {
   "name": "iotex-react-language-dropdown",
   "license": "MIT",
-  "version": "2.4.1",
+  "version": "2.4.2",
   "description": "field_description",
   "main": "./lib/index.js",
   "files": [