chore: UI improvements

anandbaburajan · Apr 1, 2024 · e21f780 · e21f780
1 parent 9539bf1
commit e21f780
Show file tree

Hide file tree

Showing 12 changed files with 61 additions and 16 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/README.md b/README.md
@@ -21,6 +21,10 @@
   <br/>
 </div>
 
+<img src="./public/banner.png" alt="Samay banner"/>
+
+<br/>
+
 Samay is a free and open source meeting poll tool. Quickly find a time which works for everyone without the back-and-forth texts/emails!
 
 - Create a meeting poll by choosing the time slots based on your availability.

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,7 +15,7 @@
   "license": "MIT",
   "dependencies": {
     "@babel/core": "^7.12.10",
-    "@fontsource/inter": "^4.5.15",
+    "@fontsource/inter": "^5.0.17",
     "bootstrap": "^4.5.3",
     "cal-sans": "^1.0.1",
     "copy-to-clipboard": "^3.3.1",

diff --git a/pages/how-to.tsx b/pages/how-to.tsx
@@ -13,7 +13,7 @@ const HowTo = (): JSX.Element => {
   return (
     <>
       <Head>
-        <title>Samay — How-to</title>
+        <title>Samay — how-to</title>
         <link rel="shortcut icon" href="/favicon.svg" />
         <meta charSet="UTF-8" />
         <meta name="robots" content="noindex" />

diff --git a/pages/privacy.tsx b/pages/privacy.tsx
@@ -6,7 +6,7 @@ const Privacy = (): JSX.Element => {
   return (
     <>
       <Head>
-        <title>Samay — Privacy Policy</title>
+        <title>Samay — privacy policy</title>
         <link rel="shortcut icon" href="/favicon.svg" />
         <meta charSet="UTF-8" />
         <meta name="robots" content="noindex" />

diff --git a/pages/recent-polls.tsx b/pages/recent-polls.tsx
@@ -196,7 +196,7 @@ const RecentPolls = (): JSX.Element => {
   return (
     <>
       <Head>
-        <title>Samay — Recent polls</title>
+        <title>Samay — recent polls</title>
         <link rel="shortcut icon" href="/favicon.svg" />
         <meta charSet="UTF-8" />
         <meta name="robots" content="noindex" />

diff --git a/public/.DS_Store b/public/.DS_Store
diff --git a/src/components/LogoSVG.tsx b/src/components/LogoSVG.tsx
@@ -0,0 +1,40 @@
+import * as React from "react";
+import { SVGProps } from "react";
+
+const LogoSVG = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlSpace="preserve"
+    viewBox="0 0 1000 1000"
+    {...props}
+  >
+    <style>
+      {
+        ".st1{stroke:#000;stroke-width:100;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10}"
+      }
+    </style>
+    <path
+      d="M672.5 929.5h-344c-141.9 0-257-115.1-257-257v-344c0-141.9 115.1-257 257-257h344c141.9 0 257 115.1 257 257v344c0 141.9-115.1 257-257 257z"
+      style={{
+        fill: "#fff",
+        stroke: "#000",
+        strokeWidth: 115,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeMiterlimit: 10,
+      }}
+    />
+    <circle cx={662.5} cy={337.5} r={82.5} className="st1" />
+    <circle cx={337.5} cy={662.5} r={82.5} className="st1" />
+    <circle cx={662.5} cy={662.5} r={82.5} className="st1" />
+    <circle cx={337.5} cy={337.5} r={82.5} className="st1" />
+    <path
+      d="M571 639H428c-37.6 0-68-30.4-68-68V428c0-37.6 30.4-68 68-68h143c37.6 0 68 30.4 68 68v143c0 37.6-30.4 68-68 68z"
+      style={{
+        fill: "#fff",
+      }}
+    />
+  </svg>
+);
+
+export default LogoSVG;
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -9,6 +9,7 @@ import {
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { useState, useEffect } from "react";
+import LogoSVG from "./LogoSVG";
 
 const NavBar = (): JSX.Element => {
   const router = useRouter();
@@ -25,7 +26,7 @@ const NavBar = (): JSX.Element => {
     <Navbar className="navbar" variant="light" expand="lg" collapseOnSelect>
       <Container className="global-container">
         <Navbar.Brand href="/" className="navbar-brand">
-          <img alt="logo" src="/favicon.svg" className="navbar-logo" />
+          <LogoSVG className="navbar-logo" />
           <span className="navbar-logo-text">samay</span>
         </Navbar.Brand>
         <Navbar.Toggle

diff --git a/src/styles/navbar.scss b/src/styles/navbar.scss
@@ -101,8 +101,8 @@
 .beacon {
   background-color: #16a2b8;
   border-radius: 50%;
-  width: 0.4rem;
-  height: 0.4rem;
+  width: 0.35rem;
+  height: 0.35rem;
   display: block;
   z-index: 1;
   position: absolute;
@@ -113,10 +113,10 @@
 .beacon::before {
   background-color: #16a2b8;
   content: "";
-  top: calc(50% - 5px);
-  left: calc(50% - 5px);
-  width: 0.7rem;
-  height: 0.7rem;
+  top: calc(50% - 0.25rem);
+  left: calc(50% - 0.25rem);
+  width: 0.5rem;
+  height: 0.5rem;
   opacity: 1;
   border-radius: 50%;
   position: absolute;

diff --git a/src/styles/your-polls.scss b/src/styles/your-polls.scss
@@ -82,7 +82,7 @@
   }
 
   &:last-of-type {
-    margin-bottom: 2rem;
+    margin-bottom: 0rem;
   }
 
   .stretched-link {
-Original file line number
+Diff line change
@@ Expand Up / @@ -21,6 +21,10 @@ @@
       <br/>
     </div>
+    <img src="./public/banner.png" alt="Samay banner"/>
+    <br/>
     Samay is a free and open source meeting poll tool. Quickly find a time which works for everyone without the back-and-forth texts/emails!
     - Create a meeting poll by choosing the time slots based on your availability.
@@ Expand Down @@