Skip to content

Commit

Permalink
Applied improvements based on chat recommendations. See details at ht…
Browse files Browse the repository at this point in the history 
…tps://chat.openai.com/share/9af123e7-5522-4d34-aa5f-dd0b891998a2
  • Loading branch information
@pbrudny
pbrudny committed Sep 8, 2023
1 parent b1549c6 commit 31e4fdb
Show file tree
Hide file tree
Showing 6 changed files with 232 additions and 311 deletions.
82 changes: 30 additions & 52 deletions src/App.css
View file
Original file line number Diff line number Diff line change
@@ -1,97 +1,75 @@
/* @import '~antd/dist/antd.css'; */

/* Global styles */
body {
background-color: #f3f6f8;;
background-color: #f3f6f8;
}

#usercentrics-button {
display: none;
/* Ant Design Button Customizations */
:root {
--btn-primary-color: #7BCADE;
--btn-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
--btn-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
}

.App {
text-align: center;
}

.ant-btn-primary {
color: #fff;
background-color: #7BCADE;
border-color: #7BCADE;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
#usercentrics-button {
display: none;
}

.ant-btn:active {
.ant-btn-primary,
.ant-btn:active,
.ant-btn:focus {
color: #fff;
background-color: #7BCADE;
border-color: #7BCADE;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
background-color: var(--btn-primary-color);
border-color: var(--btn-primary-color);
text-shadow: var(--btn-text-shadow);
box-shadow: var(--btn-shadow);
}

.ant-btn:hover {
border: solid 1px #7BCADE;
border: solid 1px var(--btn-primary-color);
}

.ant-btn:focus {
color: #fff;
background-color: #7BCADE;
border-color: #7BCADE;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
/* Ant Design Slider Customizations */
.ant-slider-handle,
.ant-slider-track,
.ant-slider-dot-active,
.ant-slider:hover .ant-slider-track,
.ant-slider:hover .ant-slider-handle,
.ant-slider:hover .ant-slider-handle:not(.ant-tooltip-open),
.ant-slider-handle-click-focused {
border-color: var(--btn-primary-color);
}

.ant-slider-handle {
border: solid 2px #7BCADE;
}

.ant-slider-track {
border: solid 2px #7BCADE;
}

.ant-slider-dot-active {
border-color: #7BCADE;
border: solid 2px var(--btn-primary-color);
}

.ant-slider:hover .ant-slider-track {
background-color: #7BCADE;
}

.ant-slider:hover .ant-slider-handle {
border-color: #7BCADE;
}

.ant-slider:hover .ant-slider-handle:not(.ant-tooltip-open) {
border-color: #7BCADE;
}

.ant-slider-handle-click-focused {
border-color: #7BCADE;
}
/* Other styles */
.devicon-size {
font-size: 1.5rem;
padding-top: 3px;
}

.b {
width: 30px
width: 30px;
}

/* width */
/* Scrollbar Customizations */
::-webkit-scrollbar {
width: 12px;
}

/* Track */
::-webkit-scrollbar-track {
background: #f3f6f8;
}

/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
97 changes: 35 additions & 62 deletions src/App.js
View file
Original file line number Diff line number Diff line change
@@ -1,75 +1,48 @@
import React, {Component, Suspense} from 'react';
import Routes from './routes';
import {ThemeContext} from "./themeContext";
import style from './Theme.module.scss'

class RoutedApp extends Component {
render() {
return <>
<Routes/>
</>
}
}

class Theme extends Component {
constructor(props) {
super(props);

this.state = {
theme: localStorage.getItem('theme') ?? this.getSystemPreferredTheme(),
toggleTheme: this.toggleTheme,
};
import React, { useState, useEffect, lazy, Suspense } from 'react';
import Routes from './routes'; // Ensure you have this component in your project.
import { ThemeContext } from "./themeContext";
import style from './Theme.module.scss';
import classNames from 'classnames';

const DARK_THEME = 'dark';
const LIGHT_THEME = 'light';

}

toggleTheme = () => {
this.setState(state => {
const newTheme = state.theme === 'dark' ? 'light' : 'dark'

localStorage.setItem('theme', newTheme);
const RoutedApp = () => {
return <Routes />;
}

return {
theme: newTheme
}
});
}
const Theme = () => {
const storedTheme = localStorage.getItem('theme');
const [theme, setTheme] = useState(storedTheme || getSystemPreferredTheme());

getSystemPreferredTheme() {
const isDarkTheme = window.matchMedia("(prefers-color-scheme: dark)");
useEffect(() => {
localStorage.setItem('theme', theme);
}, [theme]);

if (isDarkTheme.matches) {
return 'dark';
}
const toggleTheme = () => {
setTheme(currentTheme => currentTheme === DARK_THEME ? LIGHT_THEME : DARK_THEME);
};

return 'light';
const getSystemPreferredTheme = () => {
return window.matchMedia("(prefers-color-scheme: dark)").matches ? DARK_THEME : LIGHT_THEME;
}

render() {
const classes = classNames(style.Theme, {
[style.Theme_dark]: theme === DARK_THEME,
[style.Theme_light]: theme !== DARK_THEME,
});

const classes = [style.Theme];

if(this.state.theme === 'dark') {
classes.push(style.Theme_dark);
} else {
classes.push(style.Theme_light)
}

return (
<ThemeContext.Provider value={this.state}>
<main className={classes.join(' ')} style={{ minHeight: "100vh" }}>
<Suspense fallback="">
<RoutedApp />
</Suspense>
</main>
</ThemeContext.Provider>
);
}
return (
<ThemeContext.Provider value={{ theme, toggleTheme }}>
<main className={classes} style={{ minHeight: "100vh" }}>
<Suspense fallback={<div>Loading...</div>}>
<RoutedApp />
</Suspense>
</main>
</ThemeContext.Provider>
);
}


export default function App() {
return (
<Theme/>
);
return <Theme />;
}
18 changes: 14 additions & 4 deletions src/Theme.module.scss
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,22 @@
// Define theme colors and other constants
$theme-light-bg: #F3F4F6;
$theme-dark-bg: #2F3136;
$box-shadow-dark: 0 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 2px rgba(0, 0, 0, 0.06), 0px 0px 1px rgba(0, 0, 0, 0.04);

.Theme {
// Smooth transition for theme changes
transition: background-color .2s ease-in-out;

// Light theme styling
&_light {
background-color: #F3F4F6;
background-color: $theme-light-bg;
}

// Dark theme styling
&_dark {
background-color: #2F3136;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 2px rgba(0, 0, 0, 0.06), 0px 0px 1px rgba(0, 0, 0, 0.04);
background-color: $theme-dark-bg;

// Shadow for added depth in dark theme
box-shadow: $box-shadow-dark;
}
}
}
56 changes: 29 additions & 27 deletions src/routes.js
View file
Original file line number Diff line number Diff line change
@@ -1,41 +1,42 @@
import React from "react";
import React, { lazy, Suspense } from "react";
import { Switch, Route } from "react-router-dom";
import JobsContainer from "./jobs/JobsContainer/JobsContainer";
import NotFound from "./pages/NotFound";
import Imprint from "./pages/Imprint";
import DataSecurity from "./pages/DataSecurity";
import Terms from "./pages/Terms";
import ChoosePlanContainer from "./jobs/ChoosePlanContainer/ChoosePlanContainer";
import NewJobContainer from "./jobs/NewJobContainer/index";
import InvoiceDetails from "./jobs/NewJobContainer/InvoiceDetails";
import Pricing from './static/Pricing';
import About from './static/About';
import AboutOld from './pages/About.js';
import Company from './static/CompanyProfile';
import BrandsList from "./brands/BrandsList";
import EduRoom from './EduRoom/EduRoom';
import Tutorials from './EduRoom/Tutorials/Tutorials';
import Meetups from './EduRoom/Meetups/Meetups';
import Meetup from './EduRoom/Meetups/Meetup';
import StudyMaterial from './EduRoom/StudyMaterial/StudyMaterial';
import StudyMaterialSingle from './EduRoom/StudyMaterial/StudyMaterialSingle';
import Blog from './Blog/Blog';
import BlogSingle from "./Blog/BlogSingle";
import Token from "./Token/J4IT";
import Statistics from './statistics/Statistics';

const JobsContainer = lazy(() => import("./jobs/JobsContainer/JobsContainer"));
const NotFound = lazy(() => import("./pages/NotFound"));
const Imprint = lazy(() => import("./pages/Imprint"));
const DataSecurity = lazy(() => import("./pages/DataSecurity"));
const Terms = lazy(() => import("./pages/Terms"));
const ChoosePlanContainer = lazy(() => import("./jobs/ChoosePlanContainer/ChoosePlanContainer"));
const NewJobContainer = lazy(() => import("./jobs/NewJobContainer/index"));
const InvoiceDetails = lazy(() => import("./jobs/NewJobContainer/InvoiceDetails"));
const Pricing = lazy(() => import('./static/Pricing'));
const About = lazy(() => import('./static/About'));
const AboutOld = lazy(() => import('./pages/About.js'));
const Company = lazy(() => import('./static/CompanyProfile'));
const BrandsList = lazy(() => import("./brands/BrandsList"));
const EduRoom = lazy(() => import('./EduRoom/EduRoom'));
const Tutorials = lazy(() => import('./EduRoom/Tutorials/Tutorials'));
const Meetups = lazy(() => import('./EduRoom/Meetups/Meetups'));
const Meetup = lazy(() => import('./EduRoom/Meetups/Meetup'));
const StudyMaterial = lazy(() => import('./EduRoom/StudyMaterial/StudyMaterial'));
const StudyMaterialSingle = lazy(() => import('./EduRoom/StudyMaterial/StudyMaterialSingle'));
const Blog = lazy(() => import('./Blog/Blog'));
const BlogSingle = lazy(() => import("./Blog/BlogSingle"));
const Token = lazy(() => import("./Token/J4IT"));
const Statistics = lazy(() => import('./statistics/Statistics'));

const Routes = () => (
<Suspense fallback={<div>Loading...</div>}>
<Switch>
<Route exact path="/" component={JobsContainer} />
<Route exact path="/filters/:tech/:city" component={JobsContainer} />
<Route exact path="/filters/:tech" component={JobsContainer} />
<Route exact path="/jobs/:id" component={JobsContainer} />
<Route exact path="/jobs/:id/applied" component={JobsContainer} />
<Route exact path="/choose-plan" component={ChoosePlanContainer} />
<Route exact path="/add-job-invoice" component={InvoiceDetails} />
<Route exact path="/add-job" component={NewJobContainer} />
{/*<Route exact path="/token" component={AboutOld} />*/}
<Route exact path="/pricing" component={Pricing} />
<Route exact path="/" component={JobsContainer} />
<Route exact path="/about" component={About} />
<Route exact path="/company" component={Company} />
<Route exact path="/brand-room" component={BrandsList} />
Expand All @@ -51,8 +52,9 @@ const Routes = () => (
<Route exact path="/statistics" component={Statistics} />
<Route exact path="/terms-and-conditions" component={Terms} />
<Route exact path="/privacy-policy" component={DataSecurity} />
<Route exact path="/*" component={NotFound} />
<Route path="*" component={NotFound} />
</Switch>
</Suspense>
);

export default Routes;
Loading

0 comments on commit 31e4fdb

Please sign in to comment.