gdsc-snu#1 linked sites in the footer, gdsc-snu#2 temporary join us b…

…utton link, gdsc-snu#3 changed page title, gdsc-snu#4 button component css change
suchetamahata · Nov 4, 2021 · ab52be7 · ab52be7
1 parent 683b7b7
commit ab52be7
Show file tree

Hide file tree

Showing 7 changed files with 72 additions and 14 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
     "@types/react-dom": "^17.0.9",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-router-dom": "^6.0.0",
     "react-scripts": "4.0.3",
     "typescript": "^4.4.4",
     "web-vitals": "^1.1.2"

diff --git a/public/index.html b/public/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="./images/gdsc-logo.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>GDSC SNU</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/components/Body/body.css b/src/components/Body/body.css
@@ -20,8 +20,20 @@
     border-color: #4285F4;
     margin-top: 1rem;
     margin-left: 2rem;
+    color: antiquewhite;
+    font-size: .9rem;
+}
+.bodyLink{
+  background: #4285F4;
+  color: antiquewhite;
+  text-decoration: none;
+  margin-left: 2rem;
+  padding: .5rem;
+  border-radius: 1rem;
+  padding-left: 2.2rem;
+  padding-right: 2.2rem;
+  font-size: .9rem;
 }
-
 .bodyText{
     color:#6D6D6D;
     font-size: 1.5rem;
@@ -84,8 +96,9 @@
         display: none;
       }
       .App-logo2{
-          height: 70vmin;
-          display:block;
+          height: 60vmin;
+          display:flex;
+          margin-left: 2rem;;
       }
       .topCircle {
           height: 22vmin;
@@ -96,6 +109,12 @@
       .bodyButton{
         width: 5rem;
         margin-top: 1.5rem;
+        font-size: .8rem;
+      }
+      .bodyLink{
+        font-size: .8rem;
+        padding-left: 1.5rem;
+        padding-right: 1.5rem;
       }
     }
 
diff --git a/src/components/Body/body.tsx b/src/components/Body/body.tsx
@@ -2,6 +2,8 @@ import logo from '../../svgimageFiles/logo.svg';
 import topcircle from '../../svgimageFiles/top-circle.svg';
 import orangecircle from '../../svgimageFiles/leftOrangeCircle.svg';
 import dottedDesign from '../../svgimageFiles/dottedDesign.svg'
+//import { Redirect } from "react-router-dom";
+
 import './body.css'
 
 const Body = () => {
@@ -17,8 +19,8 @@ const Body = () => {
                       web, mobile, and google technologies in a peer-to-peer 
                       learning environment. 
                 </p> 
-                <button className='bodyButton' > Join Us</button> 
-                <button className='bodyButton' style={{background: 'white'}}> Contact us</button>
+                <a className='bodyLink' href="https://gdsc.community.dev/sister-nivedita-university-kolkata/" target="_blank"> Join Us</a>
+                <button className='bodyButton' style={{background: 'white', color: 'blue'}}> Contact us</button>
                 <br />
                 <img src={dottedDesign} className="dottedDesign" alt="google developer student club" />
 

diff --git a/src/components/Footer/footer.css b/src/components/Footer/footer.css
@@ -1,6 +1,6 @@
 .footerDiv{
     width: 100vw;
-    height: 5vh;
+    height: 4vh;
     display: flex;
     justify-content: space-between;
 }
@@ -15,7 +15,8 @@
 
 .logo{
     height: 4vmin;
-    margin: 2rem
+    margin-left: 4rem;
+    margin-top: 1rem;
 }
 
 @media (max-width: 1024px){
@@ -34,6 +35,9 @@
     .footerSubDiv{
         margin-left: 0rem;
     }
+    .logo{
+        margin:2rem;
+    }
     .greenCircle{
         height: 7.5vmin;
     }

diff --git a/src/components/Footer/footer.tsx b/src/components/Footer/footer.tsx
@@ -10,15 +10,23 @@ const Footer = () => {
     return (
         <div className='footerDiv'>
             <div  className='footerSubDiv'>
-                <img src={linkedin} className="logo" alt="google developer student club" />
-                <img src={facebook} className="logo" alt="google developer student club" />
-                <img src={twitter} className="logo" alt="google developer student club" />
-                <img src={youtube} className="logo" alt="google developer student club" />
+                <a  href="https://www.linkedin.com/company/gdsc-snu/" target="_blank">
+                    <img src={linkedin} className="logo" alt="google developer student club" />
+                </a>
+                <a href="https://www.facebook.com/gdscsnu" target="_blank">
+                    <img src={facebook} className="logo" alt="google developer student club" />
+                </a>
+                <a  href="https://twitter.com/gdscsnu" target="_blank">
+                    <img src={twitter} className="logo" alt="google developer student club" />
+                </a>
+                <a  href="https://www.youtube.com/channel/UCTCtURT5tHNngMwkBz-MUBA" target="_blank">
+                    <img src={youtube} className="logo" alt="google developer student club" />
+                </a>
             </div>
             <img src={greenCircle} className="greenCircle" alt="google developer student club" />
 
         </div>
     )
-}
+} 
 
 export default Footer