basic design

meetulr · Feb 3, 2024 · 39ba261 · 39ba261
1 parent 21b4c19
commit 39ba261
Show file tree

Hide file tree

Showing 5 changed files with 372 additions and 46 deletions.
diff --git a/public/locales/en.json b/public/locales/en.json
@@ -288,9 +288,10 @@
   },
   "organizationActionItems": {
     "title": "Action Items",
-    "createActionItem": "Create Action Item",
-    "Latest": "Latest",
-    "Earliest": "Earliest"
+    "createActionItem": "Create",
+    "searchByName": "Search By Name",
+    "latest": "Latest",
+    "earliest": "Earliest"
   },
   "eventListCard": {
     "location": "Location",

diff --git a/src/assets/svgs/actionItem.svg b/src/assets/svgs/actionItem.svg
diff --git a/src/components/IconComponent/IconComponent.tsx b/src/components/IconComponent/IconComponent.tsx
@@ -3,6 +3,7 @@ import { QuestionMarkOutlined } from '@mui/icons-material';
 import { ReactComponent as BlockUserIcon } from 'assets/svgs/blockUser.svg';
 import { ReactComponent as DashboardIcon } from 'assets/svgs/dashboard.svg';
 import { ReactComponent as EventsIcon } from 'assets/svgs/events.svg';
+import { ReactComponent as ActionItemIcon } from 'assets/svgs/actionItem.svg';
 import { ReactComponent as OrganizationsIcon } from 'assets/svgs/organizations.svg';
 import { ReactComponent as PeopleIcon } from 'assets/svgs/people.svg';
 import { ReactComponent as PluginsIcon } from 'assets/svgs/plugins.svg';
@@ -36,6 +37,13 @@ const iconComponent = (props: InterfaceIconComponent): JSX.Element => {
       return <PeopleIcon {...props} data-testid="Icon-Component-PeopleIcon" />;
     case 'Events':
       return <EventsIcon {...props} data-testid="Icon-Component-EventsIcon" />;
+    case 'Action Items':
+      return (
+        <ActionItemIcon
+          {...props}
+          data-testid="Icon-Component-ActionItemIcon"
+        />
+      );
     case 'Posts':
       return <PostsIcon {...props} data-testid="Icon-Component-PostsIcon" />;
     case 'Block/Unblock':

diff --git a/src/screens/OrganizationActionItems/OrganizationActionItems.module.css b/src/screens/OrganizationActionItems/OrganizationActionItems.module.css
@@ -1,3 +1,61 @@
+.actionItemsContainer {
+  height: 90vh;
+}
+
+.btnsContainer {
+  display: flex;
+}
+
+.btnsContainer .btnsBlock {
+  display: flex;
+}
+
+.btnsContainer .btnsBlock button {
+  margin-left: 1rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.btnsContainer .input {
+  flex: 1;
+  position: relative;
+}
+
+.btnsContainer input {
+  outline: 1px solid var(--bs-gray-400);
+}
+
+.btnsContainer .input button {
+  width: 52px;
+}
+
+.cardHeader {
+  padding: 1.25rem 1rem 1rem 1rem;
+  border-bottom: 1px solid var(--bs-gray-200);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.cardHeader .cardTitle {
+  font-size: 1.3rem;
+  font-weight: 600;
+}
+
+.cardBody {
+  min-height: 150px;
+  background-color: var(--bs-gray-100);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.cardBody .textBox {
+  margin: 0 0 3rem 0;
+  color: var(--bs-secondary);
+}
+
 .container {
   min-height: 100vh;
 }
@@ -6,8 +64,114 @@
   display: inline;
 }
 
+form > input {
+  display: block;
+  border: 1px solid #e8e5e5;
+  box-shadow: 2px 1px #e8e5e5;
+  padding: 10px 20px;
+  border-radius: 5px;
+  background: none;
+  width: 100%;
+  transition: all 0.3s ease-in-out;
+  -webkit-transition: all 0.3s ease-in-out;
+  -moz-transition: all 0.3s ease-in-out;
+  -ms-transition: all 0.3s ease-in-out;
+  -o-transition: all 0.3s ease-in-out;
+}
+
 hr {
   border: none;
   height: 1px;
   background-color: var(--bs-gray-500);
+  margin: 1rem;
+}
+
+.icon {
+  transform: scale(1.5);
+  color: var(--bs-danger);
+  margin-bottom: 1rem;
+}
+
+.message {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.searchForm {
+  display: inline;
+}
+
+@media (max-width: 1020px) {
+  .btnsContainer {
+    flex-direction: column;
+    margin: 1.5rem 0;
+  }
+
+  .btnsContainer .btnsBlock {
+    margin: 1.5rem 0 0 0;
+    justify-content: space-between;
+  }
+
+  .btnsContainer .btnsBlock button {
+    margin: 0;
+  }
+
+  .btnsContainer .btnsBlock div button {
+    margin-right: 1.5rem;
+  }
+}
+
+.dropdownToggle {
+  margin-bottom: 0;
+}
+
+@media (max-width: 767px) {
+  .btnsContainer .btnsBlock {
+    flex-direction: column;
+    margin: 1.5rem 0 0 0;
+    justify-content: space-between;
+  }
+
+  .dropdownToggle {
+    margin-bottom: 1rem;
+  }
+
+  .dropdownContainer {
+    margin-bottom: 0;
+    justify-content: space-between;
+  }
+}
+
+/* For mobile devices  */
+
+@media (max-width: 520px) {
+  .btnsContainer {
+    margin-bottom: 0;
+  }
+
+  .btnsContainer .btnsBlock {
+    display: block;
+    margin-top: 1rem;
+    margin-right: 0;
+  }
+
+  .btnsContainer .btnsBlock div {
+    flex: 1;
+  }
+
+  .btnsContainer .btnsBlock div[title='Sort organizations'] {
+    margin-right: 0.5rem;
+  }
+
+  .btnsContainer .btnsBlock button {
+    margin-bottom: 1rem;
+    margin-right: 0;
+    width: 100%;
+  }
+
+  .dropdownToggle {
+    margin-bottom: 0;
+  }
 }