#2883 Refactor CSS files in miscellaneous components

src/components/AddOn/core/AddOnStore/AddOnStore.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import styles from './AddOnStore.module.css';
+import styles from '../../../../style/app.module.css';
 import AddOnEntry from '../AddOnEntry/AddOnEntry';
 import { useQuery } from '@apollo/client';
 import { PLUGIN_GET } from 'GraphQl/Queries/Queries'; // PLUGIN_LIST
@@ -122,36 +122,19 @@ function addOnStore(): JSX.Element {
 
   return (
     <>
-      <Row
-        className=""
-        style={{
-          backgroundColor: 'white',
-          margin: '2px',
-          padding: '10px',
-          borderRadius: '20px',
-        }}
-      >
-        <Col
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-          }}
-        >
-          <div className={styles.input}>
+      <Row className={styles.containerAddOnStore}>
+        <Col className={styles.colAddOnStore}>
+          <div className={styles.inputAddOnStore}>
             <Form.Control
               type="name"
               id="searchname"
-              className={styles.actioninput}
+              className={styles.inputField}
               placeholder={t('searchName')}
               autoComplete="off"
               required
               onChange={(e): void => setSearchText(e.target.value)}
             />
-            <Button
-              className={`position-absolute z-10 bottom-0 end-0 d-flex justify-content-center align-items-center `}
-              style={{ marginBottom: '10px' }}
-            >
+            <Button className={styles.searchButton}>
               <Search />
             </Button>
           </div>
@@ -199,7 +182,7 @@ function addOnStore(): JSX.Element {
               title={t('available')}
               style={{ backgroundColor: 'white' }}
             >
-              <div className={styles.justifysp}>
+              <div className={styles.justifyspAddOnStore}>
                 {(() => {
                   const filteredPlugins = filterPlugins(
                     data?.getPlugins || [],
@@ -211,7 +194,7 @@ function addOnStore(): JSX.Element {
                   }
 
                   return (
-                    <div className={styles.justifysp}>
+                    <div className={styles.justifyspAddOnStore}>
                       {filteredPlugins.map((plug, i) => (
                         <div className={styles.cardGridItem} key={i}>
                           <AddOnEntry
@@ -236,7 +219,7 @@ function addOnStore(): JSX.Element {
               title={t('install')}
               data-testid="installed-tab"
             >
-              <div className={styles.justifysp}>
+              <div className={styles.justifyspAddOnStore}>
                 {(() => {
                   const installedPlugins = (data?.getPlugins || []).filter(
                     (plugin) => !plugin.uninstalledOrgs.includes(orgId ?? ''),

src/components/Advertisements/Advertisements.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import styles from './Advertisements.module.css';
+import styles from '../../style/app.module.css';
 import { useQuery } from '@apollo/client';
 import { ORGANIZATION_ADVERTISEMENT_LIST } from 'GraphQl/Queries/Queries';
 import { Button, Col, Form, Row, Tab, Tabs } from 'react-bootstrap';
@@ -79,29 +79,20 @@ export default function advertisements(): JSX.Element {
   return (
     <>
       <Row data-testid="advertisements">
-        <Col col={8} style={{ backgroundColor: 'white', borderRadius: '20px' }}>
-          <div className={styles.justifysp}>
-            <Col
-              style={{
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'space-between',
-                padding: '10px',
-              }}
-            >
-              <div className={styles.input}>
+        <Col col={8} className={styles.containerAdvertisements}>
+          <div className={styles.justifyspAdvertisements}>
+            <Col className={styles.colAdvertisements}>
+              <div className={styles.inputAdvertisements}>
                 <Form.Control
                   type="name"
                   id="searchname"
-                  className={styles.actioninput}
+                  className={styles.inputField}
                   placeholder={'Search..'}
                   autoComplete="off"
                   required
                   // onChange={(e): void => setSearchText("search")}
                 />
-                <Button
-                  className={`position-absolute z-10 bottom-0 end-0 d-flex justify-content-center align-items-center `}
-                >
+                <Button className={styles.searchButton}>
                   <Search />
                 </Button>
               </div>
@@ -145,7 +136,7 @@ export default function advertisements(): JSX.Element {
                     orgAdvertisementListData?.organizations[0].advertisements
                       .pageInfo.hasNextPage ?? false
                   }
-                  className={styles.listBox}
+                  className={styles.listBoxAdvertisements}
                   data-testid="organizations-list"
                   endMessage={
                     advertisements.filter(
@@ -221,7 +212,7 @@ export default function advertisements(): JSX.Element {
                     orgAdvertisementListData?.organizations[0].advertisements
                       .pageInfo.hasNextPage ?? false
                   }
-                  className={styles.listBox}
+                  className={styles.listBoxAdvertisements}
                   data-testid="organizations-list"
                   endMessage={
                     advertisements.filter(

src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.tsx

@@ -314,7 +314,10 @@ function advertisementRegister({
                 }}
               />
               {formState.advertisementMedia && (
-                <div className={styles.preview} data-testid="mediaPreview">
+                <div
+                  className={styles.previewAdvertisementRegister}
+                  data-testid="mediaPreview"
+                >
                   {formState.advertisementMedia.includes('video') ? (
                     <video
                       muted
@@ -332,7 +335,7 @@ function advertisementRegister({
                     <img src={formState.advertisementMedia} />
                   )}
                   <button
-                    className={styles.closeButton}
+                    className={styles.closeButtonAdvertisementRegister}
                     onClick={(e): void => {
                       e.preventDefault();
                       setFormState({
@@ -405,7 +408,7 @@ function advertisementRegister({
           <Button
             variant="secondary"
             onClick={handleClose}
-            className={styles.closeButton}
+            className={styles.closeButtonAdvertisementRegister}
             data-testid="addonclose"
           >
             {tCommon('close')}