made header buttons bigger

made header buttons bigger and added email copy button to mobile offcanvas
lalewis7 · Jan 17, 2024 · 8e88f23 · 8e88f23
1 parent 5f55b0e
commit 8e88f23
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 8 deletions.
diff --git a/app/csr_components/CopyTextInput.jsx b/app/csr_components/CopyTextInput.jsx
@@ -17,14 +17,14 @@ export default function CopyTextInput(){
     }
 
     return <>
-        <div className="mw-100 px-2 px-sm-0 w-sm-50" >
+        <div className="mw-100 w-sm-50" >
             <InputGroup>
                 <Form.Control
                     aria-label="Email"
                     type="text"
                     size="sm"
                     value={process.env.NEXT_PUBLIC_EMAIL}
-                    className={`border-light focus-ring focus-ring-light rounded-start-5 ps-4 pe-2`}
+                    className={`border-light focus-ring focus-ring-light rounded-start-5 ps-4 pe-2 bg-transparent`}
                     style={{
                         paddingTop: "0.75rem",
                         paddingBottom: "0.75rem"

diff --git a/app/csr_components/HeaderOffcanvas.jsx b/app/csr_components/HeaderOffcanvas.jsx
@@ -3,8 +3,9 @@
 import Link from "next/link"
 import { useState } from "react";
 import { Button, Nav, Navbar, Offcanvas } from "react-bootstrap"
-import { Easel, EaselFill, FileEarmarkPdfFill, FiletypePdf, Github, House, HouseFill, InfoCircle, InfoCircleFill, Linkedin, List, Medium } from "react-bootstrap-icons";
+import { Easel, EaselFill, EnvelopeFill, FileEarmarkPdfFill, FiletypePdf, Github, House, HouseFill, InfoCircle, InfoCircleFill, Linkedin, List, Medium } from "react-bootstrap-icons";
 import { Roboto_Mono } from 'next/font/google'
+import CopyTextInput from "./CopyTextInput";
 
 const roboto_mono = Roboto_Mono({
     subsets: ['latin'],
@@ -51,6 +52,7 @@ export default function HeaderOffcanvas(props){
                         {"name": "LinkedIn", "link": "https://www.linkedin.com/in/arthur-lewis/", "icon": <Linkedin />},
                         {"name": "GitHub", "link": "https://github.com/lalewis7", "icon": <Github />},
                         {"name": "Medium", "link": "https://medium.com/@arthur.lewis", "icon": <Medium />},
+                        {"name": "Email", "link": `mailto:${process.env.NEXT_PUBLIC_EMAIL}`, "icon": <EnvelopeFill />},
                     ].map((val, i) => <>
                         <Nav.Item className="col-6" key={i}>
                             <Nav.Link as={Link} target="_blank" rel="noopener noreferrer" href={val.link} 
@@ -60,6 +62,9 @@ export default function HeaderOffcanvas(props){
                         </Nav.Item>
                     </>)}
                 </Nav>
+                <div className="pt-3">
+                    <CopyTextInput />
+                </div>
             </Offcanvas.Body>
         </Offcanvas>
     </>

diff --git a/app/layout.jsx b/app/layout.jsx
@@ -80,22 +80,22 @@ export default function RootLayout({ children }) {
                 </div>
                 <li className="nav-item">
                   <Link target="_blank" rel="noopener noreferrer" href={process.env.LINKEDIN_LINK} className="nav-link d-inline-flex" tabIndex={0} role="link" aria-label="LinkedIn">
-                    <Linkedin />
+                    <Linkedin size={22} />
                   </Link>
                 </li>
                 <li className="nav-item">
                   <Link target="_blank" rel="noopener noreferrer" href={process.env.GITHUB_LINK} className="nav-link d-inline-flex" tabIndex={0} role="link" aria-label="GitHub">
-                    <Github />
+                    <Github size={22} />
                   </Link>
                 </li>
                 <li className="nav-item">
                   <Link target="_blank" rel="noopener noreferrer" href={`mailto:${process.env.NEXT_PUBLIC_EMAIL}`} className="nav-link d-inline-flex" tabIndex={0} role="link" aria-label="Email">
-                    <EnvelopeFill />
+                    <EnvelopeFill size={22} />
                   </Link>
                 </li>
                 <li className="nav-item">
                   <Link target="_blank" rel="noopener noreferrer" href={process.env.MEDIUM_LINK} className="nav-link d-inline-flex" tabIndex={0} role="link" aria-label="Medium">
-                    <Medium />
+                    <Medium size={22} />
                   </Link>
                 </li>
               </ul>
@@ -169,7 +169,9 @@ export default function RootLayout({ children }) {
                 <div className="h4">Contact</div>
                 <div className="row">
                   <div className="col">
-                    <CopyTextInput />
+                    <div className="px-2 px-sm-0">
+                      <CopyTextInput />
+                    </div>
                   </div>
                 </div>
               </div>