diff --git a/package.json b/package.json index 1a3f1e0..a2d0f33 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "BuniTek", + "name": "buni-tek", "private": true, "description": "BuniTek frontend app", "version": "0.1.0", diff --git a/src/assets/styles/pages/about.scss b/src/assets/styles/pages/about.scss index 6603732..43f048e 100644 --- a/src/assets/styles/pages/about.scss +++ b/src/assets/styles/pages/about.scss @@ -116,14 +116,10 @@ position: relative; line-height: 1.5; @include mediaSm { - padding: 20px; - padding-bottom: 60px; - } - @include mediaMd { - padding: 0 40px; - padding-bottom: 60px; + padding-bottom: 60px; } + @include mediaSm { margin: 5px; @@ -222,7 +218,7 @@ &.absolute-right { position: absolute; top: 0; - left: 40; + left: 40%; z-index: -1; &-third-section{ position: absolute; @@ -271,7 +267,7 @@ position: relative; top: 30px; @include mediaSm { - font-size: 2em; + font-size: 1.4em; } } @@ -402,10 +398,10 @@ body{ padding-top: 30px; list-style-image: url(../../images/plus-solid-6.png); span{ - font-size: 20px; + font-size: 18px; font-family: $mincho-font !important; @include mediaSm{ - font-size: 1.2rem; + font-size: 17px; } } } @@ -459,6 +455,7 @@ li span{ .company__name{ font-family: 'Archivo Black', sans-serif !important; + font-size: 20px; @include mediaSm { font-size: 17px; diff --git a/src/assets/styles/pages/contact.scss b/src/assets/styles/pages/contact.scss index cf61710..3552745 100644 --- a/src/assets/styles/pages/contact.scss +++ b/src/assets/styles/pages/contact.scss @@ -5,6 +5,15 @@ .contact { margin: auto; + &__form { + width: 80%; + + @include mediaSm { + width: 100%; + margin: auto 10%; + } + } + &__social { display: flex; justify-content: flex-start; @@ -39,6 +48,7 @@ &__heading { font-size: 2rem; font-family: $title-font !important; + font-weight: bold; color: $h-color; @include mediaSm{ font-size: 1.2rem; diff --git a/src/assets/styles/pages/home.scss b/src/assets/styles/pages/home.scss index f036a90..c5279d9 100644 --- a/src/assets/styles/pages/home.scss +++ b/src/assets/styles/pages/home.scss @@ -136,12 +136,22 @@ } &__second{ background: $dark; + height: 60vh; padding: 5vh 5vw 10vh 5vw; + @include mediaMd{ + height: 80vh; + } + @include mediaSm{ + height: 100vh; + } &--title{ font-size: 1.8rem; text-align: center; font-family: $title-font !important; color: $border-color; + @include mediaSm{ + margin-top: 5vh; + } } &__container { display: grid; diff --git a/src/assets/styles/utils.scss b/src/assets/styles/utils.scss index 50304fd..0101649 100644 --- a/src/assets/styles/utils.scss +++ b/src/assets/styles/utils.scss @@ -15,7 +15,7 @@ body { font-size: 18px; } @media (min-width: $desktop-max) { - font-size: 16px; + font-size: 13px; } @media (min-width: $desktop-umax) { font-size: 20px; diff --git a/src/components/Blog/BlogItem.jsx b/src/components/Blog/BlogItem.jsx index 615fed0..bc06d50 100644 --- a/src/components/Blog/BlogItem.jsx +++ b/src/components/Blog/BlogItem.jsx @@ -2,19 +2,19 @@ import React from 'react'; import PropTypes from 'prop-types'; import LinkAnchor from '../Link'; -import HeartIcon from '../../assets/images/heart-regular.png'; - import './blogitem.scss'; -const BlogItem = ({ title, description, readMore, featured }) => ( +const BlogItem = ({ + title, description, readMore, featured, +}) => (
-
+
{featured && ( -
- -
+
+ Featured +
)} - +
@@ -34,13 +34,15 @@ const BlogItem = ({ title, description, readMore, featured }) => (
- +
); BlogItem.propTypes = { title: PropTypes.string.isRequired, description: PropTypes.string.isRequired, + readMore: PropTypes.string.isRequired, + featured: PropTypes.bool.isRequired, }; export default BlogItem; diff --git a/src/components/Blog/blogitem.scss b/src/components/Blog/blogitem.scss index 3ee0c5e..ff063e8 100644 --- a/src/components/Blog/blogitem.scss +++ b/src/components/Blog/blogitem.scss @@ -9,9 +9,10 @@ border: 5px solid $border-color; margin: 50px 10%; padding: 0; + min-height: 300px; - @include mediaSm{ - + @include mediaMd{ + min-height: 400px; } &:hover{ diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss index 8509184..62a2346 100644 --- a/src/components/Button/Button.scss +++ b/src/components/Button/Button.scss @@ -3,15 +3,15 @@ .button{ position: relative; width: 80%; - height: 20%; + height: 50px; padding: 1.4rem 3rem; border: none; outline: none; color: $white; - font-size: 1.4em; + font-size: 1.2em; border-radius: 50px; cursor: pointer; - margin:0 auto; + margin: 30px 10%; font-family: $title-font !important; &.is-primary{ diff --git a/src/components/Button/index.jsx b/src/components/Button/index.jsx index 1404252..da50063 100644 --- a/src/components/Button/index.jsx +++ b/src/components/Button/index.jsx @@ -1,3 +1,4 @@ +/* eslint-disable react/button-has-type */ /* eslint-disable react/jsx-props-no-spreading */ import React from 'react'; import PropTypes from 'prop-types'; @@ -9,7 +10,7 @@ const Button = ({ children, style, bgColor, - htmlType + htmlType, }) => ( ); @@ -28,14 +29,14 @@ Button.propTypes = { children: PropTypes.node.isRequired, style: PropTypes.instanceOf(Object), bgColor: PropTypes.string, - htmlType: PropTypes.string + htmlType: PropTypes.string, }; Button.defaultProps = { type: 'primary', style: {}, bgColor: 'primary', - htmlType: 'button' + htmlType: 'button', }; export default Button; diff --git a/src/components/Header/index.jsx b/src/components/Header/index.jsx index 6be629d..36c9378 100644 --- a/src/components/Header/index.jsx +++ b/src/components/Header/index.jsx @@ -1,19 +1,19 @@ -import React, { useState } from "react" -import { useSelector } from "react-redux" -import { Link } from "gatsby" -import styled from "styled-components" -import { MenuOutlined } from "@ant-design/icons" -import "./index.scss" -import Sidebar from "./Sidebar" +import React, { useState } from 'react'; +import { useSelector } from 'react-redux'; +import { Link } from 'gatsby'; +import styled from 'styled-components'; +import { MenuOutlined } from '@ant-design/icons'; +import './index.scss'; +import Sidebar from './Sidebar'; const Logo = styled.img` width: 5rem; height: auto; -` +`; const Header = () => { - const [open, setOpen] = useState(false) - const logoUrl = useSelector(state => state.ui.logoUrl) + const [open, setOpen] = useState(false); + const logoUrl = useSelector((state) => state.ui.logoUrl); return (
@@ -75,7 +75,7 @@ const Header = () => {
- ) -} + ); +}; -export default Header +export default Header; diff --git a/src/components/Header/index.scss b/src/components/Header/index.scss index 79517e1..e07ea92 100644 --- a/src/components/Header/index.scss +++ b/src/components/Header/index.scss @@ -20,8 +20,6 @@ padding-top: 5%; list-style: none; - - &--item { margin-right: 30px; a { @@ -60,16 +58,14 @@ .nav-wrapper { background: transparent !important; - @include mediaSm{ + @include mediaSm { margin-left: 4vw; } &__container { margin: 1vw 5vw; - @include mediaSm{ - + @include mediaSm { } } - } nav { @@ -87,8 +83,8 @@ nav { .brand-logo { left: 2rem; - @include mediaSm{ - left:3rem; + @include mediaSm { + left: 3rem; } } } @@ -105,9 +101,9 @@ nav { } .nav__active { - //color: #0066ff; border-bottom: solid 2px $dark; transition: border-width 0.1s ease-in-out; - height: 45px; + height: 55px; width: auto; + padding-bottom: 60px !important; } diff --git a/src/components/Team/MemberInfo.jsx b/src/components/Team/MemberInfo.jsx index 28ac356..c55e7a6 100644 --- a/src/components/Team/MemberInfo.jsx +++ b/src/components/Team/MemberInfo.jsx @@ -9,6 +9,7 @@ const Title = styled.h3` &:hover { text-decoration: underline; cursor: pointer; + transition: 0.5s ease-out; } `; diff --git a/src/components/Team/TeamMember.jsx b/src/components/Team/TeamMember.jsx index 1a24d2a..cb74fbf 100644 --- a/src/components/Team/TeamMember.jsx +++ b/src/components/Team/TeamMember.jsx @@ -7,23 +7,19 @@ import MemberInfo from './MemberInfo'; import defaultProfile from '../../assets/images/user-profile.png'; import './TeamMember.scss'; -const TeamMember = ({ - profileUrl, - titles, - name, -}) => { - const content = ( - - ); +const TeamMember = ({ profileUrl, titles, name }) => { + const content = ; return (
- - + +
); @@ -36,8 +32,7 @@ TeamMember.propTypes = { }; TeamMember.defaultProps = { - profileUrl: - defaultProfile, + profileUrl: defaultProfile, }; export default TeamMember; diff --git a/src/components/Team/index.scss b/src/components/Team/index.scss index 7650df9..373c9cf 100644 --- a/src/components/Team/index.scss +++ b/src/components/Team/index.scss @@ -1,44 +1,39 @@ -@import '../../assets/styles/mixins.scss'; -@import '../../assets/styles/colors.scss'; -@import '../../assets/styles/fonts.scss'; -.team{ - padding: 300px; - background: lighten($h-color, 68%); - margin-top: -160px; - margin-bottom: -100px; - padding-bottom: 300px; - height: 80vh !important; +@import "../../assets/styles/mixins.scss"; +@import "../../assets/styles/colors.scss"; +@import "../../assets/styles/fonts.scss"; +.team { + padding: 30px; + background: lighten($h-color, 68%); + margin-top: -160px; + margin-bottom: -100px; + min-height: 80vh !important; + @include mediaMd { + padding: 20px; + min-height: 60vh !important; + } + @include mediaSm { + padding: 20px; + min-height: 120vh !important; + } + &__list { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-row-gap: 50px; + grid-gap: 30px; + margin-top: 30px; + margin-bottom: 100px; @include mediaMd { - padding: 100px; - padding-bottom: 300px; - padding-top: 250px; - height: 60vh !important; + grid-template-columns: repeat(3, 1fr); + grid-gap: 30px; + padding-bottom: 20px; } @include mediaSm { - padding: 150px; - padding-bottom: 300px; - padding-top: 250px; - height: 120vh !important; - } - &__list{ - display: grid; - grid-template-columns: repeat(4, 1fr); - grid-row-gap: 50px; - grid-gap: 30px; - margin-top: 30px; - margin-bottom: 100px; - @include mediaMd { - grid-template-columns: repeat(3, 1fr); - grid-gap: 30px; - padding-bottom: 20px; - } - @include mediaSm { - grid-template-columns: repeat(3, 1fr); - grid-gap: 10px; - padding-bottom: 20px; - } + grid-template-columns: repeat(3, 1fr); + grid-gap: 10px; + padding-bottom: 20px; } - height: 10vh; + } + display: grid; place-content: center; text-align: center; @@ -51,23 +46,17 @@ margin-right: auto; margin-bottom: 20px; } - } &__info { margin-top: 10px; } - &__title { - margin-top: 5vh !important; - font-size: 1.8rem; - font-family: $title-font !important; - font-weight: bold; - color: $h-color; - } -} -.join{ - &__team-button{ - + &__title { + margin-top: 5vh !important; + font-size: 1.8rem; + font-family: $title-font !important; + font-weight: bold; + color: $h-color; } } diff --git a/src/components/course/index.scss b/src/components/course/index.scss index e0dd7b9..a0945aa 100644 --- a/src/components/course/index.scss +++ b/src/components/course/index.scss @@ -20,10 +20,16 @@ font-weight: bold; color: $h-color; font-family: $title-font !important; - font-size: 0.8rem; + font-size: 1rem; @include mediaSm{ font-size: 1rem; } + @include mediaMd{ + font-size: 1rem; + } + @include mediaXXL{ + font-size: 0.8rem; + } } &__content{ font-family: $text-font; @@ -34,10 +40,13 @@ color: $h-color; p{ - font-size: 0.7rem; + font-size: 1rem; @include mediaSm{ font-size: 0.8rem; } + @include mediaXXL{ + font-size: 0.7rem; + } } } diff --git a/src/layouts/layout.js b/src/layouts/layout.js index 0c87b3d..18dd1aa 100644 --- a/src/layouts/layout.js +++ b/src/layouts/layout.js @@ -2,9 +2,6 @@ import React from 'react'; import PropTypes from 'prop-types'; import 'materialize-css/dist/css/materialize.min.css'; import 'semantic-ui-css/semantic.min.css'; -import { library } from '@fortawesome/fontawesome-svg-core'; -import { faCoffee } from '@fortawesome/free-solid-svg-icons'; -import { fab } from '@fortawesome/free-brands-svg-icons'; import 'antd/dist/antd.css'; import SEO from '../components/seo'; import 'slick-carousel/slick/slick.css'; @@ -14,7 +11,6 @@ import SiteHeader from '../components/Header/index'; import Footer from '../components/Footer/index'; import './layout.css'; -library.add(fab, faCoffee); const Layout = ({ children }) => ( <> diff --git a/src/pages/about.js b/src/pages/about.js index 26dcb0c..f91dbf5 100644 --- a/src/pages/about.js +++ b/src/pages/about.js @@ -1,3 +1,6 @@ +/* eslint-disable react/no-unescaped-entities */ +/* eslint-disable max-len */ +/* eslint-disable react/prop-types */ import React, { useEffect, useState } from 'react'; import { graphql } from 'gatsby'; import { useDispatch } from 'react-redux'; @@ -8,10 +11,10 @@ import Layout from '../layouts/layout'; import SEO from '../components/seo'; import InfoCard from '../components/InfoCard'; import Line from '../components/VerticalLine'; -import { setLogoUrl, setFooterVisible } from '../redux/actions'; +import { setLogoUrl } from '../redux/actions'; import '../assets/styles/pages/about.scss'; -import logo from '../assets/images/darkish.png'; +import darkLogo from '../assets/images/darkish.png'; import quoteImage from '../assets/images/quote-right-solid.svg'; import earsLogo from '../assets/images/partner-ears.png'; import cgiLogo from '../assets/images/partner-cgi.png'; @@ -23,12 +26,12 @@ const AboutUs = ({ eliePicture, willyPicture, alainPicture, brendaPicture, ivyPicture, abbyPicture, penielPicture, kettyPicture, adwoaPicture, - luluPicture + luluPicture, }, }) => { const dispatch = useDispatch(); - const team_members = [ + const teamMembers = [ { name: 'BILLY BYIRINGIRO', titles: 'CO-FOUNDER', @@ -94,16 +97,10 @@ const AboutUs = ({ }, ]; - const [members, setMembers] = useState(team_members); + const [members] = useState(teamMembers); useEffect(() => { - const body = document.querySelector('body'); - body.classList.remove('home'); - - dispatch(setLogoUrl({ - logo, - })); - setFooterVisible({ visible: true })(dispatch); + dispatch(setLogoUrl({ logo: darkLogo })); }, []); return ( @@ -150,7 +147,7 @@ const AboutUs = ({
- quote + quote Our Mission
@@ -174,7 +171,7 @@ const AboutUs = ({
Why are we Doing This? - quote + quote
@@ -252,7 +249,7 @@ const AboutUs = ({
Content Delivery - quote + quote
@@ -304,7 +301,7 @@ const AboutUs = ({

Embedded and Robotics Society

- + Stuff
Edinburgh Innovations diff --git a/src/pages/blog.js b/src/pages/blog.js index 12757dc..c260001 100644 --- a/src/pages/blog.js +++ b/src/pages/blog.js @@ -11,7 +11,6 @@ import SEO from '../components/seo'; import Pagination from '../components/Pagination'; import BlogItem from '../components/Blog/BlogItem'; - import '../assets/styles/pages/blog.scss'; import darkLogo from '../assets/images/darkish.png'; import Search from '../components/Search'; diff --git a/src/pages/contact.js b/src/pages/contact.js index 99eeb4a..8791d84 100644 --- a/src/pages/contact.js +++ b/src/pages/contact.js @@ -1,85 +1,82 @@ -import React, { useState, useEffect } from "react" -import { useDispatch } from "react-redux" -import { Collapse, Button as AntBtn } from "antd" +/* eslint-disable max-len */ +/* eslint-disable react/no-unescaped-entities */ +import React, { useState, useEffect } from 'react'; +import { useDispatch } from 'react-redux'; +import { Collapse, Button as AntBtn } from 'antd'; import { PlusOutlined, MinusOutlined, FacebookOutlined, InstagramOutlined, -} from "@ant-design/icons" +} from '@ant-design/icons'; -import Input from "../components/Form/Input" -import Textarea from "../components/Form/Textarea" -import Button from "../components/Button" -import Layout from "../layouts/layout" -import SEO from "../components/seo" -import { setLogoUrl, setFooterVisible } from "../redux/actions" +import Input from '../components/Form/Input'; +import Textarea from '../components/Form/Textarea'; +import Button from '../components/Button'; +import Layout from '../layouts/layout'; +import SEO from '../components/seo'; +import { setLogoUrl, setFooterVisible } from '../redux/actions'; -import "../assets/styles/pages/contact.scss" -import contactTopLeft from "../assets/images/contact_top-left.svg" -import contactMiddleRight from "../assets/images/contact_middle-right.svg" -import logo from "../assets/images/milkish.png" - -const { Panel } = Collapse - -const text = ` - Contact us at info@buni.tech -` +import '../assets/styles/pages/contact.scss'; +import contactTopLeft from '../assets/images/contact_top-left.svg'; +import contactMiddleRight from '../assets/images/contact_middle-right.svg'; +import logo from '../assets/images/milkish.png'; +const { Panel } = Collapse; const Contact = () => { - const [email, setEmail] = useState("") - const [message, setMessage] = useState("") + const [email, setEmail] = useState(''); + const [message, setMessage] = useState(''); // eslint-disable-next-line no-unused-vars const [state, setState] = useState({ - status: "ERROR", - }) + status: 'ERROR', + }); - const onEmailChange = e => { - setEmail(e.target.value) - } + const onEmailChange = (e) => { + setEmail(e.target.value); + }; // eslint-disable-next-line no-unused-vars - const onSubmit = ev => { + const onSubmit = (ev) => { // if we decide to use ajax and not thirdparty recapture. - ev.preventDefault() - const form = ev.target - const data = new FormData(form) - const xhr = new XMLHttpRequest() - xhr.open(form.method, form.action) - xhr.setRequestHeader("Accept", "application/json") + ev.preventDefault(); + const form = ev.target; + const data = new FormData(form); + const xhr = new XMLHttpRequest(); + xhr.open(form.method, form.action); + xhr.setRequestHeader('Accept', 'application/json'); xhr.onreadystatechange = () => { - if (xhr.readyState !== XMLHttpRequest.DONE) return + if (xhr.readyState !== XMLHttpRequest.DONE) return; if (xhr.status === 200) { - form.reset() - setState({ status: "SUCCESS", ...state }) + form.reset(); + setState({ status: 'SUCCESS', ...state }); } else { - setState({ status: "ERROR", ...state }) + setState({ status: 'ERROR', ...state }); } - } - xhr.send(data) - } + }; + xhr.send(data); + }; - const onMessageChange = e => { - setMessage(e.target.value) - } + const onMessageChange = (e) => { + setMessage(e.target.value); + }; - const dispatch = useDispatch() + const dispatch = useDispatch(); useEffect(() => { - const body = document.querySelector("body") - body.classList.remove("home") + const body = document.querySelector('body'); + body.classList.remove('home'); dispatch( setLogoUrl({ logo, - }) - ) + }), + ); setFooterVisible({ visible: true, - })(dispatch) - }, []) + })(dispatch); + }, []); return ( @@ -108,14 +105,33 @@ const Contact = () => {

{ value={email} onChange={onEmailChange} name="_replyto" - required={true} + required style={{ height: 40, - width: "100%", + width: '100%', }} />