From 7462616370cf895b26e78dd0e1c0852a4c48d0b8 Mon Sep 17 00:00:00 2001
From: developomp <developomp@gmail.com>
Date: Tue, 18 May 2021 13:48:48 +0900
Subject: [PATCH] changing tooltop for theme button and separated langauge
 toggle button to different component

---
 .../src/components/LanguageToggleButton.tsx   | 35 +++++++++++++++++++
 source/src/components/Navbar.tsx              | 10 ++----
 source/src/components/ThemeToggleButton.tsx   |  2 +-
 3 files changed, 38 insertions(+), 9 deletions(-)
 create mode 100644 source/src/components/LanguageToggleButton.tsx

diff --git a/source/src/components/LanguageToggleButton.tsx b/source/src/components/LanguageToggleButton.tsx
new file mode 100644
index 0000000..ba42d8a
--- /dev/null
+++ b/source/src/components/LanguageToggleButton.tsx
@@ -0,0 +1,35 @@
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { faLanguage } from "@fortawesome/free-solid-svg-icons"
+import styled from "styled-components"
+import theme from "styled-theming"
+
+import ReactTooltip from "react-tooltip"
+
+import theming from "../theming"
+
+const StyledThemeButton = styled.div`
+	${theming.styles.navbarButtonStyle}
+	transition: transform 0.2s linear;
+	/* ${theme("mode", {
+		light: "",
+		dark: "transform: scaleX(-1);\
+			-moz-transform: scaleX(-1);\
+			-webkit-transform: scaleX(-1);\
+			-ms-transform: scaleX(-1);",
+	})}; */
+`
+
+function LanguageToggleButton() {
+	return (
+		<>
+			<StyledThemeButton data-tip data-for="language">
+				<FontAwesomeIcon icon={faLanguage} />
+			</StyledThemeButton>
+			<ReactTooltip id="language" type="dark" effect="solid">
+				<span>Change to Korean/English</span>
+			</ReactTooltip>
+		</>
+	)
+}
+
+export default LanguageToggleButton
diff --git a/source/src/components/Navbar.tsx b/source/src/components/Navbar.tsx
index 1492ad9..3d89a11 100644
--- a/source/src/components/Navbar.tsx
+++ b/source/src/components/Navbar.tsx
@@ -10,7 +10,7 @@ import { Link } from "react-router-dom"
 import SearchBox from "./SearchBox"
 import Sidebar from "./Sidebar"
 import ThemeToggleButton from "./ThemeToggleButton"
-import { faLanguage } from "@fortawesome/free-solid-svg-icons"
+import LanguageToggleButton from "./LanguageToggleButton"
 
 const StyledNav = styled.nav`
 	display: flex;
@@ -71,13 +71,7 @@ function Navbar() {
 			</StyledNavLinks>
 
 			<ThemeToggleButton />
-
-			<StyledALink data-tip data-for="language">
-				<FontAwesomeIcon icon={faLanguage} />
-			</StyledALink>
-			<ReactTooltip id="language" type="dark" effect="solid">
-				<span>Change to Korean/English</span>
-			</ReactTooltip>
+			<LanguageToggleButton />
 
 			<StyledALink
 				data-tip
diff --git a/source/src/components/ThemeToggleButton.tsx b/source/src/components/ThemeToggleButton.tsx
index b1ca68f..3103f89 100644
--- a/source/src/components/ThemeToggleButton.tsx
+++ b/source/src/components/ThemeToggleButton.tsx
@@ -44,7 +44,7 @@ function Navbar() {
 						)}
 					</StyledThemeButton>
 					<ReactTooltip id="theme" type="dark" effect="solid">
-						<span>Change theme</span>
+						<span>Using {_theme.mode} theme</span>
 					</ReactTooltip>
 				</>
 			)}