update styles

1inch · Nov 23, 2021 · 247ff87 · 247ff87
1 parent 8699c3c
commit 247ff87
Show file tree

Hide file tree

Showing 6 changed files with 65 additions and 34 deletions.
diff --git a/src/components/homepage-features/HomepageFeatures.js b/src/components/homepage-features/HomepageFeatures.js
@@ -12,8 +12,19 @@ const FeatureList = [
         image: (
             <div className={clsx(styles.featureCardImage, styles.aggregationProtocolImage)}/>
         ),
-        hrefGithub: 'https://github.com/1inch',
         links: [
+            {
+                title: 'Documentation',
+                href: '/docs/aggregation-protocol/introduction'
+            },
+            {
+                title: 'API (swagger)',
+                href: '/docs/aggregation-protocol/api/swagger'
+            },
+            {
+                title: 'Contracts',
+                href: ''
+            },
             {
                 title: 'Documentation',
                 href: '/docs/aggregation-protocol/introduction'
@@ -34,8 +45,19 @@ const FeatureList = [
         image: (
             <div className={clsx(styles.featureCardImage, styles.limitOrderProtocolImage)}/>
         ),
-        hrefGithub: 'https://github.com/1inch',
         links: [
+            {
+                title: 'Documentation',
+                href: '/docs/limit-order-protocol/introduction'
+            },
+            {
+                title: 'API (swagger)',
+                href: '/docs/limit-order-protocol/api'
+            },
+            {
+                title: 'Contracts',
+                href: '/docs/limit-order-protocol/smart-contract/LimitOrderProtocol'
+            },
             {
                 title: 'Documentation',
                 href: '/docs/limit-order-protocol/introduction'
@@ -56,22 +78,17 @@ function Feature({title, description, image, hrefGithub, links}) {
     return (
         <div className={styles.featureCard}>
             <div>
-                <div className={styles.featureCardTitleWrap}>
-                    <h3 className={styles.featureCardTitle}>{title}</h3>
-                    <Link className={styles.featureCardGithubLink} to={hrefGithub}>
-                        <GithubImage/>
-                    </Link>
-                </div>
+                <h3 className={styles.featureCardTitle}>{title}</h3>
                 <p className={styles.featureCardText}>{description}</p>
             </div>
             {image}
-            <div>
+            <div className={styles.featureCardLinks}>
                 {
                     links.map((link, index) => (
-                        <Link to={link.href} className={styles.featureCardLinkWrap} key={index}>
+                        <a href={link.href} target="_blank" className={styles.featureCardLinkWrap} key={index}>
                             <p>{link.title}</p>
                             <ArrowOutside className={styles.featureCardLinkIcon} />
-                        </Link>
+                        </a>
                     ))
                 }
             </div>

diff --git a/src/components/homepage-features/HomepageFeatures.module.css b/src/components/homepage-features/HomepageFeatures.module.css
@@ -29,18 +29,11 @@ html[data-theme='light'] .featureCard {
     text-decoration: none;
 }
 
-.featureCardTitleWrap {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 16px;
-    grid-column-gap: 16px;
-}
-
 .featureCardTitle {
     color: var(--1inch-title);
     font-weight: 500;
     font-size: 24px;
+    margin-bottom: 16px;
 }
 
 .featureCardGithubLink {
@@ -86,14 +79,14 @@ html[data-theme='light'] .limitOrderProtocolImage::after {
 .featureCardLinkWrap {
     display: flex;
     justify-content: space-between;
+    align-items: center;
     font-size: 16px;
     line-height: 26px;
     margin-bottom: 4px;
-    color: rgba(108, 134, 173, 0.55);
 }
 
 .featureCardLinkWrap p {
-    color: var(--1inch-title);
+    color: var(--1inch-text);
 }
 
 .featureCardLinkWrap:last-child {
@@ -111,6 +104,12 @@ html[data-theme='light'] .limitOrderProtocolImage::after {
     color: var(--1inch-common-bg);
 }
 
+.featureCardLinks {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-column-gap: 28px;
+}
+
 @media (max-width: 1200px) {
     .featureList {
         grid-column-gap: 16px;

diff --git a/src/components/homepage-footer/HomepageFooter.js b/src/components/homepage-footer/HomepageFooter.js
@@ -167,8 +167,8 @@ export default function HomepageFooter() {
                 </div>
             </div>
             <div className={clsx('page-container', styles.afterFooter)}>
-                <span>{new Date().getFullYear()} 1inch Network</span>
-                <span>ENS: 1inch.eth</span>
+                <span>&#169; {new Date().getFullYear()} 1inch, All Rights Reserved.</span>
+                <a href="https://etherscan.io/address/1inch.eth" target="_blank">ENS: 1inch.eth</a>
                 <span>BUIDL @ETHNewYork 2019</span>
             </div>
         </section>

diff --git a/src/components/homepage-footer/HomepageFooter.module.css b/src/components/homepage-footer/HomepageFooter.module.css
@@ -33,12 +33,16 @@
 .footerColumnLink {
     display: block;
     margin-bottom: 20px;
-    color: var(--1inch-text);
+    color: var(--1inch-text-2);
+}
+
+.footerColumnLink:last-child {
+    margin-bottom: 0;
 }
 
 .footerColumnLink:hover {
     text-decoration: none;
-    color: var(--1inch-bg-3);
+    color: var(--1inch-text-2-hover);
 }
 
 .footerSubscribeTitle {
@@ -50,7 +54,7 @@
 }
 
 .footerSubscribeText {
-    color: var(--1inch-text);
+    color: var(--1inch-text-2);
     margin-bottom: 24px;
 }
 
@@ -84,12 +88,12 @@
 }
 
 .socialMediaLink {
-    color: var(--1inch-text);
+    color: var(--1inch-text-2);
     margin-right: 6px;
 }
 
 .socialMediaLink:hover {
-    color: var(--1inch-bg-3);
+    color: var(--1inch-text-2-hover);
 }
 
 .socialMediaLink:last-child {
@@ -101,11 +105,20 @@
     justify-content: space-between;
     align-items: center;
     margin-top: 68px;
-    padding: 33px 0 146px;
+    padding: 33px 0 25px;
     font-size: 16px;
     line-height: 26px;
     border-top: 1px solid var(--1inch-border);
-    color: var(--1inch-text);
+    color: var(--1inch-text-2);
+}
+
+.afterFooter a {
+    color: var(--1inch-text-2);
+}
+
+.afterFooter a:hover {
+    text-decoration: none;
+    color: var(--1inch-text-2-hover);
 }
 
 @media (max-width: 1124px) {

diff --git a/src/components/homepage-prefooter/HomepagePreFooter.module.css b/src/components/homepage-prefooter/HomepagePreFooter.module.css
@@ -18,7 +18,7 @@
 }
 
 .prefooterText {
-    color: var(--1inch-text);
+    color: var(--1inch-text-2);
     font-size: 16px;
     line-height: 26px;
     margin-bottom: 48px;

diff --git a/src/css/custom.css b/src/css/custom.css
@@ -6,18 +6,21 @@
     --1inch-bg-image: rgba(255, 255, 255, 0.09);
     --1inch-title: #FBFBFB;
     --1inch-text: rgba(255, 255, 255, 0.6);
+    --1inch-text-2: #6C86AD;
     --1inch-border: rgba(255, 255, 255, 0.25);
     --1inch-button: #2F8AF5;
     --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);
+    --1inch-text-2-hover: #FBFBFB;
 }
 
 :root[data-theme='light'] {
     --1inch-page-bg: #f3f5fa;
-    --1inch-text: #6C86AD;
+    --1inch-text: #222222;
+    --1inch-text-2: #6C86AD;
     --1inch-bg-image: rgba(108, 134, 173, 0.12);
     --1inch-title: #1c1e21;
     --1inch-border: rgba(0, 0, 0, 0.24);
@@ -26,7 +29,7 @@
     --1inch-bg-2: #FFFFFF;
     --1inch-bg-3: #06070A;
     --1inch-shadow-1: 0 0 4px rgba(71, 73, 79, 0.05), 0 1px 2px rgba(71, 73, 79, 0.05);
-
+    --1inch-text-2-hover: #222222;
 }
 
 @font-face {
@@ -64,7 +67,6 @@ html {
 }
 
 .main-wrapper:not(.docs-wrapper) {
-    background: var(--1inch-page-bg);
     color: var(--1inch-text);
     font-family: 'Roboto', sans-serif;
 }