style: fix header styles

Author: kyrers

web/src/components/EnsureAuth.tsx

@@ -30,7 +30,7 @@ const EnsureAuth: React.FC<IEnsureAuth> = ({ children, className }) => {
     <Button
       text="Sign In"
       onClick={handleClick}
-      disabled={isSigningIn || !address}
+      isDisabled={isSigningIn || !address}
       isLoading={isSigningIn}
       {...{ className }}
     />

web/src/layout/Header/navbar/Explore.tsx

@@ -37,7 +37,7 @@ const Explore: React.FC<IExplore> = ({ isMobileNavbar }) => {
           key={text}
           className={cn(
             "flex items-center p-2 pl-0 rounded-[7px] lg:py-4 lg:px-2",
-            "no-underline text-base",
+            "no-underline text-base leading-tight",
             isActive(to) ? "text-klerosUIComponentsPrimaryText lg:text-white" : "text-primary-text-73 lg:text-white-73",
             isMobileNavbar ? "hover:text-klerosUIComponentsPrimaryText" : "hover:text-white",
             isMobileNavbar && isActive(to) ? "font-semibold" : "font-normal"

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

@@ -6,7 +6,7 @@ import { EnsureChain } from "components/EnsureChain";
 
 export const DisconnectWalletButton: React.FC = () => {
   const { disconnect } = useDisconnect();
-  return <Button text={`Disconnect`} onClick={() => disconnect()} />;
+  return <Button className="text-klerosUIComponentsWhiteBackground" text={`Disconnect`} onClick={() => disconnect()} />;
 };
 
 const General: React.FC = () => {

web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/EmailVerificationInfo.tsx

@@ -5,6 +5,7 @@ import { Button } from "@kleros/ui-components-library";
 import HourglassIcon from "svgs/icons/hourglass.svg";
 import { useAtlasProvider } from "@kleros/kleros-app";
 import { errorToast, infoToast, successToast } from "utils/wrapWithToast";
+import clsx from "clsx";
 
 interface IEmailInfo {
   toggleIsSettingsOpen: () => void;
@@ -40,7 +41,15 @@ const EmailVerificationInfo: React.FC<IEmailInfo> = ({ toggleIsSettingsOpen }) =
         <h3 className="m-0">Email Verification Pending</h3>
         <label>
           We sent you a verification email. Please, verify it.
-          <br /> Didn’t receive the email? <Button text="Resend it" onClick={resendVerificationEmail} />
+          <br /> Didn’t receive the email?{" "}
+          <Button
+            className={clsx(
+              "inline-block bg-transparent p-0 focus:bg-transparent hover:bg-transparent",
+              "[&_.button-text]:text-sm [&_.button-text]:font-normal [&_.button-text]:text-klerosUIComponentsPrimaryBlue"
+            )}
+            text="Resend it"
+            onClick={resendVerificationEmail}
+          />
         </label>
       </div>
     </div>

web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/FormContact.tsx

@@ -39,7 +39,7 @@ const FormContact: React.FC<IForm> = ({
     <>
       <label className="flex justify-between mb-[10px]">{contactLabel}</label>
       <TextField
-        className="flex flex-col items-center w-full"
+        className="flex flex-col items-center w-full [&_input]:text-sm"
         variant={fieldVariant}
         value={contactInput}
         onChange={(value) => setContactInput(value)}

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

@@ -111,7 +111,7 @@ const FormContactDetails: React.FC<ISettings> = ({ toggleIsSettingsOpen }) => {
         <Button
           type="submit"
           text="Save"
-          disabled={
+          isDisabled={
             !isEditingEmail || !emailIsValid || isAddingUser || isFetchingUser || isUpdatingUser || !isEmailUpdateable
           }
         />

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

@@ -9,12 +9,12 @@ import clsx from "clsx";
 
 const TABS = [
   {
+    id: 0,
     text: "General",
-    value: 0,
   },
   {
+    id: 1,
     text: "Notifications",
-    value: 1,
   },
 ];
 
@@ -33,12 +33,12 @@ const Settings: React.FC<ISettings> = ({ toggleIsSettingsOpen, initialTab }) =>
       className={clsx(
         "flex flex-col absolute max-h-[80vh] overflow-y-auto top-[5%] left-1/2 transform -translate-x-1/2 z-1",
         "bg-klerosUIComponentsWhiteBackground border border-solid border-klerosUIComponentsStroke rounded-[3px]",
-        "lg:mt-16 lg:top-0 lg:right-0 lg:left-auto lg:transform-none"
+        "lg:mt-16 lg:top-0 lg:right-0 lg:left-auto lg:transform-none lg:translate-x-0"
       )}
     >
       <div className="flex justify-center text-2xl mt-6 text-klerosUIComponentsPrimaryText">Settings</div>
       <Tabs
-        className="py-0 px-[calc(8px+(32-8)*((100vw-300px)/(1250-300)))] max-w-[660px] lg:w-[calc(300px+(424-300)*((100vw-300px)/(1250-300)))]"
+        className="py-0 px-[calc(8px+(32-8)*((100vw-300px)/(1250-300)))] max-w-[660px] w-[86vw] lg:w-[calc(300px+(424-300)*((100vw-300px)/(1250-300)))]"
         currentValue={currentTab}
         items={TABS}
         callback={(n: number) => {

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

@@ -36,7 +36,10 @@ const Menu: React.FC<ISettings & IHelp> = ({ toggleIsHelpOpen, toggleIsSettingsO
   return (
     <div className="flex flex-col lg:flex-row">
       {buttons.map(({ text, Icon, onClick }) => (
-        <div key={Icon} className="flex items-center min-h-8 [&_.button-text]:block lg:[&_.button-text]:hidden">
+        <div
+          key={Icon}
+          className="flex items-center min-h-8 [&_.button-text]:block lg:[&_.button-text]:hidden not-dark:not-lg:[&_.button-svg]:fill-black/75 not-dark:not-lg:hover:[&_.button-svg]:fill-black"
+        >
           <LightButton {...{ text, onClick, Icon }} />
         </div>
       ))}

web/src/layout/Header/navbar/Product.tsx

@@ -20,7 +20,7 @@ const Product: React.FC<IProduct> = ({ text, url, Icon }) => {
       rel="noopener noreferrer"
       className={clsx(
         "flex flex-col items-center pt-4 pb-7 px-2 max-w-[100px] rounded-[3px] gap-2",
-        "cursor-pointer bg-klerosUIComponentsLightBackground hover:bg-klerosUIComponentsLightGrey",
+        "cursor-pointer bg-klerosUIComponentsLightBackground hover:bg-light-grey dark:hover:bg-klerosUIComponentsLightGrey",
         "hover:transition-[transform_0.15s,background-color_0.3s] hover:scale-[1.02]"
       )}
       style={{ width: responsiveSize(100, 130) }}
@@ -38,7 +38,7 @@ const Product: React.FC<IProduct> = ({ text, url, Icon }) => {
       ) : (
         <Icon className="w-12 h-12" />
       )}
-      <small className="flex font-normal text-center leading-[19px]">{text}</small>
+      <small className="flex font-normal text-center leading-snug">{text}</small>
     </a>
   );
 };

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

@@ -47,6 +47,7 @@ const NavBar: React.FC = () => {
         )}
       >
         <LightButton
+          className="not-dark:[&_.button-svg]:fill-black/75 not-dark:hover:[&_.button-svg]:fill-black"
           text="Kleros Solutions"
           onClick={() => {
             toggleIsDappListOpen();