index page ui improvementation

src/components/mobile/toolbar.css

@@ -11,15 +11,12 @@
 }
 
 .mobile-toolbar-logo {
-  margin-top: auto;
-  margin-bottom: auto;
+  margin: auto 20px;
   min-width: 50px;
 }
 
 .mobile-toolbar-sidebar-toggle {
-  margin-top: auto;
-  margin-bottom: auto;
-  margin-left: auto;
+  margin: auto 20px;
   font-size: 35px;
   min-width: 50px;
   color: #ffa62b;

src/components/mobile/toolbar.jsx

@@ -10,6 +10,7 @@ import Search from "../search"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { faBars } from "@fortawesome/free-solid-svg-icons"
 import { Link } from "gatsby"
+import ScrollToTop from "../scrollToTop"
 
 const Toolbar = ({ showSearch }) => {
   const [isSidebarVisible, setSidebarVisibilty] = useState(false)
@@ -21,6 +22,7 @@ const Toolbar = ({ showSearch }) => {
 
   return (
     <div className="mobile-toolbar">
+      {!isSidebarVisible && <ScrollToTop />}
       <div className="mobile-toolbar-logo noselect">
         <center>
           {showSearch ? (

src/components/notification.jsx

@@ -3,8 +3,7 @@ import { Message } from "semantic-ui-react"
 
 const Notification = () => {
   const style = {
-    width: "100%",
-    margin: "1rem",
+    width: "fit-content",
   }
 
   return (

src/components/org-card.css

@@ -1,92 +1,119 @@
 .org-card-container {
+  z-index: 100;
   width: 100%;
-  border: 1px solid rgb(230, 236, 241);
+  padding: 0 1rem;
   height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
   cursor: pointer;
+  border-radius: 10px;
+  background: linear-gradient(to bottom, var(--background), var(--card));
+  transition: all 1ms ease-in;
+  border: 2px solid var(--background);
+  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1))
+    drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
+  color: rgba(37, 37, 37, 0.794);
 }
 
 .org-card-container:hover {
-  box-shadow: 0 4.5px 5.5px -2.5px rgba(0, 0, 0, 0.2),
-    0 9px 14px 1px rgba(0, 0, 0, 0.14), 0 3.5px 17px 3px rgba(0, 0, 0, 0.12);
+  background: linear-gradient(to bottom, var(--background), #fafafa);
+  border: 2px solid var(--card);
 }
 
 .org-card-logo-container {
   height: 128px;
-  padding: 5% 10%;
+  border-radius: 10px;
+  margin: 20px 0;
 }
 
 .org-card-logo {
+  margin: auto;
   background-size: contain;
   background-position: center center;
   background-repeat: no-repeat;
-  height: 100%;
-  width: 100%;
+  height: 80%;
+  width: 80%;
 }
 
 .org-card-name-container {
   justify-content: center;
   text-align: center;
-  padding-top: 2%;
-  padding-left: 10%;
-  padding-right: 10%;
-  font-size: 16px;
+  padding: 2% 5%;
+  letter-spacing: 1px;
+  font-size: 1.2em;
   font-family: "Galano Grotesque Alt Medium";
 }
 
 .org-card-description-container {
-  padding: 2% 3%;
+  padding: 3%;
+  text-align: center;
   font-family: "Galano Grotesque Alt Light";
 }
 
 .org-card-category-container {
+  border-radius: 10px;
   text-align: center;
-  padding: 2% 2%;
+  background-color: var(--primary);
+  border: 2px solid white;
+  color: #29531b;
+  padding: 2%;
+  margin: 10px 0;
 }
 
 .org-card-category-container span {
   display: inline-block;
   width: inherit;
   padding: 3px;
-  background-color: #db6400;
-  color: #ffffff;
   border-radius: 5px;
   font-family: "Galano Grotesque Alt Medium";
 }
 
 .org-card-years-container {
-  padding: 2% 2%;
+  padding: 5px 2px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  flex: 0 0 1;
 }
 
 .org-card-year {
+  border-radius: 5px;
   display: inline-block;
-  margin: 3px;
-  padding: 3px;
-  background-color: #16697a;
-  color: white;
-  border-radius: 2px;
+  padding: 5px 10px;
+  font-size: xx-small;
+  color: rgba(37, 37, 37, 0.6);
+  font-weight: 200;
   font-family: "Galano Grotesque Alt Medium";
 }
 
 .org-card-technologies-container {
-  padding: 2% 2%;
+  height: 150px;
+  padding: 10px 0;
+  margin: 10px;
+  border-top: 1px solid #d3d3d3;
+  font-family: "Galano Grotesque Alt Medium";
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  align-content: start;
+  flex-wrap: wrap;
+  color: #29531bda;
+  overflow: hidden;
 }
 
 .org-card-technology {
-  display: inline-block;
-  margin: 3px;
-  padding: 3px;
-  border: 1px solid #db6400;
-  color: #db6400;
-  border-radius: 2px;
-  font-family: "Galano Grotesque Alt Medium";
+  box-sizing: border-box;
+  text-wrap: wrap;
+  padding: 5px;
+  text-align: center;
 }
 
 .org-card-technology-extra {
-  text-decoration: underline;
   display: inline-block;
+  text-decoration: underline;
   margin: 3px;
   padding: 3px;
-  color: #db6400;
   border-radius: 2px;
-  font-family: "Galano Grotesque Alt Medium";
 }

src/components/org-card.jsx

@@ -40,25 +40,27 @@ const OrgCard = ({ data }) => {
 
   const card = (
     <div className="org-card-container">
-      <div
-        className="org-card-logo-container"
-        style={{
-          backgroundColor: data.image_background_color,
-        }}
-      >
+      <div>
         <div
-          className="org-card-logo"
+          className="org-card-logo-container"
           style={{
-            backgroundImage: `url(${data.image_url})`,
+            backgroundColor: data.image_background_color,
           }}
-        ></div>
+        >
+          <div
+            className="org-card-logo"
+            style={{
+              backgroundImage: `url(${data.image_url})`,
+            }}
+          ></div>
+        </div>
+        <div className="org-card-name-container">{data.name}</div>
+        <div className="org-card-category-container">
+          <span>{data.category}</span>
+        </div>
+        <div className="org-card-description-container">{data.description}</div>
+        <div className="org-card-years-container">{years}</div>
       </div>
-      <div className="org-card-name-container">{data.name}</div>
-      <div className="org-card-category-container">
-        <span>{data.category}</span>
-      </div>
-      <div className="org-card-description-container">{data.description}</div>
-      <div className="org-card-years-container">{years}</div>
       <div className="org-card-technologies-container">{technologies}</div>
     </div>
   )

src/components/org-info.css

@@ -1,7 +1,9 @@
 .org-info-container {
   margin: 3%;
-  border: 2px solid rgb(230, 236, 241);
-  box-shadow: 9px 9px 10px #d1d9e6, -6px -6px 10px rgb(230, 236, 241);
+  background: var(--background);
+  border-radius: 5px;
+  filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.1));
+  overflow: hidden;
 }
 
 .org-info-logo-container {

src/components/projects-graph.css

@@ -1,5 +1,6 @@
 .projects-graph-container {
   margin: 3%;
-  border: 2px solid rgb(230, 236, 241);
-  box-shadow: 9px 9px 10px #d1d9e6, -6px -6px 10px rgb(230, 236, 241);
+  background: var(--background);
+  border-radius: 5px;
+  filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.1));
 }

src/components/scrollToTop.css

@@ -0,0 +1,20 @@
+.gotoTopButton {
+  height: 60px;
+  width: 60px;
+  border-radius: 100%;
+  display: flex;
+  padding: 20px;
+  align-items: center;
+  justify-content: center;
+  z-index: 100;
+  top: calc(100vh - 90px);
+  position: fixed;
+  right: 100px;
+  font-size: 2rem;
+  font-weight: bolder;
+  cursor: pointer;
+  color: white;
+  background-color: var(--hero);
+  filter: drop-shadow(0 0.5px 2px rgba(89, 89, 89, 0.6))
+    drop-shadow(0 0.5px 2px rgba(60, 60, 60, 0.6));
+}

src/components/scrollToTop.jsx

@@ -0,0 +1,15 @@
+import React from "react"
+const scrollToTop = () => {
+  if (typeof window !== "undefined") {
+    window.scrollTo({ top: 0, behavior: "smooth" })
+  }
+}
+function ScrollToTop() {
+  return (
+    <div onClick={scrollToTop} className="gotoTopButton">
+      &#8593;
+    </div>
+  )
+}
+
+export default ScrollToTop

src/components/search.css

@@ -1,3 +1,5 @@
 .search-search * {
-  width: 90%;
+  width: 70%;
+  filter: drop-shadow(0 0 0.5px rgb(0 0 0 / 0.04))
+    drop-shadow(0 0 0.5px rgb(0 0 0 / 0.06));
 }

src/components/sidebar.css

@@ -1,19 +1,22 @@
 .sidebar-sidebar {
-  z-index: 20;
+  overflow: hidden;
   height: 100%;
+  z-index: 20;
+  border-radius: 20px;
+  padding: 10px;
   position: fixed;
-  transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   transition-property: transform;
-  overflow: hidden;
-  background-color: #f5f7f9;
-  border-right: 1px solid rgb(230, 236, 241);
+  transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .sidebar-div {
   height: 100%;
-  width: 100%;
+  border-radius: inherit;
   display: flex;
   flex-direction: column;
+  background-color: white;
+  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1))
+    drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
 }
 
 .sidebar-content {
@@ -42,11 +45,10 @@
 }
 
 .sidebar-description {
-  font-family: "Galano Grotesque Alt Medium";
-  font-size: 18px;
-  color: #ffa62b;
+  display: grid;
+  place-content: center;
+  padding: 1rem 10px;
 }
-
 .sidebar-footer {
   text-align: center;
   margin-top: auto;

src/components/sidebar.jsx

@@ -8,7 +8,7 @@ import Filter from "./filters/filter"
 import GitHubButton from "react-github-btn"
 import { OutboundLink } from "gatsby-plugin-google-gtag"
 import { Link } from "gatsby"
-import { Container, Divider, Button, Icon } from "semantic-ui-react"
+import { Container, Divider, Button, Icon, Image } from "semantic-ui-react"
 import { useAppDispatch } from "../store"
 import { clearFilters } from "../store/filters"
 
@@ -79,10 +79,18 @@ const Sidebar = ({ config, showFilters }) => {
         <div className="sidebar-logo-description">
           <div className="sidebar-description">
             {showFilters ? (
-              <Container>GSoC Organizations</Container>
+              <Image
+                src="/images/Gsoc Organizations.svg"
+                size="medium"
+                alt="logo"
+              />
             ) : (
               <Link to="/">
-                <Container>GSoC Organizations</Container>
+                <Image
+                  src="/images/Gsoc Organizations.svg"
+                  size="medium"
+                  alt="logo"
+                />
               </Link>
             )}
           </div>