Add editing role name / colour.

Animate avatars on message hover.
Switch to 24-hour time format by default.

src/pages/settings/Settings.module.scss

@@ -1,24 +1,41 @@
 @keyframes open {
-    0% {transform: scale(1.2);};
-    100% {transform: scale(1);};
+    0% {
+        transform: scale(1.2);
+    }
+    100% {
+        transform: scale(1);
+    }
 }
 
 @keyframes close {
-    0% {transform: scale(1); opacity: 1;};
-    100% {transform: scale(1.2); opacity: 0;};
+    0% {
+        transform: scale(1);
+        opacity: 1;
+    }
+    100% {
+        transform: scale(1.2);
+        opacity: 0;
+    }
 }
 
 @keyframes opacity {
-    0% {opacity: 0;};
-    20% {opacity: .5;}
-    50% {opacity: 1;}
+    0% {
+        opacity: 0;
+    }
+    20% {
+        opacity: 0.5;
+    }
+    50% {
+        opacity: 1;
+    }
 }
 
 .settings[data-mobile="true"] {
     flex-direction: column;
     background: var(--primary-header);
 
-    .sidebar, .content {
+    .sidebar,
+    .content {
         background: var(--primary-background);
     }
 
@@ -36,7 +53,6 @@
 
         .version {
             place-items: center;
-
         }
     }
 
@@ -52,8 +68,7 @@
     width: 100%;
     height: 100%;
     position: fixed;
-    animation: open .18s ease-out,
-               opacity .18s;
+    animation: open 0.18s ease-out, opacity 0.18s;
 }
 
 .settings {
@@ -166,7 +181,7 @@
         flex-shrink: 0;
         padding: 60px 8px;
         color: var(--tertiary-background);
-        
+
         &:after {
             content: "ESC";
             margin-top: 4px;
@@ -177,8 +192,8 @@
             position: relative;
             color: var(--foreground);
             width: 40px;
-            opacity: .5;
-            font-size: .75em;
+            opacity: 0.5;
+            font-size: 0.75em;
         }
 
         .closeButton {
@@ -190,7 +205,7 @@
             width: 40px;
             border: 3px solid var(--tertiary-background);
             cursor: pointer;
-            
+
             svg {
                 color: var(--secondary-foreground);
             }
@@ -208,6 +223,10 @@
             display: inline;
         }
     }
+
+    section {
+        margin-bottom: 1em;
+    }
 }
 
 .loader {

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

@@ -39,7 +39,8 @@
         flex-direction: row;
         background: var(--secondary-background);
 
-        code, span {
+        code,
+        span {
             flex: 1;
         }
 
@@ -69,7 +70,7 @@
         color: var(--secondary-foreground);
         font-weight: 700;
     }
-    
+
     .member {
         gap: 8px;
         padding: 10px;
@@ -95,10 +96,6 @@
         flex-grow: 1;
         padding: 0 8px;
         overflow-y: scroll;
-        
-        section {
-            margin-bottom: 1em;
-        }
     }
 
     .title {
@@ -107,7 +104,8 @@
         margin-bottom: 1em;
         align-items: center;
 
-        h1, h2 {
+        h1,
+        h2 {
             margin: 0;
             min-width: 0;
             flex-grow: 1;
@@ -126,4 +124,4 @@
         display: flex;
         padding: 8px 0;
     }
-}
+}

src/pages/settings/server/Roles.tsx

@@ -15,6 +15,7 @@ import { AppContext } from "../../../context/revoltjs/RevoltClient";
 
 import Button from "../../../components/ui/Button";
 import Checkbox from "../../../components/ui/Checkbox";
+import ColourSwatches from "../../../components/ui/ColourSwatches";
 import IconButton from "../../../components/ui/IconButton";
 import InputBox from "../../../components/ui/InputBox";
 import Overline from "../../../components/ui/Overline";
@@ -40,21 +41,46 @@ export function Roles({ server }: Props) {
         return null;
     }
 
-    const v = (id: string) =>
-        I32ToU32(
+    function getPermissions(id: string) {
+        return I32ToU32(
             id === "default"
                 ? server.default_permissions
                 : roles[id].permissions,
         );
-    const [perm, setPerm] = useState(v(role));
-    useEffect(() => setPerm(v(role)), [role, roles[role]?.permissions]);
+    }
+
+    const { name: roleName, colour: roleColour } = roles[role] ?? {};
+
+    const [perm, setPerm] = useState(getPermissions(role));
+    const [name, setName] = useState(roleName);
+    const [colour, setColour] = useState(roleColour);
+
+    useEffect(
+        () => setPerm(getPermissions(role)),
+        [role, roles[role]?.permissions],
+    );
+
+    useEffect(() => setName(roleName), [role, roleName]);
+    useEffect(() => setColour(roleColour), [role, roleColour]);
+
+    const modified =
+        !isEqual(perm, getPermissions(role)) ||
+        !isEqual(name, roleName) ||
+        !isEqual(colour, roleColour);
+
+    const save = () => {
+        if (!isEqual(perm, getPermissions(role))) {
+            client.servers.setPermissions(server._id, role, {
+                server: perm[0],
+                channel: perm[1],
+            });
+        }
+
+        if (!isEqual(name, roleName) || !isEqual(colour, roleColour)) {
+            client.servers.editRole(server._id, role, { name, colour });
+        }
+    };
 
-    const modified = !isEqual(perm, v(role));
-    const save = () =>
-        client.servers.setPermissions(server._id, role, {
-            server: perm[0],
-            channel: perm[1],
-        });
     const deleteRole = () => {
         setRole("default");
         client.servers.deleteRole(server._id, role);
@@ -92,7 +118,8 @@ export function Roles({ server }: Props) {
                     return (
                         <ButtonItem
                             active={role === id}
-                            onClick={() => setRole(id)}>
+                            onClick={() => setRole(id)}
+                            style={{ color: roles[id].colour }}>
                             {roles[id].name}
                         </ButtonItem>
                     );
@@ -111,6 +138,31 @@ export function Roles({ server }: Props) {
                         Save
                     </Button>
                 </div>
+                {role !== "default" && (
+                    <>
+                        <section>
+                            <Overline type="subtle">Role Name</Overline>
+                            <p>
+                                <InputBox
+                                    value={name}
+                                    onChange={(e) =>
+                                        setName(e.currentTarget.value)
+                                    }
+                                    contrast
+                                />
+                            </p>
+                        </section>
+                        <section>
+                            <Overline type="subtle">Role Colour</Overline>
+                            <p>
+                                <ColourSwatches
+                                    value={colour ?? "gray"}
+                                    onChange={(value) => setColour(value)}
+                                />
+                            </p>
+                        </section>
+                    </>
+                )}
                 <section>
                     <Overline type="subtle">
                         <Text id="app.settings.permissions.server" />