React-NotesApp/src/styles.tsx

const styles: { [key: string]: React.CSSProperties } = {
  background: {
    display: "flex",
    flexDirection: "column",
    height: "100vh",
    backgroundColor: "#002d4c",
  },
  header: {
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    position: "sticky",
    backgroundColor: "#0087e4",
    margin: "2vh",
    padding: 8,
    borderRadius: 4,
  },
  note: {
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "#001018",
    margin: "2vh",
    width: "50%",
    alignSelf: "center",
    padding: 8,
    borderRadius: 32,
  },
  note_content: {
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "#00293e",
    width: "90%",
    margin: "2vh",
    padding: 8,
    paddingBottom: 64,
    paddingTop: 64,
    borderRadius: 4,
  },
  button_add: {
    backgroundColor: "#0dbc6a",
    alignSelf: "center",
    display: "flex",
    flexDirection: "row",
    width: "128px",
  },
  button_remove: {
    backgroundColor: "#bc231e",
    alignSelf: "center",
    display: "flex",
    flexDirection: "row",
    width: "128px",
  },
  text_small: {
    color: "white",
    fontSize: "2vh",
    fontWeight: "bold",
    textAlign: "center",
  },
  text_medium: {
    color: "white",
    fontSize: "4vh",
    fontWeight: "bold",
    textAlign: "center",
  },
  flex_column: {
    display: "flex",
    flexDirection: "column",
  },
  flex_row: {
    justifyContent: "center",
    display: "flex",
    flexDirection: "row",
  },
};

export default styles;