forked from React-Group/interstellar_ai
svg icons for everything
This commit is contained in:
parent
b839b04df2
commit
70779db5bf
3 changed files with 10 additions and 8 deletions
|
@ -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>
|
||||
);
|
||||
|
|
|
@ -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 */}
|
||||
|
|
|
@ -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 {
|
||||
|
|
Loading…
Reference in a new issue