fix: correct import orders

Author: kemuru

web/src/layout/Header/index.tsx

@@ -3,9 +3,9 @@ import styled from "styled-components";
 import { Link } from "react-router-dom";
 import HamburgerIcon from "svgs/header/hamburger.svg";
 import KlerosCourtLogo from "svgs/header/kleros-court.svg";
-import { useFocusOutside } from "hooks/useFocusOutside";
 import LightButton from "components/LightButton";
 import NavBar from "./navbar";
+import { useFocusOutside } from "hooks/useFocusOutside";
 
 const Container = styled.div`
   position: sticky;
@@ -61,11 +61,7 @@ const Header: React.FC = () => {
         </Link>
         <div ref={containerRef}>
           <NavBar />
-          <StyledLightButton
-            text=""
-            Icon={HamburgerIcon}
-            onClick={toggleIsOpen}
-          />
+          <StyledLightButton text="" Icon={HamburgerIcon} onClick={toggleIsOpen} />
         </div>
       </OpenContext.Provider>
     </Container>

web/src/layout/Header/navbar/Menu/Settings/General.tsx

@@ -1,8 +1,8 @@
 import React from "react";
-import ConnectButton, { AddressDisplay, ChainDisplay } from "components/ConnectButton";
 import styled from "styled-components";
-import { useWeb3 } from "hooks/useWeb3";
 import Identicon from "react-identicons";
+import ConnectButton, { AddressDisplay, ChainDisplay } from "components/ConnectButton";
+import { useWeb3 } from "hooks/useWeb3";
 
 const Container = styled.div`
   display: flex;

web/src/layout/Header/navbar/Menu/Settings/Notifications/FormNotifs/index.tsx

@@ -1,6 +1,6 @@
 import { Checkbox, Button } from "@kleros/ui-components-library";
-import React, { useState } from "react";
 import styled from "styled-components";
+import React, { useState } from "react";
 import FormEmail from "./FormEmail";
 
 const FormContainer = styled.div`

web/src/layout/Header/navbar/Menu/Settings/index.tsx

@@ -1,9 +1,9 @@
 import React, { Dispatch, SetStateAction, useRef, useState } from "react";
-import { Tabs } from "@kleros/ui-components-library";
 import styled from "styled-components";
-import { useFocusOutside } from "hooks/useFocusOutside";
+import { Tabs } from "@kleros/ui-components-library";
 import General from "./General";
 import Notifications from "./Notifications";
+import { useFocusOutside } from "hooks/useFocusOutside";
 
 const tabsItems = [
   {

web/src/layout/Header/navbar/Menu/index.tsx

@@ -1,13 +1,13 @@
 import React, { useState } from "react";
 import styled from "styled-components";
-import { useToggleTheme } from "hooks/useToggleThemeContext";
 import LightButton from "components/LightButton";
 import NotificationsIcon from "svgs/menu-icons/notifications.svg";
 import DarkModeIcon from "svgs/menu-icons/dark-mode.svg";
 import LightModeIcon from "svgs/menu-icons/light-mode.svg";
 import HelpIcon from "svgs/menu-icons/help.svg";
 import SettingsIcon from "svgs/menu-icons/settings.svg";
 import Settings from "./Settings";
+import { useToggleTheme } from "hooks/useToggleThemeContext";
 
 const Container = styled.div``;