fix(styles): modified discord card and partnership card to use generi…

…c stylesB #108
verida · Aug 2, 2022 · 666128a · 666128a
1 parent 4e193a2
commit 666128a
Show file tree

Hide file tree

Showing 7 changed files with 73 additions and 70 deletions.
diff --git a/src/components/cards/DiscordCard.js b/src/components/cards/DiscordCard.js
@@ -1,22 +1,28 @@
-import React from 'react';
-import styles from './card.module.css';
-import DiscordLogo from '@site/static/img/discord-logo.svg';
-import Link from '@docusaurus/Link';
+import React from "react";
+import styles from "./card.module.css";
+import DiscordLogo from "@site/static/img/discord-logo.svg";
+import Link from "@docusaurus/Link";
 
 const DiscordCard = () => {
-    return (
-        <Link className={styles.discordBannerLink} href="https://discord.verida.io">
-            <div className={styles.discordBanner}>
-                <div><DiscordLogo className={styles.discordBannerSvg} title="DiscordLogo" /></div>
-                <div className={styles.discordBannerContent}>
-                    <h3>Join our Discord Community</h3>
-                    <p>
-                        We would love to hear from you! Let us know what you're building or if you need any assistance getting started.
-                    </p>
-                </div>
-            </div>
-        </Link>
-    );
+	return (
+		<Link href='https://discord.verida.io'>
+			<div className={styles.communityBanner}>
+				<div>
+					<DiscordLogo
+						className={styles.communityBannerSvg}
+						title='DiscordLogo'
+					/>
+				</div>
+				<div className={styles.communityBannerContent}>
+					<h3>Join our Discord Community</h3>
+					<p>
+						We would love to hear from you! Let us know what you're building or
+						if you need any assistance getting started.
+					</p>
+				</div>
+			</div>
+		</Link>
+	);
 };
 
 export default DiscordCard;
