Small changes to CSS. README.md with screenshots

client/src/components/Apps/AppCard/AppCard.module.css

@@ -1,25 +1,18 @@
 .AppCard {
   width: 100%;
-  /* height: 50px; */
-  /* max-width: 150px; */
-  /* border: 1px solid red; */
   display: flex;
   align-items: center;
   margin-bottom: 20px;
 }
 
 .AppCardIcon {
-  /* height: 64px; */
-  width: 40px;
-  height: 40px;
+  width: 35px;
+  height: 35px;
   margin-right: 0.5em;
 }
 
 .AppCardDetails {
   text-transform: uppercase;
-  /* display: flex;
-  flex-direction: column;
-  justify-content: center; */
 }
 
 .AppCardDetails h5 {

client/src/components/Bookmarks/BookmarkCard/BookmarkCard.module.css

@@ -1,5 +1,4 @@
 .BookmarkCard {
-  /* margin-top: 10px; */
   margin-bottom: 30px;
 }
 
@@ -21,8 +20,7 @@
   transition: all 0.25s;
 }
 
-.BookmarkCard a:hover,
-.BookmarkCard a:focus {
+.BookmarkCard a:hover {
   text-decoration: underline;
   padding-left: 10px;
 }

client/src/components/Home/Home.module.css

@@ -53,4 +53,8 @@
   .SettingsLink {
     visibility: hidden;
   }
+}
+
+.HomeSpace {
+  height: 20px;
 }

client/src/components/Home/Home.tsx

@@ -51,17 +51,7 @@ const Home = (props: ComponentProps): JSX.Element => {
 
     const now = new Date();
 
-    const ordinal = (day: number): string => {
-      if (day > 3 && day < 21) return 'th';
-      switch (day % 10) {
-        case 1:  return "st";
-        case 2:  return "nd";
-        case 3:  return "rd";
-        default: return "th";
-      }
-    }
-
-    return `${days[now.getDay()]}, ${now.getDate()}${ordinal(now.getDate())} ${months[now.getMonth()]} ${now.getFullYear()}`;
+    return `${days[now.getDay()]}, ${now.getDate()} ${months[now.getMonth()]} ${now.getFullYear()}`;
   }
 
   const greeter = (): string => {
@@ -94,6 +84,8 @@ const Home = (props: ComponentProps): JSX.Element => {
         : <AppGrid apps={props.apps.filter((app: App) => app.isPinned)} />
       }
 
+      <div className={classes.HomeSpace}></div>
+
       <SectionHeadline title='Bookmarks' link='/bookmarks' />
       {props.categoriesLoading
         ? <Spinner />

client/src/components/Settings/WeatherSettings/WeatherSettings.tsx

@@ -89,7 +89,7 @@ const WeatherSettings = (props: ComponentProps): JSX.Element => {
       .catch(err => console.log(err));
     
     // set localStorage
-    localStorage.setItem('isCelsius', JSON.stringify(formData.isCelsius === 1))
+    localStorage.setItem('isCelsius', JSON.stringify(parseInt(`${formData.isCelsius}`) === 1))
   }
 
   return (

client/src/components/UI/Forms/ModalForm/ModalForm.module.css

@@ -2,9 +2,8 @@
   background-color: var(--color-background);
   color: var(--color-primary);
   border-radius: 6px;
-  width: 60%;
+  width: 95%;
   position: relative;
-  /* height: 50vh; */
   padding: 50px 50px;
 }
 
@@ -17,4 +16,28 @@
 
 .ModalFormIcon:hover {
   cursor: pointer;
+}
+
+@media (min-width: 430px) {
+  .ModalForm {
+    width: 90%;
+  }
+}
+
+@media (min-width: 800px) {
+  .ModalForm {
+    width: 70%;
+  }
+}
+
+@media (min-width: 1000px) {
+  .ModalForm {
+    width: 60%;
+  }
+}
+
+@media (min-width: 1400px) {
+  .ModalForm {
+    width: 40%;
+  }
 }

client/src/components/UI/Modal/Modal.module.css

@@ -1,7 +1,7 @@
 .Modal {
   width: 100%;
   height: 100%;
-  position: absolute;
+  position: fixed;
   top: 0;
   left: 0;
   z-index: 100;

client/src/index.css

@@ -2,7 +2,6 @@
   margin: 0;
   padding: 0;
   box-sizing: border-box;
-  /* user-select: none; */
 }
 
 body {