fix: update className syntax

Author: kyrers

web/src/components/LightButton.tsx

@@ -15,10 +15,10 @@ const LightButton: React.FC<ILightButton> = ({ text, Icon, onClick, disabled, cl
     variant="primary"
     small
     className={
-      "transition duration-100 bg-transparent p-2 rounded-[7px] landscape-900:[&_button-svg]:mr-0 " +
-      "[&_button-text]:text-klerosUIComponentsPrimaryText [&_button-text]:font-normal " +
+      "transition duration-100 bg-transparent p-2 rounded-[7px] landscape-900:[&_.button-svg]:mr-0 " +
+      "[&_.button-text]:text-klerosUIComponentsPrimaryText [&_.button-text]:font-normal " +
       `[&_button-svg]:${isMobileNavbar ? "fill-klerosUIComponentsSecondaryText" : "fill-white/75"} ` +
-      `hover:[&_button-svg]:${
+      `hover:[&_.button-svg]:${
         isMobileNavbar ? "fill-klerosUIComponentsPrimaryText" : "fill-white"
       } hover:bg-white-low-opacity-strong ` +
       `${className}`

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

@@ -97,7 +97,7 @@ const DappList: React.FC<IDappList> = ({ toggleIsDappListOpen }) => {
       <h1 className="pt-6 text-2xl font-semibold leading-8">Kleros Solutions</h1>
       <div
         className="grid overflow-y-auto gap-y-2 gap-x-0.5 justify-items-center max-w-[480px] min-w-[300px] grid-cols-[repeat(auto-fit,minmax(100px,1fr))]"
-        style={{ padding: `4px_${responsiveSize(8, 24)}_16px`, width: responsiveSize(300, 480) }}
+        style={{ padding: `4px ${responsiveSize(8, 24)} 16px`, width: responsiveSize(300, 480) }}
       >
         {ITEMS.map((item) => {
           return <Product {...item} key={item.text} />;

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

@@ -35,16 +35,13 @@ const Explore: React.FC<IExplore> = ({ isMobileNavbar }) => {
       {links.map(({ to, text, identifier }) => (
         <Link
           key={text}
-          className={
-            "flex items-center no-underline text-base p-2 pl-0 rounded-[7px] landscape-900:py-4 landscape-900:px-2 " +
-            `${
-              isActive(to)
-                ? "text-klerosUIComponentsPrimaryText landscape-900:text-white "
-                : "text-primary-text-73 landscape-900:text-white-73 "
-            }` +
-            `${isMobileNavbar && isActive(to) ? "font-semibold " : "font-normal "}` +
-            `hover:${isMobileNavbar ? "text-klerosUIComponentsPrimaryText" : "text-white"}`
-          }
+          className={`flex items-center no-underline text-base p-2 pl-0 rounded-[7px] landscape-900:py-4 landscape-900:px-2 ${
+            isActive(to)
+              ? "text-klerosUIComponentsPrimaryText landscape-900:text-white"
+              : "text-primary-text-73 landscape-900:text-white-73"
+          } ${isMobileNavbar && isActive(to) ? "font-semibold" : "font-normal"} ${
+            isMobileNavbar ? "hover:text-klerosUIComponentsPrimaryText" : "hover:text-white"
+          }`}
           onClick={toggleIsOpen}
           {...{ to }}
         >

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

@@ -109,6 +109,7 @@ const FormContactDetails: React.FC<ISettings> = ({ toggleIsSettingsOpen }) => {
       ) : null}
       <div className="flex justify-end">
         <Button
+          type="submit"
           text="Save"
           disabled={
             !isEditingEmail || !emailIsValid || isAddingUser || isFetchingUser || isUpdatingUser || !isEmailUpdateable

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

@@ -30,7 +30,7 @@ const Settings: React.FC<ISettings> = ({ toggleIsSettingsOpen, initialTab }) =>
     <div
       ref={containerRef}
       className={
-        "flex flex-col absolute max-h-[80vh] overflow-y-auto bg-klerosUIComponentsWhiteBackground top-[5%] left-1/2 transform translate-x-1/2 z-1 border border-solid border-klerosUIComponentsStroke rounded-[3px] " +
+        "flex flex-col absolute max-h-[80vh] overflow-y-auto bg-klerosUIComponentsWhiteBackground top-[5%] left-1/2 transform -translate-x-1/2 z-1 border border-solid border-klerosUIComponentsStroke rounded-[3px] " +
         "landscape-900:mt-16 landscape-900:top-0 landscape-900:right-0 landscape-900:left-auto landscape-900:transform-none"
       }
     >

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

@@ -39,8 +39,8 @@ const Menu: React.FC<ISettings & IHelp> = ({ toggleIsHelpOpen, toggleIsSettingsO
         <div
           key={Icon}
           className={
-            "flex items-center min-h-8 [&_button]:p-0 [&_button-text]:block [&_button-svg]:fill-klerosUIComponentsSecondaryPurple " +
-            "landscape-900:[&_button-text]:hidden landscape-900:[&_button-svg]:fill-white"
+            "flex items-center min-h-8 [&_button]:p-0 [&_.button-text]:block [&_.button-svg]:fill-klerosUIComponentsSecondaryPurple " +
+            "landscape-900:[&_.button-text]:hidden landscape-900:[&_.button-svg]:fill-white"
           }
         >
           <LightButton {...{ text, onClick, Icon }} />

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

@@ -16,6 +16,7 @@ const Product: React.FC<IProduct> = ({ text, url, Icon }) => {
     <a
       href={url}
       target="_blank"
+      rel="noopener noreferrer"
       className={
         "flex flex-col items-center cursor-pointer pt-4 pb-7 px-2 max-w-[100px] rounded-[3px] gap-2 bg-klerosUIComponentsLightBackground " +
         "hover:transition-[transform_0.15s,background-color_0.3s] hover:scale-[1.02] hover:bg-klerosUIComponentsLightGrey"