Fix: changed outlines to box-shadow

src/components/common/messaging/MessageBox.tsx

@@ -61,7 +61,7 @@ export type UploadState =
 
 const Base = styled.div`
     display: flex;
-    padding: 0 12px;
+    /*padding: 0 12px;*/
     background: var(--message-box);
 
     textarea {
@@ -87,6 +87,10 @@ const Blocked = styled.div`
 const Action = styled.div`
     display: grid;
     place-items: center;
+
+    > div {
+        padding: 10px 12px;
+    }
 `;
 
 // ! FIXME: add to app config and load from app config

src/components/ui/ComboBox.tsx

@@ -1,7 +1,7 @@
 import styled from "styled-components";
 
 export default styled.select`
-    padding: 8px;
+    padding: 10px;
     border-radius: 6px;
     font-family: inherit;
     color: var(--secondary-foreground);
@@ -10,11 +10,11 @@ export default styled.select`
     border: none;
     outline: 2px solid transparent;
     transition: outline-color 0.2s ease-in-out;
-    transition: box-shadow 0.3s;
+    transition: box-shadow .2s ease-in-out;
     cursor: pointer;
     width: 100%;
 
     &:focus {
-        box-shadow: 0 0 0 2pt var(--accent);
+        box-shadow: 0 0 0 1.5pt var(--accent);
     }
 `;

src/components/ui/InputBox.tsx

@@ -8,6 +8,7 @@ export default styled.input<Props>`
     z-index: 1;
     padding: 8px 16px;
     border-radius: 6px;
+    font-size: 1rem;
 
     font-family: inherit;
     color: var(--foreground);
@@ -17,13 +18,14 @@ export default styled.input<Props>`
     border: none;
     outline: 2px solid transparent;
     transition: outline-color 0.2s ease-in-out;
+    transition: box-shadow .2s ease-in-out;
 
     &:hover {
         background: var(--secondary-background);
     }
 
     &:focus {
-        outline: 2px solid var(--accent);
+        box-shadow: 0 0 0 1.5pt var(--accent);
     }
 
     ${(props) =>

src/components/ui/TextArea.module.scss

@@ -1,5 +1,5 @@
 .container {
-    font-size: 0.875rem;
+    font-size: .875rem;
     line-height: 20px;
     position: relative;
 }