From 70292f724e0409c410c0f7c781781cacc6afc75e Mon Sep 17 00:00:00 2001
From: hustlernik <hustlernikxd@gmail.com>
Date: Tue, 24 Dec 2024 19:18:49 +0530
Subject: [PATCH 1/3] refactor: org-post css

---
 src/screens/OrgPost/OrgPost.module.css | 325 -------------------------
 src/screens/OrgPost/OrgPost.tsx        |  16 +-
 src/style/app.module.css               | 199 +++++++++++++++
 3 files changed, 207 insertions(+), 333 deletions(-)
 delete mode 100644 src/screens/OrgPost/OrgPost.module.css

diff --git a/src/screens/OrgPost/OrgPost.module.css b/src/screens/OrgPost/OrgPost.module.css
deleted file mode 100644
index e674efbc7a..0000000000
--- a/src/screens/OrgPost/OrgPost.module.css
+++ /dev/null
@@ -1,325 +0,0 @@
-.mainpage {
-  display: flex;
-  flex-direction: row;
-}
-.btnsContainer {
-  display: flex;
-  margin: 2.5rem 0 2.5rem 0;
-}
-
-.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;
-}
-
-.preview {
-  display: flex;
-  position: relative;
-  width: 100%;
-  margin-top: 10px;
-  justify-content: center;
-}
-.preview img {
-  width: 400px;
-  height: auto;
-}
-.preview video {
-  width: 400px;
-  height: auto;
-}
-.logintitle {
-  color: #707070;
-  font-weight: 600;
-  font-size: 20px;
-  margin-bottom: 30px;
-  padding-bottom: 5px;
-  border-bottom: 3px solid #31bb6b;
-  width: 15%;
-}
-.logintitleadmin {
-  color: #707070;
-  font-weight: 600;
-  font-size: 18px;
-  margin-top: 50px;
-  margin-bottom: 40px;
-  padding-bottom: 5px;
-  border-bottom: 3px solid #31bb6b;
-  width: 30%;
-}
-.admindetails {
-  display: flex;
-  justify-content: space-between;
-}
-.admindetails > p {
-  margin-top: -12px;
-  margin-right: 30px;
-}
-
-.mainpageright > hr {
-  margin-top: 20px;
-  width: 100%;
-  margin-left: -15px;
-  margin-right: -15px;
-  margin-bottom: 20px;
-}
-.justifysp {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 3rem;
-}
-
-@media (max-width: 1120px) {
-  .contract {
-    padding-left: calc(250px + 2rem + 1.5rem);
-  }
-
-  .listBox .itemCard {
-    width: 100%;
-  }
-}
-
-@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;
-  }
-}
-
-/* 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%;
-  }
-}
-@media screen and (max-width: 575.5px) {
-  .justifysp {
-    display: flex;
-    justify-content: space-between;
-    width: 100%;
-  }
-
-  .mainpageright {
-    width: 98%;
-  }
-}
-.addbtn {
-  border: 1px solid #e8e5e5;
-  box-shadow: 0 2px 2px #e8e5e5;
-  border-radius: 5px;
-  font-size: 16px;
-  height: 60%;
-  width: 60%;
-  color: white;
-  outline: none;
-  font-weight: 600;
-  cursor: pointer;
-  transition:
-    transform 0.2s,
-    box-shadow 0.2s;
-}
-.flexdir {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  border: none;
-}
-.form_wrapper {
-  margin-top: 27px;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  position: absolute;
-  display: flex;
-  flex-direction: column;
-  padding: 20px 30px;
-  background: #ffffff;
-  border-color: #e8e5e5;
-  border-width: 5px;
-  border-radius: 10px;
-}
-
-.form_wrapper form {
-  display: flex;
-  align-items: left;
-  justify-content: left;
-  flex-direction: column;
-}
-.logintitleinvite {
-  color: #707070;
-  font-weight: 600;
-  font-size: 20px;
-  margin-bottom: 20px;
-  padding-bottom: 5px;
-  border-bottom: 3px solid #31bb6b;
-  width: 40%;
-}
-.postinfo {
-  height: 80px;
-}
-
-.postinfo {
-  height: 80px;
-  margin-bottom: 20px;
-}
-.titlemodal {
-  color: #707070;
-  font-weight: 600;
-  font-size: 20px;
-  margin-bottom: 20px;
-  padding-bottom: 5px;
-  border-bottom: 3px solid #31bb6b;
-  width: 65%;
-}
-.cancel > i {
-  margin-top: 5px;
-  transform: scale(1.2);
-  cursor: pointer;
-  color: #707070;
-}
-.modalbody {
-  width: 50px;
-}
-
-.closeButton {
-  position: absolute;
-  top: 0px;
-  right: 0px;
-  background: transparent;
-  transform: scale(1.2);
-  cursor: pointer;
-  border: none;
-  color: #707070;
-  font-weight: 600;
-  font-size: 16px;
-  cursor: pointer;
-}
-.sidebarsticky > input {
-  text-decoration: none;
-  margin-bottom: 50px;
-  border: solid 1.5px #d3d3d3;
-  border-radius: 5px;
-  width: 80%;
-  border-radius: 7px;
-  padding-top: 5px;
-  padding-bottom: 5px;
-  padding-right: 10px;
-  padding-left: 10px;
-  text-decoration: none;
-  box-shadow: none;
-}
-
-.sidebarsticky > input:focus {
-  border-color: #fff;
-  box-shadow: 0 0 5pt 0.5pt #d3d3d3;
-  outline: none;
-}
-button[data-testid='createPostBtn'] {
-  display: block;
-}
-.loader,
-.loader:after {
-  border-radius: 50%;
-  width: 10em;
-  height: 10em;
-}
-.loader {
-  margin: 60px auto;
-  margin-top: 35vh !important;
-  font-size: 10px;
-  position: relative;
-  text-indent: -9999em;
-  border-top: 1.1em solid rgba(255, 255, 255, 0.2);
-  border-right: 1.1em solid rgba(255, 255, 255, 0.2);
-  border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
-  border-left: 1.1em solid #febc59;
-  -webkit-transform: translateZ(0);
-  -ms-transform: translateZ(0);
-  transform: translateZ(0);
-  -webkit-animation: load8 1.1s infinite linear;
-  animation: load8 1.1s infinite linear;
-}
-@-webkit-keyframes load8 {
-  0% {
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-  100% {
-    -webkit-transform: rotate(360deg);
-    transform: rotate(360deg);
-  }
-}
-@keyframes load8 {
-  0% {
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-  100% {
-    -webkit-transform: rotate(360deg);
-    transform: rotate(360deg);
-  }
-}
-.list_box {
-  height: 70vh;
-  overflow-y: auto;
-  width: auto;
-}
-@media only screen and (max-width: 600px) {
-  .form_wrapper {
-    width: 90%;
-    top: 45%;
-  }
-}
diff --git a/src/screens/OrgPost/OrgPost.tsx b/src/screens/OrgPost/OrgPost.tsx
index e2c388d7b0..e9cb4d4ca2 100644
--- a/src/screens/OrgPost/OrgPost.tsx
+++ b/src/screens/OrgPost/OrgPost.tsx
@@ -284,9 +284,9 @@ function orgPost(): JSX.Element {
   return (
     <>
       <Row className={styles.head}>
-        <div className={styles.mainpageright}>
-          <div className={styles.btnsContainer}>
-            <div className={styles.input}>
+        <div className={styles.mainpagerightOrgPost}>
+          <div className={styles.btnsContainerOrgPost}>
+            <div className={styles.inputOrgPost}>
               <Form.Control
                 type="text"
                 id="posttitle"
@@ -301,7 +301,7 @@ function orgPost(): JSX.Element {
                 <Search />
               </Button>
             </div>
-            <div className={styles.btnsBlock}>
+            <div className={styles.btnsBlockOrgPost}>
               <div className="d-flex">
                 <Dropdown
                   aria-expanded="false"
@@ -497,7 +497,7 @@ function orgPost(): JSX.Element {
             />
 
             {postformState.addMedia && file && (
-              <div className={styles.preview} data-testid="mediaPreview">
+              <div className={styles.previewOrgPost} data-testid="mediaPreview">
                 {/* Display preview for both image and video */}
                 {file.type.startsWith('image') ? (
                   <img
@@ -512,7 +512,7 @@ function orgPost(): JSX.Element {
                   </video>
                 )}
                 <button
-                  className={styles.closeButton}
+                  className={styles.closeButtonOrgPost}
                   onClick={(): void => {
                     setPostFormState({
                       ...postformState,
@@ -551,7 +551,7 @@ function orgPost(): JSX.Element {
           <Modal.Footer>
             <Button
               variant="secondary"
-              className={styles.closeButton}
+              className={styles.closeButtonOrgPost}
               onClick={(): void => hideInviteModal()}
               data-testid="closeOrganizationModal"
             >
@@ -561,7 +561,7 @@ function orgPost(): JSX.Element {
               type="submit"
               value="invite"
               data-testid="createPostBtn"
-              className={`${styles.addButton} mt-2`}
+              className={`${styles.addButtonOrgPost} mt-2`}
             >
               {t('addPost')}
             </Button>
diff --git a/src/style/app.module.css b/src/style/app.module.css
index 4acd2c72be..7dc119e1b0 100644
--- a/src/style/app.module.css
+++ b/src/style/app.module.css
@@ -1592,3 +1592,202 @@ form > input {
     display: block;
   }
 }
+
+/* CSS Refactor for OrgPost */
+
+.btnsContainerOrgPost {
+  display: flex;
+  margin: 2.5rem 0 2.5rem 0;
+}
+
+.btnsContainerOrgPost .btnsBlockOrgPost {
+  display: flex;
+}
+
+.btnsContainerOrgPost .btnsBlockOrgPost button {
+  margin-left: 1rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.btnsContainerOrgPost .inputOrgPost {
+  flex: 1;
+  position: relative;
+}
+
+.btnsContainerOrgPost input {
+  outline: 1px solid var(--bs-gray-400);
+}
+
+.btnsContainerOrgPost .inputOrgPost button {
+  width: 52px;
+}
+
+.previewOrgPost {
+  display: flex;
+  position: relative;
+  width: 100%;
+  margin-top: 10px;
+  justify-content: center;
+}
+.previewOrgPost img {
+  width: 400px;
+  height: auto;
+}
+.previewOrgPost video {
+  width: 400px;
+  height: auto;
+}
+.mainpagerightOrgPost > hr {
+  margin-top: 20px;
+  width: 100%;
+  margin-left: -15px;
+  margin-right: -15px;
+  margin-bottom: 20px;
+}
+
+@media (max-width: 1020px) {
+  .btnsContainerOrgPost {
+    flex-direction: column;
+    margin: 1.5rem 0;
+  }
+
+  .btnsContainerOrgPost .btnsBlockOrgPost {
+    margin: 1.5rem 0 0 0;
+    justify-content: space-between;
+  }
+
+  .btnsContainerOrgPost .btnsBlockOrgPost button {
+    margin: 0;
+  }
+
+  .btnsContainerOrgPost .btnsBlockOrgPost div button {
+    margin-right: 1.5rem;
+  }
+}
+
+/* For mobile devices  */
+
+@media (max-width: 520px) {
+  .btnsContainerOrgPost {
+    margin-bottom: 0;
+  }
+
+  .btnsContainerOrgPost .btnsBlockOrgPost {
+    display: block;
+    margin-top: 1rem;
+    margin-right: 0;
+  }
+
+  .btnsContainerOrgPost .btnsBlockOrgPost div {
+    flex: 1;
+  }
+
+  .btnsContainerOrgPost .btnsBlockOrgPost div[title='Sort organizations'] {
+    margin-right: 0.5rem;
+  }
+
+  .btnsContainerOrgPost .btnsBlockOrgPost button {
+    margin-bottom: 1rem;
+    margin-right: 0;
+    width: 100%;
+  }
+}
+@media screen and (max-width: 575.5px) {
+  .mainpagerightOrgPost {
+    width: 98%;
+  }
+}
+.addbtnOrgPost {
+  border: 1px solid #e8e5e5;
+  box-shadow: 0 2px 2px #e8e5e5;
+  border-radius: 5px;
+  font-size: 16px;
+  height: 60%;
+  width: 60%;
+  color: white;
+  outline: none;
+  font-weight: 600;
+  cursor: pointer;
+  transition:
+    transform 0.2s,
+    box-shadow 0.2s;
+}
+.postinfo {
+  height: 80px;
+}
+
+.postinfo {
+  height: 80px;
+  margin-bottom: 20px;
+}
+.closeButtonOrgPost {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  background: transparent;
+  transform: scale(1.2);
+  cursor: pointer;
+  border: none;
+  color: #707070;
+  font-weight: 600;
+  font-size: 16px;
+  cursor: pointer;
+}
+button[data-testid='createPostBtn'] {
+  display: block;
+}
+.loader,
+.loader:after {
+  border-radius: 50%;
+  width: 10em;
+  height: 10em;
+}
+.loader {
+  margin: 60px auto;
+  margin-top: 35vh !important;
+  font-size: 10px;
+  position: relative;
+  text-indent: -9999em;
+  border-top: 1.1em solid rgba(255, 255, 255, 0.2);
+  border-right: 1.1em solid rgba(255, 255, 255, 0.2);
+  border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
+  border-left: 1.1em solid #febc59;
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
+  -webkit-animation: load8 1.1s infinite linear;
+  animation: load8 1.1s infinite linear;
+}
+@-webkit-keyframes load8 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@keyframes load8 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+.list_box {
+  height: 70vh;
+  overflow-y: auto;
+  width: auto;
+}
+@media only screen and (max-width: 600px) {
+  .form_wrapper {
+    width: 90%;
+    top: 45%;
+  }
+}

From a15d8c05f99499c85d1b20052dc577de0a5eb6ca Mon Sep 17 00:00:00 2001
From: hustlernik <hustlernikxd@gmail.com>
Date: Tue, 24 Dec 2024 19:38:01 +0530
Subject: [PATCH 2/3] Fix duplicate properties and class definitions

---
 src/style/app.module.css | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/style/app.module.css b/src/style/app.module.css
index 7dc119e1b0..5a896c554d 100644
--- a/src/style/app.module.css
+++ b/src/style/app.module.css
@@ -1714,10 +1714,6 @@ form > input {
     transform 0.2s,
     box-shadow 0.2s;
 }
-.postinfo {
-  height: 80px;
-}
-
 .postinfo {
   height: 80px;
   margin-bottom: 20px;
@@ -1733,7 +1729,6 @@ form > input {
   color: #707070;
   font-weight: 600;
   font-size: 16px;
-  cursor: pointer;
 }
 button[data-testid='createPostBtn'] {
   display: block;

From 39a94665fb882f5713c641c7839ecc59607cdc88 Mon Sep 17 00:00:00 2001
From: hustlernik <hustlernikxd@gmail.com>
Date: Tue, 24 Dec 2024 19:45:36 +0530
Subject: [PATCH 3/3] Remove duplicate keyframe definitions and optimize loader
 styles

---
 src/style/app.module.css | 17 ++++-------------
 1 file changed, 4 insertions(+), 13 deletions(-)

diff --git a/src/style/app.module.css b/src/style/app.module.css
index 5a896c554d..af2469c6e8 100644
--- a/src/style/app.module.css
+++ b/src/style/app.module.css
@@ -17,7 +17,8 @@
   --table-head-bg: var(--bs-primary, blue);
   --table-head-bg: var(
     --bs-primary,
-    blue
+    blue --loader-size: 10em; --loader-border-width: 1.1em; --loader-color:
+      #febc59;
   ); /* Assuming var(--bs-primary) is defined elsewhere */
 
   --table-head-color: white;
@@ -1736,8 +1737,8 @@ button[data-testid='createPostBtn'] {
 .loader,
 .loader:after {
   border-radius: 50%;
-  width: 10em;
-  height: 10em;
+  width: var(--loader-size);
+  height: var(--loader-size);
 }
 .loader {
   margin: 60px auto;
@@ -1755,16 +1756,6 @@ button[data-testid='createPostBtn'] {
   -webkit-animation: load8 1.1s infinite linear;
   animation: load8 1.1s infinite linear;
 }
-@-webkit-keyframes load8 {
-  0% {
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-  100% {
-    -webkit-transform: rotate(360deg);
-    transform: rotate(360deg);
-  }
-}
 @keyframes load8 {
   0% {
     -webkit-transform: rotate(0deg);