From 70779db5bf9c410a2a47e579d022ae4e17c4ad76 Mon Sep 17 00:00:00 2001
From: YasinOnm08 <onmazyasin4@gmail.com>
Date: Wed, 2 Oct 2024 09:23:29 +0200
Subject: [PATCH] svg icons for everything

---
 app/components/InputFrontend.tsx |  4 ++--
 app/components/Login.tsx         |  2 +-
 app/styles/header.css            | 12 +++++++-----
 3 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/app/components/InputFrontend.tsx b/app/components/InputFrontend.tsx
index 7ae6fd7..1fbd1b8 100644
--- a/app/components/InputFrontend.tsx
+++ b/app/components/InputFrontend.tsx
@@ -49,10 +49,10 @@ const InputFrontend = React.forwardRef<HTMLDivElement, InputProps>(
           onKeyDown={handleKeyDown}
         />
         <button type="button" onClick={handleSendClick} disabled={inputDisabled ? true : false}>
-          <img src="/img/send.svg" alt="send" />
+          <svg style={{fill:"var(--text-color)"}} viewBox="0 0 512 512" width={20}><path d="M498.1 5.6c10.1 7 15.4 19.1 13.5 31.2l-64 416c-1.5 9.7-7.4 18.2-16 23s-18.9 5.4-28 1.6L284 427.7l-68.5 74.1c-8.9 9.7-22.9 12.9-35.2 8.1S160 493.2 160 480l0-83.6c0-4 1.5-7.8 4.2-10.8L331.8 202.8c5.8-6.3 5.6-16-.4-22s-15.7-6.4-22-.7L106 360.8 17.7 316.6C7.1 311.3 .3 300.7 0 288.9s5.9-22.8 16.1-28.7l448-256c10.7-6.1 23.9-5.5 34 1.4z"/></svg>
         </button>
         <button className={`microphone-button ${isRecording ? "red" : "var(--input-button-color)"}`} type="button" onClick={onMicClick}>
-          <img src="/img/microphone.svg" alt="microphone" />
+          <svg style={{fill:"var(--text-color)"}} viewBox="0 0 384 512" width={15}><path d="M192 0C139 0 96 43 96 96l0 160c0 53 43 96 96 96s96-43 96-96l0-160c0-53-43-96-96-96zM64 216c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 40c0 89.1 66.2 162.7 152 174.4l0 33.6-48 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l72 0 72 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-48 0 0-33.6c85.8-11.7 152-85.3 152-174.4l0-40c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 40c0 70.7-57.3 128-128 128s-128-57.3-128-128l0-40z"/></svg>
         </button>
       </div>
     );
diff --git a/app/components/Login.tsx b/app/components/Login.tsx
index e2e8c32..b56d064 100644
--- a/app/components/Login.tsx
+++ b/app/components/Login.tsx
@@ -81,7 +81,7 @@ const Login: React.FC = () => {
     <div>
       {/* Login or Settings Button */}
       <button className='header-login-button' onClick={isLoggedIn ? toggleSettingsPopup : toggleLoginPopup}>
-        {isLoggedIn ? <img src="" alt="Settings" /> : 'Log In'}
+        {isLoggedIn ? <svg style={{ fill: "var(--text-color)" }} viewBox="0 0 512 512" width={25} height={35} preserveAspectRatio="xMidYMid meet"><path d="M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z"/></svg> : 'Log In'}
       </button>
 
       {/* Conditional rendering of the Login Popup */}
diff --git a/app/styles/header.css b/app/styles/header.css
index a540ad3..af4c1c0 100644
--- a/app/styles/header.css
+++ b/app/styles/header.css
@@ -75,7 +75,7 @@ header{
 
 .login-button-container{
     position: absolute;
-    top: 0.2vh;
+    top: 0.1vh;
     right: 1vw;
     height: 100%;
     display: flex;
@@ -83,11 +83,10 @@ header{
 }
 
 .header-login-button{
+    height: 100%;
+    width:4vw;
     font-size: var(--font-size);
-    /* position: absolute;
-    top: 1.5vh;
-    right: 1vw; */
-    padding: 10px 20px;
+    padding: 3px;
     background-color: var(--input-button-color);
     color: var(--text-color);
     border: none;
@@ -95,6 +94,9 @@ header{
     cursor: pointer;
     transition: background-color 0.3s;
     font-family: var(--font-family);
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
 
 .header-login-button:hover {