fix(ui): rename global group class to form-group

src/components/Layout/Sidebar/index.tsx

@@ -33,7 +33,7 @@ const SidebarLinks: SidebarLinkProps[] = [
     messagesKey: 'dashboard',
     svgIcon: (
       <svg
-        className="mr-3 h-6 w-6 text-gray-300 group-hover:text-gray-300 group-focus:text-gray-300 transition ease-in-out duration-150"
+        className="w-6 h-6 mr-3 text-gray-300 transition duration-150 ease-in-out group-hover:text-gray-100 group-focus:text-gray-300"
         fill="none"
         stroke="currentColor"
         viewBox="0 0 24 24"
@@ -54,7 +54,7 @@ const SidebarLinks: SidebarLinkProps[] = [
     messagesKey: 'requests',
     svgIcon: (
       <svg
-        className="mr-3 h-6 w-6 text-gray-300 group-hover:text-gray-300 group-focus:text-gray-300 transition ease-in-out duration-150"
+        className="w-6 h-6 mr-3 text-gray-300 transition duration-150 ease-in-out group-hover:text-gray-100 group-focus:text-gray-300"
         fill="none"
         stroke="currentColor"
         viewBox="0 0 24 24"
@@ -75,7 +75,7 @@ const SidebarLinks: SidebarLinkProps[] = [
     messagesKey: 'users',
     svgIcon: (
       <svg
-        className="mr-3 h-6 w-6 text-gray-300 group-hover:text-gray-300 group-focus:text-gray-300 transition ease-in-out duration-150"
+        className="w-6 h-6 mr-3 text-gray-300 transition duration-150 ease-in-out group-hover:text-gray-100 group-focus:text-gray-300"
         fill="currentColor"
         viewBox="0 0 20 20"
         xmlns="http://www.w3.org/2000/svg"
@@ -91,7 +91,7 @@ const SidebarLinks: SidebarLinkProps[] = [
     messagesKey: 'settings',
     svgIcon: (
       <svg
-        className="mr-3 h-6 w-6 text-gray-300 group-hover:text-gray-300 group-focus:text-gray-300 transition ease-in-out duration-150"
+        className="w-6 h-6 mr-3 text-gray-300 transition duration-150 ease-in-out group-hover:text-gray-100 group-focus:text-gray-300"
         fill="none"
         stroke="currentColor"
         viewBox="0 0 24 24"
@@ -125,7 +125,7 @@ const Sidebar: React.FC<SidebarProps> = ({ open, setClosed }) => {
     <>
       <div className="md:hidden">
         <Transition show={open}>
-          <div className="fixed inset-0 flex z-40">
+          <div className="fixed inset-0 z-40 flex">
             <Transition
               enter="transition-opacity ease-linear duration-300"
               enterFrom="opacity-0"
@@ -147,15 +147,15 @@ const Sidebar: React.FC<SidebarProps> = ({ open, setClosed }) => {
               leaveTo="-translate-x-full"
             >
               <>
-                <div className="relative flex-1 flex flex-col max-w-xs w-full bg-gray-800">
-                  <div className="absolute top-0 right-0 -mr-14 p-1">
+                <div className="relative flex flex-col flex-1 w-full max-w-xs bg-gray-800">
+                  <div className="absolute top-0 right-0 p-1 -mr-14">
                     <button
-                      className="flex items-center justify-center h-12 w-12 rounded-full focus:outline-none focus:bg-gray-600"
+                      className="flex items-center justify-center w-12 h-12 rounded-full focus:outline-none focus:bg-gray-600"
                       aria-label="Close sidebar"
                       onClick={() => setClosed()}
                     >
                       <svg
-                        className="h-6 w-6 text-white"
+                        className="w-6 h-6 text-white"
                         stroke="currentColor"
                         fill="none"
                         viewBox="0 0 24 24"
@@ -173,14 +173,14 @@ const Sidebar: React.FC<SidebarProps> = ({ open, setClosed }) => {
                     ref={navRef}
                     className="flex-1 h-0 pt-5 pb-4 overflow-y-auto"
                   >
-                    <div className="flex-shrink-0 flex items-center px-4">
+                    <div className="flex items-center flex-shrink-0 px-4">
                       <span className="text-xl text-gray-50">
                         <a href="/">
                           <img src="/logo.png" alt="Logo" />
                         </a>
                       </span>
                     </div>
-                    <nav className="mt-5 px-2 space-y-1">
+                    <nav className="px-2 mt-5 space-y-1">
                       {SidebarLinks.filter((link) =>
                         link.requiredPermission
                           ? hasPermission(link.requiredPermission)
@@ -231,10 +231,10 @@ const Sidebar: React.FC<SidebarProps> = ({ open, setClosed }) => {
         </Transition>
       </div>
 
-      <div className="hidden md:flex md:flex-shrink-0 top-0 bottom-0 left-0 fixed">
+      <div className="fixed top-0 bottom-0 left-0 hidden md:flex md:flex-shrink-0">
         <div className="flex flex-col w-64">
-          <div className="flex flex-col h-0 flex-1 bg-gray-800">
-            <div className="flex-1 flex flex-col pt-5 pb-4 overflow-y-auto">
+          <div className="flex flex-col flex-1 h-0 bg-gray-800">
+            <div className="flex flex-col flex-1 pt-5 pb-4 overflow-y-auto">
               <div className="flex items-center flex-shrink-0 px-4">
                 <span className="text-2xl text-gray-50">
                   <a href="/">
@@ -242,7 +242,7 @@ const Sidebar: React.FC<SidebarProps> = ({ open, setClosed }) => {
                   </a>
                 </span>
               </div>
-              <nav className="mt-5 flex-1 px-2 bg-gray-800 space-y-1">
+              <nav className="flex-1 px-2 mt-5 space-y-1 bg-gray-800">
                 {SidebarLinks.filter((link) =>
                   link.requiredPermission
                     ? hasPermission(link.requiredPermission)
@@ -255,7 +255,7 @@ const Sidebar: React.FC<SidebarProps> = ({ open, setClosed }) => {
                       as={sidebarLink.as}
                     >
                       <a
-                        className={`flex items-center px-2 py-2 text-base leading-6 font-medium rounded-md text-white focus:outline-none focus:bg-gray-700 transition ease-in-out duration-150
+                        className={`flex group items-center px-2 py-2 text-base leading-6 font-medium rounded-md text-white hover:text-gray-100 hover:bg-gray-700 focus:outline-none focus:bg-gray-700 transition ease-in-out duration-150
                                 ${
                                   router.pathname.match(
                                     sidebarLink.activeRegExp

src/components/Settings/Notifications/NotificationsDiscord.tsx

@@ -117,7 +117,11 @@ const NotificationsDiscord: React.FC = () => {
                 )}
               </div>
             </div>
-            <div role="group" aria-labelledby="group-label" className="group">
+            <div
+              role="group"
+              aria-labelledby="group-label"
+              className="form-group"
+            >
               <div className="form-row">
                 <span id="group-label" className="group-label">
                   {intl.formatMessage(messages.notificationtypes)}

src/components/Settings/Notifications/NotificationsEmail.tsx

@@ -252,7 +252,11 @@ const NotificationsEmail: React.FC = () => {
                 </div>
               </div>
             </div>
-            <div role="group" aria-labelledby="group-label" className="group">
+            <div
+              role="group"
+              aria-labelledby="group-label"
+              className="form-group"
+            >
               <div className="form-row">
                 <span id="group-label" className="group-label">
                   {intl.formatMessage(messages.notificationtypes)}

src/components/Settings/Notifications/NotificationsPushover/index.tsx

@@ -178,7 +178,11 @@ const NotificationsPushover: React.FC = () => {
                   )}
                 </div>
               </div>
-              <div role="group" aria-labelledby="group-label" className="group">
+              <div
+                role="group"
+                aria-labelledby="group-label"
+                className="form-group"
+              >
                 <div className="form-row">
                   <span id="group-label" className="group-label">
                     {intl.formatMessage(messages.notificationtypes)}

src/components/Settings/Notifications/NotificationsSlack/index.tsx

@@ -145,7 +145,11 @@ const NotificationsSlack: React.FC = () => {
                   )}
                 </div>
               </div>
-              <div role="group" aria-labelledby="group-label" className="group">
+              <div
+                role="group"
+                aria-labelledby="group-label"
+                className="form-group"
+              >
                 <div className="form-row">
                   <span id="group-label" className="group-label">
                     {intl.formatMessage(messages.notificationtypes)}

src/components/Settings/Notifications/NotificationsTelegram.tsx

@@ -178,7 +178,11 @@ const NotificationsTelegram: React.FC = () => {
                   )}
                 </div>
               </div>
-              <div role="group" aria-labelledby="group-label" className="group">
+              <div
+                role="group"
+                aria-labelledby="group-label"
+                className="form-group"
+              >
                 <div className="form-row">
                   <span id="group-label" className="group-label">
                     {intl.formatMessage(messages.notificationtypes)}

src/components/Settings/Notifications/NotificationsWebhook/index.tsx

@@ -257,7 +257,11 @@ const NotificationsWebhook: React.FC = () => {
               </div>
             </div>
             <div className="mt-8">
-              <div role="group" aria-labelledby="group-label" className="group">
+              <div
+                role="group"
+                aria-labelledby="group-label"
+                className="form-group"
+              >
                 <div className="sm:grid sm:grid-cols-4 sm:gap-4">
                   <div>
                     <div id="group-label" className="group-label">

src/components/Settings/SettingsMain.tsx

@@ -301,7 +301,7 @@ const SettingsMain: React.FC = () => {
                 <div
                   role="group"
                   aria-labelledby="group-label"
-                  className="group"
+                  className="form-group"
                 >
                   <div className="form-row">
                     <span id="group-label" className="group-label">

src/components/UserEdit/index.tsx

@@ -151,7 +151,11 @@ const UserEdit: React.FC = () => {
               </div>
             </div>
           </div>
-          <div role="group" aria-labelledby="group-label" className="group">
+          <div
+            role="group"
+            aria-labelledby="group-label"
+            className="form-group"
+          >
             <div className="form-row">
               <span id="group-label" className="group-label">
                 <FormattedMessage {...messages.permissions} />

src/styles/globals.css

@@ -114,7 +114,7 @@ input.port {
   @apply mt-2 text-sm text-red-500;
 }
 
-.group {
+.form-group {
   @apply mt-6 text-white;
 }