keannu125/React-NotesApp
1
0
Fork 0
mirror of https://github.com/lemeow125/React-NotesApp.git synced 2024-11-17 06:29:28 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fixed broken vh sizes for some components

Browse source
This commit is contained in:
keannu125 2023-02-27 13:01:19 +08:00
parent 1131b2d448
commit 4584a8d2ce
4 changed files with 13 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/Components/AppIcon/AppIcon.tsx
View file

@ -1,7 +1,7 @@
import * as React from "react"; import * as React from "react";
export interface props { export interface props {
size: string; size: number;
color: string; color: string;
} }
@ -10,8 +10,8 @@ export default function AppIcon(props: props) {
<> <>
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
width={props.size} width={props.size + "px"}
height={props.size} height={props.size + "px"}
viewBox="0 0 24 24" viewBox="0 0 24 24"
stroke-width="2" stroke-width="2"
stroke={props.color} stroke={props.color}

2
src/Components/Header/Header.tsx
View file

@ -26,7 +26,7 @@ export default function Header() {
...{ flex: 6 }, ...{ flex: 6 },
}} }}
> >
<AppIcon size="8vh" color="white" /> <AppIcon size={48} color="white" />
<p style={styles.text_medium}>Clip Notes</p> <p style={styles.text_medium}>Clip Notes</p>
</div> </div>
<div <div

8
src/Components/HomeIcon/HomeIcon.tsx
View file

@ -15,8 +15,8 @@ export default function HomeIcon(props: props) {
style={{ style={{
backgroundColor: "#005997", backgroundColor: "#005997",
borderRadius: 16, borderRadius: 16,
width: props.size || 32, width: props.size + "px",
height: props.size || 32, height: props.size + "px",
margin: 4, margin: 4,
alignContent: "center", alignContent: "center",
alignItems: "center", alignItems: "center",
@ -25,8 +25,8 @@ export default function HomeIcon(props: props) {
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
width={props.size - 4} width={props.size - 4 + "px"}
height={props.size - 4} height={props.size - 4 + "px"}
viewBox="0 0 24 24" viewBox="0 0 24 24"
stroke-width="2" stroke-width="2"
stroke={props.color} stroke={props.color}

9
src/styles.tsx
View file

@ -13,7 +13,7 @@ const styles: { [key: string]: React.CSSProperties } = {
position: "sticky", position: "sticky",
backgroundColor: "#0087e4", backgroundColor: "#0087e4",
margin: "2vh", margin: "2vh",
height: "8vh", height: "32px",
padding: 8, padding: 8,
borderRadius: 4, borderRadius: 4,
}, },
@ -65,7 +65,7 @@ const styles: { [key: string]: React.CSSProperties } = {
borderColor: "#00293e", borderColor: "#00293e",
outline: "none", outline: "none",
color: "white", color: "white",
height: "3vh", height: "16px",
fontSize: "2vh", fontSize: "2vh",
fontWeight: "bold", fontWeight: "bold",
}, },
@ -79,7 +79,8 @@ const styles: { [key: string]: React.CSSProperties } = {
color: "white", color: "white",
height: "100%", height: "100%",
width: "100%", width: "100%",
maxHeight: "100vh", minWidth: "100%",
maxHeight: "200px",
fontSize: "2vh", fontSize: "2vh",
fontWeight: "bold", fontWeight: "bold",
}, },
@ -97,7 +98,7 @@ const styles: { [key: string]: React.CSSProperties } = {
alignSelf: "center", alignSelf: "center",
display: "flex", display: "flex",
flexDirection: "row", flexDirection: "row",
width: "256x", width: "256px",
marginTop: 4, marginTop: 4,
marginBottom: 4, marginBottom: 4,
}, },