PlainButton

frontend/src/components/LandingBarMobile.js

@@ -1,10 +1,11 @@
 import React, { useContext } from "react";
 import RouterLink from "next/link";
-import { Button, Image, Link, Flex, Spacer, Text, Box } from "@chakra-ui/react";
+import { Image, Link, Flex, Spacer, Text, Box } from "@chakra-ui/react";
 import { PRIMARY_MOON_LOGO_URL } from "../core/constants";
 import { MODAL_TYPES } from "../core/providers/OverlayProvider/constants";
 import useModals from "../core/hooks/useModals";
 import UIContext from "../core/providers/UIProvider/context";
+import PlainButton from "./atoms/PlainButton";
 
 const LandingBarMobile = () => {
   const ui = useContext(UIContext);
@@ -24,18 +25,15 @@ const LandingBarMobile = () => {
         </RouterLink>
         <Spacer />
         {!ui.isLoggedIn && (
-          <Button
-            bg="#F56646"
-            variant="solid"
+          <PlainButton
+            style={{
+              marginRight: "12px",
+              fontSize: "14px",
+            }}
             onClick={() => toggleModal({ type: MODAL_TYPES.SIGNUP })}
-            size="sm"
-            fontWeight="bold"
-            borderRadius="2xl"
-            textColor="white"
-            mr="12px"
           >
             Sign up
-          </Button>
+          </PlainButton>
         )}
         {!ui.isLoggedIn && (
           <Text

frontend/src/components/atoms/PlainButton/PlainButton.module.css

@@ -0,0 +1,16 @@
+.button {
+  background-color: #F56646;
+  font-weight: 700;
+  border-radius: 15px;
+  text-align: center;
+  padding: 5px 10px;
+  cursor: pointer;
+  font-size: 16px;
+  justify-content: center;
+  color: #ffffff;
+}
+
+.button:hover {
+  background-color: #F4532F;
+}
+

frontend/src/components/atoms/PlainButton/index.js

@@ -0,0 +1,16 @@
+/* eslint-disable react/react-in-jsx-scope */
+import styles from "./PlainButton.module.css";
+
+const PlainButton = (props) => {
+  return (
+    <div
+      onClick={props.onClick}
+      className={styles.button}
+      style={props.style}
+      type={props.type}
+    >
+      {props.children}
+    </div>
+  );
+};
+export default PlainButton;