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;
 }

src/context/intermediate/popovers/UserProfile.tsx

@@ -2,9 +2,9 @@ import {
     Envelope,
     Edit,
     UserPlus,
-    Shield,
+    Shield
-    Money,
+} from "@styled-icons/boxicons-solid";
-} from "@styled-icons/boxicons-regular";
+import { Money } from "@styled-icons/boxicons-regular";
 import { Link, useHistory } from "react-router-dom";
 import { Users } from "revolt.js/dist/api/objects";
 import { UserPermission } from "revolt.js/dist/api/permissions";

src/pages/settings/panes/Panes.module.scss

@@ -312,7 +312,7 @@
         }
 
         .label {
-            margin: 0 0 6px 0;
+            margin-bottom: 8px;
             color: var(--primary-text);
             font-size: 12px;
             font-weight: 600;

src/pages/settings/server/Panes.module.scss

@@ -6,6 +6,10 @@
         .name {
             flex-grow: 1;
 
+            h3 {
+                margin-top: 0;
+            }
+
             input {
                 width: 100%;
             }