update images and styles (#4)

* update images for light theme

* fix adaptive layout

* fix styles

Co-authored-by: Maria Kurmacheva <tscherkasova.mascha@gmail.com>

src/components/homepage-developer-links/HomepageDeveloperLinks.js

@@ -1,16 +1,14 @@
 import React from 'react';
 import styles from './HomepageDeveloperLinks.module.css';
 import Link from '@docusaurus/Link';
-import grantsProgramImage from '../../../static/img/grants-program.png';
-import bugBountyImage from '../../../static/img/bug-bounty.png';
-import smartImage from '../../../static/img/smart.png';
-import web3Image from '../../../static/img/web3.png';
 import clsx from "clsx";
 
 const DeveloperList = [
     {
         link: 'https://1inch.io/foundation-grant-program/',
-        image: grantsProgramImage,
+        image: (
+            <div className={clsx(styles.developerCardImage, styles.foundationGrantProgramImage)}/>
+        ),
         title: 'Grants program',
         description: (
             <>
@@ -21,7 +19,9 @@ const DeveloperList = [
     },
     {
         link: 'https://airtable.com/shrddQOOkm3hOLuzd',
-        image: bugBountyImage,
+        image: (
+            <div className={clsx(styles.developerCardImage, styles.bugBountyImage)}/>
+        ),
         title: 'Bug bounty',
         description: (
             <>
@@ -32,7 +32,9 @@ const DeveloperList = [
     },
     {
         link: '',
-        image: smartImage,
+        image: (
+            <div className={clsx(styles.developerCardImage, styles.smartContractsImage)}/>
+        ),
         title: 'Smartcontracts',
         description: (
             <ul className={styles.developerCardList}>
@@ -50,7 +52,9 @@ const DeveloperList = [
     },
     {
         link: '',
-        image: web3Image,
+        image: (
+            <div className={clsx(styles.developerCardImage, styles.web3Image)}/>
+        ),
         title: 'Web 3.0',
         description: (
             <ul className={styles.developerCardList}>
@@ -72,14 +76,14 @@ function DeveloperLink({image, title, description, link}) {
     return link
         ? (
             <Link className={clsx(styles.developerCard, styles.developerCardLink)} to={link}>
-                <img className={styles.developerCardImage} src={image} alt={title}/>
+                <div>{image}</div>
                 <h3 className={styles.developerCardTitle}>{title}</h3>
                 <div className={styles.developerCardText}>{description}</div>
             </Link>
         )
         : (
             <div className={styles.developerCard}>
-                <img className={styles.developerCardImage} src={image} alt={title}/>
+                <div>{image}</div>
                 <h3 className={styles.developerCardTitle}>{title}</h3>
                 <div className={styles.developerCardText}>{description}</div>
             </div>

src/components/homepage-developer-links/HomepageDeveloperLinks.module.css

@@ -17,6 +17,12 @@
     display: block;
 }
 
+html[data-theme="light"] .developerCard {
+    background-color: var(--1inch-bg-card);
+    border: none;
+    box-shadow: 0 0 4px rgba(71, 73, 79, 0.1), 0 1px 2px rgba(71, 73, 79, 0.25);
+}
+
 .developerCard:hover {
     text-decoration: none;
 }
@@ -36,6 +42,7 @@
     color: var(--1inch-title);
     margin-bottom: 16px;
     font-weight: 500;
+    font-size: 24px;
 }
 
 .developerCardText {
@@ -58,6 +65,51 @@
     margin-bottom: 0;
 }
 
+.developerCardImage {
+    width: 64px;
+    height: 64px;
+    margin-bottom: 24px;
+}
+
+.developerCardImage::after {
+    content: '';
+    transform: scale(.5) translate(-64px, -64px);
+    width: 128px;
+    height: 128px;
+    display: block;
+}
+
+.foundationGrantProgramImage::after {
+    content: url("../../../static/img/grant-program-dark.png");
+}
+
+html[data-theme='light'] .foundationGrantProgramImage::after {
+    content: url("../../../static/img/grant-program-light.png");
+}
+
+.bugBountyImage::after {
+    content: url("../../../static/img/bug-bounty-dark.png");
+}
+
+html[data-theme='light'] .bugBountyImage::after {
+    content: url("../../../static/img/bug-bounty-light.png");
+}
+
+.smartContractsImage::after {
+    content: url("../../../static/img/smart-contracts-dark.png");
+}
+
+html[data-theme='light'] .smartContractsImage::after {
+    content: url("../../../static/img/smart-contracts-light.png");
+}
+
+.web3Image::after {
+    content: url("../../../static/img/web3-dark.png");
+}
+
+html[data-theme='light'] .web3Image::after{
+    content: url("../../../static/img/web3-light.png");
+}
 
 @media (max-width: 1200px) {
     .developerLinksWrap {

src/components/homepage-features/HomepageFeatures.js

@@ -2,16 +2,16 @@ import React from 'react';
 import clsx from 'clsx';
 import styles from './HomepageFeatures.module.css';
 import Link from '@docusaurus/Link';
-import aggregationProtocolImage from '../../../static/img/aggregationProtocol.png';
-import limitOrderProtocolImage from '../../../static/img/limit-order-protocol.png';
 import GithubImage from '../../../static/img/icons/github-link.svg';
 import ArrowOutside from '../../../static/img/icons/arrow-outside.svg';
 
 const FeatureList = [
     {
         title: 'Aggregation protocol',
         description: 'Engaging adopters and maximizing the network\'s decentralization through growing stakeowner numbers',
-        image: aggregationProtocolImage,
+        image: (
+            <div className={clsx(styles.featureCardImage, styles.aggregationProtocolImage)}/>
+        ),
         hrefGithub: 'https://github.com/1inch',
         links: [
             {
@@ -31,7 +31,9 @@ const FeatureList = [
     {
         title: 'Limit order protocol',
         description: 'Running yield farming programs that have proven to be efficient bootstrapping tools for potential bluechips of the DeFi space',
-        image: limitOrderProtocolImage,
+        image: (
+            <div className={clsx(styles.featureCardImage, styles.limitOrderProtocolImage)}/>
+        ),
         hrefGithub: 'https://github.com/1inch',
         links: [
             {
@@ -62,7 +64,7 @@ function Feature({title, description, image, hrefGithub, links}) {
                 </div>
                 <p className={styles.featureCardText}>{description}</p>
             </div>
-            <img className={styles.featureCardImage} src={image} alt={title}/>
+            {image}
             <div>
                 {
                     links.map((link, index) => (
@@ -79,12 +81,15 @@ function Feature({title, description, image, hrefGithub, links}) {
 
 export default function HomepageFeatures() {
     return (
-        <section className={clsx('page-container', styles.featureList)}>
-            {
-                FeatureList.map((props, idx) => (
-                    <Feature key={idx} {...props} />
-                ))
-            }
+        <section className="page-container">
+            <h2 className={styles.featureListTitle}>Protocols</h2>
+            <div className={styles.featureList}>
+                {
+                    FeatureList.map((props, idx) => (
+                        <Feature key={idx} {...props} />
+                    ))
+                }
+            </div>
         </section>
     );
 }

src/components/homepage-features/HomepageFeatures.module.css

@@ -1,19 +1,30 @@
+.featureListTitle {
+    font-size: 32px;
+    margin-bottom: 24px;
+    color: var(--1inch-title);
+}
+
 .featureList {
     display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-columns: 1fr 1fr;
     grid-column-gap: 28px;
 }
 
 .featureCard {
     border: 1px solid var(--1inch-border);
     border-radius: 16px;
     padding: 32px 24px;
-    backdrop-filter: blur(100px);
     display: flex;
     flex-direction: column;
     justify-content: space-between;
 }
 
+html[data-theme='light'] .featureCard {
+    background-color: var(--1inch-bg-card);
+    border: none;
+    box-shadow: 0 0 4px rgba(71, 73, 79, 0.1), 0 1px 2px rgba(71, 73, 79, 0.25);
+}
+
 .featureCard:hover {
     text-decoration: none;
 }
@@ -29,6 +40,7 @@
 .featureCardTitle {
     color: var(--1inch-title);
     font-weight: 500;
+    font-size: 24px;
 }
 
 .featureCardGithubLink {
@@ -50,6 +62,27 @@
     max-height: 172px;
 }
 
+.featureCardImage::after {
+    content: '';
+}
+
+.aggregationProtocolImage::after {
+    content: url("../../../static/img/aggregation-protocol-dark.png");
+}
+
+html[data-theme='light'] .aggregationProtocolImage::after {
+    content: url("../../../static/img/aggregation-protocol-light.png");
+}
+
+.limitOrderProtocolImage::after {
+    content: url("../../../static/img/limit-order-protocol-dark.png");
+}
+
+html[data-theme='light'] .limitOrderProtocolImage::after {
+    content: url("../../../static/img/limit-order-protocol-light.png");
+}
+
+
 .featureCardLinkWrap {
     display: flex;
     justify-content: space-between;
@@ -91,8 +124,44 @@
     }
 }
 
-@media (max-width: 640px) {
+@media (max-width: 780px) {
     .featureList {
         grid-template-columns: 1fr;
     }
 }
+
+@media (max-width: 400px) {
+    .aggregationProtocolImage::after {
+        zoom: 0.8;
+    }
+
+    html[data-theme='light'] .aggregationProtocolImage::after {
+        zoom: 0.8;
+    }
+
+    .limitOrderProtocolImage::after {
+        zoom: 0.8;
+    }
+
+    html[data-theme='light'] .limitOrderProtocolImage::after {
+        zoom: 0.8;
+    }
+}
+
+@media (max-width: 340px) {
+    .aggregationProtocolImage::after {
+        zoom: 0.6;
+    }
+
+    html[data-theme='light'] .aggregationProtocolImage::after {
+        zoom: 0.6;
+    }
+
+    .limitOrderProtocolImage::after {
+        zoom: 0.6;
+    }
+
+    html[data-theme='light'] .limitOrderProtocolImage::after {
+        zoom: 0.6;
+    }
+}

src/css/custom.css

@@ -11,14 +11,15 @@
     --1inch-bg-1: #000000;
     --1inch-bg-2: #202835;
     --1inch-bg-3: #FBFBFB;
+    --1inch-bg-card: #FFFFFF;
     --1inch-shadow-1: 0 0 4px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.25);
 }
 
 :root[data-theme='light'] {
     --1inch-page-bg: #f3f5fa;
     --1inch-text: #6C86AD;
     --1inch-bg-image: rgba(108, 134, 173, 0.12);
-    --1inch-title: #06070A;
+    --1inch-title: #484848;
     --1inch-border: rgba(0, 0, 0, 0.24);
     --1inch-button: #2F8AF5;
     --1inch-bg-1: #FFFFFF;