more frontend design improvements

Author: R-Sandor

frontend/app/globals.scss

@@ -1,5 +1,5 @@
-@import url("https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap");
-
+@import url("https://fonts.googleapis.com/css2?family=Sirivennela&display=swap");
+@import url("https://fonts.googleapis.com/css?family=Muli&display=swap");
 $grid-breakpoints: (
   // Extra small screen / phone
   xs: 0,
@@ -29,21 +29,20 @@ $container-max-widths: (
 body {
   width: 100%;
   height: 100%;
+  // font-family: "Muli", sans-serif;
+}
+
+.sirivennela-regular {
+  font-family: "Sirivennela", sans-serif;
+  font-weight: 400;
+  font-style: normal;
 }
 
 * {
   margin: 0;
   padding: 0;
   outline: none;
   box-sizing: border-box;
-  font-family: "Work Sans", sans-serif;
-}
-
-.work-sans-font {
-  font-family: "Work Sans", sans-serif;
-  font-optical-sizing: auto;
-  font-weight: 400;
-  font-style: normal;
 }
 
 a {

frontend/app/page.tsx

@@ -24,16 +24,18 @@ export default function App() {
           <div
             className={`col-md-4 col-lg-2 col-xl-1 fixed-top ${tagStyles.sideMenu}`}
           >
-            <div className={`${sideStyles.logo}`}>
-              <div className="">
+            <div className={``}>
+              <div>
                 <Image
                   src="/basic-f-v2-dark-mode-v2-fav.png"
-                  width="38"
-                  height="30"
-                  className="d-inline-block align-top"
+                  width="65"
+                  height="48"
+                  className={sideStyles.logoPicture}
                   alt="FindFirst Logo"
                 />
-                <h4 className="d-inline-block">FindFirst</h4>
+                <h4 className={`d-inline-block ${sideStyles.logo}`}>
+                  findFirst
+                </h4>
               </div>
             </div>
             <NewBookmarkCard />

frontend/components/Bookmark/NewBookmarkCard.tsx

@@ -192,7 +192,7 @@ export default function NewBookmarkCard() {
   });
 
   return (
-    <div className={`${style.main},`}>
+    <div>
       <Formik
         initialValues={newcard}
         onSubmit={handleOnSubmit}

frontend/components/Bookmark/bookmarkCard.module.scss

@@ -157,15 +157,11 @@
   border: 0px;
 
   padding: 0px !important;
-  .card-body {
-  }
 }
 
 .newBookmarkCard {
   @extend .bookmarkCard;
   text-align: center;
-  padding-left: 0.25em;
-  padding-right: 0.25em;
 }
 
 .newBookmarkCard .cardFooter {

frontend/components/Navbar/Navbar.tsx

@@ -67,7 +67,7 @@ const GlobalNavbar: React.FC = () => {
       expand="md"
       fixed="bottom"
       style={{
-        borderBottom: "1px solid",
+        borderTop: "3px solid",
         height: "auto",
         minHeight: "60px",
       }}

frontend/components/Tags/tag-list-item.module.scss

@@ -1,6 +1,9 @@
 .btn {
   &:hover {
     background-color: #5cb85c !important;
+    [data-bs-theme="light"] & {
+      border-radius: 20px;
+    }
   }
   margin: 0px;
   width: 100%;
@@ -13,4 +16,7 @@
 
 .item {
   padding: 0px !important;
+  [data-bs-theme="light"] & {
+    border-radius: 20px;
+  }
 }

frontend/styles/cardView.module.scss

@@ -1,9 +1,10 @@
 .content {
-  padding-top: 3px;
+  padding-top: 40px;
 
   margin-left: 250px;
 
   @media (max-width: 760px) {
+    padding-top: 10px;
     margin-left: 0px;
     padding-bottom: 85px;
   }

frontend/styles/sidemenu.module.scss

@@ -1,3 +1,14 @@
 .logo {
-  margin-left: 5px;
+  margin-bottom: 20px;
+  font-family: "Sirivennela", sans-serif;
+  font-size: 40px;
+  font-weight: 400;
+  font-style: normal;
+  margin-left: 8px;
+  // align-content: center;
+  // text-align: center;
+}
+
+.logoPicture {
+  margin-top: -5px;
 }

frontend/styles/tag.module.scss

@@ -55,4 +55,11 @@
   flex: 1;
   min-height: 0; /* crucial - allows it to shrink and scroll */
   overflow-y: auto;
+  margin-bottom: 20px;
+  [data-bs-theme="light"] & {
+    border-radius: 20px;
+    border: 1px solid;
+  }
+  // border: 1px solid;
+  // border-radius: 5px;
 }