diff --git a/src/components/cards/GithubCard.js b/src/components/cards/GithubCard.js
@@ -1,20 +1,18 @@
-import React from 'react';
-import styles from './card.module.css';
-import Link from '@docusaurus/Link';
-import GithubLogo from '@site/static/img/github.svg';
+import React from "react";
+import styles from "./card.module.css";
+import Link from "@docusaurus/Link";
+import GithubLogo from "@site/static/img/github.svg";
 
 const GithubCard = ({ link, title }) => {
 	return (
-		<div className={styles.GithubLink}>
+		<div className={styles.githubLink}>
 			<div>
-				<GithubLogo className={styles.GithubLinkImg} title='github' />
+				<GithubLogo className={styles.githubLinkImg} title='github' />
 			</div>
 			<div>
-				<span className={styles.GithubLinkText}>
-					{' '}
-					<Link href={link}>
-						{title}
-					</Link>{' '}
+				<span className={styles.githubLinkText}>
+					{" "}
+					<Link href={link}>{title}</Link>{" "}
 				</span>
 			</div>
 		</div>

diff --git a/src/components/cards/PartnershipCard.js b/src/components/cards/PartnershipCard.js
@@ -4,13 +4,10 @@ import Link from "@docusaurus/Link";
 
 const PartnerShipCard = () => {
 	return (
-		<Link
-			className={styles.discordBannerLink}
-			href='https://www.verida.io/ecosystem#partner'
-		>
-			<div className={styles.discordBanner}>
+		<Link href='https://www.verida.io/ecosystem#partner'>
+			<div className={styles.communityBanner}>
 				<div></div>
-				<div className={styles.discordBannerContent}>
+				<div className={styles.communityBannerContent}>
 					<h3>Verida Early Adopter Program</h3>
 					<p>
 						Join the growing ecosystem of partners building the future of web3.

diff --git a/src/components/cards/card.module.css b/src/components/cards/card.module.css
@@ -1,10 +1,10 @@
-.discordBannerSvg {
+.communityBannerSvg {
     width: 100%;
     height: 100%;
 }
 
 .contentCardBox {
-  margin: 0 0.5rem;
+    margin: 0 0.5rem;
 }
 
 .contentCard:hover {
@@ -13,7 +13,6 @@
     border-radius: 12px;
 }
 
-
 .contentCardSection h4 {
     font-weight: 600;
     font-size: 1rem;
@@ -25,9 +24,7 @@
     color: #545A6C;
 }
 
-
-
-.discordBanner {
+.communityBanner {
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -40,35 +37,31 @@
     width: 50rem;
 }
 
-.discordBanner:hover {
+.communityBanner:hover {
+    cursor: pointer;
     cursor: pointer;
-    background: #FFFFFF;
     box-shadow: 0px 12px 25px rgba(34, 35, 140, 0.07);
 }
 
-.discordBannerContent {
+.communityBannerContent {
     margin: 1.5rem 2.5rem;
 }
 
-.discordBannerContent h4 {
+.communityBannerContent h4 {
     font-weight: 600;
     font-size: 1.5rem;
     line-height: 30px;
     margin: 1.5rem 0 0 0;
     color: var(--ifm-text-color);
 }
 
-.discordBannerContent p {
+.communityBannerContent p {
     font-size: 1rem;
     color: #545A6C;
 }
 
 
-.discordBannerLink {
-    text-decoration: none !important;
-}
-
-.GithubLink {
+.githubLink {
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -82,31 +75,31 @@
     margin: 1rem 1rem;
 }
 
-.GithubLink:hover {
+.githubLink:hover {
     cursor: pointer;
     box-shadow: 0px 12px 25px rgba(34, 35, 140, 0.07);
 }
 
-.GithubLinkImg {
+.githubLinkImg {
     margin: 0 0.7rem -0.3rem 0;
 }
 
-.GithubLinkText {
+.githubLinkText {
     font-weight: 600;
     font-size: 18px;
     line-height: 23px;
     color: var(--ifm-text-color);
 }
 
 
-.GithubLinkText a {
+.githubLinkText a {
     text-decoration: none;
     color: var(--ifm-text-color);
 }
 
 
 @media screen and (max-width:768px) {
-    .discordBanner {
+    .communityBanner {
         width: 18rem;
         padding: 0rem;
     }

diff --git a/src/css/custom.css b/src/css/custom.css
@@ -27,6 +27,10 @@
     url('/fonts/Sora-Thin.ttf') format('truetype');
 }
 
+a {
+  text-decoration: none !important;
+}
+
 body {
   font-family: 'Sora', sans-serif;
   font-size: 1rem;
@@ -74,4 +78,6 @@ html[data-theme='dark'] .docusaurus-highlight-code-line {
 
 .web3-compare-table td:first-child {
   font-weight: bold;
-};
+}
+
+;
diff --git a/src/pages/index.js b/src/pages/index.js
@@ -46,7 +46,6 @@ const contentCards = [
 	},
 	{
 		title: "Interactive Tutorial",
-		description: `Check out the interactive tutorials for an introduction to Verida's Web3 APIs`,
 		icon: (
 			<IntTutorialIcon
 				title='icon'
@@ -61,7 +60,6 @@ const contentCards = [
 	},
 	{
 		title: "Demos",
-		description: "Explore Verida technologies with demo applications",
 		icon: (
 			<DemosIcon
 				title='icon'
@@ -115,10 +113,10 @@ const gettingStarted = [
 		icon: "/img/vue-starter-kit.png",
 	},
 ];
-const description = `
-	Explore the Verida Developer's Portal to get 
+const headerDescription = `
+	Explore the Verida Developer's Portal to get
 	started with our developer documentation,
-	explore our demos, 
+	explore our demos,
 	try out our interactive tutorials and connect with the Web3 developer community.
 `;
 export default function Home() {
@@ -141,18 +139,18 @@ export default function Home() {
 					<Head>
 						<title>Verida Developer Portal</title>
 						<meta name='title' content='Verida Developer Portal' />
-						<meta name='description' content={description} />
+						<meta name='description' content={headerDescription} />
 						<meta property='og:type' content='website' />
 						<meta property='og:url' content='https://developers.verida.io/' />
 						<meta property='og:title' content='Verida Developer Portal' />
-						<meta property='og:description' content={description} />
+						<meta property='og:description' content={headerDescription} />
 						<meta property='twitter:card' content='summary_large_image' />
 						<meta
 							property='twitter:url'
 							content='https://developers.verida.io/'
 						/>
 						<meta property='twitter:title' content='Verida Developer Portal' />
-						<meta property='twitter:description' content={description} />
+						<meta property='twitter:description' content={headerDescription} />
 					</Head>
 					<main className={styles.mainSection}>
 						<section className={styles.heroSection}>
@@ -173,7 +171,7 @@ export default function Home() {
 							</div>
 							<div className={styles.gettingStarted}>
 								<div className={styles.storeButtons}>
-									<div className={styles.storeButtonsChild}>
+									<div>
 										<a href='https://apps.apple.com/us/app/verida-vault/id1546599632'>
 											<img
 												className={styles.appstorebutton}
@@ -193,8 +191,8 @@ export default function Home() {
 									</div>
 								</div>
 								{gettingStarted.map((item) => (
-									<div className={styles.storeButtons}>
-										<div className={styles.storeButtonsChild}>
+									<div className={styles.storeButtons} key={item.title}>
+										<div>
 											<a href={item.link}>
 												<img src={item.icon} height='100' />
 											</a>
@@ -205,6 +203,7 @@ export default function Home() {
 									</div>
 								))}
 							</div>
+
 							<DiscordCard />
 							<PartnerShipCard />
 							<div className={styles.githubCardSection}>

diff --git a/src/pages/index.module.css b/src/pages/index.module.css
@@ -116,9 +116,13 @@ p {
   margin-right: auto;
 }
 
-.storeButtonsChild{
- text-align: center;
-} 
+
+.storeButtons div {
+  text-align: center;
+}
+
+
+
 .appstorebutton {
   border-style: solid;
   border-width: 1px;