fix: improve settings icon

dubisdev · Apr 1, 2023 · 353d380 · 353d380
1 parent dd1d91f
commit 353d380
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 3 deletions.
diff --git 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<HTMLInputElement>(null)
@@ -42,6 +43,6 @@ export const InputBox = () => {
             className={styles.inputBox}
             value={input}
         />
-        {loading ? <LoadingIcon /> : <button className={styles.settingsIcon} onClick={() => setInput(":settings:")}>⚙️</button>}
+        {loading ? <LoadingIcon /> : <button className={styles.settingsIcon} onClick={() => setInput(":settings:")}><SettingsIcon /></button>}
     </div>
 }
diff --git a/src/components/SettingsIcon.tsx b/src/components/SettingsIcon.tsx
@@ -0,0 +1,5 @@
+export const SettingsIcon = () => {
+    return <svg fill="#000000" width="24px" height="24px" viewBox="0 0 1920 1920" xmlns="http://www.w3.org/2000/svg">
+        <path d="M1703.534 960c0-41.788-3.84-84.48-11.633-127.172l210.184-182.174-199.454-340.856-265.186 88.433c-66.974-55.567-143.323-99.389-223.85-128.415L1158.932 0h-397.78L706.49 269.704c-81.43 29.138-156.423 72.282-223.962 128.414l-265.073-88.32L18 650.654l210.184 182.174C220.39 875.52 216.55 918.212 216.55 960s3.84 84.48 11.633 127.172L18 1269.346l199.454 340.856 265.186-88.433c66.974 55.567 143.322 99.389 223.85 128.415L761.152 1920h397.779l54.663-269.704c81.318-29.138 156.424-72.282 223.963-128.414l265.073 88.433 199.454-340.856-210.184-182.174c7.793-42.805 11.633-85.497 11.633-127.285m-743.492 395.294c-217.976 0-395.294-177.318-395.294-395.294 0-217.976 177.318-395.294 395.294-395.294 217.977 0 395.294 177.318 395.294 395.294 0 217.976-177.317 395.294-395.294 395.294" fillRule="evenodd" />
+    </svg>
+}
diff --git 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
@@ -3,7 +3,7 @@
     align-items: center;
     justify-content: right;
     position: relative;
-    width: 8%;
+    width: 5%;
     aspect-ratio: 1/1;
 }