Skip to content

Commit

Permalink
Merge pull request #81 from devxMani/master
Browse files Browse the repository at this point in the history 
Adding Dark mode / Light mode Toggle button
  • Loading branch information
@Soumojitshome2023
Soumojitshome2023 authored Oct 30, 2024
2 parents 29067d7 + b943224 commit cf9683a
Show file tree
Hide file tree
Showing 7 changed files with 2,119 additions and 107 deletions.
118 changes: 100 additions & 18 deletions client/src/app/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,27 +2,109 @@
@tailwind components;
@tailwind utilities;

@layer base {
:root {
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
--card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%;
--popover: 0 0% 100%;
--popover-foreground: 222.2 84% 4.9%;
--primary: 221.2 83.2% 53.3%;
--primary-foreground: 210 40% 98%;
--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;
--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;
--accent: 210 40% 96.1%;
--accent-foreground: 222.2 47.4% 11.2%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 210 40% 98%;
--border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%;
--ring: 221.2 83.2% 53.3%;
--radius: 0.5rem;
--background-start: 255 255 255;
--background-end: 245 245 245;
}

/* :root {
--foreground-rgb: 0, 0, 0;
--background-start-rgb: 214, 219, 220;
--background-end-rgb: 255, 255, 255;
.dark {
--background: 222.2 84% 4.9%;
--foreground: 210 40% 98%;
--card: 222.2 84% 4.9%;
--card-foreground: 210 40% 98%;
--popover: 222.2 84% 4.9%;
--popover-foreground: 210 40% 98%;
--primary: 217.2 91.2% 59.8%;
--primary-foreground: 222.2 47.4% 11.2%;
--secondary: 217.2 32.6% 17.5%;
--secondary-foreground: 210 40% 98%;
--muted: 217.2 32.6% 17.5%;
--muted-foreground: 215 20.2% 65.1%;
--accent: 217.2 32.6% 17.5%;
--accent-foreground: 210 40% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 210 40% 98%;
--border: 217.2 32.6% 17.5%;
--input: 217.2 32.6% 17.5%;
--ring: 224.3 76.3% 48%;
--background-start: 15 23 42;
--background-end: 30 41 59;
}
}

@media (prefers-color-scheme: dark) {
:root {
--foreground-rgb: 255, 255, 255;
--background-start-rgb: 0, 0, 0;
--background-end-rgb: 0, 0, 0;
@layer base {
* {
@apply border-border;
}

body {
@apply min-h-screen bg-background text-foreground;
font-feature-settings: "rlig" 1, "calt" 1;
}
}

body {
color: rgb(var(--foreground-rgb));
background: linear-gradient(
to bottom,
transparent,
rgb(var(--background-end-rgb))
)
rgb(var(--background-start-rgb));
} */
/* Smooth transitions */
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 0.5s;
}

/* Base transitions */
.transition-colors {
transition-property: background-color, border-color, color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 200ms;
}

/* Theme transition */
* {
transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Scrollbar styling */
::-webkit-scrollbar {
width: 10px;
}

::-webkit-scrollbar-track {
@apply bg-secondary;
}

::-webkit-scrollbar-thumb {
@apply bg-primary/50 rounded-full;
}

::-webkit-scrollbar-thumb:hover {
@apply bg-primary/70;
}

/* Focus styles */
:focus-visible {
@apply outline-none ring-2 ring-ring ring-offset-2 ring-offset-background;
}

/* Selection styles */
::selection {
@apply bg-primary/30 text-foreground;
}
81 changes: 48 additions & 33 deletions client/src/app/layout.js
View file
Original file line number Diff line number Diff line change
@@ -1,48 +1,63 @@
"use client"
import { Inter } from 'next/font/google'
import './globals.css'
import MyContextProvider from '@/context/SocketProvider'
import Header from '@/components/Header';
import Footer from "@/components/Footer";
import { ClerkProvider } from '@clerk/nextjs';
import Header from '@/components/Header'
import Footer from "@/components/Footer"
import { ClerkProvider } from '@clerk/nextjs'
import { ThemeProvider } from 'next-themes'

const inter = Inter({ subsets: ['latin'] })

// Metadata moved outside of client component
export const metadata = {
title: 'Video Calling WebApp',
description: 'Soumojit Shome Video Calling WebApp',
};
}

