From 4584a8d2ce59eda266a2273d0be10c38c6e8dd78 Mon Sep 17 00:00:00 2001
From: keannu125 <noehbernasol0@gmail.com>
Date: Mon, 27 Feb 2023 13:01:19 +0800
Subject: [PATCH] Fixed broken vh sizes for some components

---
 src/Components/AppIcon/AppIcon.tsx   | 6 +++---
 src/Components/Header/Header.tsx     | 2 +-
 src/Components/HomeIcon/HomeIcon.tsx | 8 ++++----
 src/styles.tsx                       | 9 +++++----
 4 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/src/Components/AppIcon/AppIcon.tsx b/src/Components/AppIcon/AppIcon.tsx
index aef58b9..56d5c80 100644
--- a/src/Components/AppIcon/AppIcon.tsx
+++ b/src/Components/AppIcon/AppIcon.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 
 export interface props {
-  size: string;
+  size: number;
   color: string;
 }
 
@@ -10,8 +10,8 @@ export default function AppIcon(props: props) {
     <>
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        width={props.size}
-        height={props.size}
+        width={props.size + "px"}
+        height={props.size + "px"}
         viewBox="0 0 24 24"
         stroke-width="2"
         stroke={props.color}
diff --git a/src/Components/Header/Header.tsx b/src/Components/Header/Header.tsx
index 2fc6bae..687ce92 100644
--- a/src/Components/Header/Header.tsx
+++ b/src/Components/Header/Header.tsx
@@ -26,7 +26,7 @@ export default function Header() {
             ...{ flex: 6 },
           }}
         >
-          <AppIcon size="8vh" color="white" />
+          <AppIcon size={48} color="white" />
           <p style={styles.text_medium}>Clip Notes</p>
         </div>
         <div
diff --git a/src/Components/HomeIcon/HomeIcon.tsx b/src/Components/HomeIcon/HomeIcon.tsx
index a547844..38e6d07 100644
--- a/src/Components/HomeIcon/HomeIcon.tsx
+++ b/src/Components/HomeIcon/HomeIcon.tsx
@@ -15,8 +15,8 @@ export default function HomeIcon(props: props) {
       style={{
         backgroundColor: "#005997",
         borderRadius: 16,
-        width: props.size || 32,
-        height: props.size || 32,
+        width: props.size + "px",
+        height: props.size + "px",
         margin: 4,
         alignContent: "center",
         alignItems: "center",
@@ -25,8 +25,8 @@ export default function HomeIcon(props: props) {
     >
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        width={props.size - 4}
-        height={props.size - 4}
+        width={props.size - 4 + "px"}
+        height={props.size - 4 + "px"}
         viewBox="0 0 24 24"
         stroke-width="2"
         stroke={props.color}
diff --git a/src/styles.tsx b/src/styles.tsx
index 05d35df..19fac7a 100644
--- a/src/styles.tsx
+++ b/src/styles.tsx
@@ -13,7 +13,7 @@ const styles: { [key: string]: React.CSSProperties } = {
     position: "sticky",
     backgroundColor: "#0087e4",
     margin: "2vh",
-    height: "8vh",
+    height: "32px",
     padding: 8,
     borderRadius: 4,
   },
@@ -65,7 +65,7 @@ const styles: { [key: string]: React.CSSProperties } = {
     borderColor: "#00293e",
     outline: "none",
     color: "white",
-    height: "3vh",
+    height: "16px",
     fontSize: "2vh",
     fontWeight: "bold",
   },
@@ -79,7 +79,8 @@ const styles: { [key: string]: React.CSSProperties } = {
     color: "white",
     height: "100%",
     width: "100%",
-    maxHeight: "100vh",
+    minWidth: "100%",
+    maxHeight: "200px",
     fontSize: "2vh",
     fontWeight: "bold",
   },
@@ -97,7 +98,7 @@ const styles: { [key: string]: React.CSSProperties } = {
     alignSelf: "center",
     display: "flex",
     flexDirection: "row",
-    width: "256x",
+    width: "256px",
     marginTop: 4,
     marginBottom: 4,
   },