Merge pull request #27 from KUIT-Space/bug#26-TopBarText_width

Bug#26 top bar text width
KUIT-Space · Jul 19, 2024 · 3b9bdfd · 3b9bdfd
2 parents 491e308 + dfab70f
commit 3b9bdfd
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 46 deletions.
diff --git a/src/styles/TopBarText.styled.ts → src/components/TopBarText.styled.ts b/src/styles/TopBarText.styled.ts → src/components/TopBarText.styled.ts
@@ -5,6 +5,7 @@ export const StyledTopBarDiv = styled.div`
 	justify-content: space-between;
 	align-items: center;
 	text-align: center;
+	width: 100%;
 `;
 
 export const StyledLeftDiv = styled.div`

diff --git a/src/components/TopBarText.tsx b/src/components/TopBarText.tsx
@@ -1,7 +1,7 @@
 import { FC } from "react";
 import logo from "@/assets/logo_space.svg";
 import back from "@/assets/icon_back.svg";
-import * as sty from "@/styles/TopBarText.styled";
+import * as sty from "@/components/TopBarText.styled";
 import { useNavigate } from "react-router-dom";
 
 export enum LeftEnum {
@@ -21,59 +21,53 @@ const TopBarText: FC<topbarProps> = ({ left, center, right }) => {
 	switch (left) {
 		case "logo":
 			return (
-				<div>
-					<sty.StyledTopBarDiv>
-						<sty.StyledLeftDiv
-							onClick={() => {
-								navigate("/");
-							}}
-						>
-							<img src={logo}></img>
-						</sty.StyledLeftDiv>
-						<sty.StyledCenterDiv>
-							<sty.StyledCenterP>{center}</sty.StyledCenterP>
-						</sty.StyledCenterDiv>
-						<sty.StyledRightDiv>
-							<sty.StyledRightP>{right}</sty.StyledRightP>
-						</sty.StyledRightDiv>
-					</sty.StyledTopBarDiv>
-				</div>
+				<sty.StyledTopBarDiv>
+					<sty.StyledLeftDiv
+						onClick={() => {
+							navigate("/");
+						}}
+					>
+						<img src={logo}></img>
+					</sty.StyledLeftDiv>
+					<sty.StyledCenterDiv>
+						<sty.StyledCenterP>{center}</sty.StyledCenterP>
+					</sty.StyledCenterDiv>
+					<sty.StyledRightDiv>
+						<sty.StyledRightP>{right}</sty.StyledRightP>
+					</sty.StyledRightDiv>
+				</sty.StyledTopBarDiv>
 			);
 
 		case "back":
 			return (
-				<div>
-					<sty.StyledTopBarDiv>
-						<sty.StyledLeftDiv
-							onClick={() => {
-								navigate(-1);
-							}}
-						>
-							<img src={back}></img>
-						</sty.StyledLeftDiv>
-						<sty.StyledCenterDiv>
-							<sty.StyledCenterP>{center}</sty.StyledCenterP>
-						</sty.StyledCenterDiv>
-						<sty.StyledRightDiv>
-							<sty.StyledRightP>{right}</sty.StyledRightP>
-						</sty.StyledRightDiv>
-					</sty.StyledTopBarDiv>
-				</div>
+				<sty.StyledTopBarDiv>
+					<sty.StyledLeftDiv
+						onClick={() => {
+							navigate(-1);
+						}}
+					>
+						<img src={back}></img>
+					</sty.StyledLeftDiv>
+					<sty.StyledCenterDiv>
+						<sty.StyledCenterP>{center}</sty.StyledCenterP>
+					</sty.StyledCenterDiv>
+					<sty.StyledRightDiv>
+						<sty.StyledRightP>{right}</sty.StyledRightP>
+					</sty.StyledRightDiv>
+				</sty.StyledTopBarDiv>
 			);
 
 		case "none":
 			return (
-				<div>
-					<sty.StyledTopBarDiv>
-						<sty.StyledLeftDiv></sty.StyledLeftDiv>
-						<sty.StyledCenterDiv>
-							<sty.StyledCenterP>{center}</sty.StyledCenterP>
-						</sty.StyledCenterDiv>
-						<sty.StyledRightDiv>
-							<sty.StyledRightP>{right}</sty.StyledRightP>
-						</sty.StyledRightDiv>
-					</sty.StyledTopBarDiv>
-				</div>
+				<sty.StyledTopBarDiv>
+					<sty.StyledLeftDiv></sty.StyledLeftDiv>
+					<sty.StyledCenterDiv>
+						<sty.StyledCenterP>{center}</sty.StyledCenterP>
+					</sty.StyledCenterDiv>
+					<sty.StyledRightDiv>
+						<sty.StyledRightP>{right}</sty.StyledRightP>
+					</sty.StyledRightDiv>
+				</sty.StyledTopBarDiv>
 			);
 	}
 };