Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Toolpool Design System v2.0 #28

Merged
merged 4 commits into from
Dec 28, 2023
Merged

Toolpool Design System v2.0 #28

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2d7c4a9
style: revamp design system for fresh look
arshptl Dec 26, 2023
b7f1e32
style: revamp color system
arshptl Dec 27, 2023
8f2a743
style: general size changes
arshptl Dec 28, 2023
8fad5de
feat: vercel analytics
arshptl Dec 28, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 13 additions & 3 deletions components/Footer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ const StyledLinks = styled.div`
align-items: center;
justify-content: center;
padding: 15px 0;
/* font-size: var(--fz-xs); */

ul {
${({ theme }) => theme.mixins.flexBetween};
Expand All @@ -50,7 +51,7 @@ const StyledLinks = styled.div`
margin-bottom: 0.5em;
position: relative;
counter-increment: item 1;
font-size: var(--fz-xs);
font-size: var(--fz-small);
color: ${({ theme }) => theme.descfont};

:hover {
Expand All @@ -65,12 +66,20 @@ const StyledLinks = styled.div`
&:before {
margin-right: 5px;
color: ${({ theme }) => theme.color};
font-size: var(--fz-xs);
font-size: var(--fz-small);
text-align: right;
}
}
}
}

@media (min-width: 800px) {
ul {
li {
font-size: var(--fz-small);
}
}
}
`;

const StyledMadewith = styled.div`
Expand Down Expand Up @@ -109,7 +118,8 @@ const Footer = () => {
</ul>
</StyledLinks>
<StyledMadewith>
Made with <FavoriteBorder width="20px" /> on Earth
Made with &nbsp;
<FavoriteBorder width="20px" /> &nbsp; on Earth
</StyledMadewith>
</StyledFooter>
);
Expand Down
48 changes: 32 additions & 16 deletions components/HomeScreen/InfoCard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
import React from "react";
import styled,{useTheme} from "styled-components";
import styled, { useTheme } from "styled-components";
import { ReactComponent as InfoMobile } from "../../public/svg/info.svg";
import Image from "next/image";


const StyledInfoCard = styled.div`
width: 100%;
${({ theme }) => theme.mixins.flexColumn};
Expand Down Expand Up @@ -34,25 +33,39 @@ const StyledInfoCard = styled.div`
const StyledContent = styled.div`
.heading {
color: ${({ theme }) => theme.color};
font-size: var(--fz-xxxl);
font-size: var(--fz-xl);
margin: 10px 0 20px 0;
font-weight: 500;
}

.desc {
color: ${({ theme }) => theme.descfont};
font-size: var(--fz-xs);
line-height: 1.5;
font-weight: 400;
}

@media (min-width: 800px) {
height: auto;
width: 60%;
.heading {
font-size: var(--fz-xxxl);
font-size: var(--fz-xxl);
}

.desc {
font-size: var(--fz-sm);
}
}

@media (min-width: 1000px) {
@media (min-width: 1200px) {
width: 70%;
height: auto;
.heading {
font-size: var(--fz-heading);
}
.desc {
font-size: var(--fz-md);
}
}
`;

Expand Down Expand Up @@ -82,27 +95,30 @@ const StyledSvg = styled.div`
`;

const InfoCard = () => {
const theme = useTheme();
const theme = useTheme();

return (
<StyledInfoCard bg={theme.wave}>
<StyledSvg>
<Image src={theme.info} alt="Toolpool Info" />
<Image height={200} width={200} src={theme.info} alt="Toolpool Info" />

{/* <InfoMobile /> */}
{/* {theme.info} */}
</StyledSvg>
<StyledContent>
<div className="heading">Pool with tons of Tools</div>
Tool Pool is a one-stop solution for your day-to-day tasks which takes
up a lot of time unnecessarily. In just a few clicks you can get such
tasks done which distracts you from your main work. Take it as your
helper tool.<br></br>
<br></br> All the tools are designed and developed with a very clean and
elegant User Interface to provide the best user experience. <br></br>
<br></br>We have a lot of tools in the pool but it is not done yet. A
lot more are on their way to come. Stay tuned and keep using and sharing
Tool Pool.
<div className="desc">
Tool Pool is a one-stop solution for your day-to-day tasks which takes
up a lot of time unnecessarily. In just a few clicks you can get such
tasks done which distracts you from your main work. Take it as your
helper tool.<br></br>
<br></br> All the tools are designed and developed with a very clean
and elegant User Interface to provide the best user experience.{" "}
<br></br>
<br></br>We have a lot of tools in the pool but it is not done yet. A
lot more are on their way to come. Stay tuned and keep using and
sharing Tool Pool.
</div>
</StyledContent>
</StyledInfoCard>
);
Expand Down
93 changes: 49 additions & 44 deletions components/HomeScreen/LandingPagediv.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,75 +1,80 @@
import React from 'react'
import styled from 'styled-components';
import React from "react";
import styled from "styled-components";

const HomeDiv = styled.div`
${({ theme }) => theme.mixins.flexColumn}
/* margin-top: 40px; */
margin-top: 20px;
margin-left: auto;
margin-right: auto;
font-size: var(--fz-headingxlM);
font-size: var(--fz-headingm);
text-align: center;
width: 100%;
/* width: 80%; */
font-weight: 700;
line-height: 53px;
line-height: 40px;
/* color: ${({ theme }) => theme.color}; */

@media (min-width: 600px) {
font-size: var(--fz-headingxl);
line-height: 67px;
width: 100%;
/* font-size: var(--fz-headingm); */
margin-top: 40px;
line-height: 40px;
width: 70%;
}

@media (min-width: 1000px) {
@media (min-width: 1200px) {
font-size: var(--fz-headingxl);
line-height: 55px;
width: 65%;
}

.homeDesc {
width: 70%;
font-size: var(--fz-sm);
width: 80%;
font-size: var(--fz-xs);
font-weight: 400;
margin: 10px auto;
line-height: 20px;
color: ${({ theme }) => theme.descfont};

@media (min-width: 600px) {
font-size: var(--fz-md);
margin: 20px auto;
font-size: var(--fz-sm);
margin: 10px auto;
}

@media (min-width: 1000px) {
width: 40%;
@media (min-width: 1200px) {
margin: 20px auto;
/* width: 40%; */
}
}

.allToolsButton {
${({ theme }) => theme.mixins.smallButton}
${({ theme }) => theme.mixins.smallButtonFilled}
}
`;

const LandingPagediv = ({executeScroll}) => {
return (
<HomeDiv>
<a
href="https://www.producthunt.com/posts/toolpool-2?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-toolpool&#0045;2"
target="_blank"
>
<img
src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=361987&theme=light"
alt="ToolPool - One&#0045;Stop&#0032;solution&#0032;with&#0032;all&#0032;tools&#0032;for&#0032;your&#0032;work | Product Hunt"
style={{ width: "250px", height: "54px" }}
width="250"
height="54"
/>
</a>
One-Stop solution with all tools for your work
<div className="homeDesc">
No need to bookmark tools seperately. It’s a free website with all
important tools together
</div>
<button className="allToolsButton" onClick={() => executeScroll()}>
Explore all tools
</button>
</HomeDiv>
);
}
const LandingPagediv = ({ executeScroll }) => {
return (
<HomeDiv>
{/* <a
href="https://www.producthunt.com/posts/toolpool-2?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-toolpool&#0045;2"
target="_blank"
>
<img
src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=361987&theme=light"
alt="ToolPool - One&#0045;Stop&#0032;solution&#0032;with&#0032;all&#0032;tools&#0032;for&#0032;your&#0032;work | Product Hunt"
style={{ width: "250px", height: "54px" }}
width="250"
height="54"
/>
</a> */}
<div>One-Stop solution with all tools for your work</div>
<div className="homeDesc">
No need to bookmark tools seperately. It’s a free website with all
important tools together
</div>
<button className="allToolsButton" onClick={() => executeScroll()}>
Explore all tools
</button>
</HomeDiv>
);
};

export default LandingPagediv
export default LandingPagediv;
7 changes: 4 additions & 3 deletions components/Layout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,25 +2,26 @@ import styled, { ThemeProvider } from "styled-components";
import ToastContextProvider from "./Toast/toastreducer";
import GlobalStyle from "../styles/GlobalStyle";
import Navbar from "./Navbar";
import { useDarkMode } from '../hooks/useDarkMode';
import { useDarkMode } from "../hooks/useDarkMode";
import { lightTheme, darkTheme } from "../styles/theme";
import Footer from "./Footer";
import { Analytics } from "@vercel/analytics/react";

const GlobalPadding = styled.div`
${({ theme }) => theme.mixins.padding};
`;

let home = false;
const Layout = ({ children }) => {

const [theme, themeToggler] = useDarkMode();
const themeMode = theme === "light" ? lightTheme : darkTheme;

return (
<ThemeProvider theme={themeMode}>
<GlobalStyle />
<Navbar isHome={home} toggleTheme={themeToggler} />
<GlobalPadding>
<Analytics />
<ToastContextProvider>{children}</ToastContextProvider>
</GlobalPadding>
<Footer />
Expand Down
Loading