Skip to content

Commit

Permalink
Dark Mode added
Browse files Browse the repository at this point in the history
  • Loading branch information
@sakshamgupta912
sakshamgupta912 committed Nov 18, 2024
1 parent 98b77d9 commit 5263b31
Show file tree
Hide file tree
Showing 16 changed files with 347 additions and 52 deletions.
12 changes: 10 additions & 2 deletions webiu-ui/src/app/components/navbar/navbar.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<div class="navbar">
<img src="../../../assets/c2silogo-dark.png" alt="C2SI Logo" class="logo" />
<img src="../../../assets/c2silogo-dark_no_bg.png" alt="C2SI Logo" class="logo" />

<div [ngClass]="{ navbar__menu: true, open: isMenuOpen }" id="navbarMenu">
<div class="navbar__menu__items" routerLink="/">
Expand All @@ -26,6 +26,14 @@
<img src="../../../assets/gsoc.svg" alt="GSoC Icon" />
<p>GSoC</p>
</div>
<button class="sun-moon-toggle" aria-label="Toggle color mode" title="Toggle color mode" (click)="toggleMode()">
<div class="sun" [class.visible]="isSunVisible"></div>

<div class="moon" [class.visible]="!isSunVisible">
<div class="star"></div>
<div class="star small"></div>
</div>
</button>
</div>

<div class="navigation__buttons" (click)="toggleMenu()">
Expand All @@ -38,4 +46,4 @@
<img *ngIf="isMenuOpen" src="../../../assets/cross.svg" alt="cross" />
</div>
</div>
</div>
</div>
141 changes: 138 additions & 3 deletions webiu-ui/src/app/components/navbar/navbar.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
padding: 10px 50px;
justify-content: space-between;
align-items: center;
background: var(--primary-white, #fff);
background: var(--navbar-bg);
box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.15);
}

Expand All @@ -28,7 +28,7 @@
right: 20px;
align-items: flex-start;
width: auto;
background: var(--primary-white, #fff);
background: var(--navbar-bg);
box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.15);
padding: 10px;
border-radius: 8px;
Expand All @@ -43,7 +43,7 @@
padding: 7px 14px;
gap: 8px;
border-radius: 7px;
background: var(--primary-white, #fff);
background: var(--primary-white, var(--navbar-bg));
cursor: pointer;
transition: all 0.2s;
text-align: center;
Expand All @@ -59,6 +59,7 @@
.navbar__menu__items p {
margin: 0;
line-height: 1;
color:var(--navbar-p);
}

/* Active state styling */
Expand Down Expand Up @@ -88,6 +89,139 @@
display: none;
}

.sun-moon-toggle {
width: 46px;
height: 46px;
box-sizing: border-box;
padding: 12px;
background: none;
border: none;
display: flex;
justify-content: center;
align-items: center;
position: relative;
cursor: pointer;
}

