Refactoring CSS files: merged CommunityProfile styles into global app…

….module.css (#2738)

* Refactor Community Profile css

* Fix linting issues

* Fix explicit lint issue

src/screens/CommunityProfile/CommunityProfile.tsx

@@ -18,7 +18,7 @@ import {
   SlackLogo,
 } from 'assets/svgs/social-icons';
 import convertToBase64 from 'utils/convertToBase64';
-import styles from './CommunityProfile.module.css';
+import styles from '../../style/app.module.css';
 import { errorHandler } from 'utils/errorHandler';
 import UpdateSession from '../../components/UpdateSession/UpdateSession';
 
@@ -90,7 +90,7 @@ const CommunityProfile = (): JSX.Element => {
   React.useEffect(() => {
     const preLoginData: PreLoginImageryDataType | undefined =
       data?.getCommunityData;
-    preLoginData &&
+    if (preLoginData) {
       setProfileVariable({
         name: preLoginData.name ?? '',
         websiteLink: preLoginData.websiteLink ?? '',
@@ -104,6 +104,7 @@ const CommunityProfile = (): JSX.Element => {
         reddit: preLoginData.socialMediaUrls.reddit ?? '',
         slack: preLoginData.socialMediaUrls.slack ?? '',
       });
+    }
   }, [data]);
 
   /**

src/style/app.module.css

@@ -831,6 +831,48 @@ hr {
   color: #31bb6b !important;
 }
 
+.card {
+  width: fit-content;
+}
+
+.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.5rem;
+}
+
+.formLabel {
+  font-weight: normal;
+  padding-bottom: 0;
+  font-size: 1rem;
+  color: black;
+}
+.cardBody {
+  min-height: 180px;
+}
+
+.cardBody .textBox {
+  margin: 0 0 3rem 0;
+  color: var(--bs-secondary);
+}
+
+.socialInput {
+  height: 2.5rem;
+}
+
+@media (max-width: 520px) {
+  .btn {
+    flex-direction: column;
+    justify-content: center;
+  }
+}
+
 @media (max-width: 1024px) {
   .pageNotFound h1.head {
     font-size: 200px;