diff --git a/src/components/InputBox.tsx b/src/components/InputBox.tsx index ff8f066..d360ea1 100644 --- a/src/components/InputBox.tsx +++ b/src/components/InputBox.tsx @@ -5,6 +5,7 @@ import { useInputStore } from "../state/inputStore" import styles from "./inputbox.module.css" import { useGptResponseStore } from "../state/gptResponseStore" import { LoadingIcon } from "./LoadingIcon" +import { SettingsIcon } from "./SettingsIcon" export const InputBox = () => { const inputRef = useRef(null) @@ -42,6 +43,6 @@ export const InputBox = () => { className={styles.inputBox} value={input} /> - {loading ? : } + {loading ? : } } diff --git a/src/components/SettingsIcon.tsx b/src/components/SettingsIcon.tsx new file mode 100644 index 0000000..824e578 --- /dev/null +++ b/src/components/SettingsIcon.tsx @@ -0,0 +1,5 @@ +export const SettingsIcon = () => { + return + + +} diff --git a/src/components/inputbox.module.css b/src/components/inputbox.module.css index 0e04ae3..4dae5a5 100644 --- a/src/components/inputbox.module.css +++ b/src/components/inputbox.module.css @@ -1,7 +1,7 @@ .topArea { display: flex; background-color: rgb(84, 150, 255); - padding: 2px 12px; + padding: 0px 12px; height: 40px; width: 100%; border-bottom: .5px solid rgb(29, 28, 28); @@ -21,6 +21,10 @@ } .settingsIcon { + display: flex; + justify-content: end; + text-align: center; + border-radius: 50%; width: 5%; cursor: pointer; diff --git a/src/components/loadingicon.module.css b/src/components/loadingicon.module.css index bab8ffa..a0070e5 100644 --- a/src/components/loadingicon.module.css +++ b/src/components/loadingicon.module.css @@ -3,7 +3,7 @@ align-items: center; justify-content: right; position: relative; - width: 8%; + width: 5%; aspect-ratio: 1/1; }