[Redesign add agent] Dark mode (#5620)

* remove custom color styles to make the elastic dark mode work by default on the agent registration page

* add development for images to have dark mode in the section deploy a new agent

* changelog about dark mode

* Cleaning console.log from assets file

* Adding suggested style modifications in the agent registration section

* add a style hint so that text cannot be selected on cards

* add suggested changes to the styles in the register an agent section

* correction added to the word wizard

* added coding enhancements in the agent registration section

* adding an enhancement to eliminate the console error

* adding an enhancement to eliminate the console error

CHANGELOG.md

@@ -6,9 +6,12 @@ All notable changes to the Wazuh app project will be documented in this file.
 
 ### Added
 
+- Added development so that the images of the new agent deployment page also have dark mode. [5620](https://github.com/wazuh/wazuh-kibana-app/pull/5620)
+
 ### Changed
 
 - Changed the deploy a new agent page from step one to step three. [#5554](https://github.com/wazuh/wazuh-kibana-app/pull/5554) [5462](https://github.com/wazuh/wazuh-kibana-app/pull/5462)
+- Removed the custom colors that did not allow to activate the default dark mode of elastic. [5620](https://github.com/wazuh/wazuh-kibana-app/pull/5620)
 
 ### Fixed
 

public/controllers/register-agent/components/group-input/group-input.tsx

@@ -50,7 +50,6 @@ const GroupInput = ({ value, options, onChange }) => {
                   fontWeight: 700,
                   fontSize: '12px',
                   lineHeight: '20px',
-                  color: '#343741',
                 }}
               >
                 Select one or more existing groups

public/controllers/register-agent/components/optionals-inputs/optionals-inputs.tsx

@@ -70,7 +70,6 @@ const OptionalsInputs = (props: OptionalsInputsProps) => {
                         fontWeight: 700,
                         fontSize: '12px',
                         lineHeight: '20px',
-                        color: '#343741',
                       }}
                     >
                       Assign an agent name

public/controllers/register-agent/components/os-selector/checkbox-group/checkbox-group.scss

@@ -9,7 +9,7 @@
   display: flex;
   flex-direction: row-reverse;
   align-items: center;
-  justify-content: center;
+  justify-content: left;
 }
 
 .checkbox-group-container.single-architecture {
@@ -28,7 +28,7 @@
   .checkbox-item {
     display: flex;
     flex-direction: row-reverse;
-    // justify-content: start;
+    justify-content: left;
     align-self: baseline;
   }
 }
@@ -38,11 +38,9 @@
   font-style: normal;
   font-weight: 400;
   font-size: 12px;
-  color: #343741;
 }
 .first-card-four-items {
   .checkbox-item:nth-child(n + 3) {
     padding-top: 16px;
-    justify-content: center;
   }
 }

public/controllers/register-agent/components/os-selector/checkbox-group/checkbox-group.tsx

@@ -34,7 +34,9 @@ const CheckboxGroupComponent: React.FC<Props> = ({
             idx === 0 || idx === 2 ? ' first-of-row' : ''
           }`}
         >
-          <span className='architecture-label'>{arch}</span>
+          <label className='architecture-label' htmlFor={arch}>
+            {arch}
+          </label>
           <EuiRadioGroup
             options={[{ id: `${arch}` }]}
             idSelected={selectedOption}

public/controllers/register-agent/components/os-selector/os-card/os-card.scss

@@ -1,11 +1,17 @@
 .card {
   height: 183px;
+
+  label {
+    cursor: pointer;
+  }
 }
 
 .cardTitle {
   display: flex;
   align-items: center;
   margin-top: 28px;
+  justify-content: center;
+  user-select: none;
 }
 
 .cardIcon {
@@ -24,7 +30,6 @@
   align-items: center;
   text-align: center;
   letter-spacing: 0.6px;
-  color: #343741;
 }
 
 .hr {

public/controllers/register-agent/components/os-selector/os-card/os-card.tsx

@@ -33,7 +33,6 @@ export const OsCard = ({ onChange, value }: Props) => {
               }
               display='plain'
               hasBorder
-              onClick={() => {}}
               className='card'
             >
               {data.hr && <hr className='hr' />}

public/controllers/register-agent/containers/register-agent/register-agent.scss

@@ -1,4 +1,4 @@
-.container {
+.register-agent-wizard-container {
   box-sizing: border-box;
   min-height: 1271px;
   margin-top: 44px;
@@ -9,18 +9,19 @@
   padding-right: 63px;
 }
 
-.title {
+.register-agent-wizard-title {
   margin-top: 51px;
   margin-bottom: 51px;
   font-style: normal;
   font-weight: 400;
   font-size: 30px;
   line-height: 36px;
-  color: #343741;
   display: flex;
   justify-content: center;
 }
-.close {
+
+.register-agent-wizard-close {
   display: flex;
   margin-top: 17px;
-}
+  float: right;
+}