feat: some landing page styling updates

Robbo-lab · Oct 16, 2024 · 257d200 · 257d200
1 parent 74ede8a
commit 257d200
Show file tree

Hide file tree

Showing 7 changed files with 15 additions and 13 deletions.
diff --git a/src/App.js b/src/App.js
@@ -20,25 +20,27 @@ const App = () => {
               All of our components in a Single Page React App
             </h2>
             <Link to="/">
-              <a className="button is-link is-large mr-1">Home </a>
+              <a className="button is-primary is-normal mr-1">Home </a>
             </Link>
             <Link to="/nasa-api">
-              <a className="button is-link is-large mr-1">NASA API</a>
+              <a className="button is-link is-normal mr-1">NASA API</a>
             </Link>
             <Link to="/styled">
-              <a className="button is-link is-large mr-1">Styled Component</a>
+              <a className="button is-info is-normal mr-1">Styled Component</a>
             </Link>
             <Link to="/accordion">
-              <a className="button is-link is-large mr-1">Accordian</a>
+              <a className="button is-success is-normal mr-1">Accordian</a>
             </Link>
             <Link to="/gallery">
-              <a className="button is-link is-large mr-1">Gallery</a>
+              <a className="button is-warning is-normal mr-1">Gallery</a>
             </Link>
             <Link to="/gallery/1">
-              <a className="button is-link is-large mr-1">Gallery Item</a>
+              <a className="button is-warning is-inverted is-normal mr-1">
+                Gallery Item
+              </a>
             </Link>
             <Link to="/people">
-              <a className="button is-link is-large">People List</a>
+              <a className="button is-dark is-normal">People List</a>
             </Link>
             {/* Routing Setup */}
 

diff --git a/src/components/Accordian.js b/src/components/Accordian.js
@@ -15,7 +15,7 @@ function Panel({ title, isActive, onShow, children }) {
 const Accordion = function Accordion() {
   const [activeIndex, setActiveIndex] = useState(0);
   return (
-    <div className="box mt-1">
+    <div className="box mt-3">
       <h2 className="title is-3">Almaty, Kazakhstan</h2>
 
       <Panel

diff --git a/src/components/Gallery.js b/src/components/Gallery.js
@@ -11,7 +11,7 @@ const Gallery = () => {
 
   let sculpture = sculptureList[index];
   return (
-    <div className="box mt-1">
+    <div className="box mt-3">
       {/* <Header title="New Gallery" /> */}
       <button className="button is-primary" onClick={handleClick}>
         Next

diff --git a/src/components/GalleryItem.js b/src/components/GalleryItem.js
@@ -26,7 +26,7 @@ const GalleryItem = () => {
 
   // render template
   return (
-    <div className="box mt-1">
+    <div className="box mt-3">
       {item ? (
         <>
           <h2 className="title is-5">

diff --git a/src/components/PeopleList.js b/src/components/PeopleList.js
@@ -3,7 +3,7 @@ import { people } from "../data/people.js";
 
 export default function PeopleList() {
   return (
-    <div className="box mt-1">
+    <div className="box mt-3">
       <h2 className="title is-4">People List</h2>
       <ul>
         {people.map((person) => (

diff --git a/src/components/StyledComponent.js b/src/components/StyledComponent.js
@@ -2,7 +2,7 @@ import React from "react";
 
 export default function StyledComponent() {
   return (
-    <section className="box mt-1">
+    <section className="box mt-3">
       <section className="animatedSection box">
         This is a styled section with animation
       </section>

diff --git a/src/pages/ApodPage.js b/src/pages/ApodPage.js
@@ -27,7 +27,7 @@ export default function ApodPage() {
   };
 
   return (
-    <div className="box mt-1">
+    <div className="box mt-3">
       <section className="section">
         <div className="container">
           <ApodForm fetchApodData={fetchApodData} />