Clear changed settings on save, styling improvements on Homepage and blog page

src/index.css

@@ -29,6 +29,11 @@ h1 {
   margin: 0px;
 }
 
+h2 {
+  padding: 0px;
+  margin: 0px;
+}
+
 h4 {
   padding: 0px;
   margin: 0px;
@@ -173,13 +178,36 @@ a {
   flex-grow: 1;
 }
 
+.blogBox h1 {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.blogBox h2 {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.blogBox h3 {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 .blogEntryGrid {
+  justify-content: center;
+  align-items: center;
+  max-width: 100%;
+  min-height: 100%;
   display: grid;
   gap: 20px;
   padding: 10px;
-  grid-auto-flow: column;
+  grid-auto-flow: row;
   grid-auto-rows: var(--blog-card-height);
   grid-auto-columns: var(--blog-card-width);
+  grid-template-columns: repeat(auto-fill, var(--blog-card-width));
 }
 
 .blogEntryCard {
@@ -239,6 +267,7 @@ a {
   padding: 0px;
   margin: 0px;
   background: var(--background-image);
+  overflow-y: scroll;
 }
 
 .centeredBoxArea {

src/pages/Blog.tsx

@@ -36,9 +36,8 @@ export default function Home() {
 
   return (
     <>
-      <div className="standardHorizontalTilingGrid">
+      <div className="standardHorizontalTilingGrid blogBox">
         <TilingItem>
-          <h1>Now on blog page!</h1>
           <div
             dangerouslySetInnerHTML={{
               __html: DOMPurify.sanitize(blogContents),

src/pages/Home.tsx

@@ -7,7 +7,7 @@ export default function Home() {
 
   React.useEffect(() => {
     fetch(
-      "http://127.0.0.1:8000/api/user/blog/cardInfo/range?rangeStart=1&rangeEnd=25&sortByLatest=true",
+      "http://127.0.0.1:8000/api/user/blog/cardInfo/range?rangeStart=1&rangeEnd=50&sortByLatest=true",
       {
         method: "GET",
         headers: {

src/pages/Settings.tsx

@@ -13,7 +13,11 @@ interface Props {
 function renderCurrentSetting(setting: string, changedSettingsHook: object) {
   switch (setting) {
     case "Account":
-      return <AccountSetting changedSettingsHook={changedSettingsHook}></AccountSetting>;
+      return (
+        <AccountSetting
+          changedSettingsHook={changedSettingsHook}
+        ></AccountSetting>
+      );
     case "Security":
       return <SecuritySetting></SecuritySetting>;
     default:
@@ -35,7 +39,6 @@ export default function Home({ authTokenStorageHandler }: Props) {
     setChangedSettings,
   };
 
-
   if (!authTokenStorageHandler.authTokenValue) {
     return <Navigate to="/home"></Navigate>;
   }
@@ -43,7 +46,6 @@ export default function Home({ authTokenStorageHandler }: Props) {
   function onSettingsSave(formEvent) {
     formEvent.preventDefault();
 
-
     for (let [key, value] of Object.entries(changedSettings)) {
       fetch("http://127.0.0.1:8000/api/user/settings/change/" + key, {
         method: "PUT",
@@ -51,15 +53,16 @@ export default function Home({ authTokenStorageHandler }: Props) {
           "Content-Type": "application/json",
         },
         body: JSON.stringify({
-          	"authToken": authTokenStorageHandler.authTokenValue,
-		"newValue": value,
+          authToken: authTokenStorageHandler.authTokenValue,
+          newValue: value,
         }),
       })
         .then((response) => response.json())
         .then((responseParsed: Object) => {
           console.log(responseParsed);
+          setChangedSettings({});
         });
-      };
+    }
   }
 
   return (
@@ -84,7 +87,9 @@ export default function Home({ authTokenStorageHandler }: Props) {
               <div className="currentSetting">
                 {renderCurrentSetting(currentSetting, changedSettingsHook)}
               </div>
-	         {Object.keys(changedSettings).length > 0 ? ( <button type="submit">Save</button> ) : null }
+              {Object.keys(changedSettings).length > 0 ? (
+                <button type="submit">Save</button>
+              ) : null}
               <p>{JSON.stringify(changedSettings)}</p>
               <p>{Object.keys(changedSettings).length}</p>
             </form>