export default function RootLayout({ children }) {
const baseUrl = process.env.NEXT_PUBLIC_FALLBACK_URL || 'https://soumojit-nextjs-videocall-webapp.vercel.app/';
const baseUrl = process.env.NEXT_PUBLIC_FALLBACK_URL || 'https://soumojit-nextjs-videocall-webapp.vercel.app/'

return (
<ClerkProvider>
<html lang="en">
<head>
<title>{metadata.title}</title>
<meta name="description" content={metadata.description} />
<meta
name="keywords"
content="Video calling, WebRTC, Communication app, Video conferencing, Soumojit Shome"
/>
<meta property="og:title" content="Video Calling WebApp" />
<meta
property="og:description"
content="A web application for seamless video calls built by Soumojit Shome."
/>
<meta property="og:image" content="/images/social-share-image.png" />
<meta property="og:url" content={baseUrl} />
<meta property="og:type" content="website" />
<meta name="robots" content="index, follow" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/favicon.ico" />
</head>
<body className={inter.className}>
<Header />
<MyContextProvider>{children}</MyContextProvider>
<Footer />
</body>
</html>
<html lang="en" suppressHydrationWarning>
<head>
<title>{metadata.title}</title>
<meta name="description" content={metadata.description} />
<meta
name="keywords"
content="Video calling, WebRTC, Communication app, Video conferencing, Soumojit Shome"
/>
<meta property="og:title" content="Video Calling WebApp" />
<meta
property="og:description"
content="A web application for seamless video calls built by Soumojit Shome."
/>
<meta property="og:image" content="/images/social-share-image.png" />
<meta property="og:url" content={baseUrl} />
<meta property="og:type" content="website" />
<meta name="robots" content="index, follow" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="color-scheme" content="light dark" />
<link rel="icon" href="/favicon.ico" />
</head>
<body className={`${inter.className} antialiased`}>
<ThemeProvider
attribute="class"
defaultTheme="system"
enableSystem={true}
disableTransitionOnChange={false}
>
<div className="min-h-screen bg-gradient-to-b from-background-start to-background-end">
<Header />
<main className="pt-16">
<MyContextProvider>{children}</MyContextProvider>
</main>
<Footer />
</div>
</ThemeProvider>
</body>
</html>
</ClerkProvider>
);
}
)
}
105 changes: 63 additions & 42 deletions client/src/components/Header.css
View file
Original file line number Diff line number Diff line change
@@ -1,71 +1,92 @@
.header {
background: linear-gradient(#0d1a3b,#132b67);
padding: 1rem;
color: #fff;
z-index: 1;
position: relative;
@apply fixed top-0 left-0 right-0 z-50 px-4 py-2;
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(8px);
}

.header.dark {
background: rgba(15, 23, 42, 0.8);
}

.nav {
display: flex;
justify-content: space-between;
align-items: center;
@apply max-w-7xl mx-auto flex items-center justify-between;
}

.logo {
font-size: 1.5rem;
font-weight: bold;
text-decoration: none;
color: #fff;
cursor: default;
@apply text-xl font-bold text-blue-600 dark:text-blue-400;
}

.navLinks {
list-style-type: none;
display: flex;
justify-content: space-between;
gap: 1rem;
margin: 0;
padding: 0;
width: 40%;
flex-wrap: wrap;
@apply hidden md:flex items-center space-x-8;
}

.navLink {
text-decoration: none;
color: #fff;
@apply text-gray-600 hover:text-blue-600 dark:text-gray-300 dark:hover:text-blue-400 transition-colors duration-200;
}

/* Updated theme toggle button styles */
.theme-toggle-btn {
padding: 8px;
border-radius: 8px;
background: transparent;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
@apply text-gray-600 dark:text-gray-300;
@apply focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500;
}

.theme-toggle-btn:hover {
background-color: rgba(0, 0, 0, 0.1);
@apply dark:bg-white/10;
}

.navLink:hover {
color: #007bff;
.theme-toggle-btn svg {
@apply w-5 h-5 transition-transform duration-200;
}

.buttonContainer {
.theme-toggle-btn:hover svg {
@apply rotate-12;
}

/* Layout utilities */
.flex {
display: flex;
align-items: center;
}

.button {
padding: 0.5rem 1rem;
background-color: #007bff;
color: #fff;
text-decoration: none;
border-radius: 20px;
transition: background-color 0.3s;
.items-center {
align-items: center;
}

.button:hover {
background-color: #0056b3;
.gap-4 {
gap: 1rem;
}

/* Mobile navigation styles */
@media (max-width: 768px) {
.nav {
flex-direction: column;
align-items: center;
.navLinks {
@apply absolute top-full left-0 right-0 flex-col items-start p-4 space-y-4 bg-white dark:bg-gray-900 border-t dark:border-gray-800;
display: none;
}

.navLinks {
margin: 1rem;
width: 80%;
.navLinks.active {
display: flex;
}
}

/* User button wrapper styles */
.user-button-wrapper {
@apply ml-4;
}

/* Dark mode specific styles */
[data-theme='dark'] .theme-toggle-btn {
color: #fff;
}

[data-theme='dark'] .theme-toggle-btn:hover {
background-color: rgba(255, 255, 255, 0.1);
}
Loading

2 comments on commit cf9683a

@Wahid7852
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This PR Merge (consisting of the PRs a988a63 and b943224) has unfortunately crashed the vercel deployment and also is causing issues for contributors to start the live server.

I would kindly advice you to revert the PR so that it doesn't cause further issues to the contributors.

@Wahid7852
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Soumojitshome2023

Please sign in to comment.