From fae0b58c25d12f7ee30c49c50ca9e67d68ac7093 Mon Sep 17 00:00:00 2001
From: Bittu kumar <kumarbittuu26@gmail.com>
Date: Mon, 20 Jan 2025 03:43:13 +0530
Subject: [PATCH] Refactor css src/copomnents/GroupChatDetails

---
 .../GroupChatDetails.module.css               |  94 ----------------
 .../GroupChatDetails/GroupChatDetails.tsx     |   2 +-
 src/style/app.module.css                      | 104 ++++++++++++++++++
 3 files changed, 105 insertions(+), 95 deletions(-)
 delete mode 100644 src/components/GroupChatDetails/GroupChatDetails.module.css

diff --git a/src/components/GroupChatDetails/GroupChatDetails.module.css b/src/components/GroupChatDetails/GroupChatDetails.module.css
deleted file mode 100644
index 61119875f0..0000000000
--- a/src/components/GroupChatDetails/GroupChatDetails.module.css
+++ /dev/null
@@ -1,94 +0,0 @@
-.groupInfo {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-
-.memberList {
-  max-height: 300px;
-  overflow: scroll;
-}
-
-.memberList::-webkit-scrollbar {
-  display: none;
-}
-
-.listItem {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.groupMembersList {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.groupMembersList p {
-  margin: 0;
-  color: #959595;
-}
-
-.membersImage {
-  width: 40px !important;
-}
-
-.groupImage {
-  margin-bottom: 10px;
-}
-
-.editImgBtn {
-  padding: 2px 6px 6px 8px;
-  border-radius: 100%;
-  background-color: white;
-  border: 1px solid #959595;
-  color: #959595;
-  outline: none;
-  position: relative;
-  top: -40px;
-  left: 40px;
-}
-
-.chatImage {
-  height: 120px;
-  border-radius: 100%;
-  width: 120px;
-}
-
-.editChatNameContainer {
-  display: flex;
-  gap: 15px;
-  align-items: center;
-  font-size: 20px;
-  margin-bottom: 10px;
-}
-
-.editChatNameContainer input {
-  border: none;
-  border-bottom: 1px solid rgb(171, 171, 171);
-  outline: none;
-  padding: 0px 5px;
-}
-
-.editChatNameContainer h3 {
-  margin: 0;
-}
-
-.cancelIcon {
-  color: rgb(197, 42, 42);
-  cursor: pointer;
-  font-size: 16px;
-}
-
-.checkIcon {
-  color: rgb(42, 197, 42);
-  cursor: pointer;
-}
-
-.chatUserDetails {
-  display: flex;
-  gap: 10px;
-  align-items: center;
-}
diff --git a/src/components/GroupChatDetails/GroupChatDetails.tsx b/src/components/GroupChatDetails/GroupChatDetails.tsx
index e252a286be..4a410d5a68 100644
--- a/src/components/GroupChatDetails/GroupChatDetails.tsx
+++ b/src/components/GroupChatDetails/GroupChatDetails.tsx
@@ -1,7 +1,7 @@
 import { Paper, TableBody } from '@mui/material';
 import React, { useRef, useState } from 'react';
 import { Button, Form, ListGroup, Modal } from 'react-bootstrap';
-import styles from './GroupChatDetails.module.css';
+import styles from '../../style/app.module.css';
 import type { ApolloQueryResult } from '@apollo/client';
 import { useMutation, useQuery } from '@apollo/client';
 import {
diff --git a/src/style/app.module.css b/src/style/app.module.css
index d9645b2bdd..00a2eb888d 100644
--- a/src/style/app.module.css
+++ b/src/style/app.module.css
@@ -50,6 +50,7 @@
   --black: black;
   --rating-star-filled: #ff6d75;
   --rating-star-hover: #ff3d47;
+  --text-grey-light: #959595;
   /* Background and Border */
   --table-bg: #eaebef;
   --tablerow-bg: #eff1f7;
@@ -58,6 +59,7 @@
   --tablerow-bg-color: var(--dropdown-hover-color);
   --row-background: var(--bs-white, var(--bs-white));
   --modal-background: rgba(0, 0, 0, 0.7);
+  --border-bottom-color: rgb(171, 171, 171);
 
   /* Font Sizes */
   --font-size-header: 16px;
@@ -92,6 +94,11 @@
   --bs-gray-300: #d1d5db;
   --toggle-button-bg: #1e4e8c;
 
+  /* icon */
+
+  --cancel-icon-color: rgb(197, 42, 42);
+  --check-icon-color: rgb(42, 197, 42);
+
   --table-head-bg: var(--blue-subtle, var(--blue-color));
   --table-head-color: var(--bs-white, var(--white-color));
 
@@ -5970,3 +5977,100 @@ button[data-testid='createPostBtn'] {
   margin-left: 13vw;
   max-width: 80vw;
 }
+
+/* GroupChatDetails */
+
+.groupInfo {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.memberList {
+  max-height: 300px;
+  overflow: scroll;
+}
+
+.memberList::-webkit-scrollbar {
+  display: none;
+}
+
+.listItem {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.groupMembersList {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.groupMembersList p {
+  margin: 0;
+  color: var(--text-grey-light);
+}
+
+.membersImage {
+  width: 40px !important;
+}
+
+.groupImage {
+  margin-bottom: 10px;
+}
+
+.editImgBtn {
+  padding: 2px 6px 6px 8px;
+  border-radius: 100%;
+  background-color: var(--white-color);
+  border: 1px solid var(--text-grey-light);
+  color: var(--text-grey-light);
+  outline: none;
+  position: relative;
+  top: -40px;
+  left: 40px;
+}
+
+.chatImage {
+  height: 120px;
+  border-radius: 100%;
+  width: 120px;
+}
+
+.editChatNameContainer {
+  display: flex;
+  gap: 15px;
+  align-items: center;
+  font-size: 20px;
+  margin-bottom: 10px;
+}
+
+.editChatNameContainer input {
+  border: none;
+  border-bottom: 1px solid var(--border-bottom-color);
+  outline: none;
+  padding: 0px 5px;
+}
+
+.editChatNameContainer h3 {
+  margin: 0;
+}
+
+.cancelIcon {
+  color: var(--cancel-icon-color);
+  cursor: pointer;
+  font-size: 16px;
+}
+
+.checkIcon {
+  color: var(--check-icon-color);
+  cursor: pointer;
+}
+
+.chatUserDetails {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}