Merge pull request #8 from CNU-OOHub/feat/#5-signup

refactor: add text atom

src/components/atoms/text.jsx

@@ -0,0 +1,39 @@
+import React from "react";
+
+const Text = ({
+  children,
+  fontSize = 1.2,
+  fontWeight = "normal",
+  color = "black",
+  marginTop = "0vh",
+  onClick,
+}) => {
+  return onClick ? (
+    <button
+      type="button"
+      style={{
+        fontSize: `${fontSize}rem`,
+        fontWeight: fontWeight,
+        fontFamily: "inter",
+        color: color,
+      }}
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  ) : (
+    <span
+      style={{
+        fontSize: `${fontSize}rem`,
+        fontWeight: fontWeight,
+        color: color,
+        marginTop: marginTop,
+        fontFamily: "inter",
+      }}
+    >
+      {children}
+    </span>
+  );
+};
+
+export default Text;

src/components/molecules/flexColumn.jsx

@@ -14,14 +14,16 @@ const Container = styled.div`
   padding-left: ${(props) => `${props.horizontalPadding}rem`};
   padding-right: ${(props) => `${props.horizontalPadding}rem`};
   align-content: center;
+  text-align: center;
+  vertical-align: middle;
 `;
 
 const FlexColumn = ({
   children,
   justifyContent = "space-between",
   verticalPadding = 0,
   horizontalPadding = 0,
-  height = 85,
+  height = 100,
   width = 25,
 }) => {
   return (

src/components/organisms/header.jsx

@@ -5,7 +5,7 @@ import theme from "../../styles/theme";
 
 const Head = styled.div`
   width: 100%;
-  height: 5em;
+  height: 8vh;
   background-color: ${theme.primaryColor};
 `;
 

src/components/pages/signUp.jsx

@@ -13,6 +13,8 @@ import Input from "../atoms/input";
 import FlexColumn from "../molecules/flexColumn";
 import { useNavigate } from "react-router-dom";
 import Header from "../organisms/header";
+import Text from "../atoms/text";
+import theme from "../../styles/theme";
 
 const Logo = styled.img`
   width: 20rem;
@@ -59,7 +61,7 @@ const SignUp = () => {
   };
 
   return (
-    <div style={{ height: "100vh" }}>
+    <div style={{ height: "92vh" }}>
       <FlexColumn justifyContent="space-evenly" width={25}>
         <Logo src={logo} alt="oohub" />
         <Input
@@ -99,6 +101,17 @@ const SignUp = () => {
         >
           Sign Up
         </Button>
+        <div>
+          <Text>Do you have an account? </Text>
+          <Text
+            onClick={() => {
+              navigate("/logIn");
+            }}
+            color={theme.primaryColor}
+          >
+            SIGNIN!
+          </Text>
+        </div>
       </FlexColumn>
     </div>
   );