Icon / styling fixes + typo

* Use icon from compound
 * Use warning colour
 * Fix capitalisation

src/Header.jsx

@@ -8,7 +8,7 @@ import { ReactComponent as ArrowLeftIcon } from "./icons/ArrowLeft.svg";
 import { useButton } from "@react-aria/button";
 import { Subtitle } from "./typography/Typography";
 import { Avatar } from "./Avatar";
-import { IncompatibleversionModal } from "./IncompatibleversionModal";
+import { IncompatibleVersionModal } from "./IncompatibleVersionModal";
 import { useModalTriggerState } from "./Modal";
 import { Button } from "./button";
 
@@ -104,7 +104,7 @@ export function VersionMismatchWarning({ users, room }) {
         Details
       </Button>
       {modalState.isOpen && (
-        <IncompatibleversionModal userIds={users} room={room} {...modalProps} />
+        <IncompatibleVersionModal userIds={users} room={room} {...modalProps} />
       )}
     </span>
   );

src/Header.module.css

@@ -112,14 +112,14 @@
   content: "";
   display: inline-block;
   position: relative;
-  top: 2px;
+  top: 1px;
   width: 16px;
   height: 16px;
   mask-image: url("./icons/AlertTriangleFilled.svg");
   mask-repeat: no-repeat;
   mask-size: contain;
-  background-color: var(--warning);
-  padding-right: 3px;
+  background-color: var(--alert);
+  padding-right: 5px;
 }
 
 @media (min-width: 800px) {

src/IncompatibleVersionModal.tsx

@@ -25,7 +25,7 @@ interface Props {
   room: Room;
 }
 
-export const IncompatibleversionModal: React.FC<Props> = ({
+export const IncompatibleVersionModal: React.FC<Props> = ({
   userIds,
   room,
   ...rest

src/button/Button.module.css

@@ -211,6 +211,6 @@ limitations under the License.
 .linkButton {
   background-color: transparent;
   border: none;
-  text-decoration: underline;
+  color: var(--accent);
   cursor: pointer;
 }

src/icons/AlertTriangleFilled.svg

@@ -1,4 +1,3 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg fill="none" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path d="m12 2.8965c-0.6991 0-1.3483 0.36517-1.7109 0.96289l-8.4687 14.141c-0.35536 0.6154-0.35777 1.3729-0.0058594 1.9902 0.3519 0.6174 1.0043 1.002 1.7148 1.0098h16.941c0.7106-0.0078 1.3629-0.39237 1.7148-1.0098 0.3519-0.6173 0.34954-1.3748-0.005859-1.9902l-8.4688-14.141c-0.3625-0.59772-1.0118-0.96289-1.7109-0.96289zm0 5.6035a0.5 0.5 0 0 1 0.5 0.5v4a0.5 0.5 0 0 1-0.5 0.5 0.5 0.5 0 0 1-0.5-0.5v-4a0.5 0.5 0 0 1 0.5-0.5zm0 7.5a1 1 0 0 1 1 1 1 1 0 0 1-1 1 1 1 0 0 1-1-1 1 1 0 0 1 1-1z" fill="#000"/>
+<svg width="20" height="18" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.47012 18H17.5301C19.0701 18 20.0301 16.33 19.2601 15L11.7301 1.98999C10.9601 0.659993 9.04012 0.659993 8.27012 1.98999L0.740121 15C-0.0298788 16.33 0.930121 18 2.47012 18ZM10.0001 11C9.45012 11 9.00012 10.55 9.00012 9.99999V7.99999C9.00012 7.44999 9.45012 6.99999 10.0001 6.99999C10.5501 6.99999 11.0001 7.44999 11.0001 7.99999V9.99999C11.0001 10.55 10.5501 11 10.0001 11ZM11.0001 15H9.00012V13H11.0001V15Z" fill="#737D8C"/>
 </svg>

src/index.css

@@ -29,7 +29,6 @@ limitations under the License.
   --accent-20: #0dbd8b33;
   --alert: #ff5b55;
   --alert-20: #ff5b5533;
-  --warning: #e8bf37;
   --links: #0086e6;
   --primary-content: #ffffff;
   --secondary-content: #a9b2bc;