From fffcd33414c475a330dc98f39bb114e6ddcaca81 Mon Sep 17 00:00:00 2001 From: Mihika Dusad Date: Tue, 21 Jan 2025 17:20:59 -0500 Subject: [PATCH 1/3] final new_ui --- client/src/components/App.jsx | 6 +++--- client/src/index.css | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/client/src/components/App.jsx b/client/src/components/App.jsx index 8bd2e71f..a2a3133f 100644 --- a/client/src/components/App.jsx +++ b/client/src/components/App.jsx @@ -9,9 +9,9 @@ import { get, post } from "../utilities"; import { Outlet } from "react-router-dom"; // to use styles, import the necessary CSS files -import "../utilities.css"; -import "./App.css"; - +// import "../utilities.css"; +//import "./App.css"; +import "../index.css"; /** * Define the "App" component as a function. */ diff --git a/client/src/index.css b/client/src/index.css index e13fde2e..a6e7a603 100644 --- a/client/src/index.css +++ b/client/src/index.css @@ -179,7 +179,7 @@ custom-button{ @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded } -@layer utilities { +/* @layer utilities { .border-border { border: 1px solid black; /* Or your intended style*/ } @@ -190,4 +190,4 @@ custom-button{ .text-foreground { color: #333333; /* Or your intended text color */ } -} \ No newline at end of file +} */ \ No newline at end of file From 7c6e0604e3d19c89718b1e0daf6a77eed03dc292 Mon Sep 17 00:00:00 2001 From: Mihika Dusad Date: Tue, 21 Jan 2025 17:21:21 -0500 Subject: [PATCH 2/3] final new_ui --- client/src/index.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/client/src/index.css b/client/src/index.css index a6e7a603..06340a2e 100644 --- a/client/src/index.css +++ b/client/src/index.css @@ -174,12 +174,12 @@ form { @apply bg-background text-foreground; } } */ - +/* custom-button{ @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded -} +} */ -/* @layer utilities { +@layer utilities { .border-border { border: 1px solid black; /* Or your intended style*/ } @@ -190,4 +190,4 @@ custom-button{ .text-foreground { color: #333333; /* Or your intended text color */ } -} */ \ No newline at end of file +} \ No newline at end of file From 82943c0d89e8d5018f1ce5a6a491e924a9674d2c Mon Sep 17 00:00:00 2001 From: Mihika Dusad Date: Tue, 21 Jan 2025 17:38:41 -0500 Subject: [PATCH 3/3] ui with red buttons --- client/src/components/App.css | 47 ++++++++++++++++++- client/src/components/modules/Card.css | 4 +- .../src/components/modules/CatHappiness.css | 4 +- client/src/components/modules/Chat.css | 4 +- client/src/components/modules/NavBar.css | 4 +- .../src/components/modules/NewPostInput.css | 4 +- client/src/components/modules/SearchBar.css | 4 +- .../src/components/modules/SingleMessage.css | 4 +- client/src/components/modules/SingleUser.css | 4 +- client/src/components/pages/Chatbook.css | 4 +- client/src/components/pages/Feed.css | 4 +- client/src/components/pages/Postpage.jsx | 3 +- client/src/components/pages/Profile.css | 4 +- client/src/index.css | 14 +++--- client/src/tailwind.css | 29 +++++++----- client/src/utilities.css | 8 ++-- 16 files changed, 98 insertions(+), 47 deletions(-) diff --git a/client/src/components/App.css b/client/src/components/App.css index 28b4924f..97b845f6 100644 --- a/client/src/components/App.css +++ b/client/src/components/App.css @@ -1,9 +1,52 @@ -@tailwind base; +/* @tailwind base; @tailwind components; -@tailwind utilities; +@tailwind utilities; */ .App-container { max-width: 960px; padding: var(--m) var(--m); margin: auto; } +/* +#root { + max-width: 900px; + margin: 0 auto; + padding: var(--m) var(--m); + text-align: left; +} + +.logo { + height: 6em; + padding: 1.5em; + will-change: filter; + transition: filter 300ms; +} +.logo:hover { + filter: drop-shadow(0 0 2em #646cffaa); +} +.logo.react:hover { + filter: drop-shadow(0 0 2em #61dafbaa); +} + +@keyframes logo-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + +@media (prefers-reduced-motion: no-preference) { + a:nth-of-type(2) .logo { + animation: logo-spin infinite 20s linear; + } +} + +.card { + padding: 2em; +} + +.read-the-docs { + color: #888; +} */ diff --git a/client/src/components/modules/Card.css b/client/src/components/modules/Card.css index 75f48aa8..add03a1b 100644 --- a/client/src/components/modules/Card.css +++ b/client/src/components/modules/Card.css @@ -1,6 +1,6 @@ -@tailwind base; +/* @tailwind base; @tailwind components; -@tailwind utilities; +@tailwind utilities; */ .Card-container { border: var(--darkgrey) 1px solid; diff --git a/client/src/components/modules/CatHappiness.css b/client/src/components/modules/CatHappiness.css index 5c607739..d5e2d2b2 100644 --- a/client/src/components/modules/CatHappiness.css +++ b/client/src/components/modules/CatHappiness.css @@ -1,6 +1,6 @@ -@tailwind base; +/* @tailwind base; @tailwind components; -@tailwind utilities; +@tailwind utilities; */ .CatHappiness-container { border: var(--darkgrey) 1px solid; diff --git a/client/src/components/modules/Chat.css b/client/src/components/modules/Chat.css index 4c94fd9b..3c16a167 100644 --- a/client/src/components/modules/Chat.css +++ b/client/src/components/modules/Chat.css @@ -1,6 +1,6 @@ -@tailwind base; +/* @tailwind base; @tailwind components; -@tailwind utilities; +@tailwind utilities; */ .Chat-container { height: 100%; diff --git a/client/src/components/modules/NavBar.css b/client/src/components/modules/NavBar.css index e806ac15..639b45aa 100644 --- a/client/src/components/modules/NavBar.css +++ b/client/src/components/modules/NavBar.css @@ -1,6 +1,6 @@ -@tailwind base; +/* @tailwind base; @tailwind components; -@tailwind utilities; +@tailwind utilities; */ .NavBar-container { padding: var(--s) var(--m); diff --git a/client/src/components/modules/NewPostInput.css b/client/src/components/modules/NewPostInput.css index 1e48fd88..362ab0eb 100644 --- a/client/src/components/modules/NewPostInput.css +++ b/client/src/components/modules/NewPostInput.css @@ -1,6 +1,6 @@ -@tailwind base; +/* @tailwind base; @tailwind components; -@tailwind utilities; +@tailwind utilities; */ .NewPostInput-input, .NewPostInput-button { diff --git a/client/src/components/modules/SearchBar.css b/client/src/components/modules/SearchBar.css index bd6213e1..7ce3e994 100644 --- a/client/src/components/modules/SearchBar.css +++ b/client/src/components/modules/SearchBar.css @@ -1,3 +1,3 @@ -@tailwind base; +/* @tailwind base; @tailwind components; -@tailwind utilities; \ No newline at end of file +@tailwind utilities; */ \ No newline at end of file diff --git a/client/src/components/modules/SingleMessage.css b/client/src/components/modules/SingleMessage.css index 3eae5208..3e5d43f0 100644 --- a/client/src/components/modules/SingleMessage.css +++ b/client/src/components/modules/SingleMessage.css @@ -1,6 +1,6 @@ -@tailwind base; +/* @tailwind base; @tailwind components; -@tailwind utilities; +@tailwind utilities; */ .SingleMessage-container { margin: 0 0 var(--xs); diff --git a/client/src/components/modules/SingleUser.css b/client/src/components/modules/SingleUser.css index 00a0b80e..46aa7580 100644 --- a/client/src/components/modules/SingleUser.css +++ b/client/src/components/modules/SingleUser.css @@ -1,6 +1,6 @@ -@tailwind base; +/* @tailwind base; @tailwind components; -@tailwind utilities; +@tailwind utilities; */ .SingleUser-container { background: var(--white); diff --git a/client/src/components/pages/Chatbook.css b/client/src/components/pages/Chatbook.css index 580dbec5..86b77ab0 100644 --- a/client/src/components/pages/Chatbook.css +++ b/client/src/components/pages/Chatbook.css @@ -1,6 +1,6 @@ -@tailwind base; +/* @tailwind base; @tailwind components; -@tailwind utilities; +@tailwind utilities; */ .Chatbook-container { height: calc(100vh - 120px); diff --git a/client/src/components/pages/Feed.css b/client/src/components/pages/Feed.css index c1b57e44..72c1b27e 100644 --- a/client/src/components/pages/Feed.css +++ b/client/src/components/pages/Feed.css @@ -1,6 +1,6 @@ -@tailwind base; +/* @tailwind base; @tailwind components; -@tailwind utilities; +@tailwind utilities; */ .horizontal-spread { display: flex; diff --git a/client/src/components/pages/Postpage.jsx b/client/src/components/pages/Postpage.jsx index bfa1457f..4d92ccef 100644 --- a/client/src/components/pages/Postpage.jsx +++ b/client/src/components/pages/Postpage.jsx @@ -7,6 +7,7 @@ import { useOutletContext } from "react-router-dom"; import { Link } from "react-router-dom"; import "../../tailwind.css" +import "../../index.css" const Postpage = () => { let props = useOutletContext(); @@ -24,7 +25,7 @@ const Postpage = () => { return ( <> - diff --git a/client/src/components/pages/Profile.css b/client/src/components/pages/Profile.css index 0891247a..c1d38958 100644 --- a/client/src/components/pages/Profile.css +++ b/client/src/components/pages/Profile.css @@ -1,6 +1,6 @@ -@tailwind base; +/* @tailwind base; @tailwind components; -@tailwind utilities; +@tailwind utilities; */ .Profile-avatarContainer { padding: 0 35%; diff --git a/client/src/index.css b/client/src/index.css index 06340a2e..9599b9d2 100644 --- a/client/src/index.css +++ b/client/src/index.css @@ -174,20 +174,20 @@ form { @apply bg-background text-foreground; } } */ -/* -custom-button{ + +/* custom-button{ @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded } */ -@layer utilities { +/* @layer utilities { .border-border { - border: 1px solid black; /* Or your intended style*/ + border: 1px solid black; } .bg-background { - background-color: #f0f0f0; /* Or your intended background color */ + background-color: #f0f0f0; } .text-foreground { - color: #333333; /* Or your intended text color */ + color: #333333; } -} \ No newline at end of file +} */ \ No newline at end of file diff --git a/client/src/tailwind.css b/client/src/tailwind.css index 2511f9ce..d27e4ecf 100644 --- a/client/src/tailwind.css +++ b/client/src/tailwind.css @@ -1,16 +1,23 @@ @tailwind base; @tailwind components; -@tailwind utilities; +@tailwind utilities; @layer utilities { - .border-border { - border: 2px solid black; /* Or your intended style */ + .border-border { + border: 2px solid black; + } + .bg-background { + background-color: #f0f0f0; } - .bg-background { - background-color: #f0f0f0; /* Or your intended background color */ - } - - .text-foreground { - color: #333333; /* Or your intended text color */ - } -} \ No newline at end of file + + .text-foreground { + color: #333333; + } +} + .bg-red-500 { + background-color: #EF4444; + } + + .bg-blue-500 { + background-color: #6ce5ad; + } \ No newline at end of file diff --git a/client/src/utilities.css b/client/src/utilities.css index ac8ccbd1..0c967c7a 100644 --- a/client/src/utilities.css +++ b/client/src/utilities.css @@ -16,10 +16,10 @@ @import url("https://fonts.googleapis.com/css?family=Open+Sans:300,600"); -@tailwind base; +/* @tailwind base; @tailwind components; -@tailwind utilities; - +@tailwind utilities; */ +/* :root { --primary: #396dff; --primary--dim: #6987db; @@ -91,4 +91,4 @@ form { .u-link:hover { color: var(--primary--dim); } - + */