From d592b745df5b70559a35f3a673caa92f421c3997 Mon Sep 17 00:00:00 2001 From: omar-etman Date: Tue, 19 Apr 2022 23:07:10 +0200 Subject: [PATCH 01/19] build and style the contacts component, modify app responsiveness , setup the contact card component --- connect-chat-app/src/assets/index.css | 142 ++++++++++++++++++++++---- 1 file changed, 120 insertions(+), 22 deletions(-) diff --git a/connect-chat-app/src/assets/index.css b/connect-chat-app/src/assets/index.css index 13ae334..70142f5 100644 --- a/connect-chat-app/src/assets/index.css +++ b/connect-chat-app/src/assets/index.css @@ -22,37 +22,55 @@ body { flex-direction: column; } -/* .App { - display: grid; - grid-template-columns: 1fr 0fr 0fr; - grid-template-rows: 0.2fr 1.97fr 0.1fr; - gap: 0px 0px; - grid-template-areas: - ". . ." - ". . ." - ". . ."; -} */ +main { + /* margin-top: 2rem; */ + min-height: 49.2rem; + padding: 1rem 0.5rem; +} + + +.App-header{ + display: none; +} + +@media (min-width: 550px){ + + .App { + min-height: 41rem; + } + + .App-header { + display: flex; + align-items: center; + justify-content: flex-start; + width: 100%; + } + + main { + min-height: 49.5rem; + } + + +} /* ------header styling--------- */ -.App-header { +.header-container { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-content: center; background-color: var(--dkBlue); color: white; - width: 100%; + width: 97%; display: flex; border-bottom-left-radius: 1.5rem; border-bottom-right-radius: 1.5rem; position: fixed; margin-top: 2.85rem; -} - - -.header-container { - display: flex; - margin-left: 1.5rem; - flex-direction: row; - justify-content: center; - align-content: center; + z-index: 6; + padding-left: 3rem; + padding-top: 0.5rem; } .header-logo{ @@ -87,4 +105,84 @@ body { .App-footer{ background-color: var(--dkBlue); width: 100%; -} \ No newline at end of file +} +/* --------------------------- */ +/* ------ChatPage styling------- */ + + + +/* --------------------------- */ +/* ------Contacts styling------- */ + +.contacts-container { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: white; + color: black; + left: 0; + right: 0; + max-height: 46rem; + position: fixed; + margin-top: 4rem; +} + +.contacts-title { + display: none; +} + +.contacts-scroll { + overflow: hidden; + overflow-y: scroll; + direction: rtl; + padding: 1rem; +} + +.contacts-list { + list-style: none; + scrollbar-color: var(--backGround) var(--ltBlue); + text-align: left; + padding-left: 1.2rem; +} + +.contacts-header { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-content: center; + background-color: var(--dkBlue); + color: white; + width: 89%; + display: flex; + border-bottom-left-radius: 1.5rem; + border-bottom-right-radius: 1.5rem; + position: fixed; + z-index: 6; + padding-left: 3rem; + padding-top: 0.5rem; + top: 0px; +} + +@media (min-width: 550px){ + .contacts-container{ + border-radius: 1.25rem; + margin: 4rem; + max-height: 44rem; + max-width: 23rem; + } + + .contacts-header { + display: none; + } + + .contacts-title { + display: flex; + justify-self: start; + align-self: flex-start; + margin-left: 2rem; + } +} + +/* --------------------------- */ +/* ------ContactCard styling------- */ \ No newline at end of file From c990dd5a3efbf12de69b316c3efb2692f9bc67be Mon Sep 17 00:00:00 2001 From: omar-etman Date: Tue, 19 Apr 2022 23:08:41 +0200 Subject: [PATCH 02/19] build & style the contacts component, setup the contactCard component & modify app responsiveness --- connect-chat-app/src/App.tsx | 4 +- .../src/Components/ContactCard.tsx | 27 +++++++++++++ connect-chat-app/src/Components/Contacts.tsx | 38 +++++++++++++++++++ .../src/Components/ContactsHeader.tsx | 11 ++++++ 4 files changed, 79 insertions(+), 1 deletion(-) create mode 100644 connect-chat-app/src/Components/ContactCard.tsx create mode 100644 connect-chat-app/src/Components/Contacts.tsx create mode 100644 connect-chat-app/src/Components/ContactsHeader.tsx diff --git a/connect-chat-app/src/App.tsx b/connect-chat-app/src/App.tsx index cfe9841..6f9a750 100644 --- a/connect-chat-app/src/App.tsx +++ b/connect-chat-app/src/App.tsx @@ -1,6 +1,8 @@ import React from 'react'; import './App.css'; import Header from './Components/Header'; +import Contacts from './Components/Contacts'; + function App() { return ( @@ -9,7 +11,7 @@ function App() {
- +