Make JottingsList more responsive, remove Powered by Vercel

Author: varunsingh87

components/Jotting/jotting.module.css

@@ -5,7 +5,6 @@
 	border: none;
 	text-align: left;
 	padding: 1em;
-	width: 100%;
 	height: 100%;
 }
 
@@ -32,15 +31,13 @@
 
 .previewButton {
 	display: flex;
+	width: 100%;
 	align-items: center;
+	justify-content: space-between;
 }
 
 .previewTitle {
 	display: inline-block;
-	width: 170px;
-}
-
-.previewPin {
 }
 
 .jottingOptionsBar {

components/Jotting/notePreview.js

@@ -12,7 +12,7 @@ export default function NotePreview(props) {
 
 	return (
 		<data className={jotting.jotting} value={"N" + props.id}>
-			<button onClick={handleNoteBtnClick}>
+			<button className={jotting.previewButton} onClick={handleNoteBtnClick}>
 				<span className={jotting.previewTitle}>{props.title}</span>
 				{props.priority == 1 ? <PinImage className={jotting.previewPin} /> : ""}
 			</button>

components/Jotting/taskPreview.js

@@ -9,7 +9,7 @@ export default function TaskPreview(props) {
 	return (
 		<data className={jotting.jotting} value={"T" + props.id}>
 			<button className={jotting.previewButton} onClick={() => Jotting.openJotting(router, "task", props)}>
-				<span className={`${jotting.previewTitle} ${props.completed == "1" && jotting.completed}`}>{props.title}</span>
+				<span className={`${jotting.previewTitle} ${props.completed == "1" ? jotting.completed : ''}`}>{props.title}</span>
 				{props.priority == 1 ? <PinImage className={jotting.previewPin} /> : ""}
 			</button>
 		</data>

components/JottingList/jottingList.module.css

@@ -9,7 +9,7 @@
 }
 
 ul.jottingList > li {
-    flex-basis: 50%;
+    width: 100%;
 }
 
 ul.jottingList > li:hover {
@@ -22,4 +22,8 @@ ul.jottingList > li:hover {
         flex-wrap: wrap;
         flex-direction: row;
     }
+
+    ul.jottingList > li {
+        flex: 1 1 200px;
+    }
 }

components/JottingsControls/jottingsControl.js

@@ -2,7 +2,6 @@ import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 import { compareArrays } from "../../libs/arrayExtensions";
 import { getJottings, getLabels, getSharedJottings } from "../../libs/Datastore/requests";
-import { useWindowSize } from "../../libs/view";
 import LabelControl from "./labelControl";
 import LabelsControl from "./labelsControl";
 import NoteControl from "./noteControl";

components/JottingsControls/jottingsControl.module.css

@@ -27,7 +27,7 @@
 	}
 
 	.ownTaskList {
-		grid-column: 5 / 9;
+		grid-column: 5 / 8;
 	}
 
 	.ownNoteList,
@@ -47,7 +47,7 @@
 		grid-column-end: -1;
 		justify-self: flex-start;
 		overflow: auto;
-		grid-template-columns: subgrid;
+		grid-template-columns: 255px repeat(6, 175px);
 	}
 
 	.taskControl {

components/JottingsControls/notesControl.js

@@ -2,6 +2,7 @@ import ProgressSpinner from "../ProgressSpinner/progressSpinner";
 import CreateNoteButton from "../CreateJottingButton/createNoteButton";
 import NoteList from "../JottingList/noteList";
 import jottingsControl from "./jottingsControl.module.css";
+import CreateJottingButton from "../CreateJottingButton/createJottingButton";
 
 /**
  * Control for Notes heading,
@@ -19,7 +20,7 @@ export default function NotesControl({notesState, active}) {
 		<article className={`${active ? "active" : ""} ${jottingsControl.ownNoteList}`}>
 			<h1>Notes</h1>
 			{notes ? <NoteList notes={notes} /> : <ProgressSpinner />}
-			<CreateNoteButton setJots={setNotes} />
+			<CreateJottingButton jotType="Note" setJots={setNotes} />
 		</article>
 	);
 }

components/LabelPreview/labelPreview.module.css

@@ -7,6 +7,7 @@ button.previewButton {
     font-size: 1rem;
     font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
     text-align: left;
+    width: 100%;
 }
 
 button.previewButton:hover {

components/Layout/layout.js

@@ -13,23 +13,14 @@ export default function Layout(props) {
       {props.children}
 
       <footer className={layout.footer}>
-        <a
-          className={layout.vercelText}
-          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Powered by{" "}
-          <img src="/vercel.svg" alt="Vercel Logo" className={layout.logo} />
-        </a>
-        <p>&copy; 2022 Borum Tech</p>
         <div className={layout.platformList}>
           <PlatformButton
             downloadLink="https://play.google.com/store/apps/details?id=com.boruminc.borumjot.android"
             imgSrc="/images/platforms/android-icon.png"
             label="Get for free on the Google Play Store"
           />
         </div>
+        <p>&copy; 2020-{new Date().getFullYear()} Borum Tech</p>
         <ul className={layout.legalLinks}>
           <li className={layout.privacyPolicy}>
             <Link href="/legal/PrivacyPolicy">

components/pinImage.js

@@ -1,8 +1,7 @@
-import Image from "next/image";
 
 export default function PinImage(props) {
 	return (
-		<Image
+		<img
             className={props.className ?? ""}
 			height={25}
 			width={25}