.sun {
width: 50%;
height: 50%;
position: absolute;
pointer-events: none;
opacity: 0;
transform: scale(0.6) rotate(0deg);
transition: transform 0.3s ease-in, opacity 0.2s ease-in 0.1s;
background: radial-gradient(circle, rgba(0, 0, 0, 0) 50%, #fbbc05 50%);
}

.sun:before {
content: "";
position: absolute;
display: block;
width: 100%;
height: 100%;
background: radial-gradient(
circle,
#fbbc05 30%,
rgba(0, 0, 0, 0) 31%,
rgba(0, 0, 0, 0) 50%,
#fbbc05 51%
);
transform: rotate(45deg);
}

.sun.visible {
pointer-events: auto;
opacity: 1;
transform: scale(1) rotate(180deg);
transition: transform 0.3s ease-in, opacity 0.2s ease-in 0.1s;
}


.moon {
width: 50%;
height: 50%;
pointer-events: none;
position: absolute;
left: 12.5%;
top: 18.75%;
background-color: rgba(0, 0, 0, 0);
border-radius: 50%;
box-shadow: 9px 3px 0px 0px #f0f0f0;
opacity: 0;
transform: scale(0.3) rotate(65deg);
transition: transform 0.3s ease-in, opacity 0.2s ease-in 0.1s;
}

.moon.visible {
pointer-events: auto;
opacity: 1;
transform: scale(1) rotate(0deg);
transition: transform 0.3s ease-in, opacity 0.2s ease-in 0.1s;
}

.star {
position: absolute;
top: 25%;
left: 5%;
display: block;
width: 0px;
height: 0px;
border-right: 7px solid rgba(0, 0, 0, 0);
border-bottom: 5px solid #f0f0f0;
border-left: 7px solid rgba(0, 0, 0, 0);
transform: scale(0.55) rotate(35deg);
opacity: 0;
transition: all 0.2s ease-in 0.4s;
}

.star:before {
border-bottom: 5px solid #f0f0f0;
border-left: 3px solid rgba(0, 0, 0, 0);
border-right: 3px solid rgba(0, 0, 0, 0);
position: absolute;
height: 0;
width: 0;
top: -3px;
left: -5px;
display: block;
content: "";
transform: rotate(-35deg);
}

.star:after {
position: absolute;
display: block;
color: red;
top: 0px;
left: -7px;
width: 0px;
height: 0px;
border-right: 7px solid rgba(0, 0, 0, 0);
border-bottom: 5px solid #f0f0f0;
border-left: 7px solid rgba(0, 0, 0, 0);
transform: rotate(-70deg);
content: "";
}

.moon.visible .star {
opacity: 0.8;
}

.star.small {
transform: scale(0.35) rotate(35deg);
position: relative;
top: 50%;
left: 37.5%;
opacity: 0;
transition: all 0.2s ease-in 0.45s;
}

.moon.visible .star.small {
opacity: 0.7;
transform: scale(0.45) rotate(35deg);
}

@media (max-width: 1100px) {
.navbar__menu {
display: none !important;
Expand All @@ -101,3 +235,4 @@
display: block !important;
}
}

13 changes: 12 additions & 1 deletion webiu-ui/src/app/components/navbar/navbar.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { ThemeService } from '../../services/theme.service';

@Component({
selector: 'app-navbar',
Expand All @@ -11,8 +12,18 @@ import { RouterModule } from '@angular/router';
})
export class NavbarComponent {
isMenuOpen = false;

isSunVisible = true;
toggleMenu() {
this.isMenuOpen = !this.isMenuOpen;
}
constructor(private themeService: ThemeService) {
this.isSunVisible = !this.themeService.isDarkMode();
}
toggleTheme(): void {
this.themeService.toggleDarkMode();
}
toggleMode() {
this.isSunVisible = !this.isSunVisible;
this.toggleTheme();
}
}
14 changes: 10 additions & 4 deletions webiu-ui/src/app/components/profile-card/profile-card.component.scss
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
.profile-box {
display: flex;
border: solid 1px #e0e0e0;
box-shadow: 10px 10px 30px 10px #0505051a;
border: solid 1px var(--profile-box-border);
background-color: var(--profile-box-bg);
box-shadow: 10px 10px 30px 10px var(--profile-github-box-shadow);
border-radius: 10px;
width: 100%;
max-width: 350px;
Expand Down Expand Up @@ -33,7 +34,7 @@
align-items: center;
gap: 10px;
border-radius: 5px;
background: var(--Gray-6, #eeecec);
background: var(--profile-github-bg);
padding: 8px 12px;
justify-content: center;
margin-top: 5%;
Expand All @@ -43,12 +44,17 @@
display: flex;
justify-content: center;
align-items: center;
svg {
path {
fill: var(--profile-github-username);
}
}
}

.github-username {
display: flex;
align-items: center;
color: black;
color: var(--profile-github-username);
}

/* Media Queries */
Expand Down
21 changes: 15 additions & 6 deletions webiu-ui/src/app/components/projects-card/projects-card.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@
justify-content: space-between;
gap: 20px;
border-radius: 8px;
border: 2px solid var(--primary-white, #fff);
background: var(--primary-white, #fff);
border: 2px solid var(--border-color, #fff);
background: var(--card-container-2, #fff);
box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.1);

.projects__card__main {
Expand Down Expand Up @@ -72,9 +72,10 @@
color: var(--primary-dark, var(--primary-dark, #0a0a15));
border-radius: 4px;
border: 1px solid var(--Gray-5, #e0e0e0);
background: var(--Gray-6, #f2f2f2);
background: var(--card-button-bg);

p {
color: var(--card-color-p);
width: 100px;
font-size: 14px;
font-weight: 500;
Expand All @@ -86,9 +87,12 @@
font-size: 14px;
font-weight: 400;
border-radius: 20px;
background: var(--primary-white, #fff);
background: var(--card-span, #fff);
padding: 6px;
}
svg path {
fill: var(--card-color-p); /* Apply dynamic fill color */
}
}

.issue-btn {
Expand All @@ -101,22 +105,27 @@
color: var(--primary-dark, var(--primary-dark, #0a0a15));

border: 1px solid var(--Gray-5, #e0e0e0);
background: var(--Gray-6, #f2f2f2);
background: var(--card-button-bg);

span {
color: var(--primary-dark, var(--primary-dark, #0a0a15));
font-size: 14px;
font-weight: 400;
border-radius: 20px;
background: var(--primary-white, #fff);
background: var(--card-span, #fff);
padding: 6px;
}

p {
color: var(--card-color-p);
font-size: 14px;
font-weight: 500;
line-height: 150%;
}
svg path {
fill: var(--card-color-p); /* Apply dynamic fill color */
}

}

.git-btn {
Expand Down
6 changes: 3 additions & 3 deletions webiu-ui/src/app/components/publications-card/publications-card.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@
align-items: flex-start;
gap: 20px;
border-radius: 8px;
border: 2px solid var(--primary-white, #fff);
background: var(--primary-white, #fff);
box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.1);
border: 2px solid var(--publications-card-border);
background: var(--publications-card-bg);
box-shadow: 0px 4px 24px 0px var(--publications-card-box-shadow);
width: 500px;

a {
Expand Down
4 changes: 2 additions & 2 deletions webiu-ui/src/app/page/community/community.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,8 +74,8 @@
align-items: flex-start;
gap: 5px;
border-radius: 10px;
border: 1px solid var(--Gray-5, #e0e0e0);
background: var(--primary-white, #fff);
border: 1px solid var(--community-card-border);
background: var(--community-card-bg);
box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.1);

.card-data {
Expand Down
Loading

0 comments on commit 5263b31

Please sign in to comment.