Plugin and advertisement screen revamp

public/locales/en.json

@@ -745,7 +745,7 @@
     "pDesc": "This Plugin enables UI for"
   },
   "addOnStore": {
-    "title": "Add On Store",
+    "title": "Plugin Store",
     "searchName": "Ex: Donations",
     "enable": "Enabled",
     "disable": "Disabled",
@@ -1028,7 +1028,7 @@
     "RstartDate": "Select Start Date",
     "RendDate": "Select End Date",
     "RClose": "Close the window",
-    "addNew": "Create new advertisement",
+    "addNew": "Create",
     "EXname": "Ex. Cookie Shop",
     "EXlink": "Ex. http://yourwebsite.com/photo",
     "register": "Create Advertisement",

src/components/ActionItems/ActionItemsModal.tsx

@@ -19,8 +19,8 @@ export const ActionItemsModal = (props: InterfaceModalProp): JSX.Element => {
   return (
     <>
       <Modal
-        show={props.show}
-        onHide={props.handleClose}
+        show={props?.show}
+        onHide={props?.handleClose}
         backdrop="static"
         centered
         dialogClassName={styles.actionItemsModal}
@@ -32,8 +32,8 @@ export const ActionItemsModal = (props: InterfaceModalProp): JSX.Element => {
         </Modal.Header>
         <Modal.Body>
           <ActionItemsModalBody
-            organizationId={props.orgId}
-            eventId={props.eventId}
+            organizationId={props?.orgId}
+            eventId={props?.eventId}
           />
         </Modal.Body>
       </Modal>

src/components/AddOn/core/AddOnEntry/AddOnEntry.module.css

@@ -7,8 +7,12 @@
   margin-left: auto;
   display: flex !important;
   align-items: center;
+  background-color: transparent;
+  color: #31bb6b;
+}
+.card {
+  border: 4px solid green;
 }
-
 .entryaction i {
   margin-right: 8px;
 }

src/components/AddOn/core/AddOnEntry/AddOnEntry.tsx

@@ -15,9 +15,9 @@ interface InterfaceAddOnEntryProps {
   description: string;
   createdBy: string;
   component: string;
-  modified: any;
+  modified: boolean;
   uninstalledOrgs: string[];
-  getInstalledPlugins: () => any;
+  getInstalledPlugins: () => void;
 }
 
 function addOnEntry({
@@ -28,9 +28,11 @@ function addOnEntry({
   uninstalledOrgs,
   getInstalledPlugins,
 }: InterfaceAddOnEntryProps): JSX.Element {
+  console.log(id);
   const { t } = useTranslation('translation', { keyPrefix: 'addOnEntry' });
   //getting orgId from URL
   const { orgId: currentOrg } = useParams();
+  // console.log(currentOrg);
   if (!currentOrg) {
     return <Navigate to={'/orglist'} />;
   }
@@ -62,7 +64,10 @@ function addOnEntry({
 
   return (
     <>
-      <Card data-testid="AddOnEntry">
+      <Card
+        data-testid="AddOnEntry"
+        style={{ border: '1px solid #31BB6B', borderRadius: '10px' }}
+      >
         {/* {uninstalledOrgs.includes(currentOrg) && (
           <Form.Check
             type="switch"
@@ -75,7 +80,7 @@ function addOnEntry({
           />
         )} */}
         <Card.Body>
-          <Card.Title>{title}</Card.Title>
+          <Card.Title style={{ fontWeight: '800' }}>{title}</Card.Title>
           <Card.Subtitle className="mb-2 text-muted author">
             {createdBy}
           </Card.Subtitle>
@@ -95,7 +100,7 @@ function addOnEntry({
               <Spinner animation="grow" />
             ) : (
               <i
-                className={!isInstalledLocal ? 'fa fa-trash' : 'fa fa-cubes'}
+                className={!isInstalledLocal ? 'fa fa-trash' : 'fa fa-plus'}
               ></i>
             )}
             {/* {installed ? 'Remove' : configurable ? 'Installed' : 'Install'} */}

src/components/AddOn/core/AddOnStore/AddOnStore.module.css

@@ -11,8 +11,12 @@
   border-bottom: 3px solid #31bb6b;
   width: 15%;
 }
-
-.actioninput {
+.input {
+  display: flex;
+  position: relative;
+  width: 560px;
+}
+/* .actioninput {
   text-decoration: none;
   margin-bottom: 50px;
   border-color: #e8e5e5;
@@ -23,9 +27,46 @@
   padding-right: 10px;
   padding-left: 10px;
   box-shadow: none;
+} */
+.actioninput {
+  margin-top: 10px;
+  margin-bottom: 10px;
+  background-color: white;
+  box-shadow: 0 1px 1px #31bb6b;
+}
+.inputField > button {
+  padding-top: 10px;
+  padding-bottom: 10px;
 }
 
 .actionradio input {
   width: fit-content;
   margin: inherit;
 }
+.cardGridItem {
+  width: 38vw;
+}
+.justifysp {
+  display: grid;
+  width: 100%;
+  justify-content: space-between;
+  align-items: baseline;
+  grid-template-rows: auto;
+  grid-template-columns: repeat(2, 1fr);
+  grid-gap: 0.8rem 0.4rem;
+}
+
+@media screen and (max-width: 600px) {
+  .cardGridItem {
+    width: 100%;
+  }
+  .justifysp {
+    display: grid;
+    width: 100%;
+    justify-content: center;
+    align-items: start;
+    grid-template-rows: auto;
+    grid-template-columns: 1fr;
+    grid-gap: 0.8rem 0.4rem;
+  }
+}